Scribd
Upload
73 views12 pages

Index Code PF Web

The document contains source code for an HTML website index page and CSS stylesheet for a contact form. The HTML includes the website structure with headers, navigation menus, content sections, and footer. The CSS styles various elements of a contact form such as labels, text fields, submit button, and error validation.

Uploaded by

Prabhat Katariya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
73 views12 pages

Index Code PF Web

The document contains source code for an HTML website index page and CSS stylesheet for a contact form. The HTML includes the website structure with headers, navigation menus, content sections, and footer. The CSS styles various elements of a contact form such as labels, text fields, submit button, and error validation.

Uploaded by

Prabhat Katariya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 12

SOURCE CODE:-

INDEX OF WEBSITE
HTML
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1.0">

<!-- stylesheets -->

<link rel="stylesheet" media="screen" href="main.css">

<link rel="stylesheet" media="screen" href="footer.css">

<link rel="stylesheet" media="screen" href="head.css">

<link rel="stylesheet" href="font-awesome-4.7.0/css/font-


awesome.css">

<!-- icon -->

<link rel="icon" href="image/logo.png">

<title>SD college of manegment Studies</title>

</head>
<body>

<header>

<!-- login and signup -->

<div id="first">

<ul>

<li><a href="login.html">Login</a></li>

<li><a href="signup.html">Signup</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

<!-- contact number -->

<p class="hide"> <i class="fa fa-phone"></i> +91 9389858427,


9058073832</p>

</div>

<!-- navigation bar -->

<div class="navbar">

<div class="align">

<a href="index.html">HOME</a>

<a href="course.html">COURSE</a>

<a href="admission.html">ADMISSION</a>
<a href="about.html">ABOUT US</a>

<div class="dropdown">

<button class="dropbtn">MORE

<i class="fa fa-caret-down"></i>

</button>

<div class="dropdown-content">

<a href="contact.html">Campus Visit</a>

<a href="event.html">Events</a>

<a href="gallery.html">Gallery</a>

</div>

</div>

</div>

<!-- burger section -->

<div class="burger">

<div class="line1"></div>

<div class="line2"></div>

<div class="line3"></div>

</div>

</div>

<!-- logo with link -->


<a href="index.html"> <img src="image/logo.png" alt="sea college
logo" height="130px" width="100px"></a>

</header>

<!-- college picture -->

<div id="para" class="parallax"></div>

<!-- <img class="clg-img" src="image/college1.jpg" alt="college


image" height="450px" width="100%"> -->

<!-- clickable flex boxes -->

<div class="main-flex">

<a href="course.html">

<h4>COURSE</h4>

<p>We offer graduation and post graduation programes in


Science and Management to all the aspiring students. <br> <strong
style="color:goldenrod; line-height: 30px;">View More</strong>

</p>

<div class="icon">

<i class="fa fa-book"></i>

</div>

</a>

<a href="admission.html">
<h4>ADMISSION</h4>

<p>Admission are open for the 2024 Science and Management


batch, apply early to avoid last hour rush. <br> <strong
style="color:goldenrod; line-height: 30px;"> Apply Now </strong>

</p>

<div class="icon">

<i class="fa fa-wpforms"></i>

</div>

</a>

<a href="event.html"><div>

<h4>EVENTS</h4>

<p>Technical seminar on computer science, Cultural fest for the


Arts and Commerse Students. <br><strong style="color:goldenrod;line-
height: 30px;">Click here for more Events</strong>

</p>

<div class="icon">

<i class="fa fa-bell"></i>

</div>

</div></a>

</div>
<!-- about courses -->

<section class="details-section">

<div class="parallax-img">

<div id="parallax-pic" class="parallax-img-1"></div>

<div class="parallax-content">

<h2>Cirriculum</h2>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.


Officia dolorem a, pariatur mollitia blanditiis nihil perferendis delectus
accusamus culpa, neque, laboriosam asperiores nostrum!
Necessitatibus iste et, illo voluptate nulla ab.</p>

</div>

</div>

<div class="parallax-img">

<div class="parallax-content">

<h2>Cirriculum</h2>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.


Officia dolorem a, pariatur mollitia blanditiis nihil perferendis delectus
accusamus culpa, neque, laboriosam asperiores nostrum!
Necessitatibus iste et, illo voluptate nulla ab.</p>

</div>
<div class="parallax-img-2"></div>

</div>

</section>

<!-- social media icons -->

<div class="index-social-icon">

</div>

<!-- footer -->

<footer>

<!-- college pic collage -->

<div class="footerimg">

<h2>Gallery</h2>

<a style="text-decoration:none;" href="gallery.html">

<img src="image/_DSC2064.jpg" alt="Campus picture">

<img src="image/NVP_2789.jpg" alt="Badminton court">

<img src="image/DPP_0147.jpg" alt="Library">

<img src="image/fest.jpg" alt="colleg fest">

<img src="image/festival.jpg" alt="festival picture">

<img src="image/event.jpg" alt="college event">

</a>
</div>

<div class="foot_second">

<!-- college info -->

<h2>About Us</h2>

<p>

SD college of manegment Studies(SDCMS) was established


in the year 1998.

Initially, it started functioning with Computer


Applications(BCA),Computer Science(BSC(cs))and Business
Administration(BBA) Programme and .Two years duration Masters
Programme in Business Administration

(MBA) and Computer Applications.

</p>

<!-- footer links -->

<a href="index.html">HOME</a>

<a href="course.html">COURSE</a>

<a href="event.html">EVENTS</a>

<a href="admission.html">ADMISSION</a>

<a href="contact.html">CONTACT</a>

<p style="color:red; margin-top: 10px;"> &copy;Copyright


2018 All rights reserved. <img src="image/logo.png" alt="college logo"
width="20px" height="20px"></p>
</div>

</footer>

<!-- javascript link -->

</body>

</html>

CSS CODE
form{

width: 60%;

padding: 10px;

margin: 20px 25%;

background: #dac0c1;

form:hover{

box-shadow: 5px 10px 20px #750107;

form label{

display: inline-block;

width: 200px;
padding: 20px 10px;

input[type="text"]{

height: 25px;

width: 300px;

border: 1px solid black;

border-radius: 5px;

input[type="email"]{

width: 300px;

height: 25px;

border: 1px solid #750107;

border-radius: 5px;

input[type="tel"]{

width: 150px;

height: 25px;

border: 1px solid black;

border-radius: 5px;

}
input[type="submit"]{

display: block;

margin: auto;

background: none;

padding: 10px;

border: 2px solid #750107;

transition: padding .3s;

input[type="submit"]:hover{

padding: 10px 20px;

background: goldenrod;

color:#750107;

box-shadow: 5px 5px 15px #750107;

.invalid{

border-color: red;

INTERFACE

You might also like