<section class="page__section page__section_3 ">
<div class="Project">
<div class="Project__title"><h1>My projekts</h1></div>
<div class="Project__subtitle"><h2>my works</h2> </div>
</div>
<div class="slider">
<div class="slider__item filter">
<img src="img/Hero.png" alt="text">
<div class="slider__item-title">My Firt Project</div>
</div>
<div class="slider__item">
<a href=""><img src="img/Hero.png" alt=""></a>
<div class="slider__item-title">My Firt Project</div>
</div>
<div class="slider__item filter">
<img src="img/Hero.png" alt="">
<div class="slider__item-title">My Firt Project</div>
</div>
<div class="slider__item">
<img src="img/Hero.png" alt="">
<div class="slider__item-title">My Firt Project</div>
</div>
</div>
</section>
//!Slider - My-Project
.Project {
background-color: #222;
margin-bottom: -55px;
margin-top: 150px;
// .Project__title
&__title {
text-align: center;
font-size: 55px;
font-weight: 500;
padding-top: 50px;
font-family: ubuntu,sans-serif;
color: white;
}
// .About__text
&__subtitle {
text-align: center;
font-size: 20px;
font-weight: 500;
font-family: 'Ubuntu', sans-serif;
color: crimson;
position: relative;
display: flex;
justify-content: center;
padding-top: 10px;
align-items: center;
padding-bottom: 50px;
}
&__subtitle::before{
content: '';
border-top: 2px solid white;
margin: 15px 5px 9px 0 ;
flex: 0 1 50px;
}
&__subtitle::after{
content: '';
border-top: 2px solid white;
margin: 17px 0px 12px 5px;
flex: 0 1 50px;
}
}
.slider {
// .slider__item
&__item {
color: white;
text-align: center;
padding: 70px 10px;
}
// .slider__item-title
&__item-title {
font-size: 25px;
font-weight: 500;
margin: 10px 0 7px;
}
// .slider__item-text
&__item-text {
}
}
.filter {
}
//!слайдер //
<section class="page__section page__section_3 ">
<div class="Project">
<div class="Project__title"><h1>My projekts</h1></div>
<div class="Project__subtitle"><h2>my works</h2> </div>
</div>
<div class="slider">
<div class="slider__item filter">
<img src="img/Hero.png" alt="text">
<div class="slider__item-title">My Firt Project</div>
</div>
<div class="slider__item">
<a href=""><img src="img/Hero.png" alt=""></a>
<div class="slider__item-title">My Firt Project</div>
</div>
<div class="slider__item filter">
<img src="img/Hero.png" alt="">
<div class="slider__item-title">My Firt Project</div>
</div>
<div class="slider__item">
<img src="img/Hero.png" alt="">
<div class="slider__item-title">My Firt Project</div>
</div>
</div>
</section>
//!Slider - My-Project
.Project {
background-color: #222;
margin-bottom: -55px;
margin-top: 150px;
// .Project__title
&__title {
text-align: center;
font-size: 55px;
font-weight: 500;
padding-top: 50px;
font-family: ubuntu,sans-serif;
color: white;
}
// .About__text
&__subtitle {
text-align: center;
font-size: 20px;
font-weight: 500;
font-family: 'Ubuntu', sans-serif;
color: crimson;
position: relative;
display: flex;
justify-content: center;
padding-top: 10px;
align-items: center;
padding-bottom: 50px;
}
&__subtitle::before{
content: '';
border-top: 2px solid white;
margin: 15px 5px 9px 0 ;
flex: 0 1 50px;
}
&__subtitle::after{
content: '';
border-top: 2px solid white;
margin: 17px 0px 12px 5px;
flex: 0 1 50px;
}
}
.slider {
// .slider__item
&__item {
color: white;
text-align: center;
padding: 70px 10px;
}
// .slider__item-title
&__item-title {
font-size: 25px;
font-weight: 500;
margin: 10px 0 7px;
}
// .slider__item-text
&__item-text {
}
}
.filter {
}
//!слайдер //