Skip to content
This repository was archived by the owner on Oct 29, 2023. It is now read-only.

Light mode designing and responsivity of testimonials section is done #196

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open

Light mode designing and responsivity of testimonials section is done #196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e96b7ae
completed the media queries styling of testimonials section
devikavarshney Feb 26, 2022
9e1bfc2
completed light mode styling of testimonial page
devikavarshney Feb 26, 2022
ab400dd
Added script media query changes for testimonial section
devikavarshney Feb 26, 2022
b34ff0f
changed media query width
devikavarshney Feb 26, 2022
b3546e4
correcting media query for mobile phone
devikavarshney Feb 26, 2022
f44c641
responsivity of testimonial section done for ipad and mobile phone
devikavarshney Feb 26, 2022
a93e6e0
removed the extra space between heading and testimonials
devikavarshney Feb 26, 2022
415204e
Merge branch 'shivshankar9:main' into light-mode-responsivity-testimo…
devikavarshney Feb 26, 2022
dcabcd6
Merge branch 'main' into light-mode-responsivity-testimonials-devika
devikavarshney Feb 27, 2022
4859482
correcting responsivity of testimonial page
devikavarshney Feb 27, 2022
4d2cc50
responsivity done for screen size below 800
devikavarshney Feb 27, 2022
0814c5e
Merge branch 'light-mode-responsivity-testimonials-devika' of https:/…
devikavarshney Feb 27, 2022
24a1fb7
Responsivity done
devikavarshney Feb 27, 2022
5b57011
all changes done
devikavarshney Feb 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
320 changes: 226 additions & 94 deletions css/homepage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -648,100 +648,6 @@ footer h3 {
margin-top: 40px;
margin-left: 20px;
}
/* testimonils stylng */
.testi{
margin-top: 100px;
}
.hero{
background: #222;
height: 120vh;
width: 100%;
position: relative;
}
.hero h1{
text-align: center;
padding-top: 80px;
font-size: 4rem;
color: #8a39e1;
}
.slide-row{
display: flex;
width: 3200px;
overflow-x:visible;
transition: all 0.5s;
}
.slide-col{
width: 800px;
height: 400px;
position: relative;
}
.user-img{
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.user-img img{
height:100%;
border-radius: 10px;

}
.user-text{
background-color: #8a39e1;
width: 520px;
height: 270px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-radius: 10px;
color: #fff;
padding: 45px;
box-sizing:border-box;
z-index: 2;
}
.user-text p{
font-size: 18px;
line-height: 24px;
}
.user-text h3{
margin: 35px 0px 5px;
color: #FBB31C;
}
.container2{
margin-top: 40px;
width: 800px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) ;
}
.indicator{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -50px;
}
.btn2{
display: inline-block;
height: 15px;
width: 15px;
margin: 4px;
border-radius: 10px;
background-color: #8a39e1;
cursor: pointer;
transition: all 0.5s;
}
.active2{
width: 45px;
}
.testimonial{
width: 100%;
height: 100%;
overflow: hidden;
}


@media only screen and (max-width: 960px) {
main .row {
Expand Down Expand Up @@ -926,3 +832,229 @@ footer p a {
color: red;
}



/* testimonils stylng */
.testi{
margin-top: 100px;
}
.hero{
background: #222;
height: 120vh;
width: 100%;
position: relative;
}
.hero h1{
text-align: center;
padding-top: 80px;
font-size: 4rem;
color: #8a39e1;
}
.slide-row{
display: flex;
width: 3200px;
overflow-x:visible;
transition: all 0.5s;
}
.slide-col{
width: 800px;
height: 400px;
position: relative;
}
.user-img{
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.user-img img{
height:100%;
border-radius: 10px;

}
.user-text{
background-color: #8a39e1;
width: 520px;
height: 270px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-radius: 10px;
color: #fff;
padding: 45px;
box-sizing:border-box;
z-index: 2;
}
.user-text p{
font-size: 18px;
line-height: 24px;
}
.user-text h3{
margin: 35px 0px 5px;
color: #FBB31C;
}
.container{
margin-top: 40px;
width: 800px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) ;
}
.indicator{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -50px;
}
.btn2{
display: inline-block;
height: 15px;
width: 15px;
margin: 4px;
border-radius: 10px;
background-color: #8a39e1;
cursor: pointer;
transition: all 0.5s;
}
.active2{
width: 45px;
}
.testimonial{
width: 100%;
height: 100%;
overflow: hidden;
}

/* lightmode testimonials */
.light-mode .hero{
background: #fff;

}


/* Testimonials resposivity */
@media(max-width:947px){
.hero{
height: 90vh;
}
.hero h1{
font-size: 2.8rem;
}
.slide-row{
width: 1920px;
}
.slide-col{
font-size: 14px;
width: 960px;
height: 320px;
}
.user-img{
height: 95%;
}
.user-img img{
height:95%;
}
.user-text{
width: 320px;
height: 220px;
padding: 20px;
z-index: 2;
}
.user-text p{
font-size: 15px;
line-height: 22px;
}
.user-text h3{
margin: 25px 0px 5px;
}
.container{
margin-top: 30px;
width: 480px;
height: 350px;
}
}

@media(max-width:690px){
.hero{
height: 80vh;
}
.hero h1{
font-size: 2.2rem;
}
.slide-row{
width: 1840px;
}
.slide-col{
font-size: 14px;
width: 920px;
height: 300px;
}
.user-img{
height: 95%;
}
.user-img img{
height:95%;
}
.user-text{
width: 300px;
height: 170px;
padding: 12px;
z-index: 2;
}
.user-text p{
font-size: 12px;
line-height: 18px;
}
.user-text h3{
margin: 15px 0px 2px;
}
.container{
margin-top: 30px;
width: 460px;
height: 300px;
}
}
@media(max-width:500px){
.hero{
height: 75vh;
}
.hero h1{
font-size: 2rem;
}
.slide-row{
width: 1200px;
}
.slide-col{
font-size: 8px;
width: 600px;
height: 300px;
}
.user-img{
height: 85%;
}
.user-img img{
height:85%;
}
.user-text{
width: 170px;
height: 190px;
padding: 12px;
z-index: 2;
}
.user-text p{
font-size: 8.5px;
line-height: 18px;
}
.user-text h3{
margin: 15px 0px 2px;
}
.container{
margin-top: 30px;
width: 300px;
height: 270px;
}
}

Loading