Skip to content

Commit 9368336

Browse files
solygambassolygambas
committed
add sneaker shop
1 parent 0611d51 commit 9368336

File tree

3 files changed

+344
-0
lines changed

3 files changed

+344
-0
lines changed

Diff for: ‎85-sneaker shop/index.html

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!-- Based on Build a Modern Landing Page Website by Kevin Powell for Traversy Media (2020)
2+
see: https://www.youtube.com/watch?v=X1dz0xRbSJc -->
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>Great Sneakers Inc.</title>
11+
</head>
12+
<body>
13+
<header class="hero">
14+
<div class="container spacing">
15+
<h1 class="primary-title">Amazing sneakers at an amazing price</h1>
16+
<p>
17+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam
18+
perspiciatis facilis beatae laudantium quidem enim sit sequi!
19+
</p>
20+
<a href="#" class="btn">See what we have</a>
21+
</div>
22+
</header>
23+
<main>
24+
<section class="featured">
25+
<div class="container">
26+
<h2 class="section-title">Featured sneakers</h2>
27+
<div class="split">
28+
<a href="#" class="featured__item">
29+
<img
30+
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-4.png?raw=true"
31+
alt=""
32+
class="featured__img"
33+
/>
34+
<p class="featured__details">
35+
<span class="price">$99</span>shoe name
36+
</p>
37+
</a>
38+
<a href="#" class="featured__item">
39+
<img
40+
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-5.png?raw=true"
41+
alt=""
42+
class="featured__img"
43+
/>
44+
<p class="featured__details">
45+
<span class="price">$99</span>shoe name
46+
</p>
47+
</a>
48+
<a href="#" class="featured__item">
49+
<img
50+
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-6.png?raw=true"
51+
alt=""
52+
class="featured__img"
53+
/>
54+
<p class="featured__details">
55+
<span class="price">$99</span>shoe name
56+
</p>
57+
</a>
58+
</div>
59+
</div>
60+
</section>
61+
<section class="our-products">
62+
<div class="container">
63+
<h2 class="section-title">Our sneakers</h2>
64+
<article class="product shoe-red spacing">
65+
<img
66+
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-1.png?raw=true"
67+
alt=""
68+
class="product__image"
69+
/>
70+
<h3 class="product__title">A really nice shoe</h3>
71+
<p class="product__description">
72+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam
73+
perspiciatis facilis beatae laudantium quidem enim sit sequi!
74+
</p>
75+
<a href="" class="btn">Buy now</a>
76+
</article>
77+
78+
<article class="product shoe-white shoe-left spacing">
79+
<img
80+
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-2.png?raw=true"
81+
alt=""
82+
class="product__image"
83+
/>
84+
<h3 class="product__title">A really nice shoe</h3>
85+
<p class="product__description">
86+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam
87+
perspiciatis facilis beatae laudantium quidem enim sit sequi!
88+
</p>
89+
<a href="" class="btn">Buy now</a>
90+
</article>
91+
92+
<article class="product shoe-blue spacing">
93+
<img
94+
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-3.png?raw=true"
95+
alt=""
96+
class="product__image"
97+
/>
98+
<h3 class="product__title">A really nice shoe</h3>
99+
<p class="product__description">
100+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam
101+
perspiciatis facilis beatae laudantium quidem enim sit sequi!
102+
</p>
103+
<a href="" class="btn">Buy now</a>
104+
</article>
105+
</div>
106+
</section>
107+
</main>
108+
</body>
109+
</html>

Diff for: ‎85-sneaker shop/style.css

+234
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&display=swap");
2+
3+
*,
4+
*::before,
5+
*::after {
6+
box-sizing: border-box;
7+
}
8+
9+
/* layout */
10+
11+
body {
12+
font-family: "Noto Sans JP", sans-serif;
13+
margin: 0;
14+
line-height: 1.6;
15+
}
16+
17+
img {
18+
max-width: 100%;
19+
display: block;
20+
}
21+
22+
h1,
23+
h2,
24+
h3,
25+
p {
26+
margin: 0;
27+
}
28+
29+
section {
30+
padding: 7rem 0;
31+
}
32+
33+
.container {
34+
width: 85%;
35+
max-width: 65rem;
36+
margin: 0 auto;
37+
}
38+
39+
.split {
40+
display: flex;
41+
flex-wrap: wrap;
42+
gap: 1rem;
43+
justify-content: center;
44+
}
45+
46+
.split > * {
47+
flex-basis: 30%; /* 100% by default on small screens */
48+
min-width: 15rem;
49+
}
50+
51+
/* target any direct child of spacing */
52+
.spacing > * + * {
53+
margin-top: var(--spacer, 2rem);
54+
}
55+
56+
.btn {
57+
display: inline-block;
58+
text-decoration: none;
59+
color: var(--clr-text, #fff);
60+
font-weight: 700;
61+
background-color: var(--clr-accent, blue);
62+
text-transform: uppercase;
63+
font-size: 1.125rem;
64+
padding: 0.5rem 1.25rem;
65+
border-radius: 0.25rem;
66+
transition: transform 250ms ease-in-out, opacity 250ms linear;
67+
}
68+
69+
.btn:hover,
70+
.btn:focus {
71+
transform: scale(1.1);
72+
opacity: 0.9;
73+
}
74+
75+
/* hero section */
76+
77+
.primary-title {
78+
font-size: 4rem;
79+
font-size: clamp(3rem, calc(5vw + 1rem), 4.5rem); /* responsive font */
80+
line-height: 1;
81+
text-transform: uppercase;
82+
}
83+
84+
.section-title {
85+
text-align: center;
86+
font-size: 3.5rem;
87+
font-size: clamp(2.5rem, calc(5vw + 1rem), 4rem);
88+
line-height: 1;
89+
color: #17353d;
90+
margin-bottom: 5rem;
91+
}
92+
93+
.hero {
94+
text-align: center;
95+
padding: 15rem 0;
96+
color: white;
97+
background: #222; /* fallback if blend mode is not supported */
98+
}
99+
100+
@supports (background-blend-mode: multiply) {
101+
.hero {
102+
background: url(https://github.com/kevin-powell/shoes/blob/master/img/shoe-3.png?raw=true),
103+
radial-gradient(#444, #111);
104+
background-blend-mode: multiply;
105+
background-attachment: fixed;
106+
background-repeat: no-repeat;
107+
background-position: center center;
108+
}
109+
}
110+
111+
/* featured section */
112+
113+
.featured {
114+
background: #eee;
115+
}
116+
117+
.featured__item {
118+
display: block;
119+
position: relative;
120+
text-decoration: none;
121+
color: #333;
122+
text-align: center;
123+
line-height: 1.2;
124+
transform: scale(0.85);
125+
transition: transform 250ms ease-in-out;
126+
}
127+
128+
.featured__item:hover,
129+
.featured__item:focus {
130+
transform: scale(1);
131+
}
132+
133+
/* circles */
134+
.featured__item::after {
135+
content: "";
136+
position: absolute;
137+
top: 10%;
138+
left: 10%;
139+
padding: 75% 75% 0 0; /* padding trick to get a circle */
140+
border-radius: 50%;
141+
background: #2193b0;
142+
z-index: -1;
143+
}
144+
145+
.featured__details {
146+
opacity: 0;
147+
transition: opacity 250ms linear;
148+
}
149+
150+
.featured__item:hover .featured__details,
151+
.featured__item:focus .featured__details {
152+
opacity: 1;
153+
text-shadow: 0 0 2rem white; /* to prevent overlapping */
154+
}
155+
156+
.featured__details span {
157+
display: block;
158+
font-weight: 700;
159+
font-size: 2.5rem;
160+
}
161+
162+
/* product section */
163+
164+
.product {
165+
background: radial-gradient(
166+
var(--clr-inner, limegreen),
167+
var(--clr-outer, purple)
168+
);
169+
padding: 3rem;
170+
border-radius: 1rem;
171+
margin-bottom: 5rem;
172+
text-align: center;
173+
}
174+
175+
.product__title {
176+
font-size: clamp(3rem, calc(5vw + 1rem), 5.5rem);
177+
text-transform: uppercase;
178+
line-height: 1;
179+
color: #fff;
180+
text-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.2);
181+
}
182+
183+
.product__image {
184+
margin: -5rem 0 0 0;
185+
}
186+
187+
@media (min-width: 45rem) {
188+
.product {
189+
text-align: left;
190+
margin-bottom: 9rem;
191+
}
192+
193+
.product__title {
194+
margin: 0;
195+
}
196+
197+
.product__image {
198+
float: right;
199+
width: 65%;
200+
shape-outside: url(https://github.com/kevin-powell/shoes/blob/master/img/shoe-1.png?raw=true); /* text will wrap the shoe */
201+
shape-margin: 1rem;
202+
margin: 0 -5rem 0 0;
203+
}
204+
205+
.product.shoe-left .product__image {
206+
float: left;
207+
shape-outside: url(https://github.com/kevin-powell/shoes/blob/master/img/shoe-2.png?raw=true);
208+
margin: 0 0 0 -5em;
209+
shape-margin: 2em;
210+
}
211+
}
212+
213+
/* customize CSS variables */
214+
.hero {
215+
--clr-accent: #faa700;
216+
}
217+
218+
.shoe-red {
219+
--clr-inner: #faa700;
220+
--clr-outer: #e48d00;
221+
--clr-accent: #a1173c;
222+
}
223+
224+
.shoe-white {
225+
--clr-inner: #fce4b3;
226+
--clr-outer: #eac886;
227+
--clr-accent: #2f4858;
228+
}
229+
230+
.shoe-blue {
231+
--clr-inner: #6dd5ed;
232+
--clr-outer: #2193b0;
233+
--clr-accent: #008951;
234+
}

Diff for: ‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090
| 82 | [Parallax Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/82-parallax%20landing%20page) | [Live Demo](https://codepen.io/solygambas/full/ExZxxRo) |
9191
| 83 | [Full-Screen Image Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/83-full%20screen%20image%20slider) | [Live Demo](https://codepen.io/solygambas/full/JjEoEdb) |
9292
| 84 | [Fluid Image Lightbox](https://github.com/solygambas/html-css-fifty-projects/tree/master/84-fluid%20image%20lightbox) | [Live Demo](https://codepen.io/solygambas/full/MWJKpwg) |
93+
| 85 | [Sneaker Shop](https://github.com/solygambas/html-css-fifty-projects/tree/master/85-sneaker%20shop) | [Live Demo](https://codepen.io/solygambas/full/KKazqNZ) |
9394

9495
This repository is mostly based on 2 courses by Brad Traversy (2020):
9596

0 commit comments

Comments
 (0)