Skip to content

G
gitlab-inlab
Commit e9cc6aea authored by Your Name's avatar Your Name
Browse files
Options

commit to add content of lab1

parent 78a78203
Hide whitespace changes
Inline Side-by-side
Showing with 656 additions and 2 deletions
lab1/file1 deleted 100644 → 0
View file @ 78a78203
test file for lab1
lab1/file2 deleted 100644 → 0
View file @ 78a78203
test 2 for lab1
lab1/inlab/index.html 0 → 100644
View file @ e9cc6aea
<html>
<head>
<title> Maitrey Gramopadhye </title>
<style>
body {
background-color: yellow;}
h1 {
color: purple;
font-size:50px;}
h2 {
font-size: 40px;
}
p {
font-family: Arial, Helvetica, sans-serif;}
table, th, td {
background-color: white;
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h1 style="text-align:center;" id="top"> Hey there! </h1>
<h2 style="text-align:center;"> I see you stumbled upon my web page...</h2>
<p style="text-align:right;"> <i> -youknowwho </i> </p>
<center><img src="me.jpg" alt="my photo" style="width:275px;height:228px;"></center>
<br>
<h2 style="text-align:center;"> About Me </h2>
<p> I am <b> Maitrey Gramopadhye</b>, currently a student of computer science at IIT Bombay. Being an army child and having travelled throughout India,I don't consider myself to hail from a certain part of the country.</p>
<ul>
<li style="font-size:200%">Academic achievements</li>
<ol>
<li>JEE 433</li>
<li>90.8% 12th</li>
<li>10CGPA 10th</li>
</ol>
<li style="font-size:200%">Co-curricular achievements</li>
<ol>
<li>class 10<sup>th</sup> - Cluster level debate competition - 1<sup>st</sup></li>
<li>class 9<sup>th</sup> - Open intra school debate competition - 1<sup>st</sup></li>
<li>class 12<sup>th</sup> - Instrumental competition - 1<sup>st</sup> (guitar)</li>
<li>class 10<sup>th</sup> - School basketball team</li>
<li>class 10<sup>th</sup> - Interschool ppt competition - 1<sup>st</sup></li>
</ol>
<li style="font-size:200%">Projects in tech</li>
<ol>
<li>itsp on image processing,rpi,distance mapping and robotics</li>
<li>line follower</li>
<li>wireless follower car</li>
<li>RC car</li>
</ol>
<li style="font-size:200%">Hobbies</li>
<ol>
<li>guitar</li>
<li>basketball</li>
<li>badminton</li>
<li>debating</li>
</ol>
</ul>
<br>
<table style="width:75%" align="center">
<caption>Time Table</caption>
<tr>
<th>Day\Time</th>
<td>8:30-9:25</td>
<td>9:30-10:25</td>
<td>10:35-11:30</td>
<td>11:35-12:30</td>
<td>14-12:30</td>
<td>14-15:25</td>
<td>14-16:55</td>
<td>15:30-16:55</td>
</tr>
<tr>
<td>Mon</td>
<td></td>
<td>CS207 LC102</td>
<td>CS251 CC103</td>
<td>EE101 IC2</td>
<td></td>
<td></td>
<td>CS293</td>
<td></td>
</tr>
<tr>
<td>Tue</td>
<td></td>
<td>CS207 LC102</td>
<td></td>
<td></td>
<td>EE101 IC2</td>
<td></td>
<td>CS293</td>
<td></td>
</tr>
<tr>
<td>Wed</td>
<td></td>
<td></td>
<td>EE221 EEG101</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Thu</td>
<td></td>
<td>EE101 IC2</td>
<td></td>
<td></td>
<td>CS207 LC102</td>
<td></td>
<td>CS251 SL2</td>
<td></td>
</tr>
<tr>
<td>Fri</td>
<td></td>
<td></td>
<td>EE221 EEG101</td>
<td></td>
<td></td>
<td>CS215 EEG401</td>
<td></td>
<td>CS213 LC001</td>
</tr>
</table>
<p align="center"><a href="https://www.cse.iitb.ac.in/">CSE dept home page</a></p>
<p align="center"><a href="https://www.facebook.com/maitreyg">My Facebook profile (you need to be logged in to facebook to access)</a></p>
<p align="center"><a href="https://www.quora.com/profile/Maitrey-Gramopadhye">Link to my quora profile</a></p>
<a href="#top" class="button">Back to top</a>
</body>
</html>
lab1/outlab/README 0 → 100644
View file @ e9cc6aea
name - maitrey gramopadhye
roll no. - 160050049
Honour code: I pledge on my honour that i have not given or received any unauthorized assistance on this assignment or any previous task.
things i learnt in the in lab assignment:
1. studied the basics of html and css to create my webpage
2. used tags from html such as head,body,h1,li,ol,ul etc.
3. styled my webpage using css and bootstrap
4. studied use of table, form, button, paralax, hover, visibility ,tooltip etc.
Features included:
1.css stylesheet
2. css inline, internal and external styling
3. responsive navbar that stays fixed to the top, overlaps the picture, changes background colour and highlights text when you hover over elements, one element contains dropdown menu and elements contain links to various parts on page(About Me, Achievements(Academic, Cocurricular, Projects), Hobbies, Contact, Courses)
4.Some blocks reveal their content on hovering over them.
5. Table and form
6. Nested blocks
7. In Contacts section some of the logos(fb, quora, linkedin, git,instagram) when clicked on, lead to my profiles on social media sites and other logos(email, phone, address) have text below them that when hovered over reveal their content as tool tips
8. form contains text that disappear when you type into the columns and submit button cears the text you type (reset button)
7. Paralax effect
citations: from https://www.w3schools.com/default.asp (W3 schools)
lab1/outlab/index.html 0 → 100644
View file @ e9cc6aea
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
font-size: 150%;
}
p {
color: white;
font-size: 90%;
}
div a {
color: black;
background-color: transparent;
text-decoration: none;
}
ul.a {
list-style-image: 'bst.jpg';
}
table, th, td {
font-size: 10px;
border: 1px solid black;
border-collapse: collapse;
width: 75%;
background-color: yellow;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
input[type=text]:focus {
background-color: lightblue;
}
input[type=button], input[type=submit], input[type=reset] {
background-color: black;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;}
</style>
<title>Maitrey Gramopadhye</title>
<meta charset="utf-8">
<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" href="style2.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MAITREY GRAMOPADHYE</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutme">About Me</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Achievements</a>
<ul class="dropdown-menu">
<li><a href="#acaddemic">Academic</a></li>
<li><a href="#cocurricular">Co-curricular</a></li>
<li><a href="#projects">Projects</a></li>
</ul>
</li>
<li><a href="#hobbies">Hobbies</a></li>
<li><a href="#courses">Courses</a></li>
<li id="li2"><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="p1"></div>
<br>
<div>
<div class="row">
<div class="col-sm-6"><img src="me.jpg" alt="my pic" style="float:left;width:60%;height:400px;"></div>
<div class="col-sm-6">
<div class="button2" id="aboutme">
<h1><b>ABOUT ME</b></h1>
<div id="hidden">
<p>I am <b> Maitrey Gramopadhye</b>, currently a student of computer science at IIT Bombay. Being an army child and having travelled throughout India,I don't consider myself to hail from a certain part of the country. having always been passionate towards technology in general I wish to give my two cents towards the research and development industry of India.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="p2"></div>
<br>
<div class="container-fluid">
<div class="col-sm-6">
<img src="me2.jpg" alt="my pic" style="float:left;width:100%;height:400px;">
</div>
<div class="col-sm-6">
<div class="button2" id="achievements">
<h1><b>ACHIEVEMENTS</b></h1>
<div id="hidden">
<button class="button1">Academic</button>
<button class="button1">Co-curricular</button>
<button class="button1">Projects</button>
</div>
</div>
</div>
</div>
<br>
<div class="block">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4"><button class="button3" id="academics"><b>Academic</b><br><ul><li>JEE 433</li><li>90.8% 12th</li><li>10CGPA 10th</li><li>MSO qualified</li></ul></a></button></div>
<div class="col-sm-4"><button class="button3" id="cocurricular"><b>Co-curricular</b><br><ul><li>class 10<sup>th</sup> - Cluster level debate competition - 1<sup>st</sup></li><li>class 9<sup>th</sup> - Open intra school debate competition - 1<sup>st</sup></li><li>class 12<sup>th</sup> - Instrumental competition - 1<sup>st</sup> (guitar)</li><li>class 10<sup>th</sup> - School basketball team</li><li>class 10<sup>th</sup> - Interschool ppt competition - 1<sup>st</sup></li></ul></a></button></div>
<div class="col-sm-4"><button class="button3" id="projects"><b>Projects</b><br><ul><li>itsp on image processing,rpi,distance mapping and robotics</li><li>line follower</li><li>wireless follower car</li><li>RC car</li><li>tic-tac-toe game</li><li>Minesweeper game</li></ul></a></button></div>
</div>
</div>
</div>
<br><br>
<div class="p3"></div>
<br>
<div class="container-fluid">
<div class="col-sm-6">
<img src="me5.jpg" alt="my pic" style="float:left;width:70%;height:400px;">
</div>
<div class="col-sm-6">
<div class="button2" id="hobbies">
<h1><b>HOBBIES</b></h1>
<ul class="a" style="color:white;list-style-type:none">
<li>Guitar</li><li>Basketball</li><li>Badminton</li><li>Debating</li><li>Painting</li>
</ul>
</div>
</div>
</div>
<br><br>
<div class="p4"></div>
<br>
<div class="button5" id="courses">
<h1><b>COURSES</b></h1>
<h4>List of courses taken</h4>
<ol style="font-size:20px;">
<li>cs251-software systems lab</li>
<li>cs207-discrete structures</li>
<li>cs215-data analysis and algorithms</li>
<li>cs293-data structures and algorithms lab</li>
<li>cs213-data structures and analysis</li>
<li>ee101-introduction to electrical and electronic circuits</li>
<li>ee221-digital electronics</li>
<li>ph108-basics of electricity and magnetism</li>
<li>me119-engineering graphics and drawing</li>
<li>ma108-differential equations</li>
<li>ma106-linear algebra</li>
<li>ch117-chemistry lab</li>
<li>bb101-biology</li>
<li>cs154-programing paradigms lab</li>
<li>cs152-abstractions and paradigms for programming</li>
<li>ph107-quantum physics and applications</li>
<li>ch107-physical chemistry</li>
<li>ch105-organic and inorganic chemistry</li>
<li>me113-workshop practice</li>
<li>ma105-calculus</li>
<li>cs101-computer programming and utilization</li>
<li>ph117-physics lab</li>
</ol>
<table align="center">
<caption><b>Time Table</b></caption>
<tr>
<th>Day\Time</th><td>8:30-9:25</td><td>9:30-10:25</td><td>10:35-11:30</td><td>11:35-12:30</td><td>14-15:25</td><td>14-16:55</td><td>15:30-16:55</td>
</tr>
<tr>
<td>Mon</td>
<td></td><td>CS207 LC102</td><td>CS251 CC103</td><td>EE101 IC2</td><td></td><td>CS293</td><td></td>
</tr>
<tr>
<td>Tue</td>
<td>EE101 IC2</td><td></td><td>CS207 LC102</td><td>CS251 CC103</td><td>CS215 CC103</td><td></td><td>CS213 LC001</td>
</tr>
<tr>
<td>Wed</td><td></td><td>EE221 EEG101</td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>Thu</td><td>CS251 CC103</td><td>EE101 IC2</td><td></td><td>CS207 LC102</td><td></td><td>CS251 SL2</td><td></td>
</tr>
<tr>
<td>Fri</td><td></td><td>EE221 EEG101</td><td></td><td></td><td>CS215 EEG401</td><td></td><td>CS213 LC001</td>
</tr>
</table>
</div>
<br><br>
<div class="p5"></div>
<br>
<div class="button2" id="contact">
<h1><b>CONTACT</b></h1>
<button class="button4"><a href="https://www.facebook.com/maitreyg"><img src="fb.png" alt="fb" style="width:90%;height:90%;"></a></button>
<button class="button4"><a href="https://www.quora.com/profile/Maitrey-Gramopadhye"><img src="quora.png" alt="quora" style="width:90%;height:90%;"></a></button>
<button class="button4"><a href="https://www.linkedin.com/in/maitrey-gramopadhye-7077a7134/"><img src="linkedin.png" alt="linkedin" style="width:90%;height:90%;"></a></button>
<button class="button4"><img src="unnamed.png" alt="gmail" style="width:90%;height:90%;"><div class="tooltip">email id.<span class="tooltiptext"> maitreygramo12@gmail.com </span></div><br></button>
<br>
<button class="button4"><a href="https://github.com/youknowwho-07"><img src="git.png" alt="github" style="width:90%;height:90%;"></a></button>
<button class="button4"><a href="https://www.instagram.com/youknowwho_03/?hl=en"><img src="insta.jpg" alt="instagram" style="width:90%;height:90%;"></a></button>
<button class="button4"><img src="phone.png" alt="phone" style="width:90%;height:90%;"><div class="tooltip">phone no.<span class="tooltiptext"> 8291475099 </span></div><br></button>
<button class="button4"><img src="home.png" alt="address" style="width:90%;height:90%;"><div class="tooltip">address<span class="tooltiptext"> room227, Hostel2, IIT bombay </span></div><br></button>
<br>
</div>
<br><br><br>
<form>
<input type="text" name="Name" placeholder="Name..">
<br><br>
<input type="text" name="House" placeholder="Hogwarts house..">
<br><br>
<input type="text" name="Profession" placeholder="Profession..">
<br><br>
<input type="reset" value="SUBMIT">
<br><br>
</body>
</html>
lab1/outlab/style2.css 0 → 100644
View file @ e9cc6aea
body {
font-family: 'Almendra SC';font-size: 22px;
background-image: url("shPPhft.jpg");
background-size: cover;
background-attachment: fixed;
}
li a {
display: block;
color: maroon;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
font-size: 120%;
font-weight: bold;
opacity: 1;
}
#li1 {
list-style-type: none;
float: right;
}
#li2 {
color: white;
list-style-type: none;
}
.p1{
/* The image used */
background-image: url("snap.jpg");
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.p1{
/* The image used */
background-image: url("p3.jpg");
/* Set a specific height */
min-height: 700px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.p2{
/* The image used */
background-image: url("p1.jpg");
/* Set a specific height */
min-height: 700px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.p3{
/* The image used */
background-image: url("p2.jpg");
/* Set a specific height */
min-height: 700px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.p4{
/* The image used */
background-image: url("me3.jpg");
/* Set a specific height */
min-height: 900px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.p5{
/* The image used */
background-image: url("me4.jpg");
/* Set a specific height */
min-height: 700px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.button1 {
padding: 15px 25px;
width: 38%;
font-size: 20px;
text-align: center;
cursor: pointer;
outline: none;
color: black;
background-color: white;
border: none;}
.button1:hover {background-color: #DDDDDD;}
.button2 {
height: 500px;
padding: 15px 25px;
font-size: 30px;
text-align: center;
cursor: pointer;
outline: none;
color: black;
background-color: white;
border: none;}
#hidden {display: none;}
.button2:hover #hidden {display:block;}
.button2:hover {
background-color: transparent;
box-shadow: 0 12px 16px 0 whitesmoke, 10px 17px 50px 0 whitesmoke;}
.button3 {
background-color: white;
width: 100%;
height: 100%;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;}
.button3:focus {
background-color: gray;}
.button4 {
background-color: white;
width: 15%;
height: 30%;
border: none;
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;}
.button4:hover {
box-shadow: 0 12px 16px 0 whitesmoke, 10px 17px 50px 0 whitesmoke;}
.button5 {
height: 2000px;
padding: 15px 25px;
font-size: 40px;
text-align: center;
cursor: pointer;
outline: none;
color: black;
background-color: white;
border: none;}
.dropdown {
display: inline-block;
}
.dropdown-content {
color: black;
display: none;
position: relative;
background-color: transparent;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;}
.dropdown-content a {
color: maroon;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: black}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;}
.block {
height: 400px;
padding: 15px 25px;
font-size: 40px;
text-align: center;
cursor: pointer;
outline: none;
color: black;
background-color: white;
border: none;}
.block-content{
display: none;
position: absolute;
background-color: blue;
color: maroon;
padding: 12px 16px;
text-decoration: none;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
input[type=reset] {
background-color: white;
width: 100%;
border: none;
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
}
input[type=reset]:hover {background-color: #DDDDDD;}
input[type=reset]:active {background-color: gray;}
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