style: adicionando breakpoint para desk>2500px
This commit is contained in:
parent
c86d36531c
commit
b32608f8a9
@ -6,13 +6,23 @@
|
||||
margin: 40px auto;
|
||||
}
|
||||
|
||||
$breakpoint-desk: 2500px;
|
||||
@media (min-width: $breakpoint-desk) {
|
||||
.container {
|
||||
width: 89.533%;
|
||||
}
|
||||
}
|
||||
|
||||
$breakpoint-tablet: 1024px;
|
||||
@media (max-width: $breakpoint-tablet) {
|
||||
.container {
|
||||
width: 96.87%;
|
||||
margin: 40px auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
$breakpoint-mobile: 375px;
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
.container {
|
||||
width: 91.441%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -111,6 +111,68 @@ form {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
$breakpoint-desk: 2500px;
|
||||
@media (min-width: $breakpoint-desk) {
|
||||
h1 {
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
textarea::placeholder,
|
||||
textarea,
|
||||
input::placeholder,
|
||||
input,
|
||||
.input-image-container {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 65.6909%;
|
||||
height: 416px;
|
||||
.form-container {
|
||||
.form-inputs {
|
||||
.input-image-container {
|
||||
width: 44.906%;
|
||||
height: 400px;
|
||||
&::after {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
.input-image-content {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
.form-input-descricao {
|
||||
width: 54.262%;
|
||||
height: 496px;
|
||||
gap: 16px;
|
||||
.input-titulo {
|
||||
width: 79.311%;
|
||||
height: 64px;
|
||||
}
|
||||
.description-content {
|
||||
height: 416px;
|
||||
.input-descricao {
|
||||
height: 320px;
|
||||
}
|
||||
& button {
|
||||
padding: 16px 20px;
|
||||
border-radius: 8px;
|
||||
margin-top: 16px;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
.input-descricao {
|
||||
padding: 40.66px 16.77px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$breakpoint-tablet: 1024px;
|
||||
@media (max-width: $breakpoint-tablet) {
|
||||
@ -159,5 +221,37 @@ $breakpoint-tablet: 1024px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$breakpoint-mobile: 375px;
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
form {
|
||||
height: 500.3px;
|
||||
.form-container {
|
||||
.form-inputs {
|
||||
.input-image-container {
|
||||
height: 212px;
|
||||
.input-image-content {
|
||||
height: 212px;
|
||||
}
|
||||
}
|
||||
.form-input-descricao {
|
||||
height: 272.3px;
|
||||
.description-content {
|
||||
width: 100%;
|
||||
height: 200.3px;
|
||||
& button {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
margin-top: 8.3px;
|
||||
}
|
||||
}
|
||||
.input-descricao,
|
||||
.input-titulo {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ h2 {
|
||||
justify-content: center;
|
||||
& .slider-content {
|
||||
background: $background-color;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0px 4px 16px $slider-content-shadow-color;
|
||||
border-radius: 8px;
|
||||
width: 279px;
|
||||
height: auto;
|
||||
@ -33,6 +33,7 @@ h2 {
|
||||
border-radius: 8px;
|
||||
}
|
||||
& h3 {
|
||||
width: auto;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
@ -79,11 +80,26 @@ h2 {
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots li {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.slick-dots li button {
|
||||
width: auto;
|
||||
height: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slick-dots li button:before {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: 25px;
|
||||
color: $slider-ellipse-color;
|
||||
width: 10.01px;
|
||||
height: 10.01px;
|
||||
font-size: 10.01px;
|
||||
opacity: unset;
|
||||
}
|
||||
|
||||
@ -96,6 +112,67 @@ h2 {
|
||||
opacity: unset;
|
||||
}
|
||||
|
||||
$breakpoint-desk: 2500px;
|
||||
@media (min-width: $breakpoint-desk) {
|
||||
h2 {
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
margin-top: 120px;
|
||||
.slider {
|
||||
& ul {
|
||||
margin-top: 41px;
|
||||
& .slider-content {
|
||||
width: 544px;
|
||||
width: 544px;
|
||||
min-height: 768px;
|
||||
& img {
|
||||
height: 400px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
height: 120px;
|
||||
}
|
||||
& p {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: -40px;
|
||||
&:before {
|
||||
width: 26px;
|
||||
height: 58px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: -40px;
|
||||
&:before {
|
||||
width: 26px;
|
||||
height: 58px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots li button:before {
|
||||
font-size: 20.01px;
|
||||
}
|
||||
|
||||
.slick-dots li.slick-active button:before {
|
||||
width: 25.49px;
|
||||
height: 25.49px;
|
||||
}
|
||||
}
|
||||
|
||||
$breakpoint-tablet: 1024px;
|
||||
@media (max-width: $breakpoint-tablet) {
|
||||
.slider-container {
|
||||
@ -124,12 +201,11 @@ $breakpoint-tablet: 1024px;
|
||||
}
|
||||
& img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
height: 570px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
& h3 {
|
||||
width: 100%;
|
||||
color: $title-item-list-color;
|
||||
}
|
||||
& p {
|
||||
@ -143,18 +219,18 @@ $breakpoint-tablet: 1024px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots li button{
|
||||
.slick-dots li button {
|
||||
display: none;
|
||||
}
|
||||
.slick-track{
|
||||
.slick-track {
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translate3d(0, 0, 0)!important;
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.slick-list{
|
||||
.slick-list {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@ -170,6 +246,32 @@ $breakpoint-tablet: 1024px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
$breakpoint-mobile: 375px;
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
.slider-container {
|
||||
margin-top: 40.7px;
|
||||
.slider {
|
||||
& ul {
|
||||
margin-top: 32px;
|
||||
& .slider-content {
|
||||
min-height: 400px;
|
||||
& img {
|
||||
height: 212px;
|
||||
object-fit: cover;
|
||||
}
|
||||
& h3 {
|
||||
color: $title-item-list-color;
|
||||
}
|
||||
& p {
|
||||
padding: 0 24px 24px 24px;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,3 +12,4 @@ $title-list-color: #000000;
|
||||
$title-item-list-color: #333333;
|
||||
$description-item-list-color: #858585;
|
||||
$slider-ellipse-color: #858585;
|
||||
$slider-content-shadow-color: #00000014;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user