Srikant H

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landscape | Template</title>
<link rel="stylesheet" href="brand.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=Anton&display=swap"
rel="stylesheet">
<style>
body{
margin: 0;
font-family: 'Anton', sans-serif;
}
nav{
width: 80%;
margin: 0 auto;
header{
background-color: aliceblue;
margin-top: 10px;
}
.top_row,.top_left,.top_right{
display: flex;
justify-content: space-between;
align-items: center;
}
.bottom_row{
background-color: black;
display: flex;
justify-content: space-between;
height: 50px;
}
.bottom_row input{
height: 30px;
border-radius: 40px;
color: whitesmoke;
}
.top_row{
gap:30px;
.top_left, .top_right{
width: 50%;
}
.top_left div,.top_right div{

display: flex;
flex-direction: column;
gap: 10px;
}
.title{
font-size: 30px;
font-weight:bolder;
letter-spacing: 5px;
}
.sub_title{
}
.email_type,.call{
font-size: 25px;
}
.email_addr,.number{
opacity: 0.5;
}
.btn{
display: flex;
justify-content: center;
height: 100%;
.btn button, button{

background-color: red;
color: whitesmoke;
width: 100px;
padding: 10px;
border-radius: 5px;
border: 0;
font-size: 15px;
}
button:hover{
filter: brightness(150%);
cursor: pointer;
}
ul{
list-style: none;
padding: 0;
display: flex;
gap: 30px;
color: whitesmoke;
padding-left: 10px;
font-weight: 100;
font-family: monospace;
font-size: 20px;
}
ul li:hover{
filter: brightness(150%);
color:red;
cursor: pointer;
}
/* Main */
main{
height: 700px;
display: flex;
background-image: url('./images/landscape.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
main div{
width: 45%;
}
.container{
width: 80%;
margin: 0 auto;
}
main div h1{

font-size: 50px;
color: yellow;
text-shadow: 2px 2px black;
}
main div p{
color:yellow;
text-shadow: 2px 2px black;
font-size: 20px;
}
/* Section */
section{
display: flex;
height: 465px;
}
section div{
width: 25%;
text-align: center;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.black{
color: white;
}
.red{
background-color: red;
color: white;
section h1{
font-size: 30px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
section p{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<header>
<nav>
<div class="top_row">
<div class="top_left">
<div class="logo">
<label class="title">JNTU</label>
<label class="sub_title">UNIVERSITY</label>
</div>
<div class="email">
<label class="email_type" for="">Email</label>
<label class="email_addr"> principal@qiscet.edu.in</label>
</div>
</div>
<div class="top_right">
<div class="logo">
<label class="call">Call US.</label>
<label class="number">9986423091</label>
</div>
<div class="btn">

<a href="college_registration_page.html"><button>Apply
Now</button></a>
</div>
</div>
</div>
<div class="bottom_row">
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Staff</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<input type="text" placeholder="search">

</div>
</nav>
</header>
<main>
<div class="container">
<div>
<h1>QIS COLLEGE OF ENGINEERING & TECHNOLOGY</h1>
<p>A team of educated, enlightened, experienced technocrats with
vision, firmly determined to promote high quality education is striving to provide
every facility ...
</p>
<button>Contact</button>
</div>
</div>
</main>
<section>
<div class="red">
<h1>location</h1>
<p>QIS College of Engineering and Technology is located in
Vengamukkapalem, Ongole, Andhra Pradesh. It was established in 1998 by The
Nidamanuri Educational Society. The college is affiliated with JNTU, Kakinada.
"This Is The First Engineering Autonomous College in Prakasam district</p>
</div>
<div class="black">
<h1>Special Education</h1>
<p>
All students will be physically active and educated, having
acquired motor skills to perform a variety of physical activities, physical fitness
knowledge, and intrinsic motivation to pursue a healthy and active lifestyle. </p>
</div>
<div class="red">
<h1>Book & Library</h1>
<p>The QIS College of Engineering and Technology was established in the
year 1998, and sponsored by Sri Nidamanuri Educational Society to promote
technological education to meet the requirements of a developing nation in the
context of global concern at the threshold of the twenty first century. </p>
</div>
<div class="black">
<h1>Sport Clubs</h1>
<p>Gain in-demand skills in sports entrepreneurship, biomechanics, data
analytics, management. Prepare for a highly specialized career in industry,
government, or professional practice. See Schools. Read News. View Events. </p>
</div>
</section>
</body>
</html>

Srikant H

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Srikant H

Uploaded by

Copyright:

Available Formats

<!

.top_left div,.top_right div{

.btn button, button{

main div h1{

<input type="text" placeholder="search">

You might also like