style: tornando slick responsivo
This commit is contained in:
parent
15caa626a1
commit
98db1bae3b
@ -96,7 +96,7 @@ export class Form {
|
||||
|
||||
this.list.forEach(function (item) {
|
||||
itemsSlider += `
|
||||
<li class="slider-content" data-test="container-item-list">
|
||||
<li class="slider-content" data-test="item-list">
|
||||
<figure>
|
||||
<img src="${item.src}" alt="${item.title}" data-test="image-item-list"/>
|
||||
<h3 data-test="title-item-list">${item.title}</h3>
|
||||
@ -115,7 +115,6 @@ export class Form {
|
||||
infinite: true,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
variableWidth: true,
|
||||
arrows: true,
|
||||
dots: true,
|
||||
});
|
||||
|
||||
@ -1,79 +1,30 @@
|
||||
main{
|
||||
margin: 0 130px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 81.946%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin: 40px auto;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-desk) {
|
||||
.container {
|
||||
width: 89.533%;
|
||||
main{
|
||||
margin: 0 130px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-tablet) {
|
||||
.container {
|
||||
width: 96.924%;
|
||||
main{
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
.container {
|
||||
width: 91.441%;
|
||||
main{
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk) and (min-width: $breakpoint-desk-2473){
|
||||
.container {
|
||||
width: 90.533%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-2473) and (min-width: $breakpoint-desk-2425){
|
||||
.container {
|
||||
width: 92.300%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-2425) and (min-width: $breakpoint-desk-2393){
|
||||
.container {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-2393) and (min-width: $breakpoint-desk-2351){
|
||||
.container {
|
||||
width: 91.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-2351) and (min-width: $breakpoint-desk-2055){
|
||||
.container {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-2335) and (min-width: $breakpoint-desk-2277){
|
||||
.container {
|
||||
width: 92%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-2277) and (min-width: $breakpoint-desk-2055){
|
||||
.container {
|
||||
width: 91%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-2055) and (min-width: $breakpoint-desk-1947){
|
||||
.container {
|
||||
width: 91.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-1947) and (min-width: $breakpoint-desk-1445){
|
||||
.container {
|
||||
width: 89.533%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -323,4 +323,4 @@ input,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,34 +5,33 @@ h2 {
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
width: 100%;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 125px;
|
||||
.slider {
|
||||
& ul {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
& ul {
|
||||
margin-top: 38px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
& .slider-content {
|
||||
box-shadow: 0px 4px 16px $slider-content-shadow-color;
|
||||
border-radius: 8px;
|
||||
width: 279.01px;
|
||||
height: auto;
|
||||
min-height: 424px;
|
||||
list-style: none;
|
||||
&:not(:first-child) {
|
||||
margin-left: 21px;
|
||||
}
|
||||
margin-top: 38px;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
& .slider-content {
|
||||
background: $background-color;
|
||||
box-shadow: 0px 4px 16px $slider-content-shadow-color;
|
||||
border-radius: 8px;
|
||||
height: 424px;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
min-width: 279px;
|
||||
& figure {
|
||||
width: 100%;
|
||||
& img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
height: 212.01px;
|
||||
object-position: top;
|
||||
height: 212px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
& h3 {
|
||||
width: auto;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
@ -66,6 +65,18 @@ h2 {
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
margin: 0 10.5px;
|
||||
}
|
||||
|
||||
.slick-list {
|
||||
margin: 0 -10.5px;
|
||||
}
|
||||
|
||||
.slick-track{
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
background: url("svgs/right arrow.svg") no-repeat center center !important;
|
||||
@ -87,7 +98,8 @@ h2 {
|
||||
height: 29.47px;
|
||||
}
|
||||
|
||||
.slick-prev:before, .slick-next:before {
|
||||
.slick-prev:before,
|
||||
.slick-next:before {
|
||||
font-size: 0;
|
||||
opacity: unset;
|
||||
}
|
||||
@ -136,13 +148,16 @@ h2 {
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
width: 100%;
|
||||
margin-top: 60px;
|
||||
.slider {
|
||||
& ul {
|
||||
margin-top: 41px;
|
||||
& .slider-content {
|
||||
width: 544px;
|
||||
min-height: 768px;
|
||||
margin-bottom: 125px;
|
||||
& ul {
|
||||
width: 100%;
|
||||
margin-top: 41px;
|
||||
& .slider-content {
|
||||
width: 544px;
|
||||
height: 768px;
|
||||
& figure {
|
||||
& img {
|
||||
width: 544px;
|
||||
height: 400px;
|
||||
@ -168,17 +183,16 @@ h2 {
|
||||
left: -70px;
|
||||
width: 26px;
|
||||
height: 58px;
|
||||
background-size: 26px 58px !important;
|
||||
background-size: 26px 58px;
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: -70px;
|
||||
width: 26px;
|
||||
height: 58px;
|
||||
background-size: 26px 58px !important;
|
||||
background-size: 26px 58px;
|
||||
}
|
||||
|
||||
|
||||
.slick-dots li button:before {
|
||||
font-size: 20.01px;
|
||||
width: 20.01px;
|
||||
@ -196,28 +210,28 @@ h2 {
|
||||
margin-top: 40.22px;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
.slider {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
& ul {
|
||||
margin-top: 38px;
|
||||
|
||||
& ul {
|
||||
margin-top: 38px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
& .slider-content {
|
||||
width: 100%;
|
||||
height: 710px;
|
||||
padding: 0;
|
||||
min-height: 710px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
& .slider-content {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
min-height: 710px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
&:not(:first-child) {
|
||||
margin-left: 0;
|
||||
margin-top: 24px;
|
||||
}
|
||||
justify-content: space-between;
|
||||
&:not(:first-child) {
|
||||
margin-left: 0;
|
||||
margin-top: 24px;
|
||||
}
|
||||
& figure {
|
||||
& img {
|
||||
width: 100%;
|
||||
height: 570px;
|
||||
object-position: top;
|
||||
height: 570px;
|
||||
border-radius: 8px;
|
||||
@ -244,19 +258,21 @@ h2 {
|
||||
.slick-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
.slider-container {
|
||||
margin-top: 40.7px;
|
||||
margin-bottom: 77px;
|
||||
.slider {
|
||||
& ul {
|
||||
margin-top: 32px;
|
||||
& .slider-content {
|
||||
min-height: 400px;
|
||||
& ul {
|
||||
margin-top: 32px;
|
||||
& .slider-content {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
min-height: 400px;
|
||||
& figure {
|
||||
& img {
|
||||
width: 100%;
|
||||
height: 212px;
|
||||
object-fit: cover;
|
||||
}
|
||||
@ -275,580 +291,33 @@ h2 {
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk) and (min-width: $breakpoint-desk-2425){
|
||||
@media (max-width: $breakpoint-desk) and (min-width: $breakpoint-desk-2425) {
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 64px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 544px;
|
||||
min-height: 768px;
|
||||
& img {
|
||||
width: 544px;
|
||||
min-height: 768px;
|
||||
& img {
|
||||
width: 544px;
|
||||
height: 400px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
height: 120px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
height: 400px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
height: 120px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-2425) and (min-width: $breakpoint-desk-2351){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 64px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 523px;
|
||||
min-height: 738.35px;
|
||||
& img {
|
||||
width: 523px;
|
||||
height: 384.56px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
height: 120px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-2351) and (min-width: $breakpoint-desk-2335){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 64px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 510px;
|
||||
min-height: 720px;
|
||||
& img {
|
||||
width: 510px;
|
||||
height: 375px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 2.5em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 2em;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-2335) and (min-width: $breakpoint-desk-2277){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 64px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 510px;
|
||||
min-height: 720px;
|
||||
& img {
|
||||
width: 510px;
|
||||
height: 375px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 2.5em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 2em;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-2277) and (min-width: $breakpoint-desk-2203){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 64px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 490px;
|
||||
min-height: 691.76px;
|
||||
& img {
|
||||
width: 490px;
|
||||
height: 360.29px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 2.5em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 1.5em;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-2203) and (min-width: $breakpoint-desk-2055){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 64px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 470px;
|
||||
min-height: 663.53px;
|
||||
& img {
|
||||
width: 470px;
|
||||
height: 345.59px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 2.5em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 1.5em;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media(max-width: $breakpoint-desk-2129) and (min-width: $breakpoint-desk-2055){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 64px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 455px;
|
||||
min-height: 642.35px;
|
||||
& img {
|
||||
width: 455px;
|
||||
height: 334.56px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 2em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 1.5em;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-2055) and (min-width: $breakpoint-desk-1981){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 64px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 440px;
|
||||
min-height: 621.18px;
|
||||
& img {
|
||||
width: 440px;
|
||||
height: 323.53px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 2em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 1.5em;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-1981) and (min-width: $breakpoint-desk-1907){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 64px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 420px;
|
||||
min-height: 592.94px;
|
||||
& img {
|
||||
width: 420px;
|
||||
height: 308.82px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 2em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 1.5em;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-1907) and (min-width: $breakpoint-desk-1833){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 410px;
|
||||
min-height: 578.82px;
|
||||
& img {
|
||||
width: 410px;
|
||||
height: 301.47px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 2em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 1.5em;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-1833) and (min-width: $breakpoint-desk-1759){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 385px;
|
||||
min-height: 543.53px;
|
||||
& img {
|
||||
width: 385px;
|
||||
height: 283.09px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 2em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 1.3em;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-1759) and (min-width: $breakpoint-desk-1730){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 380px;
|
||||
min-height: 543.53px;
|
||||
& img {
|
||||
width: 380px;
|
||||
height: 283.09px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 1.8em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 1.3em;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-1730) and (min-width: $breakpoint-desk-1685){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 366px;
|
||||
min-height: 516.71px;
|
||||
& img {
|
||||
width: 366px;
|
||||
height: 269.12px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 1.8em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 1.3em;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-1685) and (min-width: $breakpoint-desk-1611){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 346px;
|
||||
min-height: 488.47px;
|
||||
& img {
|
||||
width: 346px;
|
||||
height: 254.41px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 1.8em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 1.3em;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-1611) and (min-width: $breakpoint-desk-1537){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 325px;
|
||||
min-height: 458.82px;
|
||||
& img {
|
||||
width: 325px;
|
||||
height: 238.97px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 1.8em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 1.3em;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-1537) and (min-width: $breakpoint-desk-1445){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 310px;
|
||||
min-height: 437.65px;
|
||||
& img {
|
||||
width: 310px;
|
||||
height: 227.94px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 1.8em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 1.3em;
|
||||
line-height: 48px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-1430) and (min-width: $breakpoint-desk-1165){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 266px;
|
||||
min-height: 375.53px;
|
||||
& img {
|
||||
width: 266px;
|
||||
height: 195.59px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 1.5em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 1em;
|
||||
line-height: 24px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-desk-1165) and (min-width: $breakpoint-desk-1025){
|
||||
.slider-container {
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.slider {
|
||||
& ul {
|
||||
& .slider-content {
|
||||
width: 220px;
|
||||
min-height: 309.18px;
|
||||
& img {
|
||||
width: 220px;
|
||||
height: 161.03px;
|
||||
}
|
||||
& h3 {
|
||||
font-weight: 700;
|
||||
font-size: 1.5em;
|
||||
line-height: 56px;
|
||||
height: 60px;
|
||||
}
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 1em;
|
||||
line-height: 24px;
|
||||
max-height: 192px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -16,52 +16,14 @@ $slider-content-shadow-color: #00000014;
|
||||
|
||||
// Breakpoints
|
||||
|
||||
$breakpoint-desk: 2501px;
|
||||
$breakpoint-desk: 2500px;
|
||||
|
||||
$breakpoint-desk-2473: 2473px;
|
||||
$breakpoint-tablet: 1025px;
|
||||
|
||||
$breakpoint-desk-2425: 2425px;
|
||||
$breakpoint-mobile: 491px;
|
||||
|
||||
$breakpoint-desk-2393: 2393px;
|
||||
|
||||
$breakpoint-desk-2351: 2351px;
|
||||
|
||||
$breakpoint-desk-2335: 2335px;
|
||||
|
||||
$breakpoint-desk-2277: 2277px;
|
||||
|
||||
$breakpoint-desk-2203: 2203px;
|
||||
|
||||
$breakpoint-desk-2129: 2129px;
|
||||
|
||||
$breakpoint-desk-2055: 2055px;
|
||||
|
||||
$breakpoint-desk-1981: 1981px;
|
||||
|
||||
$breakpoint-desk-1947: 1947px;
|
||||
$breakpoint-desk-1455: 1455px;
|
||||
|
||||
$breakpoint-desk-1907: 1907px;
|
||||
|
||||
$breakpoint-desk-1833: 1833px;
|
||||
|
||||
$breakpoint-desk-1759: 1759px;
|
||||
|
||||
$breakpoint-desk-1730: 1730px;
|
||||
|
||||
$breakpoint-desk-1685: 1685px;
|
||||
|
||||
$breakpoint-desk-1611: 1611px;
|
||||
|
||||
$breakpoint-desk-1537: 1537px;
|
||||
|
||||
$breakpoint-desk-1445: 1445px;
|
||||
|
||||
$breakpoint-desk-1430: 1430px;
|
||||
|
||||
$breakpoint-desk-1165: 1165px;
|
||||
|
||||
$breakpoint-desk-1025: 1025px;
|
||||
|
||||
$breakpoint-tablet: 1024px;
|
||||
|
||||
$breakpoint-mobile: 490px;
|
||||
$breakpoint-desk-2425: 2425px;
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
<div class="form-input-descricao">
|
||||
<input id="titleInput" type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title"/>
|
||||
<div class="description-content">
|
||||
<textarea id="descriptionText" placeholder="Descrição" class="input-descricao" data-test="input-descricao" name="item-description" rows="10" cols="30"></textarea>
|
||||
<textarea id="descriptionText" placeholder="Descrição" class="input-descricao" data-test="input-descrição" name="item-description" rows="10" cols="30"></textarea>
|
||||
<button class="buttonSubmit" type="submit" name="submitInformation" data-test="button-submit">Adicionar</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,10 +38,8 @@
|
||||
</form>
|
||||
<div class="slider-container">
|
||||
<h2 data-test="title-list">Pontos Turísticos</h2>
|
||||
<div class="slider">
|
||||
<ul class="slider-list" data-test="container-item-list">
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="slider-list" data-test="container-item-list">
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user