Scribd
Upload
54 views

Index HTML

This document is the code for an index.html page for a college website. It includes the basic page structure with headings, navigation links, images, and sections for courses, events, and about information. It also includes a footer with additional links, gallery images, and college details. Styling is applied using internal and external CSS style sheets.

Uploaded by

ernest
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
54 views

Index HTML

This document is the code for an index.html page for a college website. It includes the basic page structure with headings, navigation links, images, and sections for courses, events, and about information. It also includes a footer with additional links, gallery images, and college details. Styling is applied using internal and external CSS style sheets.

Uploaded by

ernest
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

12/8/22, 7:06 PM index.

html

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <!-- stylesheets -->
7    <link rel="stylesheet" media="screen" href="main.css">
8    <link rel="stylesheet" media="screen" href="footer.css">
9    <link rel="stylesheet" media="screen" href="head.css">
10    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
11    <!-- icon -->
12    <link rel="icon" href="logo.png">
13    <title>TRINITY COLLEGE</title>
14 </head>
15 <style>
16    .padding{
17        padding-left: 300px;
18        box-shadow: 10px 10px rgb(39, 37, 37);
19   }
20 </style>
21 <body>
22    <header>
23        <!-- login and signup -->
24        <div id="first">
25            <ul>
26                <li><a href="">Login</a></li>
27                <li><a href="">Signup</a></li>
28                <li><a href="">Contact</a></li>
29                
30            </ul>
31            <!-- contact number -->
32            <p class="hide"> <i class="fa fa-phone"></i> +91 8660839528,
7898745834</p>
33        </div>
34        <!-- navigation bar -->
35        <div class="navbar">
36            <div class="align">
37                <a href="index.html">HOME</a>
38                <a href="">COURSE</a>
39                <a href="">ADMISSION</a>
40                <a href="">ABOUT US</a>
41                <div class="dropdown">
42                  <button class="dropbtn">MORE
43                    <i class="fa fa-caret-down"></i>
44                  </button>
45                  <div class="dropdown-content">
46                    <a href="">Campus Visit</a>
47                    <a href="">Events</a>
48                    <a href="">Gallery</a>
49                  </div>
50                </div>
51            </div>
52            <!-- burger section -->
53            <div class="burger">
54                <div class="line1"></div>
55                <div class="line2"></div>
56                <div class="line3"></div>
57            </div>
58        </div>

localhost:4649/?mode=htmlmixed 1/3
12/8/22, 7:06 PM index.html

59        <!-- logo with link -->


60        <a href="index.html"> <img src="logo.png" alt=" college logo" height="90px"
width="100px"></a>
61    </header>
62        <!-- college picture -->
63        <!-- <div id="para" class="parallax"></div> -->
64        <img class="clg-img" src="college2.jpg" alt="college image" height=""
width="100%"> -->
65
66    <!-- clickable flex boxes -->
67    <div class="main-flex">
68        <a href="">
69            <h4>COURSE</h4>
70           <center><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>        
71            </p></center>
72            <div class="icon">
73                <i class="fa fa-book"></i>
74            </div>
75        </a>
76        <a href="">
77            <h4>ADMISSION</h4>
78            <center><p>Admission are open for the 2023 Science and Management batch,
apply early to avoid last hour rush.  <br> <strong style="color:goldenrod; line-
height: 30px;"> Apply Now </strong>
79            </p></center>
80            <div class="icon">
81                <i class="fa fa-wpforms"></i>
82            </div>
83        </a>
84        <a href=""><div>
85            <h4>EVENTS</h4>
86           <center> <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>        
87            </p></center>
88            <div class="icon">
89                <i class="fa fa-bell"></i>
90            </div>
91        </div></a>
92    </div>
93
94    <!-- about courses -->
95    <section class="details-section">
96        <div class="parallax-img">
97            <div id="parallax-pic" class="parallax-img-1">
98                <img src="1.jpg" alt="" height="350px" width="450px">
99            </div>
100        
101            <div class="parallax-content">
102                <h2>Cirriculum</h2>
103                <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>
104            </div>
105        </div>
106
107    <div class="parallax-img">
localhost:4649/?mode=htmlmixed 2/3
12/8/22, 7:06 PM index.html

108        <div class="parallax-content">


109            <h2>Cirriculum</h2>
110            <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>
111        </div>
112        <div class="parallax-img-2">
113            <img src="6.jpg" alt="" height="350px" width="450px" class="padding">
114        </div>
115    </div>
116    </section>
117    <!-- social media icons -->
118    <div class="index-social-icon">
119
120    </div>
121    <!-- footer -->
122    <footer>
123        <!-- college pic collage -->
124            <div class="footerimg">
125                <h2>Gallery</h2>
126                <a style="text-decoration:none;" href="">
127                    <img src="1.jpg" alt="Campus picture">
128                    <img src="2.jpg" alt="Badminton court">
129                    <img src="3.jpg" alt="Library">
130                    <img src="4.jpg"  alt="colleg fest">
131                    <img src="5.jpg"  alt="festival picture">
132                    <img src="6.jpg" alt="college event">
133                </a>
134            </div>
135            <div class="foot_second">
136                <!-- college info -->
137                    <h2>About Us</h2>
138                    <p>
139                       Trinity College affiliated to GNDU, is the only college run
by Christian community in the city of
140                         Jalandhar and in fact whole of the district of Jalandhar
imparting quality higher
141                       education to hundreds of young men and women who pass out of
its portals year after year.
142                    </p>
143                    <!-- footer links -->
144                    <a href="index.html">HOME</a>
145                    <a href="">COURSE</a>
146                    <a href="">EVENTS</a>
147                    <a href="">ADMISSION</a>
148                    <a href="">CONTACT</a>
149                     <p  <center>&copy;Copyright 2018 All rights reserved. <img
src="logo.png" alt="college logo" width="20px" height="20px"></p></center>
150                </div>
151                
152        </footer>
153      
154 </html>

localhost:4649/?mode=htmlmixed 3/3

You might also like