Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit1c68c9e

Browse files
committed
add headphones product hero
1 parentcb178e4 commit1c68c9e

File tree

4 files changed

+245
-0
lines changed

4 files changed

+245
-0
lines changed

‎95-headphones product page/index.html

Lines changed: 136 additions & 0 deletions
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+
<htmllang="en">
6+
<head>
7+
<metacharset="UTF-8"/>
8+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
9+
<linkrel="stylesheet"href="style.css"/>
10+
<title>Headphones Product Page</title>
11+
</head>
12+
<body>
13+
<navclass="navbar">
14+
<divclass="container">
15+
<h1class="logo">Phono</h1>
16+
<ulclass="nav">
17+
<li><ahref="#home">Home</a></li>
18+
<li><ahref="#about">About</a></li>
19+
</ul>
20+
</div>
21+
</nav>
22+
23+
<!-- Showcase -->
24+
<sectionclass="section-showcase">
25+
<divclass="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+
<ahref="#"class="btn">Read More</a>
35+
</div>
36+
<imgsrc="https://i.ibb.co/37Y74kv/showcase.jpg"alt=""/>
37+
</div>
38+
</section>
39+
40+
<!-- Large Text -->
41+
<sectionid="about"class="section-large-text">
42+
<divclass="overlay">
43+
<divclass="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+
<sectionclass="section-gallery">
57+
<divclass="gallery">
58+
<ahref="https://i.ibb.co/CHLBZnp/gal2323.jpg"class="big"
59+
><imgsrc="https://i.ibb.co/CHLBZnp/gal2323.jpg"alt=""
60+
/></a>
61+
<ahref="https://i.ibb.co/4pBbhfY/gal39834.jpg"class="big"
62+
><imgsrc="https://i.ibb.co/4pBbhfY/gal39834.jpg"alt=""
63+
/></a>
64+
<ahref="https://i.ibb.co/xSnHP7g/gal43884.jpg"class="big"
65+
><imgsrc="https://i.ibb.co/xSnHP7g/gal43884.jpg"alt=""
66+
/></a>
67+
<ahref="https://i.ibb.co/QN6Bnrb/gal4958.jpg"class="big"
68+
><imgsrc="https://i.ibb.co/QN6Bnrb/gal4958.jpg"alt=""
69+
/></a>
70+
<ahref="https://i.ibb.co/dGZvj75/gal4545.jpg"class="big">
71+
<imgsrc="https://i.ibb.co/dGZvj75/gal4545.jpg"alt=""
72+
/></a>
73+
<ahref="https://i.ibb.co/S6FVFNt/gal74744.jpg"class="big"
74+
><imgsrc="https://i.ibb.co/S6FVFNt/gal74744.jpg"alt=""
75+
/></a>
76+
</div>
77+
</section>
78+
79+
<!-- Footer -->
80+
<footerclass="section-footer">
81+
<divclass="container">
82+
<div>
83+
<h2>Lorem ipsum dolor sit.</h2>
84+
<ahref="http://twitter.com">
85+
<iclass="fab fa-twitter fa-2x"></i>
86+
</a>
87+
<ahref="http://facebook.com">
88+
<iclass="fab fa-facebook fa-2x"></i>
89+
</a>
90+
<ahref="http://youtube.com">
91+
<iclass="fab fa-youtube fa-2x"></i>
92+
</a>
93+
</div>
94+
<div>
95+
<h3>Company Info</h3>
96+
<ul>
97+
<li><ahref="#">All Products</a></li>
98+
<li><ahref="#">About Us</a></li>
99+
<li><ahref="#">Privacy Policy</a></li>
100+
<li><ahref="#">Terms of Service</a></li>
101+
</ul>
102+
</div>
103+
<div>
104+
<h3>Blog Posts</h3>
105+
<ul>
106+
<li><ahref="#">Lorem ipsum dolor.</a></li>
107+
<li><ahref="#">Lorem ipsum dolor.</a></li>
108+
<li><ahref="#">Lorem ipsum dolor.</a></li>
109+
<li><ahref="#">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+
<formname="email-form"method="POST"data-netlify="true">
116+
<divclass="email-form">
117+
<spanclass="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+
><buttontype="submit"value="Submit"class="form-control submit">
126+
<iclass="fas fa-chevron-right"></i>
127+
</button>
128+
</div>
129+
</form>
130+
</div>
131+
</div>
132+
</footer>
133+
134+
<scriptsrc="script.js"></script>
135+
</body>
136+
</html>

‎95-headphones product page/script.js

Whitespace-only changes.

‎95-headphones product page/style.css

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
@importurl("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:02rem;
48+
}
49+
50+
/* navbar */
51+
52+
.navbar {
53+
font-size:1.2rem;
54+
padding:0.3rem0;
55+
}
56+
57+
.navbar .container {
58+
display: grid;
59+
grid-template-columns:repeat(2,1fr);
60+
gap:2rem;
61+
}
62+
63+
.navbarul {
64+
display: flex;
65+
justify-self: flex-end;
66+
align-items: center;
67+
justify-content: center;
68+
}
69+
70+
.navbara {
71+
padding:01rem;
72+
}
73+
74+
.navbara:hover {
75+
color:var(--ternary-color);
76+
}
77+
78+
/* showcase section */
79+
80+
.section-showcase {
81+
margin:2rem0;
82+
}
83+
84+
.section-showcase .container {
85+
display: grid;
86+
grid-template-columns:1fr1fr;
87+
gap:3rem;
88+
align-items: center;
89+
justify-content: center;
90+
}
91+
92+
.section-showcaseh1 {
93+
font-size:4rem;
94+
color:var(--primary-color);
95+
}
96+
97+
.section-showcasep {
98+
margin:1rem0;
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

Lines changed: 1 addition & 0 deletions
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)
[8]ページ先頭
©2009-2025 Movatter.jp