Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CAC | THE BEST IT INSTITUTE</title>
    <link rel="shortcut icon" href="./assets/image/logo.jpeg" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- CAC HEADER DESIGN -->
     <section class="cacHeader">
        <div class="contactHeader">
            <div class="mainContact">
                <div class="leftContact">
                    <a href="">info@cac.edu.in</a>
                    <a href="">+91-9861189631</a>
                    <a href="">+91-9437089830</a>
                </div>
                <div class="rightContact">
                    <a href=""><img src="./assets/image/fb.png" alt=""></a>
                    <a href=""><img src="./assets/image/ig.webp" alt=""></a>
                    <a href=""><img src="./assets/image/yt.jpg" alt=""></a>
                    <a href=""><img src="./assets/image/li.webp" alt=""></a>
                    <a href=""><img src="./assets/image/x.jpg" alt=""></a>
                </div>
            </div>
        </div>
        <div class="affliateHeader">
            <img src="./assets/image/cac1.png" alt="">
        </div>
        <div class="navigationHeader">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Course Details</a></li>
                <li><a href="">CAC Gallery</a></li>
                <li><a href="">Online Admission</a></li>
                <li><a href="">Latest Notice</a></li>
                <li><a href="">Career</a></li>
                <li><a href="">Contact Us</a></li>
            </ul>
        </div>
     </section>
    <!-- CAC HEADER DESIGN -->

    <!-- BANNER SECTION -->
     <section class="bannerCac"></section>
    <!-- BANNER SECTION -->
</body>
</html>


/* GLOBAL DESIGN */
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: bisque;
}
/* GLOBAL DESIGN */

/* TOP CONTACT SECTION */
.contactHeader {
  background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 0, 255));
  display: flex;
  align-items: center;
  justify-content: center;
}
.mainContact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 95%;
}
.leftContact {
  margin-top: 0.7rem;
}
.leftContact a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  margin-left: 1rem;
}

.rightContact {
  display: flex;
  justify-content: end;
}
.rightContact img {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 100%;
  margin-left: 1.2rem;
}
/* TOP CONTACT SECTION */

/* AFFILATION SECTION */
.affliateHeader img {
  width: 100vw;
}
/* AFFILATION SECTION */

/* NAVIGATION BAR */
.navigationHeader {
  background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 0, 255));
}
.navigationHeader ul {
  display: flex;
  justify-content: end;
}
.navigationHeader ul li {
  display: inline;
  padding: 8px;
  transition: 0.5s;
}
.navigationHeader ul li a {
  text-decoration: none;
  color: white;
  font-size: 1.1rem;
  font-family: monospace;
  margin-left: 1.2rem;
}
.navigationHeader ul li a:last-child {
  margin-right: 1.2rem;
}
.navigationHeader ul li:hover {
  scale: 1.2;
  background-color: rgb(229, 224, 224);
}
/* NAVIGATION BAR */

/* CAC BABNNER */
.bannerCac {
  background-image: url(./assets/image/bnr1.png);
  height: 60vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  animation: change 5s linear infinite;
}
@keyframes change {
  0% {
    background-image: url(./assets/image/bnr1.jpg);
  }
  25% {
    background-image: url(./assets/image/bnr3.png);
  }
  50% {
    background-image: url(./assets/image/bnr4.png);
  }
  75% {
    background-image: url(./assets/image/bnr5.jpg);
  }
  100% {
    background-image: url(./assets/image/bnr2.jpg);
  }
}
/* CAC BABNNER */
Editor is loading...