College Profile
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Profile</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
nav{
width: 100vw;
position: fixed;
padding: 20px;
text-align: right;
background-color: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.355);
}
nav a{
padding: 8px;
margin-right: 20px;
color: #f47a31;
text-decoration: none;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
nav button{
margin-right: 30px;
margin-left: 20px;
padding: 8px 20px;
color: white;
background-color: #f47a31;
border: none;
border-radius: 5px;
text-decoration: none;
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
cursor: pointer;
transition: 00.5s;
}
nav button:hover{
margin-left: 50px;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.226);
transition: 0.5s;
border-radius: 50px;
}
header{
width: 100%;
padding: 10% 0;
background: linear-gradient(to right, #f3742a, #fc8f4a);
color: white;
border-bottom-left-radius: 50px;
border-top-right-radius: 50px ;
}
.logo{
height: 50px;
width: 50px;
object-fit: cover;
float: left;
}
h1{
margin-bottom: 20px;
padding: 0 15%;
text-align: center;
font-size: 4rem;
font-family: laila;
}
header h2{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
section{
padding: 10px;
}
section h2{
margin-top: 40px;
margin-left: 20px;
margin-bottom: 30px;
color: #f47a31;
font-weight: bold;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 2rem;
}
section p{
width: 60%;
margin-left: 20px;
font-size: x-large;
font-family: 'Lucida Sans';
}
.ycc{
width: 40%;
border-radius: 5px;
float: right;
}
.enroll_btn{
text-align: center;
margin: 30px;
padding: 8px 20px;
color: white;
background: linear-gradient(to right, #f47a31 , #fc8f4a);
border: none;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.245);
text-decoration: none;
font-size: 2rem;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
cursor: pointer;
align-items: center;
transition: 0.5s;
}
</style>
<body>
<nav>
<img src="logo.png" alt="College logo" class="logo">
<a href="#">Home</a>
<a href="#">Courses</a>
<a href="#">Testimonials</a>
<a href="#">About Us</a>
<a href="page2.html"><button>Enrol Now</button></a>
</nav>
<br>
<br>
<header>
<h1>Yashwantrao Chaphekar College of Commerce and Management</h1>
<h2>Tembode, Palghar, Maharashtra 400 001</h2>
</header>
<section>
<img src="college_image.jpg" alt="college_image" class="ycc">
<h2>Detail</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In id quasi laboriosam tempore quas pariatur, impedit, qui sunt sapiente deserunt, sint ex illum facilis reiciendis praesentium molestias nulla quod. Perferendis expedita, ex quisquam eligendi suscipit iusto consectetur nam voluptatibus aliquid enim sint? Error, nihil quaerat magni fugit voluptate repellat dolores culpa pariatur magnam quae doloribus quis qui, odio debitis enim.</p>
</section>
<a href="page2.html"><button class="enroll_btn">Enrol Now</button></a>
</body>
</html>
-------Page 2-------!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enroll Now</title>
</head>
<style>
h1{
text-align: center;
color: #f47a31;
font-size: 3rem;
font-family: laila;
}
form{
width: 50%;
margin: 40px 24%;
padding: 20px;
font-family: Calibri;
background: rgb(245, 244, 244);
border-radius: 12px;
align-content: center;
}
input, select{
margin-left: 10px;
padding: 5px;
width: 250px;
height: 20px;
background-color: white;
border: 2px solid #f47a31;
border-radius: 25px;
}
select{
width: 80px;
padding: 0;
cursor: pointer;
}
.submit, .reset{
padding: 0;
height: 40px;
color: white;
background-color: #f47a31;
border: none;
font-size: 1.3em;
margin: 10px;
text-align: center;
font-family: 'Segoe UI';
}
.submit:hover, .reset:hover{
box-shadow: 0 0 10px rgba(0, 0, 0, 0.329);
cursor: pointer;
}
</style>
<body>
<h1>Enrolment Form</h1>
<form>
<h2>Name:<input type="text" placeholder="Ex. Sumit Shrivastva"></h2>
<h2>Email ID:<input type="email" placeholder="Ex. abc@gmail.com"></h2>
<h2>Contact Number:<input type="number" placeholder="+9190000 00001"></h2>
<h2>Class:<select>
<option>Class 11</option>
<option>Class 12</option>
</select> </h2>
<h2>Stream:<select>
<option>Science</option>
<option>Commerce</option>
<option>Arts</option>
</select> </h2>
<input type="submit" class="submit">
<input type="reset" class="reset">
</form>
</body>
</html>
Comments
Post a Comment