HERO CSS
@media screen and {max-width: 768px)
{
.hero{
flex-direction: column;
}
.hero-blur
{
width: 14rem;
}
.the-best-ad{
margin-top: 0;
font-size: small;
align-self: center;
transform: scale(0.8);
}
.hero-buttons{
justify-content: center;
}
.figures > div > span:nth-of-type(1) {
font-size: large;
}
.figures > div > span:nth-of-type(2) {
font-size: small;
}
.right-h{
position: relative;
background: none;
}
.calories{
position: relative;
top: 5em;
left: 2em;
}
.calories>img{
width:2em;
}
.calories > div >:nth-child(2) {
color: white;
font-size: 1rem;
}
.hero-img{
position: relative;
width: 15rem;
left: 7rem;
top: 4rem;
align-self:center;
}
.hero-img-back{
width: 15rem;
left: 2rem;
top: 0rem;
}
}
program css
@media screen and {max-width: 768px) {
.programs-header{
flex-direction: column;
gap: 1rem;
font-size: x-large;
align-items: center;
justify-content: center;
margin-top: 2rem;
}
.program-categories{
flex-direction: coloumn;
}
}
reason css
@media screen and {max-width: 768px) {
.Reasons{
flex-direction: column;
}
.left-r{
grid-auto-rows: auto;
overflow: hidden;
}
.left-r > :nth-child(1){
width: 7em;
height: 17em;
}
.left-r > :nth-child(2){
width: 15em;
height: 10em;
}
.left-r > :nth-child(3){
width: 7em;
}
.left-r > :nth-child(4){
width: 7em;
height: 6em;
}
}
Plan css
@media screen and {max-width: 768px) {
.plans{
flex-direction: column;
}
.plans>: :nth-child(2)
{
transform: none;
}
}
Testemonial css
@media screen and {max-width: 768px) {
.testimonials
flex-direction: column;
}
.left-t>: :nth-child(2)
.left-t>: :nth-child(3){
font-size: xx-large;
}
.right-t{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
}
.right-t>div{
position: relative; display: none;
}
.right-t>img{
top:0; right:0; position: relative; align-self:center ;
}
.right-t>: :last-child{
display: block;
bottom: 0; left: 0;
}
}
join css
@media screen and {max-width: 768px) {
join{
flex-direction: column;
gap: 1rem;
}
.left-j{
font-size: x-large;
flex-direction: column;
}
.right-j{
padding: 2rem;
}
}
header css
@media screen and {max-width: 768px) {
.header>:nth-child(2)
{
position: fixed;
right: 2rem;
z-index: 99;
}
.header-menu{
flex-direction: column;
background-color: var(--appColor);
padding: 2rem;
}
}
0 comments: