style: adicionando breakpoint para desk>2500px
This commit is contained in:
parent
c86d36531c
commit
b32608f8a9
@ -6,13 +6,23 @@
|
|||||||
margin: 40px auto;
|
margin: 40px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$breakpoint-desk: 2500px;
|
||||||
|
@media (min-width: $breakpoint-desk) {
|
||||||
|
.container {
|
||||||
|
width: 89.533%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
$breakpoint-tablet: 1024px;
|
$breakpoint-tablet: 1024px;
|
||||||
@media (max-width: $breakpoint-tablet) {
|
@media (max-width: $breakpoint-tablet) {
|
||||||
.container {
|
.container {
|
||||||
width: 96.87%;
|
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;
|
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;
|
$breakpoint-tablet: 1024px;
|
||||||
@media (max-width: $breakpoint-tablet) {
|
@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;
|
justify-content: center;
|
||||||
& .slider-content {
|
& .slider-content {
|
||||||
background: $background-color;
|
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;
|
border-radius: 8px;
|
||||||
width: 279px;
|
width: 279px;
|
||||||
height: auto;
|
height: auto;
|
||||||
@ -33,6 +33,7 @@ h2 {
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
& h3 {
|
& h3 {
|
||||||
|
width: auto;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 28px;
|
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 {
|
.slick-dots li button:before {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
top: 25px;
|
top: 25px;
|
||||||
color: $slider-ellipse-color;
|
color: $slider-ellipse-color;
|
||||||
width: 10.01px;
|
font-size: 10.01px;
|
||||||
height: 10.01px;
|
|
||||||
opacity: unset;
|
opacity: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -96,6 +112,67 @@ h2 {
|
|||||||
opacity: unset;
|
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;
|
$breakpoint-tablet: 1024px;
|
||||||
@media (max-width: $breakpoint-tablet) {
|
@media (max-width: $breakpoint-tablet) {
|
||||||
.slider-container {
|
.slider-container {
|
||||||
@ -124,12 +201,11 @@ $breakpoint-tablet: 1024px;
|
|||||||
}
|
}
|
||||||
& img {
|
& img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
object-fit: cover;
|
object-position: top;
|
||||||
height: 570px;
|
height: 570px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
& h3 {
|
& h3 {
|
||||||
width: 100%;
|
|
||||||
color: $title-item-list-color;
|
color: $title-item-list-color;
|
||||||
}
|
}
|
||||||
& p {
|
& p {
|
||||||
@ -170,6 +246,32 @@ $breakpoint-tablet: 1024px;
|
|||||||
display: none;
|
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;
|
$title-item-list-color: #333333;
|
||||||
$description-item-list-color: #858585;
|
$description-item-list-color: #858585;
|
||||||
$slider-ellipse-color: #858585;
|
$slider-ellipse-color: #858585;
|
||||||
|
$slider-content-shadow-color: #00000014;
|
||||||
|
Loading…
Reference in New Issue
Block a user