Last active
June 23, 2018 18:38
-
-
Save Skd10/7447700ce9a6e46499c6ca31e04deabd to your computer and use it in GitHub Desktop.
site
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head> | |
<html lang="en"> | |
<title>Sean's Webpage</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"> | |
<link rel = "stylesheet" href = "css/style.css"> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
<style> | |
/* Remove the navbar's default margin-bottom and rounded borders */ | |
.navbar { | |
margin-bottom: 0; | |
border-radius: 0; | |
} | |
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */ | |
.row.content {height: 450px} | |
/* Set gray background color and 100% height */ | |
.sidenav { | |
padding-top: 20px; | |
background-color: #f1f1f1; | |
height: 100%; | |
} | |
/* Set black background color, white text and some padding */ | |
footer { | |
background-color: #555; | |
color: #3333ff; | |
padding: 15px; | |
} | |
/* On small screens, set height to 'auto' for sidenav and grid */ | |
@media screen and (max-width: 767px) { | |
.sidenav { | |
height: auto; | |
padding: 15px; | |
} | |
.row.content {height:auto;} | |
} | |
</style> | |
</head> | |
<body> | |
<nav class="navbar navbar-inverse"> | |
<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="#"><img src="https://image.ibb.co/kRg0k8/Skd_logo.png" width = "100" height = "25"></a> | |
</div> | |
<div class="collapse navbar-collapse" id="myNavbar"> | |
<ul class="nav navbar-nav"> | |
<li class="active"><a href="#">Home</a></li> | |
<li><a href="#">About</a></li> | |
</ul> | |
</div> | |
</div> | |
</nav> | |
<div class="container-fluid text-center"> | |
<div class="row content"> | |
<div class="col-sm-2 sidenav"> | |
<p><a href="https://github.com/Skd10" target = "_blank">View My Github</a></p> <!--github link--> | |
<p><a href="https://codepen.io/skd10/" target = "_blank">View My CodePen</a></p> <!--code pen link--> | |
<p><a href="https://trinket.io/library/trinkets" target = "_blank">View My Trinket</a></p> <!--trinket link--> | |
</div> | |
<div class="col-sm-8 text-left"> | |
<h1>Welcome</h1> | |
<p>Hello, my name is Sean. I am 12 years old and I've been working with my coding coach, Acelia, in python. We just recently moved to processing with python, HTML, CSS, and Java Script. | |
Processing is a programming language that allows you to create 3-D as well as 2-D graphics. I've been working in processing for about three months. | |
My main program in processing is a 3-D simulation of the great northern hemisphere. The constellations are 2-D graphics on a 3-D plain. | |
In HTML, CSS, and Java Script I have been working on my first project... This webpage. This project is supposed to be a link to all of my projects and a little bit about myself. After this project, I hope to accomplish many more and develop my skills as a coder. | |
</p> | |
<hr> | |
<h3>Current Project</h3> | |
<p>I'm currently working on the webpage that you're looking at. Here is a link to it.</p> | |
</div> | |
<div class="col-sm-2 sidenav"> | |
<div class="well"> | |
<p>ADS</p> | |
</div> | |
<div class="well"> | |
<p>ADS</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<footer class="container-fluid text-center"> | |
<p>Sean's Site Est. 2018</p> | |
</footer> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Remove the navbar's default margin-bottom and rounded borders */ | |
.navbar { | |
margin-bottom: 0; | |
border-radius: 0; | |
} | |
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */ | |
.row.content {height: 450px} | |
/* Set gray background color and 100% height */ | |
.sidenav { | |
padding-top: 20px; | |
background-color: #f1f1f1; | |
height: 100%; | |
} | |
/* Set black background color, white text and some padding */ | |
footer { | |
background-color: #555; | |
color: #3333ff; | |
padding: 15px; | |
} | |
/* On small screens, set height to 'auto' for sidenav and grid */ | |
@media screen and (max-width: 767px) { | |
.sidenav { | |
height: auto; | |
padding: 15px; | |
} | |
.row.content {height:auto;} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment