rgyci.org/src/components/Header.astro

38 lines
1.3 KiB
Plaintext

<main>
<section class="container-fluid background">
<div class="flex flex-col lg:flex-row place-content-between container mx-auto h-fit">
<div class="flex place-items-center w-full">
<img class="w-24" src="/img/rgylogo.png" alt="">
<h1 class="text-white text-size font-bold px-4">RAJEEV GANDHI YOUTH COMPUTER INSTITUTE</h1>
</div>
<div class="flex place-items-center w-full justify-end gap-x-4 xl:gap-x-8 text-white text-lg md:text-2xl cursor-pointer">
<p class="flex inline-flex hover:text-yellow-400"><img class="" src="/img/svg/phone.svg" alt="">&nbsp;+91 7318992100;</p>
<p class="flex inline-flex hover:text-yellow-400 pr-10"><img src="/img/svg/mail.svg" alt="">&nbsp;ho@rgyci.org</p>
</div>
<!-- <div class="flex text-lg md:text-2xl pb-0 pr-10 justify-end"><button class="text-white hover:text-yellow-400">Login</button></div> -->
</div>
</section>
</main>
<style>
.background {
background-color: #07294d;
}
/* .text-size {
font-size: 30px;
font-style: bold;
} */
@media screen and (min-width: 601px) {
.text-size {
font-size: 25px;
}
}
@media screen and (max-width: 600px) {
.text-size {
font-size: 20px;
}
}
</style>