First commit

parents
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MY page</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="stylesheet" type="text/css" href="cssfiles/index.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato&effect=neon|3d-float">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans|Oswald" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Cedarville Cursive' 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>
<link rel="stylesheet" type="text/css" href="css_file.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
body{
padding-top: 70px;
background: url("background1.jpg");
}
div.a {
background-image: url("backtable.jpg");
background-size: 80px 60px;
background-repeat: no-repeat;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#myPage"><span class="glyphicon glyphicon-globe logo-small"></span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT ME</a></li>
<li><a href="#timetable">MY TIME TABLE</a></li>
<li><a href="#hobbies">MY HOBBIES</a></li>
<li><a href="#contact">MY CONTACT</a></li>
</ul>
</div>
</div>
<div class="fixed-action-btn" style="top: 35px; right: 24px;">
<a class="tooltipped btn-floating btn-large" style="background-color: #E25345; " data-delay="5" data-tooltip="Group Page" href="#about" target="_blank">
<img src="images.jpeg" style="height: 60px" class="circle">
</a>
</div>
</nav>
<div id="about">
<BR><BR>
<div class="jumbotron text-center">
<h1 style="font-family: F2">WELCOME to MY WEBpage</h1>
</div>
<div class="container">
<div id="myCarousel"class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="DSC_3905.JPG" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="im_3.jpg" height = 300px alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="DSC_4042.JPG" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div><BR><BR>
</div>
</div>
<div id = "timetable">
<script>
for(var x=0;x<=15;x++){
document.write("<br>")
}
</script>
<H2 align = "center" style="color:red ; font-family:F1; font-size: 80px "> Time Table</H2><BR>
<div>
<div class="container row center-align section">
<div class="col s12">
<div class="card hoverable">
<table class="table table-bordered" align = "center" width = 100% cellpadding = 10px cellspacing = 10px>
<div class="a">
<tr>
<th> TIME/DAYS
</th>
<th> 08:30 - 09:25 </th>
<th> 09:30 - 10:25 </th>
<th> 10:35 - 11:30 </th>
<th> 11:35 - 12:30 </th>
<th> 14:00 - 15:25 </th>
<th> 14:00 - 16:55 </th>
<th> 15:30 - 16:55 </th>
</tr>
<tr class = "success">
<th> MONDAY </th>
<td> </td>
<td> CS 207 </td>
<td> CS 251 </td>
<td> EE 101 </td>
<td> </td>
<td> CS 293 </td>
<td> </td>
</tr>
<tr class = "danger">
<th> TUESDAY </th>
<td> EE 101 </td>
<td> </td>
<td> CS 207 </td>
<td> CS 251 </td>
<td> </td>
<td> CS 293 </td>
<td> CS 213 </td>
</tr>
<tr class="active">
<th> WEDNESDAY </th>
<td> </td>
<td>PH 401 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class = "warning">
<th> THURSDAY </th>
<td>CS 251 </td>
<td>EE 101 </td>
<td> </td>
<td> CS 207 </td>
<td> </td>
<td> CS 293 </td>
<td> </td>
</tr>
<tr class = "info">
<th> FRIDAY </th>
<td> </td>
<td> PH 401 </td>
<td> </td>
<td> </td>
<td>CS 215 </td>
<td> </td>
<td>CS 213 </td>
</tr>
</div>
</table>
</div>
</div>
</div>
</div>
<script>
for(var x=0;x<=15;x++){
document.write("<br>")
}
</script>
</div>
<div id = "hobbies" class="section scrollspy z-depth-3">
<div class="container row center-align section">
<div class="col s12">
<div class="card hoverable">
<div class="card red lighten-1 s12">
<div class="s2 center-align">
<BR><BR>
<h2 style="text-align:center;color:#DE972C;font-family: Poiret One;font-weight:bold">THINGS I LIKE</h2><br>
</div>
</div>
<div class="card-content amber lighten-5">
<div class= "left-align container">
<h4 style="font-family: 'Oswald',serif;color: red"><br>I believe that there shouldn't be a thing as "free time"<BR>
So here is what i do to utilise the time..</br></h4>
<div style="font-size: 22px">
<ul>
<li>Playing Badminton</li>
<li>Playing Squash,carrom</li>
<li>Reading mystery novels</li>
<li>Travelling</li>
<li>Having out-mess food(I am a big foodie!!)</li>
<li>Watching Horror Movies</li>
<li>Listening bollywood songs( I am a big fan of ARIJIT!!)</li>
</ul>
</div>
<div class="center-align">
<h4 style="font-family: 'Oswald',serif "><br>This is one video which i want to share with you all....</br></h4>
<iframe src="https://www.youtube.com/embed/XrZuZrFxSiA" height="400px" width="610px"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
for(var x=0;x<=8;x++){
document.write("<br>")
}
</script>
</div>
<div id = "contact">
<BR><BR><BR>
<div style="color: #777;background-color:#F9FD7E;text-align:center;padding:50px 80px;font-size: 17px;text-align: justify;" >
<h2 style="text-align:center;color:#DE972C;font-family: Poiret One;font-weight:bold">Contact me</h2><br>
<p><ol><font size="4">
<li>Drop me a mail at <a href = "https://mail.google.com/"> amanjain2898@gmail.com</a></li>
<li>Or just ping me on <a href = "https://www.facebook.com/profile.php?id=100012775305400"> facebook!! </a></li>
<li> Find me at: </li>
<div class="container-fluid">
<div class="row">
<div class="sicon">
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-3 text-center">
<div class="icon-circle">
<a href="https://www.facebook.com/profile.php?id=100012775305400" class="ifacebook" title="Facebook"><i class="fa fa-facebook"></i></a>
</div>
</div>
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-3 text-center">
<div class="icon-circle">
<a href="#" class="itwittter" title="Twitter"><i class="fa fa-twitter"></i></a>
</div>
</div>
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-3 text-center">
<div class="icon-circle">
<a href="#" class="igoogle" title="Google+"><i class="fa fa-google-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
</font></ol></p><br>
<div class="detailBox">
<div class="titleBox">
<label>Comment Box</label>
<button type="button" class="close" aria-hidden="true">&times;</button>
</div>
<div class="commentBox">
<p class="taskDescription" style= "font-size:20px"><ul><strong>Feel free to leave a comment..</strong></ul></p>
</div>
<div class="actionBox">
<ul class="commentList">
<li>
<div class="commenterImage">
<img src="http://placekitten.com/50/50" />
</div>
<div class="commentText">
<p class="">Hello!!.</p> <span class="date sub-text">on July 22th, 2017</span>
</div>
</li>
<li>
<div class="commenterImage">
<img src="http://placekitten.com/45/45" />
</div>
<div class="commentText">
<p class="">Nice work!! I found your website very interesting :P</p> <span class="date sub-text">on July 22th, 2017</span>
</div>
</li>
<li>
<div class="commenterImage">
<img src="http://placekitten.com/40/40" />
</div>
<div class="commentText">
<p class="">You can improve this page by adding parallax effect in it. Have a look at <a href = "https://www.w3schools.com/howto/howto_css_parallax.asp">
https://www.w3schools.com/howto/howto_css_parallax.asp</a></p> <span class="date sub-text">on July 23rd, 2017</span>
</div>
</li>
</ul>
<form class="form-inline" role="form">
<div class="form-group">
<input class="form-control" type="text" placeholder="Your Comments:" />
<div class="form-group">
<input class="form-control" type="text" placeholder="Your Name: " />
</div><br>
<div class="form-group">
<button class="btn btn-default">Add</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
for(var x=0;x<=2;x++){
document.write("<br>")
}
</script>
<script>
$(document).ready(function(){
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
if (this.hash !== ""){
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
window.location.hash = hash;
});
}
});
})
</script>
</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