Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@Abhishekvk04
Abhishekvk04 committed Oct 5, 2023
1 parent 61756fd commit 3d314a2
Showing 1 changed file with 338 additions and 1 deletion.
339 changes: 338 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colload | Home</title>
<link rel="stylesheet" href="./css/style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700&display=swap" rel="stylesheet">
Expand Down Expand Up @@ -70,4 +70,341 @@ <h4>About Us</h4>
</script>

</body>
<style>
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.header{
min-height: 100vh;
width: 100%;
background-image:linear-gradient(
to right bottom,
rgba(11, 22, 69, 0.7),
rgba(128, 51, 83, 0.781)
),
url(Images/banner.png);
background-position: center;
background-size: cover;
position: relative;
}
nav{
display: flex;
padding: 2% 6%;
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: black;
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:black;
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: black;
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: black;
border: 1px solid black;
padding: 12px 34px;
font-size: 13;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn: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: black;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
nav-links ul{
padding: 30px;
}
}

/*------ course -----*/
.course{
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}

h1{
font-size: 36px;
font-weight: 600;
}
p{
color: #000000;
font-size: 14px;
font-weight: 300;
line-height: 22px;
padding: 10px;
}
.row{
margin-top: 5%;
display: flex;
justify-content: space-between;
}
.course-col{
flex-basis: 31%;
background: black;
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)
}
@media(max-width: 700px){
.row{
flex-direction: column;
}
}

/*-------- campus -------*/
.campus{
width: 80%;
margin: auto;
text-align: center;
padding-top: 50px;
}
.campus-col{
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.campus-col img{
width: 100%;
display: block;
height: 100%;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;

}
.layer:hover{
background: rgba(234, 109, 109, 0.7);
}
.layer h3{
width: 100%;
font-size: 26px;
font-weight: 500;
color: black;
bottom: 0;
left: 50%;
transform: translate(-50%);
position: absolute;
opacity: 0;
transition: 0.5s;
}
.layer:hover h3{
bottom: 49%;
opacity: 1;
}

/*--------- Facilities ----------*/
.facilities{
width: 80%;
margin: auto;
text-align: center;
padding: 100px;
}
.facilities-col{
flex-basis: 31%;
border-radius: 10px;
margin-bottom: 5%;
text-align: left;
}
.facilities-col img{
width: 100%;
border-radius: 10px;
}
.facilities-col p{
padding: 0;
}
.facilities-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: black;
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;
}
.testimonial-col .fas{
color: #f44336;
}
.testimonial-col .far{
color: #f44336;
}
@media(max-width: 700px){
.testimonial-col img{
margin-left: 0px;
margin-right: 15px;
}
}
.cta{
margin: 100px auto;
width: 80%;
background-image: linear-gradient(
rgba(0,0,0,0.7),
rgba(0,0,0,0.7)
),url(eduford_img/banner2.jpg);
background-position: center;
background-size: cover;
border-radius: 10px;
text-align: center;
padding: 100px 0;
}
.cta h1{
color: black;
margin-bottom: 40px;
padding: 0;
}
@media(max-width: 700px){
.cta h1{
font-size: 24px;
}
}

/* --------- footer --------*/
.footer{
width: 100%;
text-align: center;
padding: 30px 0;
}
.footer h4{
margin-bottom: 25px;
margin-top: 20px;
font-weight: 600;
}
.icons .fa-brands{
color: #f44336;
margin: 0 13px;
cursor: pointer;
padding: 18px 0;
}
.fa-solid{
color: #f44336;
}

/*------------ about us page ----------*/

.sub-header{
height: 100vh;
width: 100%;
background-image: url(/images/gradient.avif)
}

</style>
</html>

0 comments on commit 3d314a2

Please sign in to comment.