Skip to content

Instantly share code, notes, and snippets.

@ellathur

ellathur/index.html

Created January 2, 2017 15:42
Show Gist options
  • Save ellathur/f0978813e082590ee6d721240d07f185 to your computer and use it in GitHub Desktop.
Save ellathur/f0978813e082590ee6d721240d07f185 to your computer and use it in GitHub Desktop.
Download ZIP
Ex1.8
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Hello World!</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/styles.css" media="screen" title="no title">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" type="text/css">
<!--link rel="stylesheet" <link href="https://fonts.googleapis.com/css?family=lobster" type="text/css"-->
<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet">
<!-- Custom styles for this template go here -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Image Corousel-->
<div class="container-fluid">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/portfolioheroimage3.png" alt="...">
<div class="carousel-caption">
<h3>“Start where you are. Use what you have. Do what you can.” ~Arthur Ashe</h3>
<p>So I have have a computer, there is no excuse not to learn how to code</p>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage.png" alt="...">
<div class="carousel-caption">
<h3>“I’d rather attempt to do something great and fail than to attempt to do nothing and succeed.” ~Robert H. Schuller</h3>
<p>So I will do something great by learning to code</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div><!--EndImage Corousel-->
<!-- Main jumbotron for a primary marketing message or call to action -->
<!-- <div class="navbar">
<div class="navbar-list">
<ul>
<li><a href="https://www.google.co.uk/">Learn More</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div> -->
<!--><div class="jumbotron">
<div class="container">
<h1>christian aguzey</h1><-->
<!--p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p-->
<!--><p><strong>Hi, I am Chris, this site will document my journey of learning To Code and eventually finding a job, stay tuned...!</strong></p>
<p>I have studied Architecture, studied construction management and now work in biotechnology. </p>
<p>I am now following my passion by learning to code and ultimately become a software delevoper. </p>
</div><-->
<!--><div class="container"></div>
</div> <!-- /jumbotron -->
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>The concept for this portfolio is to document my newbie journey into web development.</p>
<p>When you visit this site each week and notice a change, then I am on track otherwise give a nudge. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4">
<h2>Project Goals</h2>
<p>I aim to complete this course on a pace similar to full time bootcamp or at a minimum of 50 hours every 2 weeks as I work 5 days on 5 days off. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4">
<h2>Course Goals</h2>
<p>Ultimate aim for learning to code is to <strong>change careers.</strong>
Presently focused on developing excellent programming skills and I believe the jobs will come. I aim to do this course at a live-in bootcamp pace. </p>
<p>So I want to:</p>
<ol>
<li>Keep work-family balance</li>
<li>Keep my fulltime job for now</li>
<li>Keep working at bootcamp pace</li>
<li>Keep practising untl I get it!</li>
<li>Keep my sanity!</li>
</ol>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
</div><!-- /row -->
<hr>
</div> <!-- /container -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
styles.css
.jumbotron {
background-image: url("../img/gallery.jpg");
background-size: contain;
}
.jumbotron p {
color: white;
font-family: lato;
}
.jumbotron h1 {
color: /*#333;*/ #34495e;
font-family: 'Lobster Two', cursive;
}
/****Carousel****/
.carousel {
margin-left: -15px;
margin-right: -15px;
}
.carousel-caption>h3 {
color: /*#333;*/ #34495e;
}
/**** Navbar Disabled
.navbar {
background-color: #34495e;
padding: 0;
margin: 0;
text-transform: uppercase;
}
.navbar-list ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 16px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
**/
/***NavBar****/
.nav ul li {
display: inline-block;
padding: 20px 10px 20px;
float: right;
}
.nav {
background-color: black;
position: fixed;
width: 100%;
top: 0;
}
.nav ul li>a {
color: white;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
}
.nav a:hover {
color: #ff0;
text-decoration: none;
}
/*****Contact styles***/
.container1 {
width: 90%;
margin: 5% 5%;
color: white;
text-align: center;
font-family: lato;
}
.glyphicon {
padding-right: .5em;
}
.contact {
}
.contactme {
text-align: center;
padding-top: 5%;
}
.Bold-email {
font-weight: bold;
font-size: 2em;
font-weight: 100;
}
.contact-address>p {
font-size: 2em;
font-weight: 100;
}
.follow a {
}
img.resize {
max-width: 5%;
max-height: 2%;
padding-bottom: 5%;
}
img.gmap {
max-width: 50%;
max-height: 50%;
}
body {
background-color: #34495e;
}
/****FAQs***/
.panel-default>.panel-heading {
color: #44f;
background-color: white;
border-style: none;
}
#headingOne {
padding-top: 5%
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment