Newer
Older
html, body {
margin: 0;
padding: 0;
background: #1c1c1c;
color: white;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
.header {
padding: 0 1rem;
text-align: center;
min-height: 5rem;
line-height: 5rem;
background: hsla(208, 56%, 46%, 1);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.container .card {
width: 100%;
margin: 1rem 0;
border: 1px solid hsla(208, 56%, 46%, 1);
border-radius: .25rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
@media screen and (min-width: 700px) {
.container .card {
width: 48%;
}
}
@media screen and (min-width: 1000px) {
.container .card {
width: 32%;
}
}
@media screen and (min-width: 1500px) {
.container .card {
width: 23%;
}
}
.card-header, .card-body, .card-footer {
padding: 1rem;
border-radius: .25rem;
}
.container .card-header, .container .card-footer {
background: #292929;
}
.card-header h4 {
font-size: 1.5rem;
margin: 0;
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
}
.card-header .text-muted {
color: #e6e6e6;
}
.card-body {
line-height: 1.5;
}
.card-body h5 {
margin: 0;
margin-bottom: 0.5rem;
font-size: 1.25rem;
line-height: 1.2;
}
.card-footer .btn {
background: hsla(208, 56%, 46%, 1);
padding: 0.5rem;
border-radius: 0.25rem;
color: white;
text-decoration: none;
display: inline-block;
margin-bottom: 0.5rem;
}
.card-footer .btn:hover {
background: hsla(208, 56%, 36%, 1);
}
.card-footer a {
color: hsla(208, 56%, 56%, 1);
}
.card-footer a:hover {
color: hsla(208, 56%, 46%, 1);
}
.container .card-body {
flex: 1 1 auto;
}
margin-top: 0.5rem;
height: 1em;
width: 1.5em;
object-fit: cover;
border: 1px solid white;
}
.footer {
margin-top: 1rem;
text-align: center;
height: 3rem;
}
.footer a {
color: hsla(208, 56%, 56%, 1);