Skip to content

Commit 72e8143

Browse files
ggsinglaggsingla
committed
CSS Phase - II Responsiveness
1 parent 9d197e4 commit 72e8143

File tree

4 files changed

+175
-79
lines changed

4 files changed

+175
-79
lines changed

‎Agency Page/.vscode/settings.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"files.autoSave": "onWindowChange"
2+
"files.autoSave": "onFocusChange"
33
}

‎Agency Page/Styles/style.css

Lines changed: 89 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
:root {
22
--clr-accent: hsl(253 100% 58%);
3+
--clr-accent-dark: hsl(253 100% 40%);
34
--clr-grey-100: hsl(0 0% 97%);
45
--clr-grey-500: hsl(0 0% 70%);
56
--clr-grey-900: hsl(0 0% 13%);
@@ -31,7 +32,7 @@ i {
3132
font-style: normal;
3233
}
3334
a {
34-
color: var(--clr-grey-900);
35+
color: inherit;
3536
text-decoration: none;
3637
transition: color 100ms ease-in-out;
3738
}
@@ -93,6 +94,7 @@ body {
9394
font-size: 16px;
9495
color: var(--clr-grey-900);
9596
display: grid;
97+
overflow-x: hidden;
9698
}
9799

98100
h1 {
@@ -114,8 +116,8 @@ main {
114116
/* /////////////////// */
115117

116118
.container {
117-
width: 1200px;
118-
max-width: 100%;
119+
width: 100%;
120+
max-width: 1200px;
119121
margin: 0 auto;
120122
}
121123
@media screen and (max-width: 1400px) {
@@ -132,9 +134,12 @@ main {
132134
font-size: 16px;
133135
font-weight: bold;
134136
cursor: pointer;
135-
transition: all 0.2s ease-in-out;
137+
transition: all 0.1s ease-in-out;
136138
}
137139

140+
.button:hover {
141+
background-color: var(--clr-accent-dark);
142+
}
138143
/* Section Header */
139144

140145
.section-header {
@@ -168,6 +173,7 @@ main {
168173
padding-block: 1.5em;
169174
display: flex;
170175
justify-content: space-between;
176+
align-items: center;
171177
margin-bottom: 1.5em;
172178
}
173179
.primary-header .logo {
@@ -188,13 +194,70 @@ main {
188194
gap: 1.5em;
189195
}
190196

197+
/* Burger Styling */
198+
#burger {
199+
display: none;
200+
flex-direction: column;
201+
justify-content: space-between;
202+
align-items: center;
203+
height: 20px;
204+
width: 35px;
205+
cursor: pointer;
206+
z-index: 200;
207+
}
208+
#burger .line {
209+
width: 100%;
210+
height: 4px;
211+
border-radius: 100px;
212+
background-color: var(--clr-grey-900);
213+
214+
transition: all 0.5s ease-in-out;
215+
}
216+
217+
@media screen and (max-width: 768px) {
218+
.primary-header nav ul {
219+
flex-direction: column;
220+
align-items: left;
221+
justify-content: center;
222+
gap: 3em;
223+
position: fixed;
224+
top: 0;
225+
left: 100%;
226+
width: 100%;
227+
height: 100vh;
228+
background: var(--clr-accent);
229+
color: white;
230+
z-index: 100;
231+
font-size: 1.2rem;
232+
pointer-events: none;
233+
transition: all 0.5s ease-in-out;
234+
}
235+
.primary-header nav ul.show {
236+
left: 0;
237+
transition: all 0.5s ease-in-out;
238+
pointer-events: all;
239+
}
240+
.primary-header nav ul .button {
241+
background: white;
242+
color: var(--clr-accent);
243+
}
244+
#burger.fix {
245+
position: fixed;
246+
top: 2em;
247+
right: 2em;
248+
--clr-grey-900: white;
249+
}
250+
#burger {
251+
display: flex;
252+
}
253+
}
191254
/* Hero Section */
192255
#hero {
193256
margin-block: 5em;
194257
}
195258
#hero p {
196-
width: 600px;
197-
max-width: 100%;
259+
max-width: 600px;
260+
width: 100%;
198261
margin-block: 1em 2em;
199262
}
200263
#hero .button {
@@ -207,13 +270,12 @@ main {
207270
#services {
208271
margin-block: 5em;
209272
display: grid;
210-
grid-template-columns: 1fr 1fr;
211-
grid-template-rows: 1fr 1fr;
212-
gap: 5em 10em;
273+
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
274+
gap: 5em 10vw;
213275
}
214276
#services .service {
215277
display: grid;
216-
grid-template-columns: 100px 1fr;
278+
grid-template-columns: fit-content(100px) 1fr;
217279
grid-template-rows: calc(1.5 * 1.5) em 1fr;
218280
gap: 0.5em 2em;
219281
}
@@ -233,9 +295,9 @@ main {
233295
#clients {
234296
margin-block: 5em;
235297
display: grid;
236-
grid-template-columns: repeat(4, 1fr);
298+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
237299
gap: 5em;
238-
grid-template-rows: repeat(3, 1fr);
300+
/* grid-template-rows: repeat(3, 1fr); */
239301
place-items: center;
240302
}
241303
#clients img {
@@ -247,9 +309,8 @@ main {
247309
#team {
248310
margin-block: 5em;
249311
display: grid;
250-
grid-template-columns: repeat(3, 1fr);
312+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
251313
gap: 4em;
252-
grid-template-rows: repeat(3, 1fr);
253314
place-items: center;
254315
}
255316
#team .team-member {
@@ -291,3 +352,17 @@ main {
291352
color: var(--clr-accent);
292353
transition: color 100ms ease-in-out;
293354
}
355+
356+
/* @media screen and (min-width: 768px) {
357+
.primary-footer .container ul {
358+
flex-direction: column;
359+
}
360+
} */
361+
362+
@media screen and (max-width: 576px) {
363+
#services .service {
364+
grid-template-columns: 1fr;
365+
text-align: center;
366+
place-items: center;
367+
}
368+
}

‎Agency Page/app.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,12 @@ for (const key in teamNames) {
3333
i++
3434
}
3535
}
36+
37+
// Nav Menu Functionality
38+
const navMenu = (e) => {
39+
const navList = document.getElementById('navLinks')
40+
e.addEventListener('click', () => {
41+
navList.classList.toggle('show')
42+
e.classList.toggle('fix')
43+
})
44+
}

‎Agency Page/index.html

Lines changed: 76 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,17 @@
2424
<header class="container primary-header">
2525
<div class="logo"><img id='logo' src="./Assets/Icons/mamon-logo.svg" alt="Logo"> <span>mamon</span></div>
2626
<nav>
27-
<ul role="list" class="nav-links">
27+
<ul role="list" id="navLinks" class="nav-links">
2828
<li><a href="#">Services</a></li>
2929
<li><a href="#">Clients</a></li>
3030
<li><a href="#">Our Team</a></li>
3131
<li><button class="button">Contact Us</button></li>
3232
</ul>
33+
<div id="burger" onclick="navMenu(this)">
34+
<div class="line"></div>
35+
<div class="line"></div>
36+
<div class="line"></div>
37+
</div>
3338
</nav>
3439
</header>
3540
<main>
@@ -42,75 +47,82 @@ <h1>We're an independent development agency.</h1>
4247
<header class="section-header">
4348
<div class="container"><span>Our Services</span></div>
4449
</header>
45-
<section class="container" id="services">
46-
<div class="service">
47-
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-mobile" width="100"
48-
height="100" viewBox="0 0 24 24" stroke-width="0.5" stroke="#5528FF" fill="none"
49-
stroke-linecap="round" stroke-linejoin="round">
50-
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
51-
<rect x="7" y="4" width="10" height="16" rx="1" />
52-
<line x1="11" y1="5" x2="13" y2="5" />
53-
<line x1="12" y1="17" x2="12" y2="17.01" />
54-
</svg>
55-
<h3>Mobile Development</h3>
56-
<p>We develop mobile apps for all contemporary
57-
mobile platforms. Mamon team builds
58-
native and cross-platform solutions.</p>
59-
</div>
60-
<div class="service">
61-
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-desktop" width="100"
62-
height="100" viewBox="0 0 24 24" stroke-width="0.5" stroke="#5528FF" fill="none"
63-
stroke-linecap="round" stroke-linejoin="round">
64-
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
65-
<rect x="3" y="4" width="18" height="12" rx="1" />
66-
<line x1="7" y1="20" x2="17" y2="20" />
67-
<line x1="9" y1="16" x2="9" y2="20" />
68-
<line x1="15" y1="16" x2="15" y2="20" />
69-
</svg>
70-
<h3>Web Development</h3>
71-
<p>Mamon offers full range of services from various
72-
CMS and frameworks based websites to complex
73-
ERP/CRM solutions and e-commerce stores.</p>
74-
</div>
75-
<div class="service">
76-
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-stack-2" width="100"
77-
height="100" viewBox="0 0 24 24" stroke-width="0.5" stroke="#5528FF" fill="none"
78-
stroke-linecap="round" stroke-linejoin="round">
79-
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
80-
<polyline points="12 4 4 8 12 12 20 8 12 4" />
81-
<polyline points="4 12 12 16 20 12" />
82-
<polyline points="4 16 12 20 20 16" />
83-
</svg>
84-
<h3>Product Design</h3>
85-
<p>We create design given the product audience,
86-
goal, business domain, technology and
87-
the platform for the solution.</p>
88-
</div>
89-
<div class="service">
90-
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-certificate" width="100"
91-
height="100" viewBox="0 0 24 24" stroke-width="0.5" stroke="#5528FF" fill="none"
92-
stroke-linecap="round" stroke-linejoin="round">
93-
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
94-
<circle cx="15" cy="15" r="3" />
95-
<path d="M13 17.5v4.5l2 -1.5l2 1.5v-4.5" />
96-
<path d="M10 19h-5a2 2 0 0 1 -2 -2v-10c0 -1.1 .9 -2 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -1 1.73" />
97-
<line x1="6" y1="9" x2="18" y2="9" />
98-
<line x1="6" y1="12" x2="9" y2="12" />
99-
<line x1="6" y1="15" x2="8" y2="15" />
100-
</svg>
101-
<h3>Quality Assurance</h3>
102-
<p>Our QA team ensures high standard of
103-
quality of products delivered.</p>
104-
</div>
105-
</section>
50+
<div class="container" data-section="services">
51+
<section id="services">
52+
<div class="service">
53+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-mobile"
54+
width="100" height="100" viewBox="0 0 24 24" stroke-width="0.5" stroke="#5528FF" fill="none"
55+
stroke-linecap="round" stroke-linejoin="round">
56+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
57+
<rect x="7" y="4" width="10" height="16" rx="1" />
58+
<line x1="11" y1="5" x2="13" y2="5" />
59+
<line x1="12" y1="17" x2="12" y2="17.01" />
60+
</svg>
61+
<h3>Mobile Development</h3>
62+
<p>We develop mobile apps for all contemporary
63+
mobile platforms. Mamon team builds
64+
native and cross-platform solutions.</p>
65+
</div>
66+
<div class="service">
67+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-desktop"
68+
width="100" height="100" viewBox="0 0 24 24" stroke-width="0.5" stroke="#5528FF" fill="none"
69+
stroke-linecap="round" stroke-linejoin="round">
70+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
71+
<rect x="3" y="4" width="18" height="12" rx="1" />
72+
<line x1="7" y1="20" x2="17" y2="20" />
73+
<line x1="9" y1="16" x2="9" y2="20" />
74+
<line x1="15" y1="16" x2="15" y2="20" />
75+
</svg>
76+
<h3>Web Development</h3>
77+
<p>Mamon offers full range of services from various
78+
CMS and frameworks based websites to complex
79+
ERP/CRM solutions and e-commerce stores.</p>
80+
</div>
81+
<div class="service">
82+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-stack-2" width="100"
83+
height="100" viewBox="0 0 24 24" stroke-width="0.5" stroke="#5528FF" fill="none"
84+
stroke-linecap="round" stroke-linejoin="round">
85+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
86+
<polyline points="12 4 4 8 12 12 20 8 12 4" />
87+
<polyline points="4 12 12 16 20 12" />
88+
<polyline points="4 16 12 20 20 16" />
89+
</svg>
90+
<h3>Product Design</h3>
91+
<p>We create design given the product audience,
92+
goal, business domain, technology and
93+
the platform for the solution.</p>
94+
</div>
95+
<div class="service">
96+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-certificate" width="100"
97+
height="100" viewBox="0 0 24 24" stroke-width="0.5" stroke="#5528FF" fill="none"
98+
stroke-linecap="round" stroke-linejoin="round">
99+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
100+
<circle cx="15" cy="15" r="3" />
101+
<path d="M13 17.5v4.5l2 -1.5l2 1.5v-4.5" />
102+
<path
103+
d="M10 19h-5a2 2 0 0 1 -2 -2v-10c0 -1.1 .9 -2 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -1 1.73" />
104+
<line x1="6" y1="9" x2="18" y2="9" />
105+
<line x1="6" y1="12" x2="9" y2="12" />
106+
<line x1="6" y1="15" x2="8" y2="15" />
107+
</svg>
108+
<h3>Quality Assurance</h3>
109+
<p>Our QA team ensures high standard of
110+
quality of products delivered.</p>
111+
</div>
112+
</section>
113+
</div>
106114
<header class="section-header">
107115
<div class="container"><span>Our Clients</span></div>
108116
</header>
109-
<section class="container" id="clients"></section>
117+
<div class="container" data-section="clients">
118+
<section id="clients"></section>
119+
</div>
110120
<header class="section-header">
111121
<div class="container"><span>Our Team</span></div>
112122
</header>
113-
<section class="container" id="team"></section>
123+
<div class="container" data-section="team">
124+
<section id="team"></section>
125+
</div>
114126
</main>
115127
<footer class="primary-footer">
116128
<div class="container">

0 commit comments

Comments
 (0)