Skip to content

Commit 1c68c9e

Browse files
solygambassolygambas
committed
add headphones product hero
1 parent cb178e4 commit 1c68c9e

File tree

4 files changed

+245
-0
lines changed

4 files changed

+245
-0
lines changed

‎95-headphones product page/index.html

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!-- Based on Product Landing Page by Brad Traversy (2019)
2+
see: https://www.youtube.com/watch?v=61R5kn_kYwY -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link rel="stylesheet" href="style.css" />
10+
<title>Headphones Product Page</title>
11+
</head>
12+
<body>
13+
<nav class="navbar">
14+
<div class="container">
15+
<h1 class="logo">Phono</h1>
16+
<ul class="nav">
17+
<li><a href="#home">Home</a></li>
18+
<li><a href="#about">About</a></li>
19+
</ul>
20+
</div>
21+
</nav>
22+
23+
<!-- Showcase -->
24+
<section class="section-showcase">
25+
<div class="container">
26+
<div>
27+
<h1>The headphones of the future.</h1>
28+
<p>
29+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
30+
repudiandae rerum libero ipsum asperiores omnis mollitia, nostrum
31+
commodi placeat ea itaque modi corrupti corporis nam voluptas aut
32+
reprehenderit eaque culpa.
33+
</p>
34+
<a href="#" class="btn">Read More</a>
35+
</div>
36+
<img src="https://i.ibb.co/37Y74kv/showcase.jpg" alt="" />
37+
</div>
38+
</section>
39+
40+
<!-- Large Text -->
41+
<section id="about" class="section-large-text">
42+
<div class="overlay">
43+
<div class="section-large-text-inner">
44+
<h3>Loud & Clear</h3>
45+
<h2>People Aren't Hearing All the Music</h2>
46+
<p>
47+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
48+
repudiandae laboriosam quia, error tempore porro ducimus voluptate
49+
laborum nostrum iure.
50+
</p>
51+
</div>
52+
</div>
53+
</section>
54+
55+
<!-- Gallery -->
56+
<section class="section-gallery">
57+
<div class="gallery">
58+
<a href="https://i.ibb.co/CHLBZnp/gal2323.jpg" class="big"
59+
><img src="https://i.ibb.co/CHLBZnp/gal2323.jpg" alt=""
60+
/></a>
61+
<a href="https://i.ibb.co/4pBbhfY/gal39834.jpg" class="big"
62+
><img src="https://i.ibb.co/4pBbhfY/gal39834.jpg" alt=""
63+
/></a>
64+
<a href="https://i.ibb.co/xSnHP7g/gal43884.jpg" class="big"
65+
><img src="https://i.ibb.co/xSnHP7g/gal43884.jpg" alt=""
66+
/></a>
67+
<a href="https://i.ibb.co/QN6Bnrb/gal4958.jpg" class="big"
68+
><img src="https://i.ibb.co/QN6Bnrb/gal4958.jpg" alt=""
69+
/></a>
70+
<a href="https://i.ibb.co/dGZvj75/gal4545.jpg" class="big">
71+
<img src="https://i.ibb.co/dGZvj75/gal4545.jpg" alt=""
72+
/></a>
73+
<a href="https://i.ibb.co/S6FVFNt/gal74744.jpg" class="big"
74+
><img src="https://i.ibb.co/S6FVFNt/gal74744.jpg" alt=""
75+
/></a>
76+
</div>
77+
</section>
78+
79+
<!-- Footer -->
80+
<footer class="section-footer">
81+
<div class="container">
82+
<div>
83+
<h2>Lorem ipsum dolor sit.</h2>
84+
<a href="http://twitter.com">
85+
<i class="fab fa-twitter fa-2x"></i>
86+
</a>
87+
<a href="http://facebook.com">
88+
<i class="fab fa-facebook fa-2x"></i>
89+
</a>
90+
<a href="http://youtube.com">
91+
<i class="fab fa-youtube fa-2x"></i>
92+
</a>
93+
</div>
94+
<div>
95+
<h3>Company Info</h3>
96+
<ul>
97+
<li><a href="#">All Products</a></li>
98+
<li><a href="#">About Us</a></li>
99+
<li><a href="#">Privacy Policy</a></li>
100+
<li><a href="#">Terms of Service</a></li>
101+
</ul>
102+
</div>
103+
<div>
104+
<h3>Blog Posts</h3>
105+
<ul>
106+
<li><a href="#">Lorem ipsum dolor.</a></li>
107+
<li><a href="#">Lorem ipsum dolor.</a></li>
108+
<li><a href="#">Lorem ipsum dolor.</a></li>
109+
<li><a href="#">Lorem ipsum dolor.</a></li>
110+
</ul>
111+
</div>
112+
<div>
113+
<h3>Subscribe</h3>
114+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
115+
<form name="email-form" method="POST" data-netlify="true">
116+
<div class="email-form">
117+
<span class="form-control-wrap"
118+
><input
119+
type="email"
120+
name="email"
121+
id="email"
122+
size="40"
123+
class="form-control"
124+
placeholder="E-mail" /></span
125+
><button type="submit" value="Submit" class="form-control submit">
126+
<i class="fas fa-chevron-right"></i>
127+
</button>
128+
</div>
129+
</form>
130+
</div>
131+
</div>
132+
</footer>
133+
134+
<script src="script.js"></script>
135+
</body>
136+
</html>

‎95-headphones product page/script.js

Whitespace-only changes.

‎95-headphones product page/style.css

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Catamaran:wght@400;700&display=swap");
2+
3+
:root {
4+
--primary-color: #333;
5+
--secondary-color: #444;
6+
--ternary-color: #555;
7+
--overlay-color: rgba(0, 0, 0, 0.7);
8+
}
9+
10+
* {
11+
box-sizing: border-box;
12+
margin: 0;
13+
padding: 0;
14+
}
15+
16+
body {
17+
font-family: "Catamaran", sans-serif;
18+
line-height: 1.6;
19+
color: var(--primary-color);
20+
font-size: 1.1rem;
21+
}
22+
23+
h1,
24+
h2,
25+
h3,
26+
h4 {
27+
line-height: 1.3;
28+
}
29+
30+
a {
31+
color: var(--secondary-color);
32+
text-decoration: none;
33+
}
34+
35+
ul {
36+
list-style: none;
37+
}
38+
39+
img {
40+
width: 100%;
41+
}
42+
43+
.container {
44+
max-width: 1100px;
45+
margin: auto;
46+
overflow: hidden;
47+
padding: 0 2rem;
48+
}
49+
50+
/* navbar */
51+
52+
.navbar {
53+
font-size: 1.2rem;
54+
padding: 0.3rem 0;
55+
}
56+
57+
.navbar .container {
58+
display: grid;
59+
grid-template-columns: repeat(2, 1fr);
60+
gap: 2rem;
61+
}
62+
63+
.navbar ul {
64+
display: flex;
65+
justify-self: flex-end;
66+
align-items: center;
67+
justify-content: center;
68+
}
69+
70+
.navbar a {
71+
padding: 0 1rem;
72+
}
73+
74+
.navbar a:hover {
75+
color: var(--ternary-color);
76+
}
77+
78+
/* showcase section */
79+
80+
.section-showcase {
81+
margin: 2rem 0;
82+
}
83+
84+
.section-showcase .container {
85+
display: grid;
86+
grid-template-columns: 1fr 1fr;
87+
gap: 3rem;
88+
align-items: center;
89+
justify-content: center;
90+
}
91+
92+
.section-showcase h1 {
93+
font-size: 4rem;
94+
color: var(--primary-color);
95+
}
96+
97+
.section-showcase p {
98+
margin: 1rem 0;
99+
}
100+
101+
/* large text section */
102+
103+
.section-large-text {
104+
position: relative;
105+
background: url("https://i.ibb.co/1RS1dqC/section-b.jpg") bottom center/cover
106+
no-repeat;
107+
height: 600px;
108+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@
100100
| 92 | [Music Streaming Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/92-music%20streaming%20service) | [Live Demo](https://codepen.io/solygambas/full/qBRvLmg) |
101101
| 93 | [Creative Portfolio](https://github.com/solygambas/html-css-fifty-projects/tree/master/93-creative%20portfolio) | [Live Demo](https://codepen.io/solygambas/full/zYNbgxR) |
102102
| 94 | [Laptop UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/94-laptop%20UI) | [Live Demo](https://codepen.io/solygambas/full/eYgoxMo) |
103+
| 95 | [Headphones Product Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/95-headphones%20product%20page) | [Live Demo](#) |
103104

104105
This repository is mostly based on 2 courses by Brad Traversy (2020):
105106

0 commit comments

Comments
 (0)