Skip to content

Commit ffa8ac0

Browse files
AmolShelke2AmolShelke2
committed
Added Nike shoe design
1 parent 5217f2a commit ffa8ac0

File tree

3 files changed

+171
-0
lines changed

3 files changed

+171
-0
lines changed

‎Nike-shoe-design/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Nike shoe design
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> </p>
5+
6+
# preview
7+
8+
<img src="/Nike-shoe-design/shoePreview.png">

‎Nike-shoe-design/index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Nike Shoe-design</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
12+
/>
13+
</head>
14+
<body>
15+
<a href="#" class="hamburger">
16+
<i class="fas fa-bars"></i>
17+
</a>
18+
19+
<a href="#" class="phone"><i class="fas fa-phone"></i></a>
20+
21+
<div class="logo">
22+
<i class="fas fa-shoe-prints"></i>
23+
<h2>The best shoes</h2>
24+
<p>Find the right fit for you</p>
25+
</div>
26+
27+
<div class="carouse1-container">
28+
<div class="carouse1" id="carouse1">
29+
<div class="slide" data-bg="cb031c">
30+
<img src="shoe-1.jpg" alt="" />
31+
<h1>Performance</h1>
32+
<a href="#">Learn more</a>
33+
</div>
34+
35+
<button id="left" class="left-arrow arrow">
36+
<i class="fas fa-chevron-left"></i>
37+
</button>
38+
39+
<button id="right" class="right-arrow arrow">
40+
<i class="fas fa-chevron-right"></i>
41+
</button>
42+
</div>
43+
</div>
44+
</body>
45+
</html>

‎Nike-shoe-design/style.css

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
2+
@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap");
3+
4+
* {
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
background-color: #cb021c;
10+
font-family: "Roboto", sans-serif;
11+
margin: 0;
12+
transition: background 0.4s ease-in-out;
13+
}
14+
15+
a {
16+
color: white;
17+
text-decoration: none;
18+
}
19+
20+
.hamburger {
21+
position: fixed;
22+
top: 2rem;
23+
left: 2rem;
24+
font-size: 3rem;
25+
}
26+
27+
.phone {
28+
position: fixed;
29+
top: 2rem;
30+
right: 2rem;
31+
font-size: 3rem;
32+
}
33+
34+
.logo {
35+
color: white;
36+
font-size: 1.7rem;
37+
margin: 2rem 0;
38+
text-align: center;
39+
}
40+
41+
.logo i {
42+
font-size: 3rem;
43+
}
44+
45+
.logo h2 {
46+
font-weight: normal;
47+
margin: 0;
48+
font-family: "Nanum Gothic", sans-serif;
49+
}
50+
51+
.logo p {
52+
color: #1f1f1f;
53+
font-weight: bold;
54+
margin: 0;
55+
font-family: "Nanum Gothic", sans-serif;
56+
}
57+
58+
.carouse1-container {
59+
overflow: hidden;
60+
position: absolute;
61+
height: 60vh;
62+
width: 100vw;
63+
margin-top: 10rem;
64+
}
65+
66+
.carouse1 {
67+
display: flex;
68+
position: absolute;
69+
left: 0;
70+
top: 0;
71+
transform: translateX(0);
72+
transition: transform 0.4s ease-in-out;
73+
}
74+
75+
.slide {
76+
width: 100vw;
77+
text-align: center;
78+
}
79+
80+
.slide img {
81+
object-fit: cover;
82+
height: 400px;
83+
width: 400px;
84+
}
85+
86+
.slide h1 {
87+
color: white;
88+
font-size: 4rem;
89+
margin-top: -2rem;
90+
font-family: "Nanum Gothic", sans-serif;
91+
}
92+
93+
.slide a {
94+
background-color: #1f1f1f;
95+
padding: 1rem 2rem;
96+
font-size: 1.5rem;
97+
border-radius: 4px;
98+
}
99+
100+
.arrow {
101+
background-color: transparent;
102+
border: 0;
103+
cursor: pointer;
104+
position: absolute;
105+
top: 30%;
106+
transform: translateY(-50%);
107+
font-size: 5rem;
108+
color: black;
109+
opacity: 0.5;
110+
}
111+
112+
.left-arrow {
113+
left: 2rem;
114+
}
115+
116+
.right-arrow {
117+
right: 2rem;
118+
}

0 commit comments

Comments
 (0)