Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit eef9ef3

Browse files
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
2.62 MB
Loading[フレーム]
2.04 MB
Loading[フレーム]
4.08 MB
Loading[フレーム]
2.2 MB
Loading[フレーム]
2.65 MB
Loading[フレーム]
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)

AltStyle によって変換されたページ (->オリジナル) /