* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Estilo geral */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* header {
display: flex;
flex-direction: row;
justify-content: space-around;
}
*/
.nav-item {
margin: 0em 15em 0em 6.7em;
/* Ajuste o valor conforme sua preferência */
}
.navegacao {
display: flex;
flex-direction: row;
justify-content: space-around;
font-family: 'Poppins', sans-serif;;
font-weight: bold;
}
.navegacao a {
text-decoration: none;
margin-left: 25%;
}
.nav-item {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.textHeader {
color: #fff;
padding: 2rem;
text-align: justify;
}
#id {
display: flex;
flex-direction: row;
background: rgb(34, 193, 195);
background: -moz-linear-gradient(
0deg,
rgba(34, 193, 195, 1) 0%,
rgba(253, 45, 126, 1) 100%
);
background: -webkit-linear-gradient(
0deg,
rgba(34, 193, 195, 1) 0%,
rgba(253, 45, 126, 1) 100%
);
background: linear-gradient(
0deg,
rgba(34, 193, 195, 1) 0%,
rgba(253, 45, 126, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#22c1c3",endColorstr="#fd2d7e",GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c2530b", endColorstr="#582717", GradientType=1);
text-align: center;
padding: 2rem;
color: #fff;
text-align: justify;
}
.logo {
max-width: 25em;
max-height: 30em;
}
header h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
header p {
font-size: 1.2rem;
}
.introdução {
text-align: justify;
}
.mae {
max-width: 20em;
max-height: 24em;
}
#problems {
display: flex;
flex-direction: row;
background-color: hsl(192, 100%, 42%);
}
.textoProblema {
display: flex;
margin-top: 2%;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;
line-height: 1.5;
color: #fff;
}
.ebook {
max-width: 30em;
max-height: 30em;
}
.links {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.popup-wrapper {
background: rgba(0, 0, 0, 0.5);
position: fixed();
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup {
font-family: arial;
text-align: center;
width: 100%;
max-width: 300px;
margin: auto;
padding: 25px;
background: white;
position: relative;
}
.popup a {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
}
#container-Ebook {
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
z-index: 1;
position: fixed;
top: 0;
display: block;
}
#ctaEbook {
display: flex;
flex-direction: row;
align-items: center;
/* background: rgb(22, 26, 66); */
background: linear-gradient(
90deg,
rgba(22, 26, 66, 1) 45%,
rgba(76, 79, 84, 1) 100%
);
text-align: center;
padding: 4rem;
color: #fff;
font-family: "Gloock", serif;
color: green;
position: fixed;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
overflow: auto;
background-color: hsl(202, 71%, 43%);
}
#emailHelp {
color: aliceblue;
}
#ctaTexto {
margin-bottom: 10em;
display: flex;
flex-direction: column;
align-items: center;
}
.form {
display: flex;
flex-direction: column;
}
/* .closed{
display: flex;
flex-direction: row;
} */
#btn-closed {
align-items: end;
justify-content: end;
}
#beneficios {
display: flex;
flex-direction: row;
align-items: center;
background-color: hsl(326.29, 45.06%, 54.31%);
color: #fff;
}
.conection {
max-width: 35em;
max-height: 39em;
}
.conectionRight {
max-width: 35em;
max-height: 39em;
}
.beneficiosTexto {
display: flex;
flex-direction: column;
margin-left: 2%;
}
#recipes {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-family: 'Lato', sans-serif;
color: white;
font-size: small;
font-weight:bold;
background-color: hsl(192.06,100%,41.96%);
}
.recipes {
max-width: 15em;
max-height: 20em;
border-radius: 50%;
margin-left: 25%;
}
#video {
background: rgb(34, 193, 195);
background: -moz-linear-gradient(
360deg,
rgba(34, 193, 195, 1) 19%,
rgba(253, 45, 126, 1) 100%
);
background: -webkit-linear-gradient(
360deg,
rgba(34, 193, 195, 1) 19%,
rgba(253, 45, 126, 1) 100%
);
background: linear-gradient(
360deg,
rgba(34, 193, 195, 1) 19%,
rgba(253, 45, 126, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#22c1c3",endColorstr="#fd2d7e",GradientType=1);
text-align: center;
padding: 2rem;
color: #fff;
}
#depoimentos {
display: flex;
flex-direction: column;
align-items: center;
background-color:hsl(192.06,100%,41.96%);
color:white;
}
#testemunhas {
font-size: 1rem;
margin-bottom: 1rem;
font-size: medium;
}
.formatacao {
margin: 1% 10% 0px;
}
.imagem {
float: left;
border: transparent thin solid;
border-radius: 50%;
max-width: 3em;
margin-left: 5%;
}
#callAction {
height: 90%;
}
footer {
background:hsl(264.97,70.31%,44.9%);
color: #fff;
text-align: center;
padding: 1rem;
}
footer p {
font-size: 1.2rem;
}
/* RESPONSIVIDADE*/
/* Estilo geral */
/* body {
font-family: Arial, sans-serif;
line-height: 1.6;
} */
/* Estilo para dispositivos móveis (320px - 480px) */
@media only screen and (min-width: 320px) and (max-width: 480px) {
/*TELA1*/
body{
margin:0;
padding:0;
}
nav{
display:flex;
height:auto;
width:400px;
font-size:5px;
text-align: center;
}
section#id{
display:flex;
flex-direction: column;
align-items: center;
text-align: center;
height:100%;
width:100vw;
margin:0px;
padding:0px;
}
#id img{
width:100%;
}
.textHeader h1{
font-size:3em;
margin:0;
padding:0;
}
.introducao .textHeader{
font-size:0.5em;
width: 100%;
}
.textHeader{
margin:0;
}
.logo {
max-width: 5em;
max-height: 10em;
}
.navbar-collapse {
display: block !important;
flex-direction:row !important;
height: 4em !important;
overflow: visible !important;
}
.navbar-nav {
flex-direction: row !important;
justify-content: space-around;
margin-left:15%;
font-size:1em;
}
h1 {
font-size: 1rem;
}
header h1 {
font-size: 2rem;
}
header p {
font-size: 1rem;
}
#problems{
display:flex;
flex-direction:column;
align-items:center;
}
#beneficios{
display:flex;
flex-direction:column;
justify-content: space-around;
}
#recipes {
display:flex;
flex-direction:column;
}
nav{
margin-rigth:50%;
}
iframe{
width:95%;
}
#depoimentos{
display:flex;
text-align:left;
font-size:0.5em;
}
}
/* Estilo para iPads e tablets (481px - 768px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
/* #id{
font-size: 1.2rem;
} */
/* .logo{
width:20px;
} */
}
/* Estilo para telas pequenas e laptops (769px - 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
}
/* Estilo para desktops e telas grandes (1025px - 1200px) */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
}
/* Estilo para telas muito grandes e TVs (1201px e acima) */
@media only screen and (min-width: 1201px) {
}