I want to make this design responsive. Can anybody tell me what is the problem as it is responsive.I have Link the Html Code over google drive link please Check..
Html Code Link:-
index.html - Google Drive[
^]
<script>
var navLinks = document.querySelector("#navLinks");
function showMenu() {
navLinks.style.right ="0";
}
function hideMenu(){
navLinks.style.right ="-200px";
}
</script>
What I have tried:
*{
margin: 0;
padding: 0;
font-family: 'Georama', sans-serif;
}
.header{
min-height:100vh;
width:100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(./Images/banner.png);
background-position:center ;
background-size: cover;
position:relative;
}
nav{
display:flex;
padding:2%;
justify-content: space-between;
align-items: center;
}
nav img{
width:150px;
}
.nav-links{
flex:1;
text-align:right;
}
.nav-links ul li{
list-style:none;
display:inline-block;
padding:8px 12px;
position:relative;
}
.nav-links ul li a{
color:#fff;
text-decoration:none;
font-size:13px;
}
.nav-links ul li::after{
content:'';
width:0%;
height:2px;
background:#f44336;
display:block;
margin:auto;
transition: 0.5s;
}
.nav-links ul li:hover::after{
width:100%;
}
.text-box{
width:90%;
color:#fff;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
text-align:center;
}
.text-box h1{
font-size: 62px;
}
.text-box p{
margin:10px 0 40px;
font-size:14px;
color:#fff;
}
.register{
display:inline-block;
text-decoration:none;
color:#fff;
border:1px solid #fff;
padding:12px 34px;
font-size:13px;
background:transparent;
position: relative;
cursor:pointer;
}
.register:hover{
border:1px solid #f44336;
background:#f44336;
transition: 1s;
}
nav .fa{
display:none;
}
@media(max-width:700px){
.text-box h1{
font-size: 20px;
}
.nav-links ul li{
display:block;
}
.nav-links{
position:absolute;
background:#f44336;
height:100vh;
width:200px;
top:0;
right:-200px;
text-align:left;
z-index: 2;
transition: 1s;
}
nav .fa{
display:block;
color:#fff;
margin:10px;
font-size:22px;
cursor:pointer;
}
.nav-links ul{
padding:30px;
}
.row{
flex-direction: column;
}
.testimonial-col img{
margin-left: 0px;
margin-right:15px
}
.eroll h1{
font-size:24px;
}
}
.course{
width:80%;
margin:auto;
text-align:center;
padding-top:100px;
}
h1{
color:#777;
font-size:36px;
font-weight: 300;
line-height:22px;
padding:10px;
}
.row{
margin-top:5%;
display: flex;
justify-content:space-between;
}
.course-col{
flex-basis:31%;
background:#fff3f3;
border-radius:10px;
margin-bottom:5%;
padding:20px 12px;
box-sizing:border-box;
transition:0.5s;
}
h3{
text-align:center;
font-weight: 600;
margin:10px 0;
}
.course-col:hover{
box-shadow:0 0 20px 0px rgba(0,0,0,0.2);
}
.trainings{
width:80%;
margin:auto;
text-align:center;
padding-top: 50px;
}
.doubts-col{
flex-basis:32%;
border-radius:10px;
margin-bottom:30px;
position:relative;
overflow:hidden;
}
.doubts-col img{
width:100%;
display:block;
}
.layer{
background:transparent;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
transition:0.5s;
}
.layer:hover{
cursor: pointer;
}
.layer h2{
width:100%;
font-weight: 500;
color:#fff;
font-size:26px;
bottom:0;
left:50%;
transform:translate(-50%);
position:absolute;
transition:0.5s;
}
.layer:hover h3{
bottom:49%;
opacity:1;
}
.facilities{
width:80%;
margin:auto;
text-align:center;
padding-top:100px;
}
.facility-col{
flex-basis:31%;
border-radius:10px;
margin-bottom:5%;
text-align: left;
}
.facility-col img{
width:100%;
border-radius:10px;
}
.facility-col p{
padding:0
}
.facility-col h3{
margin-top:16px;
margin-bottom: 15px;
text-align:left;
}
.testimonials{
width:80%;
margin:auto;
padding-top: 100px;
text-align:center;
}
.testimonial-col{
flex-basis:44%;
border-radius: 10px;
margin-bottom:5%;
text-align:left;
background: #fff3f3;
padding:25px;
cursor:pointer;
display:flex;
}
.testimonial-col img{
height:40px;
margin-left: 5px;
margin-right:30px;
border-radius:50%;
}
.testimonial-col p{
padding:0;
}
.testimonial-col h3{
margin-top:15px;
text-align:left;
}
.enroll{
margin:100px auto;
width:80%;
background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(./Images/banner2.jpg);
background-position: center;
background-size: cover;
border-radius: 10px;
text-align:center;
padding:100px 0;
}
.enroll h1{
color:#fff;
margin-bottom:40px;
padding:0;
}
.footer{
width:100%;
text-align:center;
padding:30px 0;
}
.footer h4{
margin-bottom: 25px;
margin-top:20px;
font-weight: 600;
}
.icons .fa{
color:#f44336;
margin:0 13px;
cursor:pointer;
padding:18px;
}
<script>
var navLinks = document.querySelector("#navLinks");
function showMenu() {
navLinks.style.right ="0";
}
function hideMenu(){
navLinks.style.right ="-200px";
}
</script>