Skip to content

Commit be5abdb

Browse files
solygambassolygambas
committed
add creative agency service and work sections
1 parent 13f7303 commit be5abdb

File tree

3 files changed

+168
-29
lines changed

3 files changed

+168
-29
lines changed

‎79-creative agency website/index.html

+34-19
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
<!-- Based on Creative Agency Website From Scratch by Brad Traversy (2021)
2+
see: https://www.youtube.com/watch?v=lvYnfMOUOJY -->
3+
14
<!DOCTYPE html>
25
<html lang="en">
36
<head>
@@ -65,19 +68,19 @@
6568
/>
6669
<div class="home-content">
6770
<h2>
68-
We help to achieve <br />
69-
your goals.
71+
We help <span class="highlight">you</span> to achieve <br />
72+
<span class="highlight">your goals</span>
7073
</h2>
7174
<p>
7275
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo itaque
7376
nam saepe vero voluptatem vel fuga a eaque earum alias ipsam
7477
aspernatur culpa maxime laboriosam, impedit quae officiis consectetur
7578
</p>
76-
<a href="#contact" class="btn">Get Started</a>
79+
<a href="#services" class="btn">Get Started</a>
7780
</div>
7881
</section>
7982
<!-- services -->
80-
<!-- <section id="services">
83+
<section id="services">
8184
<div class="title">
8285
<h2>Services that we can help you with</h2>
8386
<p>
@@ -98,8 +101,10 @@ <h2>Services that we can help you with</h2>
98101
/>
99102
</div>
100103
<h3>Design</h3>
101-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum omnis
102-
nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
104+
<p>
105+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
106+
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
107+
</p>
103108
</div>
104109
<div class="service">
105110
<div class="icon">
@@ -109,8 +114,10 @@ <h3>Design</h3>
109114
/>
110115
</div>
111116
<h3>Development</h3>
112-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum omnis
113-
nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
117+
<p>
118+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
119+
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
120+
</p>
114121
</div>
115122
<div class="service">
116123
<div class="icon">
@@ -120,8 +127,10 @@ <h3>Development</h3>
120127
/>
121128
</div>
122129
<h3>SEO</h3>
123-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum omnis
124-
nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
130+
<p>
131+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
132+
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
133+
</p>
125134
</div>
126135
<div class="service">
127136
<div class="icon">
@@ -131,8 +140,10 @@ <h3>SEO</h3>
131140
/>
132141
</div>
133142
<h3>Marketing</h3>
134-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum omnis
135-
nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
143+
<p>
144+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
145+
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
146+
</p>
136147
</div>
137148
<div class="service">
138149
<div class="icon">
@@ -142,8 +153,10 @@ <h3>Marketing</h3>
142153
/>
143154
</div>
144155
<h3>App Development</h3>
145-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum omnis
146-
nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
156+
<p>
157+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
158+
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
159+
</p>
147160
</div>
148161
<div class="service">
149162
<div class="icon">
@@ -153,12 +166,14 @@ <h3>App Development</h3>
153166
/>
154167
</div>
155168
<h3>Error Fixing</h3>
156-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum omnis
157-
nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
169+
<p>
170+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
171+
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
172+
</p>
158173
</div>
159174
</div>
160175
</section>
161-
176+
<!-- work -->
162177
<section id="work">
163178
<div class="title">
164179
<h1>Some of our finest work</h1>
@@ -171,7 +186,6 @@ <h1>Some of our finest work</h1>
171186
exercitationem qui quidem nam.
172187
</p>
173188
</div>
174-
175189
<div class="portfolio">
176190
<div class="item">
177191
<img
@@ -319,7 +333,8 @@ <h1>Some of our finest work</h1>
319333
</div>
320334
</div>
321335
</section>
322-
336+
<!-- contact -->
337+
<!--
323338
<section id="contact">
324339
<div class="title">
325340
<h2>Contact us</h2>

‎79-creative agency website/script.js

+5
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,8 @@ toggleButton.addEventListener("click", () => {
55
toggleButton.classList.toggle("active");
66
navigation.classList.toggle("active");
77
});
8+
9+
navigation.addEventListener("click", () => {
10+
toggleButton.classList.toggle("active");
11+
navigation.classList.toggle("active");
12+
});

‎79-creative agency website/style.css

+129-10
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap");
1+
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;500;700&display=swap");
22

33
:root {
44
--main-color: #f60f20;
5+
--highlight-color: #c4a2fc;
56
--text-color: #111;
7+
--alternate-text-color: #1b206e;
68
}
79

810
* {
@@ -13,7 +15,7 @@
1315

1416
html,
1517
body {
16-
font-family: "Poppins", sans-serif;
18+
font-family: "Rubik", sans-serif;
1719
color: var(--text-color);
1820
}
1921

@@ -22,6 +24,7 @@ body {
2224
display: inline-block;
2325
background-color: var(--main-color);
2426
color: #fff;
27+
font-size: 1.1rem;
2528
text-decoration: none;
2629
padding: 10px 30px;
2730
margin: 20px 0;
@@ -40,7 +43,7 @@ body {
4043
}
4144

4245
.logo h1 {
43-
font-size: 1.5rem;
46+
font-size: 1.6rem;
4447
font-weight: 700;
4548
}
4649

@@ -93,10 +96,11 @@ body {
9396
.navigation ul li {
9497
position: relative;
9598
text-align: center;
99+
padding-bottom: 5px;
96100
}
97101

98102
.navigation ul li a {
99-
font-size: 1.5rem;
103+
font-size: 2rem;
100104
color: var(--text-color);
101105
text-decoration: none;
102106
font-weight: 300;
@@ -130,32 +134,143 @@ body {
130134
/* SECTIONS */
131135
section {
132136
display: flex;
133-
height: 100vh;
137+
flex-direction: column;
138+
min-height: 100vh;
134139
align-items: center;
135140
padding: 100px 40px;
141+
margin-top: 60px;
136142
}
137143

138144
h2 {
139-
font-size: 1.825rem;
145+
font-size: 2rem;
140146
font-weight: 500;
141147
}
142148

143149
p {
144150
margin: 20px 0 10px;
145-
font-size: 1.1rem;
151+
font-size: 1.2rem;
152+
line-height: 1.5;
153+
font-weight: 300;
154+
}
155+
156+
/* HOME SECTION */
157+
section.home {
158+
flex-direction: row;
159+
margin-top: 0;
146160
}
147161

148-
/* Home Section */
149162
.home-content {
150163
position: relative;
151164
z-index: 10;
152165
max-width: 600px;
153166
}
154167

168+
/* Reference: https://stackoverflow.com/questions/43683187/how-can-i-create-custom-underline-or-highlight-for-text-in-html-or-css */
169+
.highlight {
170+
background: linear-gradient(
171+
180deg,
172+
rgba(255, 255, 255, 0) 50%,
173+
var(--highlight-color) 50%
174+
);
175+
padding: 0 0.25rem;
176+
}
177+
155178
.home-img {
156179
display: none;
157180
}
158181

182+
/* SERVICES */
183+
.services {
184+
margin-top: 40px;
185+
display: grid;
186+
grid-template-columns: 1fr;
187+
gap: 40px;
188+
text-align: center;
189+
}
190+
191+
.services .service .icon .img {
192+
max-width: 100px;
193+
}
194+
195+
.services .service {
196+
padding: 30px;
197+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
198+
}
199+
200+
.services .service h3 {
201+
font-size: 1.6rem;
202+
font-weight: 500;
203+
margin-top: 20px;
204+
color: var(--alternate-text-color);
205+
}
206+
207+
.services .service p {
208+
line-height: normal;
209+
font-size: 1.1rem;
210+
margin: 10px 0;
211+
}
212+
213+
/* WORK */
214+
.portfolio {
215+
display: flex;
216+
justify-content: center;
217+
flex-wrap: wrap;
218+
margin-top: 20px;
219+
}
220+
221+
.portfolio .item {
222+
position: relative;
223+
width: 300px;
224+
height: 300px;
225+
margin: 5px;
226+
}
227+
228+
.portfolio .item img {
229+
width: 100%;
230+
height: 100%;
231+
}
232+
233+
.portfolio .item .action {
234+
position: absolute;
235+
top: 0;
236+
left: 0;
237+
width: 100%;
238+
height: 100%;
239+
background-color: rgba(0, 0, 0, 0.8);
240+
display: flex;
241+
justify-content: center;
242+
align-items: center;
243+
opacity: 0;
244+
transition: opacity 0.5s ease-in-out;
245+
}
246+
247+
.portfolio .item .action a {
248+
display: inline-block;
249+
color: #fff;
250+
text-decoration: none;
251+
border: 1px solid #fff;
252+
padding: 5px 15px;
253+
}
254+
255+
.portfolio .item .action:hover {
256+
opacity: 1;
257+
}
258+
259+
/* MEDIA QUERIES */
260+
@media (min-width: 768px) {
261+
.services {
262+
grid-template-columns: repeat(2, 1fr);
263+
}
264+
265+
.services .service {
266+
box-shadow: none;
267+
}
268+
269+
.services .service:hover {
270+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
271+
}
272+
}
273+
159274
@media (min-width: 1068px) {
160275
.home-img {
161276
display: block;
@@ -171,14 +286,18 @@ p {
171286
}
172287

173288
.logo h1 {
174-
font-size: 2rem;
289+
font-size: 2.1rem;
175290
}
176291

177292
.navigation ul li a {
178-
font-size: 2.2rem;
293+
font-size: 2.3rem;
179294
}
180295

181296
section {
182297
padding: 100px;
183298
}
299+
300+
.services {
301+
grid-template-columns: repeat(3, 1fr);
302+
}
184303
}

0 commit comments

Comments
 (0)