Commit 03a9a9aa authored by GOKA HARSHITH's avatar GOKA HARSHITH

Lab02 commit

parent fa3460be
Sourabh Singh 150050009
Harshith Goka 150050069
Uddeshya 15D110007
All the team members have contributed equally. Sourabh(100%) Harshith(100%) Uddeshya(100%).
Citations:
We used wallpapers available for public as background from:
https://images2.alphacoders.com/526/526200.jpg
Other reference materials used:
http://www.w3schools.com/css/tryit.asp?filename=trycss_image_text_center
http://www.w3schools.com/html/html_tables.asp
http://www.w3schools.com/html/html_youtube.asp
I, Sourabh, pledge on my honour that I have not given or received any unauthorized assistance on this assignment or any previous task.
I, Uddeshya, pledge on my honour that I have not given or received any unauthorized assistance on this assignment or any previous task.
I, Harshith, pledge on my honour that I have not given or received any unauthorized assistance on this assignment or any previous task.
<!DOCTYPE html>
<html>
<head>
<title>Sourabh</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
</head>
<body>
<div id="holder">
<ul id="navbar">
<li class="nav-elements"><a href="home.html">Home</a></li>
<li class="nav-elements"><a class = "active" href="aboutme.html">About Me</a></li>
<li class="nav-elements"><a href="interests.html">Interests</a></li>
<li class="nav-elements"><a href="timetable.html">Timetable</a></li>
<li class="nav-elements"><a href="contact.html">Contact</a></li>
</ul>
</div>
<p>Hi! I am Sourabh Singh, Undergraduate student at IIT Bombay.
This is my team's first attempt to create interlinked webpages.
Hope you enjoy! Stay tune in for more interesting stuff.
</p>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Sourabh's Contacts</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
</head>
<body>
<div id="holder">
<ul id="navbar">
<li class="nav-elements"><a href="home.html">Home</a></li>
<li class="nav-elements"><a href="aboutme.html">About Me</a></li>
<li class="nav-elements"><a href="interests.html">Interests</a></li>
<li class="nav-elements"><a href="timetable.html">Timetable</a></li>
<li class="nav-elements"><a class = "active" href="contact.html">Contact</a></li>
</ul>
</div>
<p>Email ID : sourabhrishi25@gmail.com </p>
<p>Phone Number : 9869815517</p>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title font="arial">Audacity</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
<link rel="stylesheet" type="text/css" href="styles/home.css">
</head>
<body>
<div id="holder">
<ul id="navbar">
<li class="nav-elements"><a class = "active" href="home.html">Home</a></li>
<li class="nav-elements"><a href="aboutme.html">About Me</a></li>
<li class="nav-elements"><a href="interests.html">Interests</a></li>
<li class="nav-elements"><a href="timetable.html">Timetable</a></li>
<li class="nav-elements"><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="container">
<img src="images/bg.jpg" style="width: 100% ; height:auto; ">
<div class="center" style="font-size:40px">Audacity</div>
</div>
<ol id="content" style="list-style-type : none;">
<li style="color: white"><a href="https://www.cse.iitb.ac.in/~sourabh/home.html">Sourabh's Page</a></li>
<li style="color: white"><a href="https://www.cse.iitb.ac.in/~harshithg/home.html">Harshith's Page</a></li>
<li style="color: white"><a href="https://www.cse.iitb.ac.in/~uddeshya/home.html">Uddeshya's Page</a></li>
</ol>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Interests</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>
</head>
<body>
<div id="holder">
<ul id="navbar">
<li class="nav-elements"><a href="home.html">Home</a></li>
<li class="nav-elements"><a href="aboutme.html">About Me</a></li>
<li class="nav-elements"><a class = "active" href="interests.html">Interests</a></li>
<li class="nav-elements"><a href="timetable.html">Timetable</a></li>
<li class="nav-elements"><a href="contact.html">Contact</a></li>
</ul>
</div>
<p>I like Swimming alot. I also play water polo. Watching movies is my best pastime.</p>
<p>
The Gamma Function
$$ \Gamma \left( x \right) = \int\limits_0^\infty {s^{x - 1} e^{ - s} ds} $$
</p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Era0VAIUATw" frameborder="0" allowfullscreen></iframe>
</iframe>
</body>
</html>
\ No newline at end of file
.container {
position: relative;
height: 590px;
width: 100%;
}
.center {
position: absolute;
top : 50%;
width: 100%;
left :0;
text-align: center;
}
\ No newline at end of file
body {
margin: 0;
background-color: black;
color: white;
}
p {
color: white;
text-align: center;
}
#holder {
height: 45px;
}
#navbar {
position: fixed;
height: 45px;
top : 0;
width : 100% ;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul li{
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a :hover:not(.active) {
background-color: #111;
}
.active {
background-color: lightblue;
border-right:2px solid #bbb;
border-left:2px solid #bbb;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
<style type="text/css">
table, th, td {
border : 1px solid white;
}
</style>
</head>
<body>
<div id="holder">
<ul id="navbar">
<li class="nav-elements"><a href="home.html">Home</a></li>
<li class="nav-elements"><a href="aboutme.html">About Me</a></li>
<li class="nav-elements"><a href="interests.html">Interests</a></li>
<li class="nav-elements"><a class = "active" href="timetable.html">Timetable</a></li>
<li class="nav-elements"><a href="contact.html">Contact</a></li>
</ul>
</div>
<table style="width:100%;border : 1px solid white;">
  <tr >
<th>Timing</th>
    <th>Monday</th>
    <th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
  </tr>
<tr>
<td>8:30-9:30</td>
<td></td>
<td>EE101</td>
<td></td>
<td>CS207</td>
<td></td>
<td></td>
</tr>
<tr>
<td>9:30-10:30</td>
<td></td>
<td></td>
<td>Minor</td>
<td>EE101</td>
<td>Minor</td>
<td></td>
</tr>
<tr>
<td>10:30-11:30</td>
<td>CS207</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>11:30-12:30</td>
<td>EE101</td>
<td>CS207</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>12:30-2:30</td>
<td></td>
<td></td>
<td>LUNCH</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3:00-4:30</td>
<td>CS213</td>
<td></td>
<td></td>
<td>CS213</td>
<td>CS215</td>
<td></td>
</tr>
<tr>
<td>5:00-8:00</td>
<td></td>
<td>CS251</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
TEAM AUDACITY(GROUP 27)
I, Sourabh, pledge on geeta that I have not given or received any unauthorized assistance on this assignment or any previous task.
I,Harshith, pledge on my honour that I have not given or received any unauthorized assistance on this assignment or any previous task.
I,Uddeshya, pledge on geeta that I have not given or received any unauthorized assistance on this assignment or any previous task.
We have made equal contribution in this assignment.
Sourabh(150050009) 100%
Harshith(150050069) 100%
Uddeshya(15D110007) 100%
REFLECTION ESSAY:
We got to learn how to link different files of same and different extention(.js,.css,.html). While development of this project we also learnt to code in java script and how to implement stylesheets(CSS). During the inlab we had coded a simple CSS file in order to beautify it.
For outlab assignments we have used Materialize CSS files hence we also learnt to exploit various features of it and combined with JS function ,we got a flavour of how professional looking dynamic websites are coded.
Before the assignments we had basic knowledge of HTML and to be able to start from there and make a cool web pages is overwhelming.
***An important feature we tried to implent was to make our website responsive for different resolutions(i.e mobile screens, tablets etc)
Using Materialize.
***We have ATTEMPTED BOTH THE BONUS TASK.
CITITATIONS:
http://www.w3schools.com
http://materializecss.com
**The carousel on our homepage has been implemented using the materialize feature found on: http://materializecss.com/carousel.html
<!DOCTYPE html>
<html>
<head>
<title>Sourabh</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
<link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
body {
background-color: #37474f;
}
</style>
</head>
<body>
<div class="navbar-fixed">
<nav class="grey darken-3">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Audacity</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="home.html">Home</a></li>
<li class="active"><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="home.html">Home</a></li>
<li class="active"><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col s12 m8 offset-m2">
<div class="card-panel blue-grey darken-1">
<span class="flow-text white-text"><p>Hi! I am Sourabh Singh, Undergraduate student at IIT Bombay.
This is my team's first attempt to create interlinked webpages.
Hope you enjoy! Stay tune in for more interesting stuff.
</p>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="materialize/js/materialize.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Pokemon GO!</title>
<link rel="stylesheet" type="text/css" href="styles/accordionStyle.css">
<link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
</head>
<body background="images/Pokeball2.png">
<div class="navbar-fixed">
<nav class="grey darken-3">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Audacity</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="active"><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="active"><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
</div>
</div>
</nav>
</div>
<h1>
<img src="images/pokemon.png" width="20%" style="margin-left: 80px">
</h1>
<div class="content left">
<ul class="z-depth-4">
<li>
<a href="javascript:void(0);" class="btn grey darken-3" onclick="ex_ct(1)"><b>Pikachu</b></a>
</li>
<li class="hidden">
<div class="card grey lighten-2">
<div class="card-image">
<img src="images/Pikachu.png">
<span class="card-title black-text"><b>Pikachu</b>.</span>
</div>
<div class="card-content black-text">
<p><b>Species: </b>Mouse</p>
<p><b>Type: </b>ELectric</p>
<p><b>Weakness: </b>Ground</p>
<p><b>Evolves from: </b>Pichu</p>
<p><b>Evolves to: </b>Raichu</p>
</div>
</div>
</li>
<li>
<a href="javascript:void(0);" class="btn grey darken-3" onclick="ex_ct(2)"><b>Charizard</b></a>
</li>
<li class="hidden">
<div class="card blue-grey darken-1">
<div class="card-image">
<img src="images/Charizard.png">
<span class="card-title white-text"><b>Charizard</b></span>
</div>
<div class="card-content white-text">
<p><b>Species: </b>Flame</p>
<p><b>Type: </b>Flying,Fire</p>
<p><b>Weakness: </b>Electric,Rock,Water</p>
<p><b>Evolves from: </b>Charmelon</p>
<p><b>Evolves to: </b>Mega Charizard X and Y </p>
</div>
</div>
</li>
<li>
<a href="javascript:void(0);" class="btn grey darken-3" onclick="ex_ct(3)"><b>Arcanine</b></a>
</li>
<li class="hidden">
<div class="card brown darken-1">
<div class="card-image">
<img src="images/Arcanine.png">
<span class="card-title"><b>Arcanine</b>.</span>
</div>
<div class="card-content white-text">
<p><b>Species: </b>Legendary</p>
<p><b>Type: </b>Flash, Fire, Intimidate</p>
<p><b>Weakness: </b>Ground, Rock, Water</p>
<p><b>Evolves from: </b>Growlithe</p>
</div>
</div>
</li>
<li>
<a href="javascript:void(0);" class="btn grey darken-3" onclick="ex_ct(4)"><b>Mewtwo</b></a>
</li>
<li class="hidden">
<div class="card grey darken-1">
<div class="card-image">
<img src="images/Mewtwo.png">
<span class="card-title"><b>Mewtwo</b></span>
</div>
<div class="card-content white-text">
<p><b>Species: </b>Genetic</p>
<p><b>Type: </b>Psychic</p>
<p><b>Weakness: </b>Ghost, Dark, Bug</p>
<p><b>Evolves from: </b>No evolutionary line</p>
<p><b>Evolves to: </b>Mega mewtwo </p>
</div>
</div>
</li>
<li>
<a href="javascript:void(0);" class="btn grey darken-3" onclick="ex_ct(5)"><b>Gengar</b></a>
</li>
<li class="hidden">
<div class="card brown darken-1">
<div class="card-image">
<img src="images/Gengar.png">
<span class="card-title"><b>Gengar</b>.</span>
</div>
<div class="card-content white-text">
<p><b>Species: </b>Shadow</p>
<p><b>Type: </b>Ghost, poison</p>
<p><b>Weakness: </b>Ghhost, Dark, Psychic</p>
<p><b>Evolves from: </b>Haunter</p>
</div>
</div>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/accordion.js"></script>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Sourabh's Contacts</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
<link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
body {
background-color: #37474f;
}
</style>
</head>
<body>
<div class="navbar-fixed">
<nav class="grey darken-3">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Audacity</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li class="active"><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html"></a>Floor Plan</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li class="active"><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<!-- <div class="card grey center-align flow-text"><p>Email ID : sourabhrishi25@gmail.com </p>
<p>Phone Number : 9869815517</p></div> -->
<div >
<div class = "container">
<div class="card-panel brown lighten-2 row hoverable z-depth-5 valign-wrapper">
<div class = "col s7">
<img class="responsive-img circle z-depth-5" src = "images/sourabh.jpg" width = "400">
</div>
<div class = "col s5 valign" style="word-wrap: break-word;">
<span class="white-text flow-text" style="font-size:200%">
Hostel 3
<br/>
<a href="mailto:sourabh@cse.iitb.ac.in" class="white-text"><i class="material-icons">email</i> sourabh@cse.iitb.ac.in</a>
</span>
<div class="flow-text">
<a target="_blank" href="http://www.cse.iitb.ac.in/~sourabh/" class="white-text"><i class="material-icons">assignment</i> CSE Website </a>
</div>
<div>
<a target="_blank" href="https://www.facebook.com/Sourabh.aman"><img src="images/fb.png" width="60px"></a>
<a target="_blank" href="https://www.instagram.com/samstark25"><img src="images/insta.png" width="60px"></a>
</div>
</div>
</div>
<div class="card-panel grey darken-3 row hoverable z-depth-5 valign-wrapper">
<div class = "col s7">
<img class="responsive-img circle z-depth-5" src = "images/harshith.jpg" width="400">
</div>
<div class = "col s5 valign" style="word-wrap: break-word;">
<span class="white-text flow-text" style="font-size:200%">
Hostel 4
<br>
<a href="mailto:harshithg@cse.iitb.ac.in" class="white-text"><i class="material-icons">email</i> harshithg@cse.iitb.ac.in</a>
</span>
<div class="flow-text">
<a target="_blank" href="http://www.cse.iitb.ac.in/~harshithg/" class="white-text"><i class="material-icons">assignment</i> CSE Website </a>
</div>
<div>
<a target="_blank" href="https://www.facebook.com/harshithgoka"><img src="images/fb.png" width="60px"></a>
<a target="_blank" href="https://www.instagram.com/ignifies"><img src="images/insta.png" width="60px"></a>
</div>
</div>
</div>
<div class="card-panel grey darken-3 row hoverable z-depth-5 valign-wrapper">
<div class = "col s7">
<img class="responsive-img circle z-depth-5" src = "images/ud.jpg" width = "400">
</div>
<div class = "col s5 valign" style="word-wrap: break-word;">
<span class="white-text flow-text" style="font-size:200%">
Hostel 3
<br>
<a href="mailto:uddeshya@cse.iitb.ac.in" class="white-text"><i class="material-icons">email</i> uddeshya@cse.iitb.ac.in</a>
</span>
<div class="flow-text">
<a href="http://www.cse.iitb.ac.in/~uddeshya/" class="white-text"><i class="material-icons">assignment</i> CSE Website </a>
</div>
<div>
<a target="_blank" href="https://www.facebook.com/profile.php?id=100001550046961"><img src="images/fb.png" width="60px"></a>
<a target="_blank" href="#"><img src="images/insta.png" width="60px"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="materialize/js/materialize.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title font="arial">5th Floor Plan</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
<link rel="stylesheet" type="text/css" href="styles/home.css">
<link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
body {
background-color: white;
}
</style>
</head>
<body>
<div class="navbar-fixed">
<nav class="grey darken-3">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Audacity</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li class="active"><a href="floorplan.html">Floor Plan</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li class="active"><a href="floorplan.html">Floor Plan</a></li>
</ul>
</div>
</div>
</nav>