Skip to content

Commit 53003bc

Browse files
committed
some new changes
1 parent a5d0ad1 commit 53003bc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+213
-29
lines changed

NIKE_Store_WebDesign/image/bg1.png

406 KB
3.38 KB
75.8 KB
23.7 KB
154 KB

NIKE_Store_WebDesign/image/google.png

8.57 KB
803 KB

NIKE_Store_WebDesign/image/logo.png

48.3 KB
1.43 MB
176 KB
31.2 KB
130 KB

NIKE_Store_WebDesign/image/nike.png

86.8 KB
570 KB
366 KB
289 KB
274 KB

NIKE_Store_WebDesign/image/shoes.png

401 KB

NIKE_Store_WebDesign/image/shoes1.png

512 KB

NIKE_Store_WebDesign/image/shoes2.png

478 KB

NIKE_Store_WebDesign/image/shoes3.png

619 KB

NIKE_Store_WebDesign/image/shoes4.png

781 KB

NIKE_Store_WebDesign/image/shoes5.png

486 KB

NIKE_Store_WebDesign/image/shoes6.png

538 KB

NIKE_Store_WebDesign/image/shoes7.png

486 KB

NIKE_Store_WebDesign/image/shoes8.png

419 KB
5.91 KB

Object&Classws/index.html renamed to NIKE_Store_WebDesign/index.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Last class</title>
6+
<title>NIKE</title>
7+
<link rel="shortcut icon" href="image/logo.png">
8+
<link rel="stylesheet" href="styl.css">
79
</head>
810
<body>
9-
<script src="object.js"></script>
11+
1012
</body>
1113
</html>
File renamed without changes.

Object&Classws/object.js

Lines changed: 0 additions & 14 deletions
This file was deleted.

Object&Classws/style.css

Whitespace-only changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.

magicNavbar/algo.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const list = document.querySelectorAll('.list');
2+
3+
function activeLink() {
4+
list.forEach((item) =>
5+
item.classList.remove('active'));
6+
this.classList.add('active');
7+
8+
}
9+
10+
list.forEach((item) =>
11+
item.addEventlistener('click', activeLink));
12+

magicNavbar/index.html

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="styl.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
9+
</head>
10+
<body>
11+
<div class="navBar">
12+
<ul>
13+
<li class="list active">
14+
<a href="#">
15+
<span class="icon">
16+
<i class="fa-solid fa-house"></i>
17+
</span>
18+
<span class="text">Home</span>
19+
<span class="circle"></span>
20+
</a>
21+
</li>
22+
<li class="list active">
23+
<a href="#">
24+
<span class="icon">
25+
<i class="fa-regular fa-user"></i>
26+
</span>
27+
<span class="text">User</span>
28+
<span class="circle"></span>
29+
</a>
30+
</li>
31+
<li class="list active">
32+
<a href="#">
33+
<span class="icon">
34+
<i class="fa-regular fa-message"></i>
35+
</span>
36+
<span class="text">Message</span>
37+
<span class="circle"></span>
38+
</a>
39+
</li>
40+
<li class="list active">
41+
<a href="#">
42+
<span class="icon">
43+
<i class="fa-solid fa-gear"></i>
44+
</span>
45+
<span class="text">Settings</span>
46+
<span class="circle"></span>
47+
</a>
48+
</li>
49+
<li class="list active">
50+
<a href="#">
51+
<span class="icon">
52+
<i class="fa-regular fa-image"></i>
53+
</span>
54+
<span class="text">Photos</span>
55+
<span class="circle"></span>
56+
</a>
57+
</li>
58+
<div class="indicator"></div>
59+
</ul>
60+
</div>
61+
<script src="algo.js"></script>
62+
</body>
63+
</html>

magicNavbar/styl.css

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: sans-serif;
7+
}
8+
:root {
9+
--clr: #222327;
10+
}
11+
body {
12+
min-height: 100vh;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
background: var(--clr);
17+
}
18+
.navBar {
19+
position: relative;
20+
width: 420px;
21+
height: 70px;
22+
background: linear-gradient(45deg, #2196f3, #e91e63);
23+
display: flex;
24+
align-items: center;
25+
justify-content: center;
26+
border-radius: 10px;
27+
}
28+
.navBar ul {
29+
width: 360px;
30+
display: flex;
31+
}
32+
.navBar ul li{
33+
position: relative;
34+
list-style: none;
35+
width: 70px;
36+
height: 70px;
37+
z-index: 1;
38+
}
39+
.navBar ul li a {
40+
position: relative;
41+
display: flex;
42+
align-items: center;
43+
justify-content: center;
44+
flex-direction: column;
45+
text-align: center;
46+
width: 100%;
47+
font-weight: 500;
48+
49+
}
50+
.navBar ul li a .icon{
51+
position: relative;
52+
display: block;
53+
line-height: 75px;
54+
font-size: 1.5em;
55+
text-align: center;
56+
color: white;
57+
transition: 0.5s;
58+
59+
}
60+
.navBar ul li.active a .icon {
61+
transform: translateY(-32px);
62+
}
63+
.navBar ul li a .text {
64+
position: absolute;
65+
color: white;
66+
font-weight: 400;
67+
font-size: 0.75em;
68+
letter-spacing: 0.05em;
69+
transform: translateY(20px);
70+
transition: 0.5s;
71+
opacity: 0;
72+
}
73+
.navBar ul li.activer a .text {
74+
opacity: 1;
75+
transform: translateY(10px);
76+
}
77+
.navBar ul li a .circle {
78+
position: absolute;
79+
display: block;
80+
width: 50px;
81+
height: 50px;
82+
background: transparent;
83+
border-radius: 50%;
84+
border: 1.8px solid white;
85+
transform: translateY(-34px) scale(0);
86+
}
87+
.navBar ul li.active a .circle{
88+
transform: translateY(-34px) scale(1);
89+
}
90+
91+
.indicator {
92+
position: absolute;
93+
top: -45%;
94+
width: 70px;
95+
height: 70px;
96+
background: linear-gradient(45deg, #2196f3, #e91e63);
97+
border: 6px solid var(--clr);
98+
border-radius: 50%;
99+
display: flex;
100+
justify-content: center;
101+
align-items: center;
102+
}
103+
.indicator::before {
104+
content: '';
105+
position: absolute;
106+
top: 43%;
107+
left: -22px;
108+
width: 20px;
109+
height: 20px;
110+
background: transparent;
111+
border-top-right-radius: 20px;
112+
box-shadow: 1px -10px var(--clr);
113+
}
114+
.indicator::after{
115+
content: '';
116+
position: absolute;
117+
top: 43%;
118+
right: -22px;
119+
width: 20px;
120+
height: 20px;
121+
background: transparent;
122+
border-top-left-radius: 20px;
123+
box-shadow: -1px -10px 0 var(--clr);
124+
}
125+
126+
.navBar ul li:nth-child(1).active~.indicator {
127+
transform: translateX(calc(70px*0));
128+
}
129+
.navBar ul li:nth-child(2).active~.indicator {
130+
transform: translateX(calc(70px*1));
131+
}
132+
133+
134+

profileCard/index.html

Lines changed: 0 additions & 13 deletions
This file was deleted.

profileCard/profile pic.jpg

-553 KB
Binary file not shown.

0 commit comments

Comments
 (0)