Files
Globaly-CSS-Practice/style/_first-part.scss
2024-06-24 07:52:54 +02:00

111 lines
1.9 KiB
SCSS
Executable File

@import '_variables';
.first-part {
min-height: 65vh;
background-size: cover;
color: white;
background-position: center;
}
.slick-carousel{
min-height: 65vh !important;
}
// #first-part-home{
// min-height: 65vh ;
// background-image: url('../assets/images/image36.jpg');
// background-size: cover;
// color: white;
// background-position: center;
// }
.textbox {
text-align: center;
height: 100%;
margin: auto;
padding: 100px 0 70px 0;
.h2-first {
padding: 0 39px;
font-family: Merriweather;
font-weight: 600;
padding: 0 39px 18px 39px;
letter-spacing: 0px;
font-size: 36px;
line-height: 1em;
}
p {
font-family: MerriweatherSans, sans-serif;
font-style: normal;
font-size: 18px !important;
padding: 0 24.4px;
letter-spacing: 0px;
line-height: 1.4em !important;
margin-bottom: 30px;
word-wrap: break-word;
}
}
.read-more {
@include button;
background-color: $lightblue;
border: none;
box-shadow: none;
outline: none;
color: white;
}
.read-more:hover {
background-color: white;
color: #333333 !important;
transition: 0.2s;;
}
@media only screen and (min-width: 768px){
.first-part {
min-height: 53vh;
.textbox{
button{
display: none;
}
}
}
.h2-first {
font-size: 46px !important;
margin-top: 30px;
}
}
@media only screen and (min-width: 992px) {
.first-part {
min-height: 78vh ;
display: flex;
justify-content: center;
.textbox{
p{
margin-left: 400px;
margin-right: 400px;
line-height: 1.6em !important;
}
}
}
.h2-first {
font-size: 66px !important;
}
}