-
Notifications
You must be signed in to change notification settings - Fork 0
/
styles.css
79 lines (72 loc) · 2.12 KB
/
styles.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/*fonts*/
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
/* font-size:2rem; */
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
/* to hide scrollbar by default*/
}
.container{
display: flex;
width:90vh;
}
.cards{
background-size:auto 100%;
background-position:center;
background-repeat: no-repeat;
height:80vh;
border-radius:40px;
position:relative;
color:#fff;
cursor:pointer;
flex:0.5;
margin:10px;
transition: flex 0.7s ease-in;
}
.cards h3{
font-size:24px;
position:absolute;
bottom:20px;
left:20px;
margin:0;
opacity: 0;
}
.cards.active{
flex:5;
}
.cards.active h3{
opacity: 1;
transition:opacity 0.3s ease-in 0.4s;
}
/* Background images */
.bg1 {
background-image: url('https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=889&q=80');
}
.bg2 {
background-image: url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80');
}
.bg3 {
background-image: url('https://images.unsplash.com/photo-1519046904884-53103b34b206?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80');
}
.bg4 {
background-image: url('https://images.unsplash.com/photo-1608315398428-c6d76804838d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80');
}
.bg5 {
background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80');
}
@media (max-width:480px){
.container{
width:100vh;
}
.cards:nth-of-type(4),.cards:nth-of-type(5){
display:none;
}
}