12 |
13 |
Explore The World
14 |
15 |
16 |
Wild Forest
17 |
18 |
19 |
Sunny Beach
20 |
21 |
22 |
City on Winter
23 |
24 |
25 |
Mountains - Clouds
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/expanding_cards/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Muli:wght@400;700&display=swap");
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 | body {
7 | font-family: "Muli", sans-serif;
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 | overflow: hidden;
12 | margin: 0;
13 | height: 100vh;
14 | }
15 |
16 | .container {
17 | display: flex;
18 | width: 80vw;
19 | }
20 |
21 | .panel {
22 | background-size: auto 100%;
23 | background-position: center;
24 | background-repeat: no-repeat;
25 | height: 80vh;
26 | border-radius: 50px;
27 | color: white;
28 | cursor: pointer;
29 | flex: 0.5;
30 | margin: 10px;
31 | position: relative;
32 | transition: all 0.7s ease-in;
33 | }
34 |
35 | .panel h3 {
36 | text-align: center;
37 | font-size: 24;
38 | position: absolute;
39 | width: 100%;
40 | bottom: 20px;
41 | margin: 0;
42 | opacity: 0;
43 | }
44 |
45 | .panel.active {
46 | flex: 5;
47 | }
48 |
49 | .panel.active h3 {
50 | transition: all 0.3s ease-in 0.4s;
51 | opacity: 1;
52 | }
53 |
54 | @media (max-width: 480px) {
55 | .container {
56 | width: 100vw;
57 | }
58 | .panel:nth-of-type(4),
59 | .panel:nth-of-type(5) {
60 | display: none;
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/progress-steps/app.js:
--------------------------------------------------------------------------------
1 | const progress = document.querySelector('#progress');
2 | const circles = document.querySelectorAll('.circle');
3 | const prev = document.querySelector('#prev');
4 | const next = document.querySelector('#next');
5 |
6 | let currentActive = 1;
7 |
8 | next.addEventListener('click', () => {
9 | currentActive++;
10 | if (currentActive > circles.length) {
11 | currentActive = circles.length;
12 | }
13 | update();
14 | })
15 |
16 | prev.addEventListener('click', () => {
17 | currentActive--;
18 | if (currentActive < 1) {
19 | currentActive = 1;
20 | }
21 | update();
22 | })
23 |
24 | function update(params) {
25 | for (let i = 0; i < circles.length; i++) {
26 | if (i < currentActive) {
27 | circles[i].classList.add('active');
28 | }
29 | else {
30 | circles[i].classList.remove('active');
31 | }
32 | }
33 | if (currentActive === 1) {
34 | prev.disabled = true;
35 | }
36 | else if (currentActive === circles.length) {
37 | next.disabled = true;
38 | }
39 | else {
40 | next.disabled = false;
41 | prev.disabled = false;
42 | }
43 | const actives = document.querySelectorAll('.active')
44 | progress.style.width = `${((actives.length - 1) / (circles.length - 1) * 100)}%`;
45 | }
--------------------------------------------------------------------------------
/progress-steps/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
progress-steps
9 |
10 |
11 |
12 |
13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
19 |
Prev
20 |
Next
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/progress-steps/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Muli:wght@400;700&display=swap");
2 |
3 | :root {
4 | --line-border-fill: #3498db;
5 | --line-border-empty: #e0e0e0;
6 | }
7 |
8 | * {
9 | box-sizing: border-box;
10 | }
11 |
12 | body {
13 | background-color: whitesmoke;
14 | font-family: "Muli", sans-serif;
15 | display: flex;
16 | align-items: center;
17 | height: 100vh;
18 | justify-content: center;
19 | overflow: hidden;
20 | margin: 0;
21 | }
22 |
23 | .container {
24 | text-align: center;
25 | }
26 |
27 | .progress-container {
28 | display: flex;
29 | justify-content: space-between;
30 | position: relative;
31 | margin-bottom: 30px;
32 | max-width: 100%;
33 | width: 350px;
34 | }
35 |
36 | .progress {
37 | background-color: var(--line-border-fill);
38 | position: absolute;
39 | top: 50%;
40 | left: 0;
41 | height: 4px;
42 | width: 0%;
43 | transform: translateY(-50%);
44 | z-index: -1;
45 | transition: 0.4s ease;
46 | }
47 |
48 | .progress-container::before {
49 | content: "";
50 | background-color: var(--line-border-empty);
51 | position: absolute;
52 | top: 50%;
53 | left: 0;
54 | height: 4px;
55 | width: 100%;
56 | transform: translateY(-50%);
57 | z-index: -1;
58 | transition: 0.4s ease;
59 | }
60 |
61 | .circle {
62 | background-color: white;
63 | color: var(--line-border-empty);
64 | font-weight: bold;
65 | font-family: inherit;
66 | border-radius: 50%;
67 | height: 30px;
68 | width: 30px;
69 | display: flex;
70 | align-items: center;
71 | justify-content: center;
72 | border: 3px solid var(--line-border-empty);
73 | transition: ease all 0.4s;
74 | }
75 |
76 | .circle.active {
77 | color: grey;
78 | border-color: var(--line-border-fill);
79 | }
80 |
81 | .btn {
82 | background-color: var(--line-border-fill);
83 | color: white;
84 | border-radius: 6px;
85 | cursor: pointer;
86 | font-family: inherit;
87 | font-size: 14px;
88 | border: 0;
89 | padding: 8px 30px;
90 | margin: 5px;
91 | }
92 |
93 | .btn:active {
94 | transform: scale(0.98);
95 | }
96 |
97 | .btn:focus {
98 | outline: none;
99 | }
100 |
101 | .btn:disabled {
102 | background-color: var(--line-border-empty);
103 | cursor: not-allowed;
104 | }
105 |
--------------------------------------------------------------------------------
/rotating-nav/app.js:
--------------------------------------------------------------------------------
1 | const open = document.querySelector('#open');
2 | const close = document.querySelector('#close');
3 | const container = document.querySelector('.container');
4 |
5 | open.addEventListener('click', () => {
6 | container.classList.add('show-nav');
7 | })
8 |
9 | close.addEventListener('click', () => {
10 | container.classList.remove('show-nav');
11 | })
--------------------------------------------------------------------------------
/rotating-nav/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
14 |
rotating nav
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 |
24 |
26 |
27 |
28 |
29 |
Amazing Article
30 |
butterfry
31 |
32 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, corporis
33 | beatae. Minus exercitationem adipisci tenetur eum, magni vitae
34 | similique deserunt atque. Exercitationem dolores quo ad quas laborum
35 | quod, ullam non provident porro magni ab voluptates, asperiores
36 | corrupti similique illum voluptas nemo amet consequatur. Hic at
37 | dolores nobis quod enim illum temporibus esse aspernatur itaque. Omnis
38 | vel laborum deserunt nemo saepe ipsa dolorum suscipit, sed, aspernatur
39 | consequatur esse quasi facere maiores officia repudiandae ab alias
40 | magni nisi! Minus, quibusdam doloremque, suscipit repellendus aliquam
41 | fugit quia provident libero iure eius error. Iste vel nostrum dolore
42 | sapiente veritatis fuga itaque at, natus ducimus?
43 |
44 |
nice image
45 |
49 |
50 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam,
51 | accusantium obcaecati! Architecto inventore deleniti quisquam officiis
52 | eius, eveniet odio. Aliquid dignissimos culpa corporis quis! Eligendi
53 | debitis vel accusamus facere, veritatis dolorum id ipsa eos eum minus
54 | nisi labore praesentium aperiam reprehenderit dolores cumque
55 | voluptates ratione odio odit? Dolor blanditiis ut qui voluptate
56 | ducimus, id unde, dolorum delectus commodi doloremque libero beatae
57 | modi numquam deleniti nesciunt praesentium debitis sit doloribus
58 | voluptatum itaque sunt, eaque nulla accusamus.
59 |
60 |
61 |
62 |
63 |
64 |
65 | Home
67 |
68 | About
70 |
71 | Contact
73 |
74 |
75 |
76 |
77 |
78 |
--------------------------------------------------------------------------------
/rotating-nav/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: "Lato", sans-serif;
9 | margin: 0;
10 | overflow-x: hidden;
11 | background-color: #333333;
12 | color: #222;
13 | }
14 |
15 | .container {
16 | transform-origin: top left;
17 | transition: all 0.5s linear;
18 | background-color: grey;
19 | width: 100vw;
20 | min-height: 100vh;
21 | padding: 50px;
22 | }
23 |
24 | .container.show-nav {
25 | transform: rotate(-20deg);
26 | }
27 |
28 | .circle-container {
29 | position: fixed;
30 | z-index: 100;
31 | top: -90px;
32 | left: -90px;
33 | }
34 |
35 | .circle {
36 | background-color: #ff7979;
37 | height: 180px;
38 | width: 180px;
39 | border-radius: 50%;
40 | position: relative;
41 | transition: all 0.5s linear;
42 | }
43 |
44 | .container.show-nav .circle {
45 | transform: rotate(-70deg);
46 | }
47 |
48 | .circle button {
49 | position: absolute;
50 | top: 50%;
51 | left: 50%;
52 | height: 50px;
53 | background: transparent;
54 | border: 0;
55 | font-size: 24px;
56 | color: white;
57 | cursor: pointer;
58 | }
59 |
60 | .circle button:focus {
61 | outline: none;
62 | }
63 |
64 | .circle button#open {
65 | left: 60%;
66 | }
67 |
68 | .circle button#close {
69 | top: 60%;
70 | transform: rotate(90deg);
71 | transform-origin: top left;
72 | }
73 |
74 | .content img {
75 | max-width: 100%;
76 | }
77 |
78 | .content {
79 | max-width: 1000px;
80 | margin: 50px auto;
81 | }
82 |
83 | .content h1 {
84 | margin: 0;
85 | }
86 |
87 | .content small {
88 | color: #555;
89 | font-style: italic;
90 | }
91 |
92 | .content p {
93 | color: #333;
94 | line-height: 1.5;
95 | }
96 |
97 | .container.show-nav + nav li {
98 | transform: translateX(0);
99 | transition-delay: 0.3s;
100 | }
101 |
102 | nav {
103 | position: fixed;
104 | bottom: 10px;
105 | left: 0px;
106 | z-index: 100;
107 | }
108 |
109 | nav ul {
110 | list-style-type: none;
111 | padding-left: 30px;
112 | }
113 |
114 | nav ul li {
115 | text-transform: uppercase;
116 | color: white;
117 | margin: 30px 0;
118 |
119 | transition: all 0.4s ease-in;
120 | }
121 |
122 | nav ul li i {
123 | font-size: 14px;
124 | }
125 | nav span {
126 | margin: 10px;
127 | }
128 | nav ul li:nth-child(1) {
129 | transform: translateX(-100%);
130 | margin-left: 10px;
131 | }
132 | nav ul li:nth-child(2) {
133 | transform: translateX(-150%);
134 | margin-left: 15px;
135 | }
136 | nav ul li:nth-child(3) {
137 | transform: translateX(-200%);
138 | margin-left: 20px;
139 | }
140 |
--------------------------------------------------------------------------------
/scroll-animation/app.js:
--------------------------------------------------------------------------------
1 | const boxes = document.querySelectorAll('.box');
2 |
3 | window.addEventListener('scroll', checkBoxes);
4 |
5 | checkBoxes();
6 |
7 | function checkBoxes() {
8 | const triggerPoint = window.innerHeight * 0.8;
9 |
10 | for (let box of boxes) {
11 | const boxTop = box.getBoundingClientRect().top;
12 | if (boxTop < triggerPoint - 15) {
13 | box.classList.add('show');
14 | }
15 | else {
16 | box.classList.remove('show');
17 | }
18 | }
19 | }
--------------------------------------------------------------------------------
/scroll-animation/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
scroll-animation
9 |
10 |
11 |
Scroll to see cool Animation
12 |
content
13 |
content
14 |
content
15 |
content
16 |
content
17 |
content
18 |
content
19 |
content
20 |
content
21 |
content
22 |
content
23 |
content
24 |
content
25 |
content
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/scroll-animation/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | background-color: #efedd6;
7 | display: flex;
8 | flex-direction: column;
9 | align-items: center;
10 | justify-content: center;
11 | margin: 0;
12 | overflow-x: hidden;
13 | }
14 |
15 | h1 {
16 | margin: 10px;
17 | }
18 |
19 | .box {
20 | background-color: steelblue;
21 | color: #fff;
22 | display: flex;
23 | align-items: center;
24 | justify-content: center;
25 | width: 400px;
26 | height: 200px;
27 | margin: 10px;
28 | border-radius: 10px;
29 | box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
30 | transform: translateX(400%);
31 | transition: all 0.4s ease;
32 | }
33 |
34 | .box:nth-of-type(even) {
35 | transform: translateX(-400%);
36 | }
37 |
38 | .box.show {
39 | transform: translateX(0);
40 | }
41 |
42 | .box h2 {
43 | font-size: 45px;
44 | }
45 |
--------------------------------------------------------------------------------
/search-widget/app.js:
--------------------------------------------------------------------------------
1 | const search = document.querySelector('.search');
2 | const btn = document.querySelector('.btn');
3 | const input = document.querySelector('.input');
4 |
5 | btn.addEventListener('click', () => {
6 | search.classList.toggle('active');
7 | input.focus();
8 | })
--------------------------------------------------------------------------------
/search-widget/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
14 |
search widget
15 |
16 |
17 |
18 |
20 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/search-widget/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-image: linear-gradient(90deg, #7d5fff, #7158e2);
9 | font-family: "Roboto", sans-serif;
10 | display: flex;
11 | height: 100vh;
12 | align-items: center;
13 | justify-content: center;
14 | overflow: hidden;
15 | margin: 0;
16 | }
17 |
18 | .search {
19 | position: relative;
20 | height: 50px;
21 | }
22 |
23 | .search .input {
24 | border-radius: 7px;
25 | background-color: #fff;
26 | border: 0;
27 | font-size: 18px;
28 | padding: 15px;
29 | height: 50px;
30 | width: 50px;
31 | transition: width 0.3s ease;
32 | }
33 |
34 | .btn {
35 | border-radius: 7px;
36 | background-color: white;
37 | border: 0;
38 | cursor: pointer;
39 | font-size: 24px;
40 | position: absolute;
41 | top: 0;
42 | left: 0;
43 | height: 50px;
44 | width: 50px;
45 | transition: all 0.3s ease;
46 | }
47 |
48 | .btn:focus,
49 | .input:focus {
50 | outline: none;
51 | }
52 |
53 | .search.active .input {
54 | width: 200px;
55 | }
56 |
57 | .search.active .btn {
58 | transform: translateX(182px);
59 | }
60 |
--------------------------------------------------------------------------------
/split-landing-page/app.js:
--------------------------------------------------------------------------------
1 | const left = document.querySelector('.left');
2 | const right = document.querySelector('.right');
3 | const container = document.querySelector('.container');
4 |
5 | left.addEventListener('mouseenter', () => container.classList.add('hover-left'));
6 | left.addEventListener('mouseleave', () => container.classList.remove('hover-left'));
7 |
8 | right.addEventListener('mouseenter', () => container.classList.add('hover-right'));
9 | right.addEventListener('mouseleave', () => container.classList.remove('hover-right'));
--------------------------------------------------------------------------------
/split-landing-page/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Split Landing Page
8 |
9 |
10 |
11 |
12 |
Playstation 5
13 |
Buy Now
14 |
15 |
16 |
XBox Series X
17 |
Buy Now
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/split-landing-page/ps.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elixered/50_Projects/dbb913013cfd4976403c1e67d31c47ec2ae21605/split-landing-page/ps.jpg
--------------------------------------------------------------------------------
/split-landing-page/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2 |
3 | :root {
4 | --left-bg-color: rgba(87, 84, 236, 0.7);
5 | --right-bg-color: rgba(43, 43, 43, 0.8);
6 | --left-btn-hover-color: rgba(87, 84, 236, 1);
7 | --right-button-hover-color: rgba(28, 122, 28, 1);
8 | --hover-width: 75%;
9 | --other-width: 25%;
10 | --speed: 1000ms;
11 | }
12 |
13 | * {
14 | box-sizing: border-box;
15 | }
16 |
17 | body {
18 | font-family: "Roboto", sans-serif;
19 | height: 100vh;
20 | overflow: hidden;
21 | margin: 0;
22 | }
23 |
24 | .container {
25 | position: relative;
26 | width: 100%;
27 | height: 100%;
28 | background: #333;
29 | }
30 |
31 | .btn {
32 | position: absolute;
33 | left: 50%;
34 | transform: translateX(-50%);
35 | top: 40%;
36 | text-decoration: none;
37 | color: white;
38 | border: white solid 0.2rem;
39 | font-size: 1rem;
40 | font-weight: bold;
41 | text-transform: uppercase;
42 | width: 15rem;
43 | padding: 1.5rem;
44 | text-align: center;
45 | }
46 |
47 | .split.left .btn:hover {
48 | background-color: var(--left-btn-hover-color);
49 | border-color: var(--left-btn-hover-color);
50 | }
51 |
52 | .split.right .btn:hover {
53 | background-color: var(--right-button-hover-color);
54 | border-color: var(--right-button-hover-color);
55 | }
56 |
57 | .btn:focus {
58 | outline: none;
59 | }
60 |
61 | h1 {
62 | font-size: 4rem;
63 | color: white;
64 | position: absolute;
65 | left: 50%;
66 | top: 20%;
67 | transform: translateX(-50%);
68 | white-space: nowrap;
69 | }
70 |
71 | .split {
72 | position: absolute;
73 | width: 50%;
74 | height: 100%;
75 | overflow: hidden;
76 | }
77 |
78 | .split.left {
79 | left: 0;
80 | background: url("./ps.jpg");
81 | background-repeat: no-repeat;
82 | background-size: cover;
83 | }
84 |
85 | .split.left::before {
86 | content: "";
87 | position: absolute;
88 | width: 100%;
89 | height: 100%;
90 | background-color: var(--left-bg-color);
91 | }
92 |
93 | .split.right {
94 | right: 0;
95 | background: url("./xbox.jpg");
96 | background-repeat: no-repeat;
97 | background-size: cover;
98 | }
99 |
100 | .split.right::before {
101 | content: "";
102 | position: absolute;
103 | width: 100%;
104 | height: 100%;
105 | background-color: var(--right-bg-color);
106 | }
107 |
108 | .hover-left .left {
109 | width: var(--hover-width);
110 | }
111 |
112 | .hover-left .right {
113 | width: var(--other-width);
114 | }
115 |
116 | .hover-right .left {
117 | width: var(--other-width);
118 | }
119 |
120 | .hover-right .right {
121 | width: var(--hover-width);
122 | }
123 |
124 | .split.left,
125 | .split.right,
126 | .split.left::before,
127 | .split.right::before {
128 | transition: all var(--speed) ease-in-out;
129 | }
130 |
131 | @media (max-width: 850px) {
132 | h1 {
133 | font-size: 2rem;
134 | top: 30%;
135 | }
136 | .btn {
137 | padding: 1.2rem;
138 | width: 12rem;
139 | }
140 | }
141 |
--------------------------------------------------------------------------------
/split-landing-page/xbox.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elixered/50_Projects/dbb913013cfd4976403c1e67d31c47ec2ae21605/split-landing-page/xbox.jpg
--------------------------------------------------------------------------------
49 |