html, body {
font-family: Roboto;
}
a {
color: #fd084a;
text-decoration: none;
}
p {
color: #fff;
}
.description {
margin-top: 50px;
}
span.left-arrow, span.right-arrow {
color: #fbfbfb;
cursor: pointer;
display: block;
font-size: 1em;
height: auto;
padding: 1em;
position: absolute;
top: 80%;
transition: all 0.3s ease;
width: auto;
z-index: 999;
}
span.left-arrow:hover, span.right-arrow:hover {
background-color: #87CEEB;
}
.left-arrow {
right: 60px;
}
.right-arrow {
right: 0;
}
.slider {
color: #fbfbfb;
overflow: hidden;
position: relative;
}
.slider .carousel {
height: 200px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.slider .carousel .carousel-footer {
color: #ffffff;
bottom: -80px;
position: relative;
}
.slider .carousel li {
background-image: url(здесь ваш фон);
display: block;
float: left;
height: 300px;
margin: 0;
padding: 70px 0;
position: relative;
text-align: center;
}
.slider .carousel li h3, .slider .carousel li a, .slider .carousel li p {
color: #fbfbfb;
}
@media only screen and (min-width: 780px) {
.slider .carousel li {
width: 700px;
}
}
@media only screen and (min-width: 680px) and (max-width: 779px) {
.slider .carousel li {
width: 600px;
}
}
@media only screen and (min-width: 480px) and (max-width: 679px) {
.slider .carousel li {
width: 400px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.slider .carousel li {
width: 300px;
}
}
@media only screen and (max-width: 319px) {
.slider .carousel li {
width: 200px;
}
}
.feed {
background-color: #fbfbfb;
margin: auto;
}
.feed ul {
width: 100%;
margin: 0;
padding: 0;
}
.feed h3 {
color: #424242;
padding: 0 0.8em;
}
.feed li {
align-items: center;
display: flex;
justify-content: flex-start;
list-style: none;
transition: background-color 0.3s ease;
width: 100%;
}
.feed li a {
color: #0000ff;
margin: 0;
padding: 1em;
}
.feed li:hover {
background-color: #87CEEB;
}
@media only screen and (min-width: 780px) {
.feed {
width: 700px;
}
}
@media only screen and (min-width: 680px) and (max-width: 779px) {
.feed {
width: 600px;
}
}
@media only screen and (min-width: 480px) and (max-width: 679px) {
.feed {
width: 400px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.feed {
width: 300px;
}
}
@media only screen and (max-width: 319px) {
.feed {
width: 200px;
}
}
.wrapper {
align-items: center;
display: flex;
flex-direction: column;
margin: auto;
}