Skip to content

Commit eef9ef3

Browse files
HuXn-WebDevHuXn-WebDev
committedJan 3, 2023
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

+243
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>

‎90. Construction Landing Page/style.css

+291
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,291 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
/* GLOBAL STYLES */
8+
:root {
9+
--primary-color: #87bc29;
10+
--primary-font: Algerian;
11+
--bg-image-center: no-repeat center/cover;
12+
}
13+
14+
.center {
15+
text-align: center;
16+
}
17+
18+
/* ***** NAVIGATION ***** */
19+
.nav {
20+
display: flex;
21+
justify-content: space-around;
22+
align-items: center;
23+
flex-wrap: wrap;
24+
text-align: center;
25+
background-color: rgba(0, 0, 0, 0.5);
26+
position: fixed;
27+
width: 100%;
28+
padding: 20px;
29+
z-index: 999;
30+
}
31+
32+
.list-items {
33+
display: inline;
34+
}
35+
36+
.list-items a {
37+
padding: 20px;
38+
text-decoration: none;
39+
font-family: sans-serif;
40+
color: #fff;
41+
}
42+
43+
.list-items a:hover {
44+
border-bottom: 2px solid #fff;
45+
}
46+
47+
.nav__logo h1 {
48+
color: #fff;
49+
font-size: 2rem;
50+
text-align: center;
51+
}
52+
53+
span {
54+
color: var(--primary-color);
55+
}
56+
57+
/* ***** HEADER ***** */
58+
.hero {
59+
background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.616)),
60+
url("Images/scott-blake-x-ghf9LjrVg-unsplash.jpg") var(--bg-image-center)
61+
fixed;
62+
}
63+
64+
.hero__headings-container {
65+
height: 100vh;
66+
display: flex;
67+
flex-direction: column;
68+
justify-content: center;
69+
align-items: flex-start;
70+
font-family: sans-serif;
71+
margin-left: 10rem;
72+
color: #fff;
73+
}
74+
75+
.hero__main-headings {
76+
font-size: 5rem;
77+
color: white;
78+
}
79+
80+
.main-span {
81+
font-family: var(--primary-font);
82+
}
83+
84+
.hero__headings-container p {
85+
font-weight: bold;
86+
}
87+
88+
.main-btn {
89+
text-decoration: none;
90+
margin-top: 20px;
91+
color: #fff;
92+
border-bottom: 2px solid var(--primary-color);
93+
padding-bottom: 5px;
94+
font-weight: bold;
95+
}
96+
97+
/* ****** SERVICES *******/
98+
.main-headings {
99+
font-family: sans-serif;
100+
font-size: 3rem;
101+
font-weight: normal;
102+
margin: 50px;
103+
transition-property: all;
104+
transition-duration: 0.5s;
105+
}
106+
107+
.main-headings:hover {
108+
transform: skew(30deg);
109+
}
110+
111+
/* CARDS */
112+
.cards {
113+
display: flex;
114+
justify-content: center;
115+
align-items: center;
116+
flex-wrap: wrap;
117+
}
118+
119+
.card {
120+
padding: 20px;
121+
margin: 20px;
122+
transition-property: all;
123+
transition-duration: 1s;
124+
border: 1px solid #ccc;
125+
}
126+
127+
.card:hover {
128+
box-shadow: 2px 2px 2px 2px #ccc;
129+
transform: scale(1.1);
130+
cursor: pointer;
131+
}
132+
133+
.card-image {
134+
width: 300px;
135+
height: 250px;
136+
}
137+
138+
.card p {
139+
color: rgb(39, 39, 39);
140+
font-family: sans-serif;
141+
padding: 10px;
142+
}
143+
144+
.img-one {
145+
background: url("Images/one.jpg") var(--bg-image-center);
146+
}
147+
.img-two {
148+
background: url("Images/two.jpg") var(--bg-image-center);
149+
}
150+
.img-three {
151+
background: url("Images/three.jpg") var(--bg-image-center);
152+
}
153+
154+
/* ******* WHY US ******* */
155+
.why-us {
156+
display: flex;
157+
justify-content: space-between;
158+
flex-wrap: wrap;
159+
}
160+
161+
.lists-container {
162+
margin-left: 30px;
163+
font-family: sans-serif;
164+
}
165+
166+
.list {
167+
display: flex;
168+
align-items: center;
169+
text-align: center;
170+
}
171+
172+
.list-number {
173+
width: 30px;
174+
height: 30px;
175+
border: 2px solid var(--primary-color);
176+
border-radius: 50%;
177+
display: flex;
178+
flex-direction: column;
179+
justify-content: center;
180+
align-items: center;
181+
margin: 10px 20px;
182+
}
183+
184+
.list-number p {
185+
color: var(--primary-color);
186+
text-align: center;
187+
}
188+
189+
.list-info {
190+
color: rgb(122, 122, 122);
191+
transition-property: all;
192+
transition-duration: 0.7s;
193+
}
194+
195+
.list-info:hover {
196+
transform: scale(1.1);
197+
font-weight: bold;
198+
}
199+
200+
.owner-image {
201+
background: url(Images/Zayn.jpg) no-repeat top/cover;
202+
width: 300px;
203+
height: 300px;
204+
margin-right: 10rem;
205+
border-radius: 50%;
206+
border: 10px solid var(--primary-color);
207+
transition-property: all;
208+
transition-duration: 1s;
209+
}
210+
211+
.owner-image:hover {
212+
transform: scale(1.2);
213+
}
214+
215+
/* ******* PROJECT DETAILS ******* */
216+
.project-details__container-left {
217+
display: flex;
218+
justify-content: space-around;
219+
align-items: center;
220+
flex-wrap: wrap;
221+
margin-top: 10rem;
222+
font-family: sans-serif;
223+
}
224+
225+
.project-details__container-right {
226+
display: flex;
227+
justify-content: space-around;
228+
align-items: center;
229+
flex-wrap: wrap;
230+
margin-top: 10rem;
231+
font-family: sans-serif;
232+
}
233+
234+
.project-details-img {
235+
box-shadow: 10px 10px 5px var(--primary-color);
236+
transition-property: all;
237+
transition-duration: 1s;
238+
}
239+
240+
.project-details-img:hover {
241+
transform: scale(1.1);
242+
box-shadow: 20px 20px 10px var(--primary-color);
243+
transform: skew(10deg);
244+
}
245+
246+
.title {
247+
margin-left: 40px;
248+
}
249+
250+
/* ********* FORM ********* */
251+
form {
252+
display: flex;
253+
flex-direction: column;
254+
justify-content: center;
255+
align-items: flex-start;
256+
margin: 10rem 10rem;
257+
}
258+
259+
input {
260+
border: none;
261+
border-bottom: 1px solid #ccc;
262+
margin-bottom: 20px;
263+
outline: none;
264+
width: 50%;
265+
}
266+
267+
input:focus {
268+
border-bottom: 2px solid var(--primary-color);
269+
}
270+
271+
.form-btn {
272+
text-decoration: none;
273+
color: var(--primary-color);
274+
border-bottom: 3px solid var(--primary-color);
275+
}
276+
277+
/* ********* FOOTER ********* */
278+
footer {
279+
height: 30vh;
280+
background-color: #000000be;
281+
display: flex;
282+
justify-content: center;
283+
align-items: center;
284+
}
285+
286+
footer > a {
287+
color: #fff;
288+
text-decoration: none;
289+
margin: 20px;
290+
font-family: "IBM Plex Sans Condensed", sans-serif;
291+
}

0 commit comments

Comments
 (0)
Please sign in to comment.