Skip to content

Commit 29f283f

Browse files
author
guldus98
committed
html css and js
1 parent c36bf35 commit 29f283f

File tree

3 files changed

+283
-0
lines changed

3 files changed

+283
-0
lines changed

‎JS Information Card Slider/JS Information Card Slider.css‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,500');
2+
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
3+
body {
4+
margin: 0;
5+
padding: 0;
6+
font-family: 'Ubuntu', sans-serif;
7+
}
8+
#container {
9+
position: relative;
10+
width: 100%;
11+
height: 100vh;
12+
background: #de732d;
13+
overflow: hidden;
14+
transition: 1s;
15+
}
16+
.card{
17+
position: absolute;
18+
left: 50%;
19+
top: 100px;
20+
transform: translateX(-50%);
21+
width: 300px;
22+
height: auto;
23+
border-radius: 15px;
24+
box-shadow: 0px 6px 15px #333;
25+
padding: 20px;
26+
}
27+
.image {
28+
width: 150px;
29+
height: 210px;
30+
background-size: contain;
31+
background-repeat: no-repeat;
32+
margin: 40px auto;
33+
}
34+
h2 {
35+
font-weight: 500;
36+
text-align: center;
37+
margin-bottom: 0;
38+
user-select: none;
39+
}
40+
p {
41+
margin-top: 0;
42+
font-weight: 400;
43+
font-family: 'Open Sans Condensed', sans-serif;
44+
font-weight: bold;
45+
color: rgba(0, 0, 0, 0.64);
46+
padding: 20px;
47+
text-align: center;
48+
margin-bottom: 100px;
49+
user-select: none;
50+
}
51+
.next {
52+
position: absolute;
53+
bottom: 50px;
54+
right: 40px;
55+
font-weight: 500;
56+
cursor: pointer;
57+
}
58+
.prev {
59+
position: absolute;
60+
bottom: 50px;
61+
left: 40px;
62+
font-weight: 500;
63+
cursor: pointer;
64+
}
65+
66+
/* CARD 1 */
67+
.card_1 {
68+
background: #f6f6f6;
69+
transition: 1s;
70+
}
71+
.card_1 .image{
72+
background-image: url("https://png.pngtree.com/png_detail/18/09/10/pngtree-vector-deer-png-clipart_3296362.jpg");
73+
}
74+
.card_1 h2 {
75+
color: #ac5422;
76+
}
77+
.card_1 .next{
78+
color: #ac5422;
79+
}
80+
.card_1 .prev{
81+
color: #ac5422;
82+
}
83+
/* CARD 2 */
84+
.card_2 {
85+
background: #f6f6f6;
86+
transform: translateX(-50%) scale(2);
87+
margin: 1200px;
88+
opacity: 0;
89+
transition: 1.4s;
90+
}
91+
.card_2 .image{
92+
background-image: url("https://png.pngtree.com/element_origin_min_pic/16/12/09/bebaea9d5a190e1a3aee6bebc3c50f23.jpg");
93+
width: 200px;
94+
height: 175px;
95+
}
96+
.card_2 h2{
97+
color: #7c4019
98+
}
99+
.card_2 .next{
100+
color: #7c4019;
101+
}
102+
.card_2 .prev{
103+
color: #7c4019;
104+
}
105+
.card_2.active{
106+
opacity: 1;
107+
margin: 0;
108+
transform: translateX(-50%) scale(1) rotate(10deg);
109+
}
110+
111+
112+
/* CARD 3 */
113+
.card_3 {
114+
background: #f6f6f6;
115+
transform: translateX(-50%) scale(2);
116+
margin: -1200px;
117+
transition: 1.4s;
118+
}
119+
.card_3 .image {
120+
background-image: url("https://png.pngtree.com/element_origin_min_pic/16/07/08/20577f9885dd0d3.jpg");
121+
width: 200px;
122+
height: 175px;
123+
}
124+
.card_3 h2{
125+
color: #8b8b8b
126+
}
127+
.card_3 .next{
128+
color: #8b8b8b;
129+
}
130+
.card_3 .prev{
131+
color: #8b8b8b;
132+
}
133+
.card_3.active{
134+
margin: 0;
135+
transform: translateX(-60%) scale(1) rotate(-7deg);
136+
}
137+
138+
/* CARD 4 */
139+
.card_4 {
140+
background: #f6f6f6;
141+
transform: translateX(-50%) scale(2);
142+
margin: -1200px 1000px;
143+
transition: 1.4s;
144+
}
145+
.card_4 .image {
146+
background-image: url("https://png.pngtree.com/element_origin_min_pic/16/07/09/1457809f52cac1b.jpg");
147+
width: 220px;
148+
margin-bottom: 0;
149+
background-size: 350px 350px;
150+
background-position: center;
151+
}
152+
.card_4 h2{
153+
color: #e8672e
154+
}
155+
.card_4 .next{
156+
color: #e8672e;
157+
}
158+
.card_4 .prev{
159+
color: #e8672e;
160+
}
161+
.card_4.active{
162+
margin: 0;
163+
transform: translateX(-50%) scale(1) rotate(4deg);
164+
}

‎JS Information Card Slider/JS Information Card Slider.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>page</title>
7+
<link rel="stylesheet" type="text/css" href="JS Information Card Slider.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
10+
</head>
11+
<body>
12+
13+
<div id="container">
14+
<div class="container_boxes">
15+
<!-- Card 1 -->
16+
<div class="card card_1" id="card1">
17+
<div class="image"></div>
18+
<h2>The Magnificent Stag</h2>
19+
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
20+
condimentum nibh, ut fermentum massa justo sit amet risus.</p>
21+
<div class="prev" onclick="prev()">PREV</div>
22+
<div class="next" onclick="next()">NEXT</div>
23+
</div>
24+
25+
<!-- Card 2 -->
26+
<div class="card card_2" id="card2">
27+
<div class="image"></div>
28+
<h2>The Courageous Bear</h2>
29+
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
30+
condimentum nibh, ut fermentum massa justo sit amet risus.</p>
31+
<div class="prev" onclick="prev()">PREV</div>
32+
<div class="next" onclick="next()">NEXT</div>
33+
</div>
34+
35+
<!-- Card 3 -->
36+
<div class="card card_3" id="card3">
37+
<div class="image"></div>
38+
<h2>The Sneaky Mouse</h2>
39+
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
40+
condimentum nibh, ut fermentum massa justo sit amet risus.</p>
41+
<div class="prev" onclick="prev()">PREV</div>
42+
<div class="next" onclick="next()">NEXT</div>
43+
</div>
44+
45+
<!-- Card 3 -->
46+
<div class="card card_4" id="card4">
47+
<div class="image"></div>
48+
<h2>The Sneaky Mouse</h2>
49+
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
50+
condimentum nibh, ut fermentum massa justo sit amet risus.</p>
51+
<div class="prev" onclick="prev()">PREV</div>
52+
<div class="next" onclick="next()">NEXT</div>
53+
</div>
54+
55+
</div>
56+
</div>
57+
58+
59+
<script>
60+
61+
// Cards
62+
let card1 = document.getElementById("card1"),
63+
card2 = document.getElementById("card2"),
64+
card3 = document.getElementById("card3"),
65+
card4 = document.getElementById("card4"),
66+
card_length = document.querySelectorAll(".card");
67+
68+
// container
69+
let container = document.getElementById("container");
70+
71+
// Card List
72+
let card_list = [card1, card2, card3, card4];
73+
74+
// next function
75+
let counter = 1;
76+
function next() {
77+
console.log("next:" + counter)
78+
if (counter < card_length.length) {
79+
card_list[counter].classList.add("active");
80+
backgroundFunc(counter);
81+
counter += 1;
82+
}
83+
else {
84+
counter = card_length.length;
85+
}
86+
}
87+
88+
function prev() {
89+
if (counter > 1) {
90+
card_list[counter - 1].classList.remove("active");
91+
counter -= 1;
92+
}
93+
else {
94+
counter = 1;
95+
}
96+
backgroundFunc(counter-1);
97+
console.log("prev:" + counter)
98+
}
99+
100+
// background function
101+
function backgroundFunc(x) {
102+
if (x == 0) {
103+
container.style.background = "#de732d";
104+
}
105+
else if (x == 1) {
106+
container.style.background = "#7c4019";
107+
}
108+
else if (x == 2) {
109+
container.style.background = "#8b8b8b";
110+
}
111+
else if (x == 3) {
112+
container.style.background = "#e8672e"
113+
}
114+
}
115+
116+
</script>
117+
118+
</body>
119+
</html>

‎JS Information Card Slider/JS Information Card Slider.png‎

173 KB
Loading

0 commit comments

Comments
 (0)