Skip to content

Commit fcde9b0

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1930 from AdebayoIbrahim/newProject
New project
2 parents 4a709f1 + 8876072 commit fcde9b0

8 files changed

Lines changed: 299 additions & 0 deletions

File tree

‎Projects/Carousel Slider/app.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
let slideCount = 0;
2+
countFunction();
3+
const next = document.querySelector(".next");
4+
const cont = document.querySelectorAll(".image_slder");
5+
const prev = document.querySelector(".previous");
6+
function countFunction() {
7+
const dots = document.querySelectorAll(".dots");
8+
const cont = document.querySelectorAll(".image_slder");
9+
for (i = 0; i < cont.length; i++) {
10+
cont[i].style.display = "none";
11+
}
12+
for (i = 0; i < dots.length; i++) {
13+
if (dots[i].classList.contains("current")) {
14+
dots[i].classList.remove("current");
15+
}
16+
}
17+
18+
cont[slideCount].style.display = "block";
19+
dots[slideCount].classList.add("current");
20+
}
21+
next.addEventListener("click", nextSlide);
22+
prev.addEventListener("click", prevSlide);
23+
24+
function nextSlide() {
25+
slideCount++;
26+
slideCount >= cont.length && (slideCount = 0);
27+
countFunction();
28+
}
29+
function prevSlide() {
30+
slideCount--;
31+
slideCount < 0 && (slideCount = cont.length - 1);
32+
countFunction();
33+
}
34+
setInterval(nextSlide, 5000);

‎Projects/Carousel Slider/images/1973389.jpg‎

400 KB
Loading

‎Projects/Carousel Slider/images/1973394.jpg‎

92.1 KB
Loading

‎Projects/Carousel Slider/images/4000637.png‎

352 KB
Loading

‎Projects/Carousel Slider/images/images.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
#### Contains Images

‎Projects/Carousel Slider/index.css‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
@import url('https://fonts.cdnfonts.com/css/source-sans-pro');
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
body {
8+
font-family: Source Sans Pro, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
9+
}
10+
.navbar {
11+
background: rgb(5, 5, 5);
12+
color: white;
13+
padding: 1rem 5%;
14+
}
15+
header {
16+
display: flex;
17+
justify-content: space-between;
18+
align-items: center;
19+
}
20+
header > .logo {
21+
font-size: 1.4rem;
22+
font-weight: 600;
23+
font-family: Segoe Script, Source Sans Pro;
24+
}
25+
header ul {
26+
margin: 0;
27+
list-style: none;
28+
}
29+
header ul li {
30+
display: inline;
31+
margin-right: 12px;
32+
font-size: 18px;
33+
}
34+
.hero_section {
35+
width: 100%;
36+
height: 85vh;
37+
overflow-x: hidden;
38+
overflow-y: hidden;
39+
}
40+
.container-images {
41+
position: relative;
42+
height: 100%;
43+
}
44+
.image_slder {
45+
height: 100%;
46+
}
47+
.image_slder img {
48+
width: 100%;
49+
height: 100%;
50+
object-fit: cover;
51+
}
52+
53+
.animate {
54+
animation: animate 1s ease-in-out;
55+
}
56+
@keyframes animate {
57+
from {
58+
opacity: 0.3;
59+
}
60+
to {
61+
opacity: 1;
62+
}
63+
}
64+
.dots-track {
65+
display: flex;
66+
justify-content: center;
67+
align-items: center;
68+
text-align: center;
69+
margin-top: -50px;
70+
gap: 5px;
71+
}
72+
.dots-track > div {
73+
width: 20px;
74+
height: 20px;
75+
border-radius: 50%;
76+
background: #ffffff33;
77+
}
78+
79+
.current {
80+
background: #ffffffcc !important;
81+
animation: opacity 1s ease-in-out;
82+
}
83+
@keyframes opacity {
84+
from {
85+
opacity: 0.5;
86+
}
87+
to {
88+
opacity: 1;
89+
}
90+
}
91+
.next {
92+
color: white;
93+
position: absolute;
94+
top: 50%;
95+
right: 10px;
96+
padding: 10px;
97+
cursor: pointer;
98+
background: transparent;
99+
border-radius: 0.3rem;
100+
top: 40%;
101+
font-size: 1.5rem;
102+
transition: background 500ms ease;
103+
user-select: none;
104+
}
105+
.previous {
106+
color: white;
107+
position: absolute;
108+
top: 50%;
109+
left: 10px;
110+
padding: 10px;
111+
cursor: pointer;
112+
background: transparent;
113+
border-radius: 0.3rem;
114+
top: 40%;
115+
font-size: 1.5rem;
116+
transition: background 500ms ease;
117+
user-select: none;
118+
}
119+
.next:hover {
120+
background: rgba(68, 63, 63, 0.7);
121+
}
122+
.previous:hover {
123+
background: rgba(68, 63, 63, 0.7);
124+
}
125+
.hero-text {
126+
position: absolute;
127+
top: 35%;
128+
color: white;
129+
left: 5%;
130+
padding-left: 30px;
131+
animation: slidein 1s ease-out;
132+
/* transform: translate(-20%, -20%); */
133+
}
134+
135+
@keyframes slidein {
136+
from {
137+
transform: translateX(400px);
138+
opacity: 0.3;
139+
}
140+
to {
141+
transform: translateX(0);
142+
opacity: 1;
143+
}
144+
}
145+
.header-text h1 {
146+
font-size: 2em;
147+
}
148+
.header-text p {
149+
max-width: 70%;
150+
padding-block: 1em;
151+
font-size: 20px;
152+
}
153+
.btn-group {
154+
display: flex;
155+
gap: 2rem;
156+
}
157+
.btn-group button {
158+
text-align: center;
159+
padding: 0.5rem 2rem;
160+
font-family: Source Sans Pro, Poppins, verdana;
161+
border: 1px solid white;
162+
color: white;
163+
background: transparent;
164+
cursor: pointer;
165+
font-size: 0.9em;
166+
}
167+
.btn-group button:hover {
168+
background: white;
169+
color: black;
170+
}

‎Projects/Carousel Slider/index.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
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>Webpage</title>
7+
<link rel="stylesheet" href="./index.css" />
8+
<script src="./app.js" defer></script>
9+
</head>
10+
<body>
11+
<div id="root">
12+
<div class="navbar">
13+
<header>
14+
<div class="logo">GamerZone</div>
15+
<div class="list">
16+
<ul>
17+
<li>Home</li>
18+
<li>About</li>
19+
<li>Contact</li>
20+
</ul>
21+
</div>
22+
</header>
23+
</div>
24+
<section class="hero_section">
25+
<div class="container-images">
26+
<div class="image_slder animate">
27+
<img src="./images/1973389.jpg" alt="" />
28+
<div class="hero-text">
29+
<div class="text-container">
30+
<div class="header-text">
31+
<h1>Welcome To The World Of Gamers</h1>
32+
<p>
33+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
34+
Minus quasi pariatur, mollitia vero fugiat repellendus
35+
explicabo quod voluptas necessitatibus omnis!
36+
</p>
37+
</div>
38+
<div class="btn-group">
39+
<button class="explore">Explore</button>
40+
<button class="learnmore">Learn More</button>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
<div class="image_slder animate">
46+
<img src="./images/1973394.jpg" alt="" />
47+
<div class="hero-text">
48+
<div class="text-container">
49+
<div class="header-text">
50+
<h1>Gaming At Its Core With Latest Chips</h1>
51+
<p>
52+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
53+
Voluptatibus, corporis itaque? Impedit tenetur recusandae
54+
repudiandae optio maxime iure fugiat in.
55+
</p>
56+
</div>
57+
<div class="btn-group">
58+
<button class="explore">Explore</button>
59+
<button class="learnmore">Learn More</button>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
<div class="image_slder animate">
65+
<img src="./images/4000637.png" alt="" />
66+
<div class="hero-text">
67+
<div class="text-container">
68+
<div class="header-text">
69+
<h1>Meet Top Gamers From Across The World</h1>
70+
<p>
71+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
72+
Minus quasi pariatur, mollitia vero fugiat repellendus
73+
explicabo quod voluptas necessitatibus omnis!
74+
</p>
75+
</div>
76+
<div class="btn-group">
77+
<button class="explore">Explore</button>
78+
<button class="learnmore">Learn More</button>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
<div class="dots-track">
84+
<div class="dots"></div>
85+
<div class="dots"></div>
86+
<div class="dots"></div>
87+
</div>
88+
<div class="previous">&#10094;</div>
89+
<div class="next">&#10095;</div>
90+
</div>
91+
</section>
92+
</div>
93+
</body>
94+
</html>

‎Projects/Carousel Slider/screenshot-pull-img.png‎

527 KB
Loading

0 commit comments

Comments
 (0)