Skip to content

Commit 8137ec4

Browse files
codingstellacodingstella
authored
Add files via upload
1 parent b4bb3ee commit 8137ec4

File tree

100 files changed

+4091
-0
lines changed

Some content is hidden

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

100 files changed

+4091
-0
lines changed

‎Neon Navigation/Neon Navigation.zip

1.07 KB
Binary file not shown.

‎Neon Navigation/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CodePen - Menu hover glow</title>
6+
<link rel="stylesheet" href="./style.css">
7+
8+
</head>
9+
<body>
10+
<!-- partial:index.partial.html -->
11+
<ul>
12+
<li style="--clr:#00ade1">
13+
<a href="#" data-text="&nbsp;Home">&nbsp;Home&nbsp;</a>
14+
</li>
15+
<li style="--clr:#ff6492">
16+
<a href="#" data-text="&nbsp;About">&nbsp;About&nbsp;</a>
17+
</li>
18+
<li style="--clr:#ffdd1c">
19+
<a href="#" data-text="&nbsp;Services">&nbsp;Services&nbsp;</a>
20+
</li>
21+
<li style="--clr:#00dc82">
22+
<a href="#" data-text="&nbsp;Blog">&nbsp;Blog&nbsp;</a>
23+
</li>
24+
<li style="--clr:#dc00d4">
25+
<a href="#" data-text="&nbsp;Contact">&nbsp;Contact&nbsp;</a>
26+
</li>
27+
</ul>
28+
<!-- partial -->
29+
30+
</body>
31+
</html>

‎Neon Navigation/style.css

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
2+
* {
3+
box-sizing: border-box;
4+
padding: 0;
5+
margin: 0;
6+
font-family: 'Mochiy Pop One', sans-serif;
7+
}
8+
9+
body {
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
min-height: 100vh;
14+
background: #252839;
15+
}
16+
ul {
17+
position: relative;
18+
display: flex;
19+
flex-direction: column;
20+
gap: 30px;
21+
}
22+
ul li {
23+
position: relative;
24+
list-style: none;
25+
}
26+
ul li a {
27+
font-size: 4em;
28+
text-decoration: none;
29+
letter-spacing: 2px;
30+
line-height: 1em;
31+
text-transform: uppercase;
32+
color: transparent;
33+
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
34+
}
35+
ul li a::before {
36+
content: attr(data-text);
37+
position: absolute;
38+
color: var(--clr);
39+
width: 0;
40+
overflow: hidden;
41+
transition: 1s;
42+
border-right: 8px solid var(--clr);
43+
-webkit-text-stroke: 1px var(--clr);
44+
}
45+
ul li a:hover::before {
46+
width: 100%;
47+
filter: drop-shadow(0 0 25px var(--clr))
48+
}

‎Neumorphism Clock/Neumorphism Clock.zip

1.42 KB
Binary file not shown.

‎Neumorphism Clock/index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CodePen - Javascript Clock | CSS Neumorphism Working Analog Clock UI Design</title>
6+
<link rel="stylesheet" href="./style.css">
7+
8+
</head>
9+
<body>
10+
<!-- partial:index.partial.html -->
11+
<div class="clock">
12+
13+
<div class="hour">
14+
<div class="hr" id="hr"></div>
15+
</div>
16+
17+
<div class="min">
18+
<div class="mn" id="mn"></div>
19+
</div>
20+
21+
<div class="sec">
22+
<div class="sc" id="sc"></div>
23+
</div>
24+
25+
</div>
26+
<!-- partial -->
27+
<script src="./script.js"></script>
28+
29+
</body>
30+
</html>

‎Neumorphism Clock/script.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* Follow Coding.stella For More */
2+
3+
const deg = 6;
4+
const hr = document.querySelector('#hr');
5+
const mn = document.querySelector('#mn');
6+
const sc = document.querySelector('#sc');
7+
8+
setInterval(() =>{
9+
10+
let day = new Date();
11+
let hh = day.getHours() * 30;
12+
let mm = day.getMinutes() * deg;
13+
let ss = day.getSeconds() * deg;
14+
15+
hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
16+
mn.style.transform = `rotateZ(${mm}deg)`;
17+
sc.style.transform = `rotateZ(${ss}deg)`;
18+
19+
})

‎Neumorphism Clock/style.css

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
min-height: 100vh;
12+
background: #282828;
13+
}
14+
15+
.clock {
16+
display: flex;
17+
width: 350px;
18+
height: 350px;
19+
justify-content: center;
20+
align-items: center;
21+
background: url(http://samuel-garcia.site/img/clock-sam.png);
22+
background-size: cover;
23+
border: 4px solid #191919;
24+
border-radius: 50%;
25+
box-shadow: -4px -4px 10px rgba(67, 67, 67, 0.5), inset 4px 4px 10px rgba(0, 0, 0, 0.5), inset -4px -4px 10px rgba(67, 67, 67, 0.3), 4px 4px 10px rgba(0, 0, 0, 0.3);
26+
}
27+
28+
.clock:before {
29+
content: "";
30+
position: absolute;
31+
width: 15px;
32+
height: 15px;
33+
background: #747474;
34+
border-radius: 50%;
35+
z-index: 999;
36+
}
37+
38+
.clock .hour,
39+
.clock .min,
40+
.clock .sec {
41+
position: absolute;
42+
}
43+
44+
.clock .hour, .hr {
45+
width: 160px;
46+
height: 160px;
47+
}
48+
49+
.clock .min, .mn {
50+
width: 190px;
51+
height: 190px;
52+
}
53+
54+
.clock .sec, .sc {
55+
width: 230px;
56+
height: 230px;
57+
}
58+
59+
.hr, .mn, .sc {
60+
display: flex;
61+
justify-content: center;
62+
/*align-items: center;*/
63+
position: absolute;
64+
border-radius: 50%;
65+
}
66+
67+
.hr:before {
68+
content: "";
69+
position: absolute;
70+
width: 8px;
71+
height: 80px;
72+
background: #ffb510;
73+
z-index: 9;
74+
border-radius: 6px 6px 0 0;
75+
}
76+
77+
.mn:before {
78+
content: "";
79+
position: absolute;
80+
width: 4px;
81+
height: 90px;
82+
background: #8b8b8b;
83+
z-index: 10;
84+
border-radius: 6px 6px 0 0;
85+
}
86+
87+
.sc:before {
88+
content: "";
89+
position: absolute;
90+
width: 2px;
91+
height: 150px;
92+
background: #e5e5e5;
93+
z-index: 11;
94+
border-radius: 6px 6px 0 0;
95+
}

‎Pagination V1/Pagination V1.zip

1.26 KB
Binary file not shown.

‎Pagination V1/index.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CodePen - Pagination V1</title>
6+
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
7+
8+
</head>
9+
<body>
10+
<!-- partial:index.partial.html -->
11+
<div class="demo">
12+
<nav class="pagination-outer" aria-label="Page navigation">
13+
<ul class="pagination">
14+
<li class="page-item">
15+
<a href="#" class="page-link" aria-label="Previous">
16+
<span aria-hidden="true">« Previous</span>
17+
</a>
18+
</li>
19+
<li class="page-item"><a class="page-link" href="#">1</a></li>
20+
<li class="page-item"><a class="page-link" href="#">2</a></li>
21+
<li class="page-item active"><a class="page-link" href="#">3</a></li>
22+
<li class="page-item"><a class="page-link" href="#">4</a></li>
23+
<li class="page-item"><a class="page-link" href="#">5</a></li>
24+
<li class="page-item">
25+
<a href="#" class="page-link" aria-label="Next">
26+
<span aria-hidden="true">Next »</span>
27+
</a>
28+
</li>
29+
</ul>
30+
</nav>
31+
</div>
32+
<!-- partial -->
33+
34+
</body>
35+
</html>

‎Pagination V1/style.css

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
.pagination-outer {
2+
text-align: center;
3+
}
4+
.pagination {
5+
background: linear-gradient(#e7f4fa, #d4e9f2);
6+
font-family: "Libre Franklin", sans-serif;
7+
padding: 5px;
8+
display: inline-flex;
9+
position: relative;
10+
}
11+
.pagination li a.page-link {
12+
color: #38339d;
13+
background: transparent;
14+
font-size: 18px;
15+
font-weight: 500;
16+
line-height: 35px;
17+
height: 35px;
18+
width: 30px;
19+
padding: 0;
20+
margin: 0 5px;
21+
border: none;
22+
overflow: hidden;
23+
position: relative;
24+
z-index: 1;
25+
transition: all 0.5s ease 0s;
26+
}
27+
.pagination li a.page-link:hover {
28+
color: #000;
29+
}
30+
.pagination li a.page-link:focus,
31+
.pagination li.active a.page-link:hover,
32+
.pagination li.active a.page-link {
33+
color: #000;
34+
background: transparent;
35+
font-weight: 700;
36+
border: none;
37+
}
38+
.pagination li:first-child a.page-link,
39+
.pagination li:last-child a.page-link {
40+
font-size: 15px;
41+
line-height: 37px;
42+
width: auto;
43+
padding: 0 8px;
44+
border-radius: 0;
45+
}
46+
.pagination li a.page-link:before {
47+
content: "";
48+
background: #fff;
49+
width: 100%;
50+
height: 100%;
51+
border: 1px solid #38339d;
52+
border-radius: 5px;
53+
transform: scale(0);
54+
position: absolute;
55+
left: 0;
56+
top: 0;
57+
z-index: -1;
58+
transition: all 0.3s ease 0s;
59+
}
60+
.pagination li a.page-link:hover:before {
61+
transform: scale(1);
62+
}
63+
.pagination li a.page-link:focus:before,
64+
.pagination li.active a.page-link:hover:before,
65+
.pagination li.active a.page-link:before {
66+
transform: scale(0);
67+
}
68+
@media only screen and (max-width: 480px) {
69+
.pagination {
70+
font-size: 0;
71+
display: inline-block;
72+
}
73+
.pagination li {
74+
display: inline-block;
75+
vertical-align: top;
76+
margin: 0 0 10px;
77+
}
78+
}
79+
80+
body {
81+
background-color: #16171e;
82+
}

‎Parallax Scrolling Website/Parallax Scrolling Website.zip

772 KB
Binary file not shown.

‎Parallax Scrolling Website/ParallaxScrollingWebsite/image_source.txt

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
Image Source & Attribution
2+
3+
Image Source : https://www.freepik.com
4+
5+
All credit goes to the original creator of this
6+
7+
vector created by freepik
8+
https://www.freepik.com/free-vector/flat-adventure-background-with-mountains_16534142.htm

‎Parallax Scrolling Website/ParallaxScrollingWebsite/images/image_source.txt

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
Image Source & Attribution
2+
3+
Image Source : https://www.freepik.com
4+
5+
All credit goes to the original creator of this
6+
7+
vector created by freepik
8+
https://www.freepik.com/free-vector/flat-adventure-background-with-mountains_16534142.htm

‎Parallax Scrolling Website/ParallaxScrollingWebsite/images/man.png

96.6 KB
Loading

‎Parallax Scrolling Website/ParallaxScrollingWebsite/images/monutain_01.png

81 KB
Loading

‎Parallax Scrolling Website/ParallaxScrollingWebsite/images/monutain_02.png

36.1 KB
Loading

‎Parallax Scrolling Website/ParallaxScrollingWebsite/images/plants.png

119 KB
Loading

‎Parallax Scrolling Website/ParallaxScrollingWebsite/images/trees_01.png

41.3 KB
Loading

‎Parallax Scrolling Website/ParallaxScrollingWebsite/images/trees_02.png

58.5 KB
Loading

0 commit comments

Comments
 (0)