-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (119 loc) · 7.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fullstack Practical-9</title>
<link rel="stylesheet" href="./css/practical-9.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<a id="top"></a>
<div id="container">
<div id="header">
<i class="fa fa-angellist" id="logo"></i>
<input type="checkbox" id="chk">
<label for="chk" id="show-btn"><i class="fa fa-bars"></i></label>
<ul id="nav">
<li class="#item"><a href="#banner"><i class="fa fa-home"></i>Home</a></li>
<li class="#item"><a href="#section2"><i class="fa fa-user"></i>about us</a></li>
<li class="#item"><a href="#section1"><i class="fa fa-users"></i>team</a></li>
<li class="#item"><a href="#section3"><i class="fa fa-cogs"></i>technologies</a></li>
<li class="#item"><a href="#section4"><i class="fa fa-address-book"></i>contact</a></li>
<label for="chk" id="hide-btn"><i class="fa fa-times"></i></label>
</ul>
</div>
<div id="content">
<div id="banner">
<img src="./images/banner.jpg" alt="banner">
<h1>Practical-9</h1>
</div>
<div id="section1">
<h3 class="heading">Team Members</h3>
<div id="circle_container">
<div class="members">
<img src="./images/member-1.jpg" class="circle">
<p>Team Member-1</p>
</div>
<div class="members">
<img src="./images/member-2.jpg" class="circle">
<p>Team Member-2</p>
</div>
<div class="members">
<img src="./images/member-3.jpg" class="circle">
<p>Team Member-3</p>
</div>
<div class="members">
<img src="./images/member-4.jpg" class="circle">
<p>Team Member-4</p>
</div>
</div>
</div>
<div id="section2">
<h3 class="heading">About Us</h3>
<div id="left">
<h3>About Projects</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, doloribus vero dolorem, et voluptate fugiat impedit nostrum qui incidunt iusto pariatur repellendus! Explicabo animi deserunt iste amet aliquam odio ipsa quasi eos totam
voluptas, ipsam velit, eius et cupiditate dolores quod consequatur dolorum veritatis in quaerat vel numquam, vero delectus. Exercitationem provident magni ut dolor earum quod optio deserunt sed expedita corrupti rem, tempora repellat
fugiat aliquid eius. Molestias sequi inventore saepe architecto error porro blanditiis quas ex ratione adipisci necessitatibus animi maxime, ipsa numquam molestiae, id rem? Tenetur corrupti, illum ducimus, fugit optio consectetur
inventore architecto incidunt, repellendus velit facere quam ad sit officia nesciunt debitis impedit perferendis ullam non praesentium cum animi quaerat. Incidunt tenetur, ratione aliquid laudantium fuga iste ut provident magnam
odio itaque exercitationem consequatur, qui explicabo? Magni, voluptates sunt earum veniam officiis sint a eveniet accusamus dolor. Odit provident</p>
</div>
<div id="right">
<div class="article" id="article1"> <span style="font-weight: bolder;">Project-1</span> </div>
<div class="article" id="article2"><span style="font-weight: bolder;">Project-2</span></div>
<div class="article" id="article3"><span style="font-weight: bolder;">Project-3</span></div>
</div>
</div>
<div id="section3">
<h3 class="heading">Technologies Used</h3>
<div id="box_container">
<div class="card">
<img src="./images/html.png" alt="html">
<h3>Introduction to HTML</h3>
<p>HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language.
It is combination of Hypertext and Markup language. Hypertext defines the link between the web pages.
</p>
<a href="./pages/html.html"> Read More </a>
</div>
<div class="card">
<img src="./images/css.png" alt="css">
<h3>Introduction to CSS</h3>
<p>Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable. CSS handles the look and feel part of a web page.
CSS is easy to learn and understand.
</p>
<a href="./pages/css.html"> Read More </a>
</div>
<div class="card">
<img src="./images/js.png" alt="javascript">
<h3>Introduction to JavaScript</h3>
<p>JavaScript is a very powerful client-side scripting language.
JavaScript is used mainly for enhancing the interaction of a user with the webpage.
You can make your webpage more lively and interactive, with the help of JavaScript.
</p>
<a href="./pages/js.html"> Read More </a>
</div>
<div class="card">
<img src="./images/bootstrap.png" alt="bootstrap">
<h3>Introduction to Bootstrap</h3>
<p>Bootstrap is a free and open-source framework for creating websites and web applications.
It's the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
It makes the things lot easier.
</p>
<a href="./pages/bootstrap.html"> Read More </a>
</div>
</div>
</div>
</div>
<div id="section4">
<h3 class="heading">Contact</h3>
<div id="footer">
<p>Website Template for Practical-9 © <a href="#">Devansh K Shukla</a> </p>
<br>
<a href="#top">Back to Top</a>
</div>
</div>
</div>
</body>
</html>