Commit df3672db authored by MEET KATHIRIYA's avatar MEET KATHIRIYA

new

parent 8e474d14
meetcse
READ_ME for outlab1 assignment. :-
I created a Responsive website about me.
Website contains a navigation bar(resposive) containing hyperlinks to different parts of webpage.
Page Content:-
About me section
My projects
My courses(A responsive table).
Images
HTML form
Responsive Footer(contains link to my social media and some contact info.)
citation :-
to make navigation bar responsive i used standard format of bootstrap navbar
and also used some guidance from youtube videos about making a responsive webpage.
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Meet Kathiriya</title>
<link href='https://fonts.googleapis.com/css?family=Prosto One' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Racing Sans One' rel='stylesheet'>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="olhelp.css">
<style>
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 14px;
</style>
</head>
<body background="bg4.jpg" style="background-size: 100% 100%;" >
<div class="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" style="font-family: impact;"><b style="font-family: Prosto One;">MEET KATHIRIYA</b></a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a data-toggle="collapse" data-target=".navbar-collapse" href="#home"><b>HOME</b></a>
</li>
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#about"><b>ABOUT</b></a>
</li>
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#projects"><b>MY PROJECTS</b></a>
</li>
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#course"><b>MY COURSES</b></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="content">
<br>
<br>
<h1 style="font-family: Racing Sans One;padding: 30px;">Hi! I am meet kathiriya.</h1>
</div>
<h1 style="text-align: center;margin-top: 50px;font-family: times;font-weight: bold;text-shadow: 0.05em 0.05em #333333;"><I><a id="about">ABOUT ME</a></I></h1>
<div class="container">
<div class="col-sm-8">
<div class="aboutme">
<br>
<p>Currently, I am a second year undergraduate at <B>IIT BOMBAY</B>. </p>
<br>
<p>I am pursuing Major in
<a href="https://www.cse.iitb.ac.in/" target="_blank" style="text-decoration: none;">
Computer Science</a>
and <br>Minor in
Electrical Engineering.
<br>
<br>
I am interested in Data structures,Analog and Digital circuits<br> and Discrete Mathematics.</p>
<h2 id="myhobbies" style="text-align: center;color: red">My Hobbies</h2>
<ul style="font-size: 20px;list-style: none;">
<li>Coding</li>
<li>Swimming</li>
<li>Playing Video Games(Like <a href="http://gameinfo.na.leagueoflegends.com/en/game-info/" target="_blank">League of Legends</a>)</li>
</ul>
<br>
</div>
</div>
<div class="col-sm-4">
<img src="bgimg4.jpg" class="img-responsive img-circle" style="max-height: 450px;margin:auto;margin-top: 10px;">
</div>
</div>
<img src="bgimg.jpg" class="img-responsive" style="width: 100%;margin-top: 50px;">
<h1 style="text-align: center;margin-top: 50px;font-family: times;font-weight: bold;text-shadow: 0.05em 0.05em #333333;"><I><a id="projects">MY PROJECTS</a></I></h1>
<div class="pro" style="margin-top: 30px;">
<div class="col-sm-5" style="background-color: white;border: 2px solid black;border-radius: 5px;border">
<h3 style="text-align: center;">Touch The Screen</h3>
<br>
<p>
A device that adds touch functionality to any non-touchscreen display using infrared technology.we made a detachable frame which on connection with pc via arduino gives pc touch-screen behaviour.<br>
for more information please visit our <a href="https://github.com/shreyas-7/TouchTheScreen/blob/master/Documentation/readme.md" target="_blank">Github Documentation</a>
</p>
</div>
<div class="col-sm-2"></div>
<div class="col-sm-5" style="background-color: white;border: 2px solid black;border-radius: 5px;border">
<h3 style="text-align: center;">CS 154 : Course Project</h3>
<br>
<p>
We made a multilevel Snake game using big-bang function of 2htdp/universe and htdp/images libraries in drracket.Game also had a multiplayer surviver mode which allowed two players to play simultaneously.
</p>
</div>
</div>
<img src="bgimg2.jpg" style="width: 50%;margin-top: 50px; margin-left: 25%;margin-right: 25%;" >
<div class="course">
<h1 style="text-align: center;margin-top: 50px;font-family: times;font-weight: bold;text-shadow: 0.05em 0.05em #333333;"><I><a id="course">MY COURSES</a></I></h1>
<div style="overflow-x: auto;">
<table style="margin: auto;background-color: #ffad33;margin-top: 50px;">
<tr>
<td>
<B>Sem 1</B>
</td>
<td>MA 105</td>
<td>PH 107</td>
<td>CS 101</td>
<td>CH 107</td>
<td>ME 113</td>
<td>PH 117</td>
<td>CH 105</td>
</tr>
<tr>
<td>
<B>Sem 2</B>
</td>
<td>MA 108</td>
<td>PH 108</td>
<td>CS 152</td>
<td>CS 154</td>
<td>CH 117</td>
<td>ME 119</td>
<td>BB 101</td>
</tr>
<tr>
<td>
<B>Sem 3</B>
</td>
<td>CS 207</td>
<td>CS 251</td>
<td>CS 293</td>
<td>CS 215</td>
<td>EE 101</td>
<td>EE 204</td>
<td>CS 213</td>
</tr>
</table>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 style="text-align: center;">FORM</h1>
<form action="#" method="">
<div class="form-group">
<label for="name">Name</label>
<input type="name" class="form-control" id="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<div class="form-group">
<input type="submit" class="btn btn-default" id="submit">
</div>
</form>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-8">
<p>Email:-meetkathiriya12345@gmail.com</p>
<p>Phone:-9929962158</p></div>
<div class="col-sm-4">
<a href="https://www.facebook.com/meet.kathiriya.35" target="_blank" class="fa fa-facebook"></a>
<a href="https://twitter.com/meetkathiriya11" target="_blank" class="fa fa-twitter" ></a>
<a href="https://www.youtube.com/channel/UCXDaaPJUSAR9XBs9f9zsSOw" target="_blank" class="fa fa-youtube" ></a>
<a href="https://github.com/Meet001" target="_blank" class="fa fa-github" ></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
*{
margin:0px;
padding: 0px;
}
.wrapper{
width: 100%;
height: 100%;
position: relative;
}
.content{
width: 100%;
height: 600px;
background: url("bg2.jpg");
}
.content h1{
padding-top: 100px;
text-transform: uppercase;
color: #669999;
font-size:50px;
text-shadow: 0.05em 0.05em black;
}
.aboutme{
width: 100%;
margin-top: 20px;
background-image: url(block3.jpg);
min-height: 300px;
text-align: center;
}
.aboutme p{
font-size: 25px;
font-family :garamond;
}
.aboutme a:hover{
font-weight: bold;
}
.pro{
margin-left: 40px;
margin-right: 40px;
font-size: 18px;
font-family: times;
}
.pro a:hover{
font-weight: bold;
}
.myclass{
text-decoration: none;
}
.course{
clear: both;
padding: 20px;
}
.footer{
width: 100%;
background: black;
margin-top: 20px;
}
.fa {
padding: 20px;
font-size: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.footer p{
text-align: center;
color: white;
font-weight: bold;
margin-top: 20px;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment