1223 lines
20 KiB
CSS
1223 lines
20 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
|
|
|
|
/* Variables CSS */
|
|
:root {
|
|
--header-height: 3.5rem;
|
|
|
|
/* Color mode HSL(hue, saturation, lightness) */
|
|
--first-color: hsl(0, 17%, 20%);
|
|
--first-color-light: hsl(0, 42%, 39%);
|
|
--first-color-alt: hsl(0, 0%, 22%);
|
|
--second-color: hsl(55, 50%, 47%);
|
|
--second-color: hsl(55, 20%, 27%);
|
|
--title-color: hsl(0, 0%, 90%);
|
|
--text-color: hsl(0, 0%, 53%);
|
|
--body-color: hsl(0, 0%, 13%);
|
|
|
|
/* .5rem = 8px / 1rem = 16px */
|
|
--body-font: "Montserrat", sans-serif;
|
|
|
|
--biggest-font-size: 2rem;
|
|
--h1-font-size: 1.5rem;
|
|
--h2-font-size: 1.25rem;
|
|
--h3-font-size: 1rem;
|
|
--normal-font-size: .938rem;
|
|
--small-font-size: .813rem;
|
|
--smaller-font-size: .75rem;
|
|
--tiny-font-size: .625rem;
|
|
|
|
/* Font weight */
|
|
--font-medium: 500;
|
|
--font-semi-bold: 600;
|
|
--font-bold: 700;
|
|
--extra-bold: 800;
|
|
|
|
/* z index */
|
|
--z-tooltip: 10;
|
|
--z-fixed: 100;
|
|
|
|
/* Margenes Bottom */
|
|
--mb-0-25: .25rem;
|
|
--mb-0-5: .5rem;
|
|
--mb-1: 1rem;
|
|
--mb-1-25: 1.25rem;
|
|
--mb-1-5: 1.5rem;
|
|
--mb-2: 2rem;
|
|
|
|
}
|
|
|
|
/* Responsive typography */
|
|
@media screen and (min-width: 1152px) {
|
|
:root {
|
|
--biggest-font-size: 4rem;
|
|
--h2-font-size: 1.5rem;
|
|
--h3-font-size: 1.125rem;
|
|
--normal-font-size: 1rem;
|
|
--small-font-size: .875rem;
|
|
--smaller-font-size: .813rem;
|
|
--tiny-font-size: .688rem;
|
|
}
|
|
}
|
|
|
|
/* Base */
|
|
* {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--body-font);
|
|
font-size: var(--normal-font-size);
|
|
font-weight: var(--font-medium);
|
|
background-color: var(--body-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
input,
|
|
button {
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
font-weight: var(--font-bold);
|
|
}
|
|
|
|
/* Navigation for mabile devices */
|
|
@media screen and (max-width: 1023px) {
|
|
.nav-menu {
|
|
position: fixed;
|
|
top: 0;
|
|
right: -100%;
|
|
background-color: var(--body-color);
|
|
width: 80%;
|
|
height: 100%;
|
|
box-shadow: 0 0 16px hsla(268, 58%, 4%, .2);
|
|
padding: 6rem 3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 2.5rem;
|
|
transition: right .4s;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Reusable css classes */
|
|
|
|
.nav-container,
|
|
.container {
|
|
max-width: 1120px;
|
|
margin-inline: 1.5rem;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
|
|
}
|
|
|
|
.section {
|
|
padding-block: 5rem 1rem;
|
|
}
|
|
|
|
.section-title,
|
|
.section-subtitle {
|
|
text-align: center;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: var(--h1-font-size);
|
|
font-weight: var(--extra-bold);
|
|
color: var(--title-color);
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.section-subtitle {
|
|
display: block;
|
|
font-size: var(--small-font-size);
|
|
font-weight: var(--font-semi-bold);
|
|
color: var(--text-color);
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.main {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ------------------------Header & Nav------------------------ */
|
|
|
|
.header {
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: var(--body-color);
|
|
z-index: var(--z-fixed);
|
|
}
|
|
|
|
.nav-container {
|
|
position: relative;
|
|
height: var(--header-height);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-logo,
|
|
.nav-toggle,
|
|
.nav-close {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-logo {
|
|
color: var(--text-color);
|
|
column-gap: .5rem;
|
|
font-weight: var(--font-semi-bold);
|
|
}
|
|
|
|
.nav-logo img {
|
|
font-size: 1.25rem;
|
|
font-weight: initial;
|
|
|
|
}
|
|
|
|
.nav-toggle,
|
|
.nav-close {
|
|
/* background-color: var(--first-color-alt); */
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 20%;
|
|
font-size: 1.25rem;
|
|
cursor: pointer;
|
|
/* margin: 1rem; */
|
|
}
|
|
|
|
.nav-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 2.5rem;
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--text-color);
|
|
font-weight: var(--font-semi-bold);
|
|
transition: color .4s;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--title-color);
|
|
}
|
|
|
|
.nav-button {
|
|
display: inline-block;
|
|
width: max-content;
|
|
background-color: var(--body-color);
|
|
border: 1px solid var(--text-color);
|
|
padding: .5rem 2rem;
|
|
border-radius: 4rem;
|
|
color: var(--title-color);
|
|
font-weight: var(--font-semi-bold);
|
|
}
|
|
|
|
/* .nav-button:hover {
|
|
background: radial-gradient(#373737 0%, #00000000 100%);
|
|
} */
|
|
|
|
.nav-close {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1.45rem;
|
|
}
|
|
|
|
/* Show menu */
|
|
.show-menu {
|
|
right: 0;
|
|
}
|
|
|
|
/* Changr background header */
|
|
.bg-header {
|
|
background-color: var(--body-color);
|
|
box-shadow: 0 4px 16px hsla(0, 0%, 0%, .15);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* ---------Active link--------- */
|
|
.active-link {
|
|
color: var(--title-color);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* -------------------------Home------------------------- */
|
|
|
|
.home {
|
|
background: linear-gradient(0deg, rgb(38, 38, 38) 0%, hsl(0, 0%, 13%) 100%);
|
|
position: relative;
|
|
height: 730px;
|
|
|
|
}
|
|
|
|
.home-container {
|
|
padding-top: 7rem;
|
|
display: grid;
|
|
row-gap: 3rem;
|
|
}
|
|
|
|
.home-content {
|
|
text-align: center;
|
|
}
|
|
|
|
.home-subtitle {
|
|
font-size: var(--biggest-font-size);
|
|
margin-bottom: 3rem;
|
|
letter-spacing: 5px;
|
|
}
|
|
|
|
.home-title {
|
|
position: relative;
|
|
width: max-content;
|
|
margin: 0 auto .75rem;
|
|
font-size: var(--biggest-font-size);
|
|
color: var(--title-color);
|
|
}
|
|
|
|
.home-title img {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.home-title span {
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
|
|
.home-description {
|
|
line-height: 1.5;
|
|
margin-bottom: 1.75rem;
|
|
}
|
|
|
|
.home-button {
|
|
display: inline-block;
|
|
color: var(--title-color);
|
|
border: 1px solid var(--text-color);
|
|
padding: 1.125rem 3rem;
|
|
border-radius: 4rem;
|
|
font-weight: var(--font-semi-bold);
|
|
box-shadow:
|
|
inset 0 4px 8px hsla(0, 0%, 44%, 0.4);
|
|
}
|
|
|
|
/* 0 8px 32px hsla(0, 0%, 32%, 0.3), */
|
|
|
|
/* .home-button:hover {
|
|
background: radial-gradient(#373737 0%, #00000000 100%);
|
|
} */
|
|
|
|
.dowload-button {
|
|
display: inline-block;
|
|
color: var(--title-color);
|
|
border: 1px solid var(--text-color);
|
|
padding: 1.125rem 3rem;
|
|
border-radius: 4rem;
|
|
font-weight: var(--font-semi-bold);
|
|
box-shadow:
|
|
inset 0 4px 8px hsla(0, 0%, 44%, 0.4);
|
|
}
|
|
|
|
/* .dowload-button:hover {
|
|
background: radial-gradient(#373737 0%, #00000000 100%);
|
|
} */
|
|
|
|
.home-images {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 250px;
|
|
}
|
|
|
|
|
|
|
|
.home-images img {
|
|
position: absolute;
|
|
}
|
|
|
|
.home-frame {
|
|
width: 256px;
|
|
top: -1rem;
|
|
}
|
|
|
|
.home-sphere {
|
|
width: 256px;
|
|
}
|
|
|
|
.home-triangle {
|
|
width: 256px;
|
|
}
|
|
|
|
.home-r {
|
|
width: 256px;
|
|
}
|
|
|
|
.home-l {
|
|
width: 256px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* -------------------------About------------------------- */
|
|
.about {
|
|
background: linear-gradient(0deg, hsl(0, 0%, 13%) 0%, rgb(38, 38, 38) 100%);
|
|
/* background-color: #C4C4C4; */
|
|
}
|
|
|
|
.about-container {
|
|
padding-bottom: 3rem;
|
|
row-gap: 3rem;
|
|
}
|
|
|
|
.about-title {
|
|
position: relative;
|
|
width: max-content;
|
|
margin: 0 auto .75rem;
|
|
/* font-size: var(--biggest-font-size); */
|
|
color: var(--title-color);
|
|
}
|
|
|
|
.section-title {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
;
|
|
}
|
|
|
|
.about-data {
|
|
text-align: center;
|
|
}
|
|
|
|
.about-description {
|
|
margin-bottom: 1.5rem;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.about-swiper {
|
|
position: relative;
|
|
justify-self: center;
|
|
max-width: initial;
|
|
}
|
|
|
|
.about-img {
|
|
width: 400px;
|
|
margin-inline: auto;
|
|
justify-self: center;
|
|
}
|
|
|
|
.swiper {
|
|
position: relative;
|
|
width: 250px;
|
|
height: 300px;
|
|
justify-self: center;
|
|
display: grid;
|
|
}
|
|
|
|
.swiper-button-next,
|
|
.swiper-button-prev {
|
|
color: var(--text-color);
|
|
opacity: .25;
|
|
}
|
|
|
|
.swiper-pagination-bullet-active {
|
|
background: var(--text-color);
|
|
}
|
|
|
|
.button-ghost {
|
|
column-gap: 10rem;
|
|
}
|
|
|
|
.button {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
column-gap: 10rem;
|
|
}
|
|
|
|
.button-ghost {
|
|
color: var(--title-color);
|
|
border: 1px solid var(--text-color);
|
|
padding: 1.125rem 3rem;
|
|
border-radius: 4rem;
|
|
font-weight: var(--font-semi-bold);
|
|
box-shadow:
|
|
inset 0 4px 8px hsla(0, 0%, 44%, 0.4);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* -------------------------Plans-------------------------*/
|
|
.plans {
|
|
background: linear-gradient(0deg, rgb(38, 38, 38) 0%, hsl(0, 0%, 13%) 100%);
|
|
}
|
|
|
|
.card {
|
|
padding: 3rem 0;
|
|
}
|
|
|
|
.card-container {
|
|
grid-template-columns: 350px;
|
|
justify-content: center;
|
|
row-gap: 2rem;
|
|
/* gap: 3rem 1.25rem; */
|
|
}
|
|
|
|
.card-content {
|
|
position: relative;
|
|
/* width: 60px; */
|
|
background-color: var(--body-color);
|
|
border: 1px solid var(--text-color);
|
|
padding: 2rem 1.5rem 2.5rem;
|
|
border-radius: 1.75rem;
|
|
color: var(--title-color);
|
|
box-shadow: 0 8px 32px hsla(0, 0%, 32%, 0),
|
|
inset 0 4px 8px hsla(0, 0%, 44%, 0.4);
|
|
transition: .4s;
|
|
}
|
|
|
|
.card-content:hover {
|
|
box-shadow: 0 8px 32px hsla(0, 0%, 32%, 0.5),
|
|
inset 0 4px 8px hsla(0, 0%, 44%, 0.6);
|
|
}
|
|
|
|
.card-header-circle {
|
|
width: 80px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
margin-bottom: var(--mb-1);
|
|
place-items: center;
|
|
}
|
|
|
|
.card-header-subtitle {
|
|
display: block;
|
|
font-size: var(--smaller-font-size);
|
|
color: var(--text-color);
|
|
text-transform: uppercase;
|
|
margin-bottom: var(--mb-0-25);
|
|
}
|
|
|
|
.card-header-title {
|
|
font-size: 25px;
|
|
color: var(--title-color);
|
|
margin-bottom: var(--mb-1);
|
|
}
|
|
|
|
.card-pricing {
|
|
position: absolute;
|
|
border: 1px solid var(--text-color);
|
|
border-radius: 1rem;
|
|
background: linear-gradient(180deg, hsl(0, 0%, 44%) 5%, hsl(0, 0%, 44%) 20%, hsla(0, 0%, 44%, 0) 100%);
|
|
/* background: var(--body-color); */
|
|
box-shadow: 0 1px 1px hsla(0, 0%, 32%, 0.5),
|
|
inset 0 2px 4px hsla(0, 0%, 44%, 0.6);
|
|
/* background: linear-gradient(157deg, var(--first-color) 50%, hsla(54, 20%, 27%, 0) 100%); */
|
|
width: 70px;
|
|
height: 88px;
|
|
right: 1.5rem;
|
|
top: -1rem;
|
|
padding-top: 1.25rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.card-pricing-symbol {
|
|
font-size: var(--smaller-font-size);
|
|
}
|
|
|
|
.card-pricing-number {
|
|
font-size: var(--h2-font-size);
|
|
}
|
|
|
|
.card-pricing-month {
|
|
display: block;
|
|
font-size: var(--tiny-font-size);
|
|
}
|
|
|
|
.card-list {
|
|
row-gap: .5rem;
|
|
margin-bottom: var(--mb-2);
|
|
}
|
|
|
|
.card-list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.card-list-icon {
|
|
margin-right: var(--mb-0-5);
|
|
}
|
|
|
|
.card-button {
|
|
display: inline-block;
|
|
width: max-content;
|
|
background-color: var(--body-color);
|
|
border: 1px solid var(--text-color);
|
|
padding: .5rem 2rem;
|
|
border-radius: 4rem;
|
|
color: var(--title-color);
|
|
font-weight: var(--font-semi-bold);
|
|
cursor: pointer;
|
|
transition: .4s;
|
|
}
|
|
|
|
.card-button:hover {
|
|
box-shadow: 0 4px 16px hsla(0, 0%, 32%, 0.3)
|
|
/* inset 0 4px 8px hsla(0, 0%, 44%, 0.4); */
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* -------------------------Contact------------------------- */
|
|
.contact {
|
|
background: linear-gradient(0deg, hsl(0, 0%, 13%) 0%, rgb(38, 38, 38) 100%);
|
|
/* border-top: .2px solid var(--text-color); */
|
|
}
|
|
|
|
.contact-container {
|
|
row-gap: 3rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
/*
|
|
.contact-title {
|
|
font-weight: var(--small-font-size-font-size);
|
|
} */
|
|
|
|
.contact-form {
|
|
row-gap: 2rem;
|
|
}
|
|
|
|
.contact-inputs {
|
|
row-gap: 2.5rem;
|
|
}
|
|
|
|
.contact-box,
|
|
.contact-plan {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 50px;
|
|
}
|
|
|
|
.contact-input {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--body-color);
|
|
border: 1px solid var(--text-color);
|
|
border-radius: 1rem;
|
|
font-weight: var(--font-semi-bold);
|
|
padding: .75rem;
|
|
color: var(--title-color);
|
|
font-size: var(--small-font-size);
|
|
}
|
|
|
|
.select-plan {
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--body-color);
|
|
border: 1px solid var(--text-color);
|
|
border-radius: 1rem;
|
|
font-weight: var(--font-semi-bold);
|
|
padding: .75rem;
|
|
color: var(--title-color);
|
|
font-size: var(--small-font-size);
|
|
}
|
|
|
|
.contact-input::placeholder {
|
|
color: hsla(0, 0%, 53%, 0.205);
|
|
}
|
|
|
|
.contact-label {
|
|
position: absolute;
|
|
top: -1.5rem;
|
|
left: 0;
|
|
color: var(--title-color);
|
|
font-size: var(--small-font-size);
|
|
font-weight: var(--font-semi-bold);
|
|
}
|
|
|
|
.contact-input:-webkit-autofill {
|
|
transition: background-color 6000s, color 6000s;
|
|
|
|
}
|
|
|
|
.contact-button-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.contact-button {
|
|
display: inline-block;
|
|
width: max-content;
|
|
background-color: var(--body-color);
|
|
border: 1px solid var(--text-color);
|
|
padding: .5rem 2rem;
|
|
border-radius: 4rem;
|
|
color: var(--title-color);
|
|
font-weight: var(--font-semi-bold);
|
|
cursor: pointer;
|
|
transition: .4s;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* -------------------------Footer------------------------- */
|
|
.footer {
|
|
padding-block: .5rem;
|
|
border-top: 1px solid hsla(0, 0%, 53%, 0.085);
|
|
/* border-top: .2px solid var(--text-color); */
|
|
}
|
|
|
|
.footer-container {
|
|
padding-inline: 1rem;
|
|
row-gap: 2.5rem;
|
|
}
|
|
|
|
.footer-logo {
|
|
color: var(--text-color);
|
|
justify-self: flex-start;
|
|
font-size: var(--h3-font-size);
|
|
font-weight: var(--font-bold);
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: .5rem;
|
|
}
|
|
|
|
.footer-link {
|
|
color: var(--title-color);
|
|
}
|
|
|
|
.footer-social {
|
|
display: flex;
|
|
column-gap: .75rem;
|
|
}
|
|
|
|
.footer-social-link {
|
|
color: var(--text-color);
|
|
font-size: 1.5rem;
|
|
transition: transform .4s;
|
|
}
|
|
|
|
.footer-social-link:hover {
|
|
transform: translateY(-.25rem);
|
|
}
|
|
|
|
.footer-copy {
|
|
display: block;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-color);
|
|
text-align: center;
|
|
font-size: var(--small-font-size);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* -----------------------Scroll bar---------------------- */
|
|
::-webkit-scrollbar {
|
|
width: .6rem;
|
|
background-color: hsl(0, 0%, 80%);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: hsl(0, 0%, 60%);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: hsl(0, 0%, 50%);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* -----------------------Sroll up----------------------- */
|
|
.scroll-up {
|
|
position: fixed;
|
|
right: 1rem;
|
|
bottom: -50%;
|
|
z-index: var(--z-tooltip);
|
|
transition: bottom .8s, transform .8s;
|
|
}
|
|
|
|
.scroll-up:hover {
|
|
transform: translateY(-.5rem);
|
|
}
|
|
|
|
.show-scroll {
|
|
bottom: 2rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* -------------------------For small devices------------------------- */
|
|
@media screen and (max-width: 320px) {
|
|
.home-container {
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.container {
|
|
margin-inline: 1rem;
|
|
}
|
|
|
|
.home-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.about-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.about-swiper {
|
|
width: 200px;
|
|
height: 250px;
|
|
}
|
|
|
|
.card {
|
|
padding-top: 0rem;
|
|
}
|
|
|
|
.card-container {
|
|
grid-template-columns: 250px;
|
|
}
|
|
|
|
.footer-container {
|
|
row-gap: 1rem;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.footer-copy {
|
|
padding-inline: 1rem;
|
|
}
|
|
}
|
|
|
|
/* -------------------------Samsung Z Fold 5------------------------- */
|
|
@media screen and (min-width: 344px) and (min-height: 882px) {
|
|
.home-container {
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.home-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.about-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.about-swiper {
|
|
width: 200px;
|
|
height: 250px;
|
|
}
|
|
|
|
.card {
|
|
padding-top: 0rem;
|
|
}
|
|
|
|
.card-container {
|
|
grid-template-columns: 250px;
|
|
}
|
|
|
|
.footer-container {
|
|
row-gap: 1rem;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.footer-copy {
|
|
padding-inline: 1rem;
|
|
}
|
|
}
|
|
|
|
/* -------------------------Samsung S8+------------------------- */
|
|
@media screen and (min-width: 360px) and (min-height: 740px) {
|
|
.home-container {
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.home-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.about-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
|
|
.about-swiper {
|
|
width: 200px;
|
|
height: 250px;
|
|
}
|
|
|
|
.card {
|
|
padding-top: 0rem;
|
|
}
|
|
|
|
.card-container {
|
|
grid-template-columns: 250px;
|
|
}
|
|
|
|
.footer-container {
|
|
row-gap: 1rem;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.footer-copy {
|
|
padding-inline: 1rem;
|
|
}
|
|
}
|
|
|
|
/* iPhone SE */
|
|
@media screen and (min-width: 375px) and (min-height: 667px) {
|
|
.home-container {
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.home-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.about-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.swiper {
|
|
width: 200px;
|
|
height: 250px;
|
|
}
|
|
|
|
.card {
|
|
padding-top: 0rem;
|
|
}
|
|
|
|
.card-container {
|
|
grid-template-columns: 270px;
|
|
}
|
|
|
|
.footer-container {
|
|
row-gap: 1rem;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.footer-copy {
|
|
padding-inline: 1rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (min-width: 376px) and (min-height: 800px) {
|
|
.home-container {
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.about-swiper {
|
|
width: 250px;
|
|
height: 300px;
|
|
}
|
|
|
|
.card {
|
|
padding-top: 0rem;
|
|
}
|
|
|
|
.card-container {
|
|
grid-template-columns: 270px;
|
|
}
|
|
|
|
.footer-container {
|
|
row-gap: 1rem;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.footer-copy {
|
|
padding-inline: 1rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Medium */
|
|
@media screen and (min-width: 576px) {
|
|
|
|
.home-container,
|
|
.contact-container {
|
|
grid-template-columns: 400px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-menu {
|
|
width: 50%;
|
|
}
|
|
|
|
.footer-container {
|
|
padding-inline: 1rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, max-content);
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.home {
|
|
display: grid;
|
|
place-content: center;
|
|
}
|
|
|
|
.home-container {
|
|
grid-template-columns: repeat(2, 350px);
|
|
padding-top: 0;
|
|
}
|
|
|
|
.home-content {
|
|
text-align: initial;
|
|
}
|
|
|
|
.home-title {
|
|
margin-inline: 0;
|
|
}
|
|
|
|
.home-frame,
|
|
.home-sphere,
|
|
.home-triangle,
|
|
.home-r,
|
|
.home-l {
|
|
margin-left: 4rem;
|
|
}
|
|
|
|
.card-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.about {
|
|
display: grid;
|
|
place-content: center;
|
|
}
|
|
|
|
.about-container {
|
|
grid-template-columns: repeat(2, 350px);
|
|
padding-top: 0;
|
|
}
|
|
|
|
.about-data {
|
|
text-align: initial;
|
|
}
|
|
|
|
.about-title {
|
|
text-align: initial;
|
|
margin-inline: 0;
|
|
}
|
|
|
|
.swiper {
|
|
width: 300px;
|
|
margin-left: 4rem;
|
|
}
|
|
|
|
.footer-links {
|
|
flex-direction: row;
|
|
column-gap: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Large */
|
|
@media screen and (min-width: 1023px) {
|
|
.container {
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.section {
|
|
padding-block: 7rem 2rem;
|
|
}
|
|
|
|
.section-title {
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.nav {
|
|
height: calc(var(--header-height) + 2rem);
|
|
}
|
|
|
|
.nav-toggle,
|
|
.nav-close {
|
|
display: none;
|
|
}
|
|
|
|
.nav-menu {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 4.5rem;
|
|
}
|
|
|
|
.nav-list {
|
|
margin-left: auto;
|
|
flex-direction: row;
|
|
column-gap: 2.5rem;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (min-width: 1150px) {
|
|
.nav-container {
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.home-container {
|
|
grid-template-columns: 460px 650px;
|
|
align-items: center;
|
|
z-index: 5;
|
|
}
|
|
|
|
.home-subtitle {
|
|
font-size: var(--normal-font-size);
|
|
margin-bottom: .75rem;
|
|
}
|
|
|
|
.home-title {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.home-title img {
|
|
width: 100px;
|
|
right: -.5rem;
|
|
}
|
|
|
|
.home-description {
|
|
font-size: var(--h3-font-size);
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.home-frame,
|
|
.home-sphere,
|
|
.home-triangle,
|
|
.home-r,
|
|
.home-l {
|
|
width: 350px;
|
|
margin-left: 8rem;
|
|
}
|
|
|
|
.about-container {
|
|
grid-template-columns: 460px 650px;
|
|
align-items: center;
|
|
column-gap: 12rem;
|
|
padding-bottom: 5rem;
|
|
}
|
|
|
|
.about-title,
|
|
.about-data {
|
|
text-align: initial;
|
|
}
|
|
|
|
.about-title {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.about-description {
|
|
font-size: var(--h3-font-size);
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.swiper {
|
|
width: 500px;
|
|
margin-right: 20rem;
|
|
}
|
|
|
|
} |