Skip to content

G
gitlab-inlab
Commit 97742745 authored by KUMAR SAUNACK's avatar KUMAR SAUNACK
Browse files
Options

saunack

parents
Show whitespace changes
Inline Side-by-side
Showing with 500 additions and 0 deletions
lab1/inlab/index.css 0 → 100644
View file @ 97742745
body {
background: url("bg.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
img.logo{
position:relative;
width:100%;
height:100%;
align="left";
opacity:0.4;
flow:left;
}
.article{
font-family:Arial;
left:0;
top:45%;
padding:60px;
}
.header {
position:absolute;
opacity:0.5;
margin: 10px;
padding: 10px;
width: 100%;
height: 25%;
font-family:Helvetica;
padding: lem;
color: white;
text-align: center;
}
.header:hover{
opacity:1;
}
.footer{
position:fixed;
bottom: 0;
margin:10px;
padding:1px;
font-size:60%;
width:100%;
height:10%;
font-family:helvetica;
color:brown;
text-align:center;
}
nav{
position:absolute;
right:0;
top:100px;
opacity:0.5;
font-size:75%;
margin: 0;
padding:10px;
}
nav:link{
background-color:violet;
}
nav:hover{
background-color:brown;
opacity:1;
}
nav.links{
display:block;
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
}
nav ul{
line-height: 300%
list-style-type:none;
padding:0;
}
a{
color:inherit;
}
a.blue{
color:blue;
}
.img-circle{
float:left;
border-radius:50%;
}
lab1/inlab/index.html 0 → 100644
View file @ 97742745
<!--
http://i.stack.imgur.com/jGlzr.png
-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport">
<link rel="stylesheet" type="text/css" href="index.css">
<img class="img-circle" src="photo.jpg" width=100px height=100px;>
<a name="top"><title>Kumar Saunack</title></a>
</head>
<body BGCOLOR="transparent">
<!--<p style="float: left;"><img src="logo.bmp" class="logo"></p>
-->
<div class="header"><h1>Kumar Saunack</h1></div>
<nav class="links">
<ul>
<li><a href="https://cse.iitb.ac.in">My Department</a></li>
<li>My teammates:
<ol>
<li><a href="https:in.linkedin.com/in/kumar-saurav-781361145">Kumar Saurav</a></li>
<li><a href="https://www.facebook.com/tiger.yash">Yash Shah</a></li>
</ol></li>
</ul>
</nav>
<p class="article">
<h5>About</h5>
Hi, I'm Kumar Saunack and I'm a second year B.Tech. student in CSE, IIT Bombay.<br>
Since I can't think of something, here's the list of my teammates for CS 251 course:
</p>
<table align="center">
<tr>
<th>First name</th>
<th>Last name</th>
<th>Roll number</th>
</tr>
<tr>
<th>Kumar</th>
<th>Saurav</th>
<th>160050057</th>
</tr>
<tr>
<th>Yash</th>
<th>Shah</th>
<th>16005002</th>
</tr>
</table>
<div class="footer">
Made by Kumar Saunack.<t><a class="blue" href="#top">Back to top</a></t>
</div>
</body>
</html>
lab1/inlab/readme.txt 0 → 100644
View file @ 97742745
krsaunack
I pledge on my honour that I have not given or received any unauthorized assistance on this assignment or any previous task.
CITATIONS
https://www.w3schools.com/ : for tables, css, href, opacity, hovering
https://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly: for footer
https://www.abeautifulsite.net/how-to-make-rounded-images-with-css: for making rounded images
http://i.stack.imgur.com/jGlzr.png: backgroud
I made different classes representing different types of objects (like headers, footers, articles). Tables, paragraphs and divs have also been used in the program. wherever necessary, hyperlinks have also been created.
An attempt has been made to create a dynamic webpage by changing the properites of objects on hovering.
lab1/oulab/index.css 0 → 100644
View file @ 97742745
ul.navbar-top{
width: 100%;
top:0;
left:0;
right:0;
position:fixed;
list-style-type: none;
margin: 0;
padding: 0;
background-color:white;
}
li.navbar-top{
font-family:Arial;
font-size:200%;
float:right;
display:block;
color: black;
text-align:center;
padding: 30px 14px 16px;
text-decoration: none;
border-right: 2px solid black;
}
ol{
list-style-type:none;
}
li a{
text-decoration: none;
color:inherit;
}
li.navbar-top:hover{
background-color:rgba(230,230,230,1);
}
ul.navbar-right{
list-style-type: none;
margin:0;
padding:0;
overflow:auto;
height:100%;
top: 120px;
position:fixed;
width:10%;
right:0;
background-color:transparent;
}
li.navbar-right{
padding: 30px;
font-size:150%;
}
#name{
font-family:Artifika;
}
.dropdown{
position:relative;
}
.dropdown-content{
display:none;
position:absolute;
min-width:160px;
background-color:rgba(230,230,230,1);
box-shadow:13px 13px 4px 1px;
padding: 10px 20px;
z-index:1;
left: 0;
}
ol li{
padding: 15px 10px;
}
.dropdown:hover .dropdown-content{
display:block;
}
.header{
background: url("bg.jpg") no-repeat top center fixed;
background-size: cover;
height: 900px;
width: 100%;
margin: 0;
padding: 0;
}
.footer {
display:block;
background-color: white;
color: black;
bottom:0;
padding-left:100px;
padding-right:100px;
font-size: 100%;
font-family: Arial;
text-align: center;
}
.box {
font-size: 150%;
width:85%;
padding:50px 90px 50px 15px;
margin-right:150px;
}
.img-circle{
border-radius: 50%;
width: 150px;
height: 150px;
padding-left:20px;
padding-top:30px;
}
.small{
width:60px;
height:40px;
}
table {
font-family: Roman;
color: grey;
padding-left:15px;
}
td{
padding: 50px 0;
border-bottom: 1px solid grey;
text-align: center;
}
th{
padding: 50px 0;
border-bottom: 1px solid grey;
width: 200px;
}
input[type=text],textarea{
display:inline-block;
width:70%;
padding: 10px 15px;
margin: 8px 0;
resize:none;
box-sizing:border-box;
}
input[type=text]:focus, textarea:focus{
border: 2px solid rgba(100,20,225,0.5);
}
label{
font-size:90%;
}
lab1/oulab/index.html 0 → 100644
View file @ 97742745
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap-->
<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>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is the official webpage of Kumar Saunack">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--font-->
<link href="https://fonts.googleapis.com/css?family=Artifika" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="index.css">
<style>
.article {
font-family: Helvetica;
font-size: 28px;
padding-left:15px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.title {
font-family: Arial;
font-size: 40px;
padding-left: 15px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: underline;
}
.full {
width: 100%;
}
</style>
</head>
<body BGCOLOR="transparent">
<!-- Navigation bar-->
<ul class="navbar-top">
<li class="navbar-top" style="float:left"><img class="img-circle small" style="padding-top:0" src="photo.jpg"></li>
<li id="name" class="newfont navbar-top" style="float:left"> Kumar Saunack</li>
<li class="navbar-top"> <a href="#contact">Contact</a></li>
<li class="navbar-top"><a href="https://www.cse.iitb.ac.in">My Department</a></li>
<li class="navbar-top dropdown">Interests
<ol class="dropdown-content" style="padding:10px 15px">
<li><a href="https://www.reddit.com/r/tennis">Tennis</li>
<li><a href="https://www.reddit.com/r/manga">Manga</li>
<li><a href="https://www.goodreads.com">Books</li>
</ol>
</li>
<li class="navbar-top"><a href="./index.html">Home</a></li>
</ul>
<div class="header"></div>
<ul class="navbar-right">
<li style="padding-left:40px"><h4>MY GROUP</h4></li>
<li><a href="https://www.facebook.com/tiger.yash"><img class="img-circle" src="yash.jpg" alt="Yash Shah" ></a></li>
<li><a href="https://www.facebook.com/krsaurav017"><img class="img-circle" src="saurav.jpg" alt="Kumar Saurav"></a></li>
</ul>
<div class="box" style="border-bottom:1px solid rgba(0,0,0,0.2)">
<div class="title"><b> About </b></div>
<div class="article">
You can find me in my room or on the tennis courts in my free time. To know when I'm free, see my timetable below:</div>
<table align="center">
<tr style="color:orange">
<th></th>
<th> 8:30 - 9:30</th>
<th> 9:30 - 10:30 </th>
<th> 10:30 - 11:30</th>
<th> 11:30 - 12:30</th>
<th> 2:00 - 3:30 </th>
<th> 3:30 - 5:00 </th>
<th> 5:30 - 7:00</th>
</tr>
<tr>
<th class="day">Monday</th>
<td></td>
<td>CS 207</td>
<td>CS 251</td>
<td>EE 101</td>
<td>CS 293</td>
<td>CS 293</td>
<td></td></tr>
<tr>
<th class="day">Tuesday</th>
<td>EE 101</td>
<td></td>
<td>CS 207</td>
<td>CS 251</td>
<td></td>
<td>CS 215</td>
<td>CS 213</td></tr>
<tr>
<th class="day">Wednesday</th>
<td></td>
<td>MA 403</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MA 403</td></tr>
<tr>
<th class="day">Thursday</th>
<td>CS 251</td>
<td>EE 101</td>
<td></td>
<td>CS 207</td>
<td>CS 251</td>
<td>CS 251</td>
<td></td></tr>
<tr>
<th class="day">Friday</th>
<td></td>
<td>MA 403</td>
<td></td>
<td></td>
<td>CS 215</td>
<td>CS 213</td>
<td>EE 101</td></tr>
</table>
</div>
<div id="contact" class="box">
<div class="article" > Enter you mail-id to subscribe to my mailing list</div>
<form>
<input type="text" id="email" placeholder="Your Email ID..." style="width:66%" required>
<input type="submit" value="Subscribe">
</form>
</div>
<!--
<div id="review" class="box" style="padding: 10px 20px 15px">
<form>
<label>Click this button if you liked my website</label>
<input type="submit" class="btn" value="+1">
</form>
</div>
-->
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
If you want to reach me via other media, <a href="https://www.facebook.com/profile.php?id=100013121168827">here's the link</a>
</div>
<div class="footer">
Made by Kumar Saunack. <a href="#top">Back to top</a>
</div>
</body>
</html>
lab1/oulab/readme.txt 0 → 100644
View file @ 97742745
krsaunack
I pledge on my honour that I have not given or received any unauthorized assistance on this assignment or any previous task.
CITATIONS:
https://stackoverflow.com/questions/20872806/how-do-you-scroll-the-page-content-over-a-cover-image-like-medium-com : for making the text move over the cover image
https://www.w3schools.com/bootstrap/bootstrap_ref_all_classes.asp: bootstrap references
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade: fade in overlay over image
https://www.w3schools.com/css/css_navbar.asp: block navigation bar
https://www.abeautifulsite.net/how-to-make-rounded-images-with-css: make rounded images
https://www.w3schools.com/html/html_tables.asp html tables
https://www.w3schools.com/css/css_table.asp table border
https://www.w3schools.com/howto/howto_css_contact_form.asp form
https://www.w3schools.com/css/css_dropdowns.asp dropdowns
https://stackoverflow.com/questions/32554024/positioning-of-dropdown-menu-in-css positioning dropdown in css
https://www.w3schools.com/cssref/css3_pr_box-shadow.asp box-shadow help
https://stackoverflow.com/questions/8174282/link-to-reload-current-page link for reloading current page in hyperlink
https://www.w3schools.com/bootstrap/bootstrap_ref_css_buttons.asp
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_alerts_close&stacked=h alert tabs
README
I made all the components using html and css (except for the alert icon at the bottom). A google font has also been used in the html.
A fixed navigation bar on the top and the right provide easy access to useful links. A table which displays my timetable has been inserted along with a form for subsciption. A footer provides a back-to-top link to make it easy to go to the top.
Pressing the home button reloads the page which re-displays the alert icon at the bottom.
Also, a dropdown menu has been created in the Interest tab on the header.
Bootstrap has been used to create the alert icon at the bottom.
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