-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
86 lines (76 loc) · 1.52 KB
/
style.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
80
81
82
83
84
85
86
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@500&display=swap');
body {
font-family:'M Plus 1 Code',sans-sarif;
background-image:url('https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height:100vh;
margin:0;
counter-reset: day;
}
.container {
background:transparent;
margin:50px auto;
display: flex;
flex-wrap: wrap;
justify-content:center;
}
.day {
position:absolute;
color:#fff;
background-color:#000;
padding:2px;
font-size:12px;
}
.day::after{
counter-increment: day;
content: counter(day);
}
.title {
color:#111;
background-color:#fff;
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
padding:5px;
font-size:24px;
}
.card {
margin:20px 15px;
font-size:12px;
color:#000;
background-color:#fff;
box-shadow:6px 6px 8px rgba(0, 0, 0, 0.4), 6px 6px 8px rgba(0, 0, 0, 0.4);
height:220px;
width:250px;
cursor:pointer;
text-align: center;
}
.card:hover{
transform:scale(1.05);
transition:transform 0.3s ease;
outline:none;
}
.card img {
width:250px;
height:80%;
overflow:hidden;
}
.card-info h2 {
font-size: 14px;
margin: 12px;
}
a{
text-decoration:none;
}
@media(max-width:600px){
.title {
font-size:18px;
display: inline;
width: 300px;
text-align: center;
}
}