Skip to content

Commit 7606cf9

Browse files
programmingNot4uprogrammingNot4u
committed
main-section full completed , starting footer.
1 parent 339f1ab commit 7606cf9

2 files changed

Lines changed: 195 additions & 87 deletions

File tree

‎index.html‎

Lines changed: 136 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@
99
<link
1010
href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
1111
rel="stylesheet" />
12-
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
13-
12+
<link
13+
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
14+
rel="stylesheet" />
1415

1516
<link rel="stylesheet" href="styles/style.css" />
1617
</head>
@@ -26,121 +27,171 @@
2627

2728
<!-- Banner Section -->
2829
<div class="banner-container">
29-
<h1 class="banner-title">Cool Dark UI Template for Webflow Agencies!</h1>
30-
<a class="primary-btn" href="http://" >Stay Focused</a>
30+
<h1 class="banner-title">
31+
Cool Dark UI Template for Webflow Agencies!
32+
</h1>
33+
<a class="primary-btn" href="http://">Stay Focused</a>
3134
</div>
32-
3335
</header>
3436

3537
<main>
3638
<!-- Action Section -->
37-
<section>
38-
<div class="action-container">
39-
<div class="action-detials">
40-
<h2 class="section-title">See It in Action</h2>
41-
<p>Explore the live preview and imagine your brand in this bold new look.</p>
42-
<a class="primary-btn" href="http://">Launch Live Preview</a>
43-
</div>
44-
45-
<img class="wc-mini" src="Assets/wc-mini.png" alt="">
39+
<section>
40+
<div class="action-container">
41+
<div class="action-detials">
42+
<h2 class="section-title">See It in Action</h2>
43+
<p>
44+
Explore the live preview and imagine your brand in this bold new
45+
look.
46+
</p>
47+
<a class="primary-btn" href="http://">Launch Live Preview</a>
48+
</div>
4649

47-
</div>
48-
</section>
50+
<img class="wc-mini" src="Assets/wc-mini.png" alt="" />
51+
</div>
52+
</section>
4953

5054
<!-- production user -->
51-
<section>
55+
<section>
5256
<div class="production-statistics">
53-
<h2 class="section-title ">Joined Thousands of Productive Users</h2>
54-
<div class="statistics">
57+
<h2 class="section-title">Joined Thousands of Productive Users</h2>
58+
<div class="statistics">
5559
<div class="data">
56-
<p class="num-data">50k</p>
57-
<p class="data-type">Active Users</p>
60+
<p class="num-data">50k</p>
61+
<p class="data-type">Active Users</p>
5862
</div>
5963
<div class="data">
60-
<p class="num-data">2M+</p>
61-
<p class="data-type">Focus Sessions</p>
64+
<p class="num-data">2M+</p>
65+
<p class="data-type">Focus Sessions</p>
6266
</div>
6367
<div class="data">
64-
<p class="num-data">95%</p>
65-
<p class="data-type">Satisfaction Rate</p>
68+
<p class="num-data">95%</p>
69+
<p class="data-type">Satisfaction Rate</p>
6670
</div>
67-
71+
</div>
6872
</div>
69-
</div>
70-
</section>
73+
</section>
7174

7275
<!-- User Review (Challenges part) -->
7376

7477
<section>
7578
<div class="review-container">
76-
<h2 class="section-title">What our users say</h2>
77-
79+
<h2 class="section-title">What our users say</h2>
7880

79-
<div class="all-review">
80-
<div class="review-card">
81-
<div class="stars">
82-
<img src="Assets/icon-star.png" alt="icon-star.png">
83-
<img src="Assets/icon-star.png" alt="icon-star.png">
84-
<img src="Assets/icon-star.png" alt="icon-star.png">
85-
<img src="Assets/icon-star.png" alt="icon-star.png">
86-
</div>
87-
<div class="review-content">
88-
<h3 class="review-title">Loved by Designers</h3>
89-
<p class="comment">This template instantly leveled up our presence.” – Studio Vertex</p>
90-
</div>
91-
<div class="profile">
92-
<img class="profile-pic" src="Assets/avatar.png" alt="avatar.png" >
93-
<div>
94-
<p class="user-name">Reviewer name</p>
95-
<p class="date">Date</p>
96-
</div>
97-
</div>
81+
<div class="all-review">
82+
<div class="review-card">
83+
<div class="stars">
84+
<img src="Assets/icon-star.png" alt="icon-star.png" />
85+
<img src="Assets/icon-star.png" alt="icon-star.png" />
86+
<img src="Assets/icon-star.png" alt="icon-star.png" />
87+
<img src="Assets/icon-star.png" alt="icon-star.png" />
88+
</div>
89+
<div class="review-content">
90+
<h3 class="review-title">Loved by Designers</h3>
91+
<p class="comment">
92+
This template instantly leveled up our presence.” – Studio
93+
Vertex
94+
</p>
95+
</div>
96+
<div class="profile">
97+
<img
98+
class="profile-pic"
99+
src="Assets/avatar.png"
100+
alt="avatar.png" />
101+
<div>
102+
<p class="user-name">Reviewer name</p>
103+
<p class="date">Date</p>
98104
</div>
99-
<div class="review-card">
100-
<div class="stars">
101-
<img src="Assets/icon-star.png" alt="icon-star.png">
102-
<img src="Assets/icon-star.png" alt="icon-star.png">
103-
<img src="Assets/icon-star.png" alt="icon-star.png">
104-
<img src="Assets/icon-star.png" alt="icon-star.png">
105-
</div>
106-
<div class="review-content">
107-
<h3 class="review-title">Loved by Designers</h3>
108-
<p class="comment">This template instantly leveled up our presence.” – Studio Vertex</p>
109-
</div>
110-
<div class="profile">
111-
<img class="profile-pic" src="Assets/avatar.png" alt="avatar.png" >
112-
<div>
113-
<p class="user-name">Reviewer name</p>
114-
<p class="date">Date</p>
115-
</div>
116-
</div>
105+
</div>
106+
</div>
107+
<div class="review-card">
108+
<div class="stars">
109+
<img src="Assets/icon-star.png" alt="icon-star.png" />
110+
<img src="Assets/icon-star.png" alt="icon-star.png" />
111+
<img src="Assets/icon-star.png" alt="icon-star.png" />
112+
<img src="Assets/icon-star.png" alt="icon-star.png" />
113+
</div>
114+
<div class="review-content">
115+
<h3 class="review-title">Loved by Designers</h3>
116+
<p class="comment">
117+
This template instantly leveled up our presence.” – Studio
118+
Vertex
119+
</p>
120+
</div>
121+
<div class="profile">
122+
<img
123+
class="profile-pic"
124+
src="Assets/avatar.png"
125+
alt="avatar.png" />
126+
<div>
127+
<p class="user-name">Reviewer name</p>
128+
<p class="date">Date</p>
117129
</div>
118-
<div class="review-card">
119-
<div class="stars">
120-
<img src="Assets/icon-star.png" alt="icon-star.png">
121-
<img src="Assets/icon-star.png" alt="icon-star.png">
122-
<img src="Assets/icon-star.png" alt="icon-star.png">
123-
<img src="Assets/icon-star.png" alt="icon-star.png">
124-
</div>
125-
<div class="review-content">
126-
<h3 class="review-title">Loved by Designers</h3>
127-
<p class="comment">This template instantly leveled up our presence.” – Studio Vertex</p>
128-
</div>
129-
<div class="profile">
130-
<img class="profile-pic" src="Assets/avatar.png" alt="avatar.png" >
131-
<div>
132-
<p class="user-name">Reviewer name</p>
133-
<p class="date">Date</p>
134-
</div>
135-
</div>
130+
</div>
131+
</div>
132+
<div class="review-card">
133+
<div class="stars">
134+
<img src="Assets/icon-star.png" alt="icon-star.png" />
135+
<img src="Assets/icon-star.png" alt="icon-star.png" />
136+
<img src="Assets/icon-star.png" alt="icon-star.png" />
137+
<img src="Assets/icon-star.png" alt="icon-star.png" />
138+
</div>
139+
<div class="review-content">
140+
<h3 class="review-title">Loved by Designers</h3>
141+
<p class="comment">
142+
This template instantly leveled up our presence.” – Studio
143+
Vertex
144+
</p>
145+
</div>
146+
<div class="profile">
147+
<img
148+
class="profile-pic"
149+
src="Assets/avatar.png"
150+
alt="avatar.png" />
151+
<div>
152+
<p class="user-name">Reviewer name</p>
153+
<p class="date">Date</p>
136154
</div>
155+
</div>
137156
</div>
157+
</div>
138158
</div>
139159
</section>
140160
<!-- Ready to focus (NO POINT FOR THIS PART) -->
161+
<section>
162+
<div class="focus-section">
163+
<h2 class="section-title">Ready to focus better</h2>
164+
<p>
165+
This template instantly leveled up our presence.” – Studio Vertex
166+
</p>
167+
<div>
168+
<a class="primary-btn" href="">Ger Started Free</a>
169+
</div>
170+
<img
171+
class="display-block wc-big"
172+
src="Assets/wc-big.png"
173+
alt="wc-big.png" />
174+
</div>
175+
</section>
141176

142177
<!-- Contact Section (10 mark) -->
143178

179+
<section>
180+
<div class="contact-container">
181+
<h1>Let’s Get in Touch</h1>
182+
<form class="form-contianer" action="">
183+
<label for="email">Email</label>
184+
<input type="email" name="email" id="email" placeholder="example@email.com">
185+
<label for="name">Name</label>
186+
<input type="text" name="name" id="name" placeholder="full name">
187+
<label for="message">Message</label>
188+
<textarea name="message" id="message" rows="5" placeholder="write your message...."></textarea>
189+
190+
<input class="primary-btn submit-btn" type="submit" value="Get in Touch">
191+
</form>
192+
</div>
193+
</section>
194+
144195
<!-- Footer Section -->
145196
</main>
146197
</body>

‎styles/style.css‎

Lines changed: 59 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
margin: 0px;
44
padding: 0px;
55

6+
67
}
78

89
.raleway-fontfamily {
@@ -26,7 +27,9 @@ main{
2627
}
2728

2829
/* Shared style */
29-
30+
.display-block{
31+
display: block;
32+
}
3033
.primary-btn{
3134
color: white;
3235
background-color: #4E47FF;
@@ -192,7 +195,61 @@ margin-bottom: 100px;
192195
.date{
193196
color: #B3B3B3;
194197
}
195-
/* Contuct section */
196198

199+
/* focus Section */
200+
201+
.focus-section {
202+
display: flex;
203+
flex-direction: column;
204+
padding: 71px;
205+
background-color: white;
206+
text-align: center;
207+
border-radius: 10px;
208+
}
209+
210+
.focus-section *{
211+
margin-bottom: 20px;
212+
}
213+
.wc-big{
214+
border-radius: 30px;
215+
}
216+
217+
/* Contuct section */
218+
.contact-container{
219+
display: flex;
220+
justify-content: space-between;
221+
align-items: center;
222+
margin-top: 90px;
223+
224+
225+
}
226+
.form-contianer{
227+
width: 496px;
228+
text-align: start;
229+
230+
231+
}
232+
.form-contianer *{
233+
display: block;
234+
235+
margin-bottom: 10px;
236+
}
237+
.contact-container h1{
238+
font-size: 97px;
239+
font-weight: bold;
240+
}
241+
form input, form textarea{
242+
padding: 20px 0px 20px 32px;
243+
border-radius: 5px;
244+
border: none;
245+
min-width: 100%;
246+
box-sizing: border-box;
247+
248+
}
249+
form label{
250+
font-family: "Inter", sans-serif;
251+
font-weight: 500;
252+
font-size: 18px;
197253

254+
}
198255
/* Footer Section */

0 commit comments

Comments
 (0)