Skip to content

Commit 7b1315a

Browse files
solygambassolygambas
committed
add headphones product page
1 parent 1c68c9e commit 7b1315a

File tree

2 files changed

+232
-3
lines changed

2 files changed

+232
-3
lines changed

‎95-headphones product page/index.html‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@
66
<head>
77
<meta charset="UTF-8" />
88
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
12+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
13+
crossorigin="anonymous"
14+
/>
915
<link rel="stylesheet" href="style.css" />
1016
<title>Headphones Product Page</title>
1117
</head>
@@ -81,8 +87,8 @@ <h2>People Aren't Hearing All the Music</h2>
8187
<div class="container">
8288
<div>
8389
<h2>Lorem ipsum dolor sit.</h2>
84-
<a href="http://twitter.com">
85-
<i class="fab fa-twitter fa-2x"></i>
90+
<a href="http://instagram.com">
91+
<i class="fab fa-instagram fa-2x"></i>
8692
</a>
8793
<a href="http://facebook.com">
8894
<i class="fab fa-facebook fa-2x"></i>
@@ -112,7 +118,7 @@ <h3>Blog Posts</h3>
112118
<div>
113119
<h3>Subscribe</h3>
114120
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
115-
<form name="email-form" method="POST" data-netlify="true">
121+
<form name="email-form" onsubmit="event.preventDefault()">
116122
<div class="email-form">
117123
<span class="form-control-wrap"
118124
><input

‎95-headphones product page/style.css‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
--primary-color: #333;
55
--secondary-color: #444;
66
--ternary-color: #555;
7+
--light-color: #ccc;
8+
--light-secondary-color: #ddd;
9+
--light-ternary-color: #eee;
710
--overlay-color: rgba(0, 0, 0, 0.7);
811
}
912

@@ -98,6 +101,21 @@ img {
98101
margin: 1rem 0;
99102
}
100103

104+
.btn {
105+
display: inline-block;
106+
background-color: var(--primary-color);
107+
color: #fff;
108+
padding: 0.8rem 1.5rem;
109+
border: none;
110+
cursor: pointer;
111+
font-size: 1.1rem;
112+
border-radius: 30px;
113+
}
114+
115+
.btn:hover {
116+
background: var(--secondary-color);
117+
}
118+
101119
/* large text section */
102120

103121
.section-large-text {
@@ -106,3 +124,208 @@ img {
106124
no-repeat;
107125
height: 600px;
108126
}
127+
128+
.overlay {
129+
position: absolute;
130+
width: 100%;
131+
height: 100%;
132+
top: 0;
133+
left: 0;
134+
background-color: var(--overlay-color);
135+
}
136+
137+
.section-large-text-inner {
138+
color: #fff;
139+
height: 100%;
140+
display: flex;
141+
flex-direction: column;
142+
align-items: center;
143+
justify-content: center;
144+
text-align: center;
145+
margin: auto;
146+
max-width: 860px;
147+
padding: 5rem 0;
148+
}
149+
150+
.section-large-text-inner h2 {
151+
font-size: 5rem;
152+
margin-top: 1rem;
153+
}
154+
155+
.section-large-text-inner h3 {
156+
font-size: 2rem;
157+
}
158+
159+
.section-large-text-inner p {
160+
font-size: 1.5rem;
161+
margin-top: 1rem;
162+
}
163+
164+
/* gallery */
165+
166+
.section-gallery .gallery {
167+
display: grid;
168+
grid-template-columns: repeat(5, 1fr);
169+
}
170+
171+
.section-gallery .gallery a:first-child {
172+
grid-row: 1/3;
173+
grid-column: 1/3;
174+
}
175+
176+
.section-gallery .gallery a:nth-child(2) {
177+
grid-column-start: 3;
178+
grid-column-end: 5;
179+
}
180+
181+
.section-gallery .gallery img,
182+
.section-gallery .gallery a {
183+
width: 100%;
184+
height: 100%;
185+
}
186+
187+
/* footer */
188+
189+
.section-footer {
190+
background-color: var(--primary-color);
191+
color: #fff;
192+
padding: 4rem 0;
193+
}
194+
195+
.section-footer .container {
196+
display: grid;
197+
grid-template-columns: repeat(4, 1fr);
198+
gap: 1rem;
199+
}
200+
201+
.section-footer h2 {
202+
font-size: 2rem;
203+
margin-bottom: 1rem;
204+
}
205+
206+
.section-footer h3 {
207+
margin-bottom: 0.7rem;
208+
}
209+
210+
.section-footer a {
211+
line-height: 1.9;
212+
color: var(--light-color);
213+
}
214+
215+
.section-footer a > i {
216+
color: var(--ternary-color);
217+
margin-right: 0.5rem;
218+
}
219+
220+
.email-form {
221+
display: inline-block;
222+
width: 100%;
223+
background-color: var(--ternary-color);
224+
position: relative;
225+
border-radius: 20px;
226+
line-height: 0;
227+
margin-top: 1rem;
228+
}
229+
230+
.email-form .form-control {
231+
display: inline-block;
232+
width: 100%;
233+
height: 45px;
234+
border-radius: 20px;
235+
border: 0;
236+
outline: 0;
237+
font-size: 1rem;
238+
color: var(--light-secondary-color);
239+
background-color: transparent;
240+
font-family: inherit;
241+
margin: 0;
242+
padding: 0 3rem 0 1.5rem;
243+
}
244+
245+
.email-form .submit {
246+
display: inline-block;
247+
position: absolute;
248+
top: 0;
249+
right: 0;
250+
width: 45px;
251+
height: 45px;
252+
background-color: var(--light-ternary-color);
253+
font-size: 1rem;
254+
text-align: center;
255+
margin: 0;
256+
padding: 0;
257+
outline: 0;
258+
border: 0;
259+
border-radius: 0 20px 20px 0;
260+
color: var(--primary-color);
261+
cursor: pointer;
262+
}
263+
264+
@media (max-width: 768px) {
265+
.section-showcase .container {
266+
grid-template-columns: 1fr;
267+
text-align: center;
268+
}
269+
270+
.section-showcase .container div:first-child {
271+
order: 2;
272+
}
273+
274+
.section-showcase .container div:nth-child(2) {
275+
order: -1;
276+
}
277+
278+
.section-showcase h1 {
279+
font-size: 2rem;
280+
}
281+
282+
.section-showcase img {
283+
width: 80%;
284+
margin: auto;
285+
}
286+
287+
.section-large-text-inner h2 {
288+
font-size: 3rem;
289+
}
290+
291+
.section-large-text-inner h3 {
292+
font-size: 1.5rem;
293+
}
294+
295+
.section-large-text-inner p {
296+
font-size: 1.25rem;
297+
}
298+
299+
.section-gallery .gallery {
300+
display: grid;
301+
grid-template-columns: repeat(3, 1fr);
302+
}
303+
304+
.section-gallery .gallery a:first-child {
305+
grid-row: 1/1;
306+
grid-column: 1/1;
307+
}
308+
309+
.section-gallery .gallery a:nth-child(2) {
310+
grid-row: 2/2;
311+
grid-column: 2/4;
312+
}
313+
314+
.section-gallery .gallery a:last-child {
315+
display: none;
316+
}
317+
318+
.section-footer {
319+
padding: 2rem 0;
320+
}
321+
322+
.section-footer .container {
323+
grid-template-columns: 1fr;
324+
text-align: center;
325+
}
326+
327+
.section-footer div:nth-child(2),
328+
.section-footer div:nth-child(3) {
329+
display: none;
330+
}
331+
}

0 commit comments

Comments
 (0)