Skip to content

Commit e735f5c

Browse files
author
guldus98
committed
html and css
1 parent 75c2188 commit e735f5c

File tree

3 files changed

+173
-0
lines changed

3 files changed

+173
-0
lines changed

‎Responsive Accordion Slider/Responsive Accordion Slider.css

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
2+
@import url('https://fonts.googleapis.com/css?family=Exo+2');
3+
html {
4+
height: 100vh;
5+
}
6+
body {
7+
padding: 0;
8+
margin: 0;
9+
font-family: 'Fjalla One', sans-serif;
10+
background: linear-gradient( #fff, #fefefe, #eaeaea);
11+
}
12+
.accordion {
13+
max-width: 990px;
14+
background: rgba(0, 0, 0, 0.10);
15+
height: 300px;
16+
margin: 20px auto;
17+
display: flex;
18+
box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.47);
19+
flex-direction: row;
20+
cursor: pointer;
21+
margin-bottom: 100px;
22+
}
23+
.box {
24+
position: relative;
25+
height: 100%;
26+
flex: 1;
27+
background-position: left;
28+
background-size: cover;
29+
transition: .7s;
30+
box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.47);
31+
}
32+
.box:hover{
33+
flex: 7;
34+
height: 400px;
35+
}
36+
.a1 {
37+
background-image: url("https://images.pexels.com/photos/1516654/pexels-photo-1516654.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
38+
}
39+
.a2 {
40+
background-image: url("https://images.pexels.com/photos/1056555/pexels-photo-1056555.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
41+
}
42+
.a3 {
43+
background-image: url("https://images.pexels.com/photos/129207/pexels-photo-129207.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
44+
color: #fff;
45+
}
46+
.a4 {
47+
background-image: url("https://images.pexels.com/photos/240038/pexels-photo-240038.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
48+
color: #fff;
49+
}
50+
.a5 {
51+
background-image: url("https://images.pexels.com/photos/220994/pexels-photo-220994.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
52+
}
53+
p {
54+
font-weight: normal;
55+
font-family: 'Exo 2', sans-serif;
56+
}
57+
.text {
58+
position: absolute;
59+
bottom: 0;
60+
opacity: 0;
61+
padding: 10px;
62+
}
63+
.box:hover .text{
64+
opacity:1;
65+
}
66+
h1 {
67+
width: 250px;
68+
text-align: center;
69+
margin: 100px auto 20px auto;
70+
}
71+
@media screen and (max-width: 800px){
72+
body{
73+
margin: 0;
74+
}
75+
.accordion {
76+
flex-direction: column;
77+
height: 700px;
78+
box-shadow: none;
79+
}
80+
.box {
81+
box-shadow: none;
82+
}
83+
.box:hover {
84+
flex: 7;
85+
}
86+
}

‎Responsive Accordion Slider/Responsive Accordion Slider.html

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
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="Responsive Accordion 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+
<h1>Accordion Slider</h1>
14+
15+
<div class="accordion">
16+
17+
<!-- BOX 1 -->
18+
<div class="box a1">
19+
<div class="image_1">
20+
<div class="text">
21+
<h2>Lorem Ipsum</h2>
22+
<p>
23+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
24+
Vestibulum iaculis nisl sed dictum aliquam.
25+
</p>
26+
</div>
27+
</div>
28+
</div>
29+
30+
<!-- BOX 2 -->
31+
<div class="box a2">
32+
<div class="image_2">
33+
<div class="text">
34+
<h2>Lorem Ipsum</h2>
35+
<p>
36+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
37+
Vestibulum iaculis nisl sed dictum aliquam.
38+
</p>
39+
</div>
40+
</div>
41+
</div>
42+
43+
<!-- BOX 3 -->
44+
<div class="box a3">
45+
<div class="image_3">
46+
<div class="text">
47+
<h2>Lorem Ipsum</h2>
48+
<p>
49+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
50+
Vestibulum iaculis nisl sed dictum aliquam.
51+
</p>
52+
</div>
53+
</div>
54+
</div>
55+
56+
<!-- BOX 1 -->
57+
<div class="box a4">
58+
<div class="image_4">
59+
<div class="text">
60+
<h2>Lorem Ipsum</h2>
61+
<p>
62+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
63+
Vestibulum iaculis nisl sed dictum aliquam.
64+
</p>
65+
</div>
66+
</div>
67+
</div>
68+
69+
<!-- BOX 5 -->
70+
<div class="box a5">
71+
<div class="image_5">
72+
<div class="text">
73+
<h2>Lorem Ipsum</h2>
74+
<p>
75+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
76+
Vestibulum iaculis nisl sed dictum aliquam.
77+
</p>
78+
</div>
79+
</div>
80+
</div>
81+
82+
</div>
83+
84+
85+
86+
</body>
87+
</html>

‎Responsive Accordion Slider/Responsive Accordion Slider.png

471 KB
Loading

0 commit comments

Comments
 (0)