Всем привет!
Подскажите, почему не срабатывают некоторые параметры для блока .slider_title ?
Не срабатывают:
font-size, line-height, color.
Остальные работают.
Как исправить?
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Fashion</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<link rel="stylesheet" href="owl.carousel.css" type="text/css"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="container">
<div class="top">
<div class="top_wrap">
<div class="logo">
<a href="#">
<img src="img/logo.png" alt="">
</a>
</div>
</div>
<div class="menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Shop</a>
</li>
<li>
<a href="#">Women</a>
</li>
<li>
<a href="#">Men</a>
</li>
<li>
<a href="#">find Stories</a>
</li>
</ul>
</div>
<div class="icons">
<div class="icons_cart">
<a href="#">
<img src="img/cart.png" alt="">
</a>
</div>
<div class="icons_search">
<img class="icons_img" src="img/search.png" alt="">
</div>
</div>
</div>
<div class="slider">
<div class="owl-carousel owl-theme">
<div class="slider_item">
<div class="slider_img">
<img src="img/slide.png" alt="">
</div>
<div class="slider_info">
<p class="slider_title">Summer Collection</p>
<p class="slider_type">01 <span>Men's Wear</span></p>
<div class="slider_icons">
<a href="#">
<img src="img/slider-icon.png" alt="">
</a>
<a href="#">
<img src="img/slider-icon2.png" alt="">
</a><a href="#">
<img src="img/slider-icon3.png" alt="">
</a>
</div>
<p>assassssalklkkjkjkmklmklmklmklm,mlmkllklklklklklk
lklklklklklklkljsjdskjdhjksdhskjhskjdhskdhkshskdh
lklklklklkljsdjsdkjskdjskjksdjksjksjdksjkjsdkjsk
lklklklklkljskjsdkjskjdksjksjksjdksjdkjskdjskjs
lklklklklkasjkjkjkjkjkjskjskdjskjskjskdjksjdksd</p>
<a class="slider_btn" href="#">SHOP NOW</a>
</div>
</div>
<div class="slider_item">
<div class="slider_img">
<img src="img/slide2.png" alt="">
</div>
<div class="slider_info">
<p class="slider_title">Summer Collection</p>
<p class="slider_type">01 <span>Men's Wear</span></p>
<div class="slider_icons">
<a href="#">
<img src="img/slider-icon.png" alt="">
</a>
<a href="#">
<img src="img/slider-icon2.png" alt="">
</a><a href="#">
<img src="img/slider-icon3.png" alt="">
</a>
</div>
<p>assassssalklkkjkjkmklmklmklmklm,mlmkllklklklklklk
lklklklklklklkljsjdskjdhjksdhskjhskjdhskdhkshskdh
lklklklklkljsdjsdkjskdjskjksdjksjksjdksjkjsdkjsk
lklklklklkljskjsdkjskjdksjksjksjdksjdkjskdjskjs
lklklklklkasjkjkjkjkjkjskjskdjskjskjskdjksjdksd</p>
<a class="slider_btn" href="#">SHOP NOW</a>
</div>
</div>
<div class="slider_item">
<div class="slider_img">
<img src="img/slide3.png" alt="">
</div>
<div class="slider_info">
<p class="slider_title">Summer Collection</p>
<p class="slider_type">01 <span>Men's Wear</span></p>
<div class="slider_icons">
<a href="#">
<img src="img/slider-icon.png" alt="">
</a>
<a href="#">
<img src="img/slider-icon2.png" alt="">
</a><a href="#">
<img src="img/slider-icon3.png" alt="">
</a>
</div>
<p>assassssalklkkjkjkmklmklmklmklm,mlmkllklklklklklk
lklklklklklklkljsjdskjdhjksdhskjhskjdhskdhkshskdh
lklklklklkljsdjsdkjskdjskjksdjksjksjdksjkjsdkjsk
lklklklklkljskjsdkjskjdksjksjksjdksjdkjskdjskjs
lklklklklkasjkjkjkjkjkjskjskdjskjskjskdjksjdksd</p>
<a class="slider_btn" href="#">SHOP NOW</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700&subset=cyrillic');
* {
padding: 0; margin: 0;
}
body {
background-color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
.top {
border-bottom: 6px solid #f3ebdc;
padding: 30px 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.menu {
flex-basis: 58%;
}
.menu ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
}
.menu ul a {
font-size: 12px;
text-transform: uppercase;
line-height: 23px;
font-weight: 300;
color: #000;
text-decoration: none;
border-bottom: 1px solid transparent;
letter-spacing: 0.96px;
margin: 0 3px;
}
.menu ul a:hover {
border-bottom-color: #000;
}
.icons {
display: flex;
align-items: center;
}
.icons_cart {
margin: 0 12px;
}
.icons_search {
margin-left: 12px;
}
@media (max-width:768px) {
.top .top_wrap {
flex-basis: 100%;
text-align: center;
margin-bottom: 15px;
}
.menu {
flex-basis: 80%;
}
}
@media (max-width: 680px) {
.menu {
flex-basis: 100%;
margin-bottom: 15px;
}
.icons {
flex-basis: 100%;
justify-content: center;
}
}
.slider {
background: linear-gradient(90deg, #cdced2, #c5c6ca);
}
.slider_item {
display: flex;
align-items: center;
padding: 0 60px;
box-sizing: border-box;
}
.slider_img {
flex-basis: 50%;
align-self: flex-end;
}
.slider_img img {
display: block;
max-width: 100%;
}
.slider_info {
flex-basis: 50%;
padding-left: 70px;
box-sizing: border-box;
}
.slider_info p {
font-size: 14px;
line-height: 26px;
color: #535353;
margin: 25px 0;
}
.slider_title {
font-size: 116px;
line-height: 107px;
font-weight: 600;
color: #000;
letter-spacing: 2.32px;
text-transform: uppercase;
}
.slider_type {
font-size: 18px;
line-height: 25px;
font-weight: 600;
color: #000;
}
.slider_type span {
font-size: 14px;
letter-spacing: 1.12px;
text-transform: uppercase;
font-weight: 300;
margin-left: 25px;
}
.slider_icons {
display: flex;
flex-wrap: wrap;
margin: 25px 0;
}
.slider_icons a {
width: 37px;
height: 37px;
border: 1px solid #000;
border-radius: 50%;
margin-right: 20px;
position: relative;
}
.slider_icons a:first-of-type {
background-color: #000;
}
.slider_icons a:last-of-type {
margin-right: 0px;
}
.slider_icons a img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.slider_btn {
background-color: #000;
font-size: 9px;
line-height: 13px;
letter-spacing: 0.54px;
border-radius: 40px;
width: 114px;
color: #fff;
padding: 13px 0;
display: block;
text-align: center;
text-transform: uppercase;
margin: 25px 0;
text-decoration: none;
}
Простой
