-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
182 lines (142 loc) · 7.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html>
<head>
<title>B & Sons Contruction Inc</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<!-- TOP NAVIGATION BAR (sits on top of the website) -->
<div class="w3-top">
<div class="w3-bar w3-black w3-wide w3-padding w3-card">
<a href="#home" class="w3-bar-item w3-button"><b>B & Sons</b> Construction Inc.</a>
<!-- FLOAT THE MENU LINKS TO THE RIGHT. They will be HIDEN in small screens -->
<div class="w3-right w3-hide-small">
<a href="#company" class="w3-bar-item w3-button">Our Company</a>
<a href="#projects" class="w3-bar-item w3-button">Projects</a>
<a href="#about" class="w3-bar-item w3-button">About</a>
<a href="#contact" class="w3-bar-item w3-button">Contact</a>
</div>
</div>
</div>
<!-- TOP BIG IMAGE AND CENTERED TITLE -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
<img src="./images/header.png" class="w3-image" style="width:100%" alt="Construction" >
<div class="w3-display-middle w3-margin-top w3-center">
<h1 class="w3-xxlarge w3-text-black"><span class="w3-padding w3-white w3-opacity-min"><b>B & Sons</b></span> <span class="w3-hide-small w3-text-black">Constuction Inc.</span></h1>
</div>
</header>
<!-- MAIN PAGE CONTENT STARTS HERE -->
<div class="w3-content w3-padding" style="max-width:1564px">
<!-- OUR COMPANY, this loosely fallows the Objective section -->
<div class="w3-container w3-padding-32" id="company">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Our Company</h3>
<p>B & Sons Inc. is a family-Owned company dedicated to serving in the structural installment of reinforced concreate. We take pride in the product we deliver
always complying with the lattest building regulations and architectural code. We stribe to be the best in the construction industry and create a sence of family
and comradery with in th ecompany. Efficiency and Quality is our Moto.
</p>
</div>
<!-- PROJECT SECTION, is a single ROW with 4 Projects Title and images -->
<div class="w3-container w3-padding-32" id="projects">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Projects</h3>
</div>
<!--First Row of the Table of 4 images -->
<div class="w3-row-padding">
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Planing</div>
<img src="./images/tb-image1.png" alt="Planing" style="width:100%">
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Framing</div>
<img src="./images/tb-image2.png" alt="Framing" style="width:100%">
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Pouring</div>
<img src="./images/tb-image3.png" alt="Pouring" style="width:99%">
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Hi-Work</div>
<img src="./images/tb-image4.png" alt="Hi-Work" style="width:99%">
</div>
</div>
</div>
<p>We have over 25 years of work experiance in our company. From comercial to residential construction. Projects include water treatment plans, Skyscrapers,
Post tensioning cabeling and rebar construction. Performed as special constractor by partners like; Atlantic Steel Cons Inc., Artifex Cons Co.,Woodland Cons Co., Florida Island G.C., and HARTKOPE Cons.
</p>
<br> <!--Making some space between these two sections -->
<br>
<br>
<br>
<!-- About B & Sons Company Section -->
<div class="w3-container w3-padding-32" id="about">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">About</h3>
<p>This Family owned buisness is fully ensured, homebased out of Fort Lauderdale Florida, with a excellent safety record.
We have performed in local projects like the Hilton Tower at Fort Lauderdale, Mi-Casa Apartments Tower at Miami and others.
Contact us for a full list of our porfolio and compleated jobs.
</p>
</div>
<div class="w3-row-padding w3-grayscale">
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="./images/toon3.png" alt="J J" style="width:100%">
<h3>Kerlin Jr. Benitez</h3>
<p class="w3-opacity">President</p>
<p>This information or paragraph has to be edited.</p>
<p><button class="w3-button w3-light-grey w3-block">[email protected]</button></p>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="./images/Beba.png" alt="Beba" style="width:100%">
<h3>Yadira Benitez</h3>
<p class="w3-opacity">Vice President</p>
<p>This information or paragraph has to be edited.</p>
<p><button class="w3-button w3-light-grey w3-block">[email protected]</button></p>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="./images/toon2.png" alt="Kerlin" style="width:100%">
<h3>Kerlin Benitez</h3>
<p class="w3-opacity">Project Management</p>
<p>This information or paragraph has to be edited.</p>
<p><button class="w3-button w3-light-grey w3-block">[email protected]</button></p>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="./images/coco2.png" alt="Coco" style="width:100%">
<h3>Ramon Benitez</h3>
<p class="w3-opacity">Supply Admin</p>
<p>This information or paragraph has to be edited.</p>
<p><button class="w3-button w3-light-grey w3-block"><a href="mailto:[email protected]">[email protected]</a></button></p>
</div>
</div>
<!-- EMAIL US SECTION, we need to finalize this section!!! so it send the info to our email -->
<div class="w3-container w3-padding-32" id="contact">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Contact</h3>
<p>Lets get in touch and talk about your next project.</p>
<form action="mailto:[email protected]" method="POST" enctype="text/plain" name="EmailForm">
<input class="w3-input w3-border" type="text" placeholder="Name" required name="Name">
<input class="w3-input w3-section w3-border" type="text" placeholder="Email" required name="Email">
<input class="w3-input w3-section w3-border" type="text" placeholder="Subject" required name="Subject">
<input class="w3-input w3-section w3-border" type="text" placeholder="Comment" required name="Comment">
<button class="w3-button w3-black w3-section" type="submit">
<i class="fa fa-paper-plane"></i> SEND MESSAGE
</button>
</form>
</div>
<!-- Image of location/map -->
<div class="w3-container">
<img src="./images/footer.png" class="w3-image" style="width:100%">
</div>
<!-- END OF MAIN PAGE CONTENT -->
</div>
<!-- FOOTER AND REFERENCE TO W3SCHOOLS STYLEES SHEET -->
<footer class="w3-center w3-black w3-padding-16">
<p>341 SW 18 Ave. Forth Lauradel, FL 33312 </p>
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-blue">w3.css</a></p>
</footer>
</body>
</html>