Skip to content

Commit eef9ef3

Browse files
HuXn-WebDevHuXn-WebDev
committed
Construction Landing Page (HTML & CSS)
1 parent 312ba86 commit eef9ef3

File tree

7 files changed

+534
-0
lines changed

7 files changed

+534
-0
lines changed

‎90. Construction Landing Page/Images/Zayn.jpg‎

2.62 MB
Loading

‎90. Construction Landing Page/Images/one.jpg‎

2.04 MB
Loading

‎90. Construction Landing Page/Images/scott-blake-x-ghf9LjrVg-unsplash.jpg‎

4.08 MB
Loading

‎90. Construction Landing Page/Images/three.jpg‎

2.2 MB
Loading

‎90. Construction Landing Page/Images/two.jpg‎

2.65 MB
Loading

‎90. Construction Landing Page/index.html‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Dream Home</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<!-- NAVIGATION -->
12+
<nav class="nav">
13+
<div class="nav__logo">
14+
<h1>D<span>H</span></h1>
15+
</div>
16+
<ul>
17+
<li class="list-items"><a href="#">Home</a></li>
18+
<li class="list-items"><a href="#services">Services</a></li>
19+
<li class="list-items"><a href="#why-us">Why Us?</a></li>
20+
<li class="list-items"><a href="#project-details">Project Details</a></li>
21+
</ul>
22+
</nav>
23+
<header class="hero">
24+
<section class="hero__headings-container">
25+
<h3>Build <span>Your</span></h3>
26+
<h1 class="hero__main-headings">
27+
DREAM <span class="main-span">HOME</span>
28+
</h1>
29+
<p>WE CONSTRUCT YOUR FUTURE</p>
30+
<a href="#" class="main-btn">Learn More</a>
31+
</section>
32+
</header>
33+
34+
<h1 class="main-headings center">
35+
OUR <span class="main-span">SERVICES</span>
36+
</h1>
37+
38+
<!-- SERVICES -->
39+
<section class="services" id="services">
40+
<!-- CARDS -->
41+
<section class="cards">
42+
<div class="card">
43+
<div class="card-image img-one"></div>
44+
<p>Construction</p>
45+
</div>
46+
<div class="card">
47+
<div class="card-image img-two"></div>
48+
<p>ARCHITECTURE PLANING</p>
49+
</div>
50+
<div class="card">
51+
<div class="card-image img-three"></div>
52+
<p>CONSULTANCY</p>
53+
</div>
54+
</section>
55+
</section>
56+
57+
<h1 class="main-headings">WHY CHOOSE<span class="main-span"> US?</span></h1>
58+
59+
<!-- WHY US -->
60+
<section class="why-us" id="why-us">
61+
<div class="lists-container">
62+
<div class="list">
63+
<div class="list-number">
64+
<p>1</p>
65+
</div>
66+
<p class="list-info">HIGH QUALIFIED & TECHNICAL PROFESSIONALS</p>
67+
</div>
68+
<div class="list">
69+
<div class="list-number">
70+
<p>2</p>
71+
</div>
72+
<p class="list-info">ADVANCE PLANING</p>
73+
</div>
74+
<div class="list">
75+
<div class="list-number">
76+
<p>3</p>
77+
</div>
78+
<p class="list-info">STABILITY RESOURCES & EXPERTIES</p>
79+
</div>
80+
<div class="list">
81+
<div class="list-number">
82+
<p>4</p>
83+
</div>
84+
<p class="list-info">PASSION, INTEGRITY, & PUNCTUALITY</p>
85+
</div>
86+
<div class="list">
87+
<div class="list-number">
88+
<p>5</p>
89+
</div>
90+
<p class="list-info">BREADTH OF SERVICES</p>
91+
</div>
92+
</div>
93+
<div class="owner-image-container">
94+
<div class="owner-image"></div>
95+
</div>
96+
</section>
97+
98+
<h1 class="main-headings center">
99+
PROJECT <span class="main-span">#DETAILS</span>
100+
</h1>
101+
102+
<!-- PROJECT DETAILS -->
103+
<section class="project-details" id="project-details">
104+
<section class="project-details__container-left">
105+
<div class="img-container">
106+
<div class="card-image project-details-img img-one"></div>
107+
</div>
108+
<section class="details">
109+
<p class="title">ARCHITECTURE DESIGN</p>
110+
<div class="list">
111+
<div class="list-number">
112+
<p>1</p>
113+
</div>
114+
<p class="list-info">2D & 3D MODELING</p>
115+
</div>
116+
<div class="list">
117+
<div class="list-number">
118+
<p>2</p>
119+
</div>
120+
<p class="list-info">INTERIAL & EXTERIOR DESIGN</p>
121+
</div>
122+
<div class="list">
123+
<div class="list-number">
124+
<p>3</p>
125+
</div>
126+
<p class="list-info">LANDSCAPING & OUTDOOR GARDENING</p>
127+
</div>
128+
<div class="list">
129+
<div class="list-number">
130+
<p>4</p>
131+
</div>
132+
<p class="list-info">
133+
ELECTRICAL, PLUMBING & SEWERAGE DRAWING PLANE.
134+
</p>
135+
</div>
136+
<div class="list">
137+
<div class="list-number">
138+
<p>5</p>
139+
</div>
140+
<p class="list-info">SOIL INVESTIGATION</p>
141+
</div>
142+
</section>
143+
</section>
144+
145+
<section class="project-details__container-right">
146+
<section class="details">
147+
<p class="title">CONSTRUCTION</p>
148+
149+
<div class="list">
150+
<div class="list-number">
151+
<p>1</p>
152+
</div>
153+
<p class="list-info">RESIDENTIAL & COMMERCIAL PROJECTS</p>
154+
</div>
155+
<div class="list">
156+
<div class="list-number">
157+
<p>2</p>
158+
</div>
159+
<p class="list-info">TURNKEY PROJECT (WITH MATERIAL)</p>
160+
</div>
161+
<div class="list">
162+
<div class="list-number">
163+
<p>3</p>
164+
</div>
165+
<p class="list-info">LANDSCAPING & OUTDOOR GARDENING</p>
166+
</div>
167+
<div class="list">
168+
<div class="list-number">
169+
<p>4</p>
170+
</div>
171+
<p class="list-info">DEMOLATION</p>
172+
</div>
173+
<div class="list">
174+
<div class="list-number">
175+
<p>5</p>
176+
</div>
177+
<p class="list-info">RENOVATION & RE-CONSTRUCTION</p>
178+
</div>
179+
</section>
180+
<div class="img-container">
181+
<div class="card-image project-details-img img-two"></div>
182+
</div>
183+
</section>
184+
185+
186+
<section class="project-details__container-left">
187+
<div class="img-container">
188+
<div class="card-image project-details-img img-three"></div>
189+
</div>
190+
<section class="details">
191+
<p class="title">REAL ESTATE</p>
192+
<div class="list">
193+
<div class="list-number">
194+
<p>1</p>
195+
</div>
196+
<p class="list-info">
197+
B - 17 MULTI GARDEN</p>
198+
</div>
199+
<div class="list">
200+
<div class="list-number">
201+
<p>2</p>
202+
</div>
203+
<p class="list-info">PARK VIEW CITY</p>
204+
</div>
205+
<div class="list">
206+
<div class="list-number">
207+
<p>3</p>
208+
</div>
209+
<p class="list-info">BEAUTY OF HILLS</p>
210+
</div>
211+
<div class="list">
212+
<div class="list-number">
213+
<p>4</p>
214+
</div>
215+
<p class="list-info">
216+
FAISAL MARGALLAH CITY.
217+
</p>
218+
</div>
219+
<div class="list">
220+
<div class="list-number">
221+
<p>5</p>
222+
</div>
223+
<p class="list-info">BLUE WORLD CITY</p>
224+
</div>
225+
</section>
226+
</section>
227+
228+
<form>
229+
<input type="text" placeholder="John Doe">
230+
<input type="email" placeholder="Email">
231+
<input type="password" placeholder="Password">
232+
<a href="#" class="form-btn">Submit</a>
233+
</form>
234+
235+
<footer>
236+
<a href="#">About</a>
237+
<a href="#">Terms of Use</a>
238+
<a href="#">Privacy Policy</a>
239+
<a href="#">Careers</a>
240+
<a href="#">Contact Us</a>
241+
</footer>
242+
</body>
243+
</html>

0 commit comments

Comments
 (0)