Commit 57569250 authored by PHUNTSOG WANGCHUK's avatar PHUNTSOG WANGCHUK

wangchuk

parent df3672db
As a part of the first Out-lab assignment for CS251, I've implemented the
following in my web-page, apart from the elements present in the In-lab submission:
1. Bootstrap based navigation bar
2. Google API fonts
3. CSS Forms
4. Responsive screen (Cell-phone optimised)
5. Button based hyper-links
6. Blockquotees
7. Fixed background
8. CSS
The page extensively uses CSS and the Bootstrap library to create block
divisions and columns. This is done by creating links to the library,
apart from the usual CSS stylesheet links.
Citations:-
1. www.w3schools.com (for creating buttons and navigation bar)
2. www.tutorialspoint.com (for including Google API fonts)
3. www.youtube.com (for general research)
\ No newline at end of file
#pic {
margin-bottom: 30px;
width:100%;
}
#general{
margin-left:10%;
font-size:20px;
font-family:helvetica;
text-align:center;
width:80%;
}
#table1{
margin-top: 30px;
margin-bottom:50px;
font-size:20px;
clear:both;
text-align: center;
}
#survey {
margin-left:10%;
width:80%;
margin-bottom;
}
#tic1 {
float: left;
}
<!DOCTYPE html>
<html>
<style>
body {
text-shadow:1px 1px black;
height:100%;
}
a { color:#1f3e58 ;
text-shadow: 0px 0px black;
font-weight:bold;
}
.img-circle {
border-radius: 70%;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="helper.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Aguafina Script' rel='stylesheet'>
<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>
<title>
Phuntsog Wangchuk</title>
<nav style="border-radius:0" 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="#">Phuntsog Wangchuk</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<li><a href="#general">About me</a></li>
<li><a href="#links">Hobbies and Interests</a></li>
<li><a href="#survey">Survey</a></li>
<li><a href="#tic1">Reviews</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://www.facebook.com/profile.php?id=100007510396666" target="_blank"><span class="glyphicon glyphicon-user"></span>Visit me on Facebook</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center">
<img src="screenshot1.png" alt="Picture of Phuntsog Wangchuk" align=right height=200 width=200 class="img-circle" />
<h1 style="font-family:'Lato'; color:#555a59 ; text-align:center;"> <b>Welcome Stranger</b> </h1><br />
<font face="times new roman">
<h3>A brief introduction to Phuntsog Wangchuk</h3> <br />
<h4>Conceived, designed and created by Phuntsog Wangchuk.</h4> <br />
<h5> &copy; All rights reserved by Phuntsog Wangchuk &trade; </h5>
</font>
</div>
</head>
<body style="background-attachment: fixed" background="background6.jpg">
<hr />
<div class="container" style="width:100%">
<div class="row">
<div class="col-sm-12">
<div id="general">
<center><big><h1 style="font-family: 'Aguafina Script'">Hello...</h1></big></center>
<p> ....It's me. I've been wondering if after...Oh sorry! I'm getting distracted. <br /> My name is Phuntsog Wangchuk, (naam to suna hoga). I'm currently pursuing a BTech degree in <a name="CSE@IITB" target="_blank" href="https://www.cse.iitb.ac.in">Computer Science and Engineering</a> from IIT Bombay.</p>
<p>I'm originally a resident of Leh, Ladakh, so I'm pretty used to being high all the time, altitudinally speaking. Sarcasm is like a second language to me, and you can usually tell who my friends are by identifying the sorry individuals constantly being insulted by me </p>
<p>As a second year student, I find it difficult maintaining a positive outlook in life all the time, owing to the intense course-work and academic load, so I often use humour in daily life to mask my insecurities and tensions. This web-page is no exception to this.</p>
<p>If you are reading this, I hope you appreciate the role sarcasm and humour play in all our lives, and take this web-page lightly. I take this assignment very seriously and am focussing primarily on presentation and overall appearance. I hope the textual content doesn't seem disrespectful or callously created, but I can't think of anything else to write at the moment.</p>
<p>So what else can I tell you about myself?</p>
<ol>
<li>I'm a Piscean</li>
<li>I'm a Buddhist</li>
<li>I'm struggling to keep my BMI in the optimal zone</li>
<li>I'm slightly deficient in Vit-C</li>
<li>I'm very sarcastic (surprise, surprise!)</li>
</ol>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="pic" >
<img src="picture.png" border=50px width=100% height=56% />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div id="links" bgcolor>
<font face=arial size=5px>
<ul><b><u>Hobbies and Interests</u></b><br />
<li><a href="https://en.wikipedia.org/wiki/Swimming_(sport)" target="_blank">Swimming</a></li>
<li><a href="https://www.spotify.com/" target="_blank">Music</a></li>
<li><a href="#table1">Creating heterozygous monohybrid cross tables</a></li>
<li><a href="http://www.amazon.in/b?node=8371087031&tag=googinkenshoo-21&ascsubtag=370ce272-5e15-4c9e-ab98-08e9d84f6818" target="_blank">Casual Reading</a></li>
<li><a href="https://makeameme.org/" target="_blank">Creating memes</a></li>
<li><a href="https://www.google.co.in/search?q=creating+unordered+lists&ie=&oe=" target="_blank">Creating unordered lists for no good reason</a></li>
</ul>
</font>
</div>
</div>
<div class="col-sm-6">
<div id="team">
<font face=arial size=5px>
<ul><b><big><u>Team members</u></big></b>
<li> Meet Kathiriya (Roll no. 160050001)</li>
<li> Shreyas Pimpalgaonkar (Roll no. 160050024)</li></ul>
</font>
</div>
</div>
<div class="row">
<div id="pic" >
<img src="picture2.png" border=50px width=100% height=56% />
</div>
</div>
<div class="row">
<div id="table1">
<center>Here's a Heterozygous monohybrid cross for F1 filial generation I just drew.
</center><br />
<table color=black width=50% align=center border=4 cellpadding=200 cellspacing=5>
<tr bgcolor=grey><th> </th><th><big>T(dominant)</big></th><th><big>t(recessive)</big></th>
</tr>
<tr><th bgcolor=grey><big>T(dominant)</big></th><td>TT</td><td>Tt</td>
</tr>
<tr><th bgcolor=grey><big>t(recessive)</big></th><td>Tt</td><td>tt</td>
</tr>
</table>
</div>
</div>
<div id="survey" class="row">
<div class="col-sm-12">
<h1>Please complete this survey</h1>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Credit card no:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Pin:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="form-group">
<label for="email">The 3 digits on the back of your card:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<div class="row">
<center><h2> Let's hear from some of my critics. </h2></center><br />
<div id="tic1" class="col-sm-3">
<blockquote>"Wangchuk happens to have one of the sharpest, wittiest and cleverest minds in the eastern hemisphere." <br />
<i>-The Washington Post</i> </blockquote>
</div>
<div id="tic1" class="col-sm-3">
<blockquote>"Era defining genius! Our generation is blessed to have witnessed his brilliance." <br />
<i>-New York Times</i> </blockquote>
</div>
<div id="tic1" class="col-sm-3">
<blockquote>"His understanding of the universe is unrivalled. If anyone can disprove the Second Law of Thermodynamics, it's him." <br />
<i>-Stephen Hawking</i> </blockquote>
</div>
<div id="tic1" class="col-sm-3">
<blockquote>"I'm pretty sure he's the Batman..." <br />
<i>-Bruce Wayne</i> </blockquote>
</div>
</body>
</html>
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