Skip to content

Instantly share code, notes, and snippets.

@andrefe90

andrefe90/about.html

Created October 13, 2015 12:00
Show Gist options
  • Save andrefe90/cfc386f3ec7fdcc62f56 to your computer and use it in GitHub Desktop.
Save andrefe90/cfc386f3ec7fdcc62f56 to your computer and use it in GitHub Desktop.
Download ZIP
Grid System
Raw
about.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Awesome Title</title>
<!--[if lt IE 9]
<script src="dist/html5shiv.js"></script>
<![endif]-->
<link href="css/normalize.css" rel="stylsheet">
<link href="css/styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="nav">
<a href="index.html">Home</a>
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div>
<div class="container">
<div class= "header">
<h1>This is my personal heading</h1>
</div>
<div class= row>
<div class="col-md-4 col-xs-12 image">
<img src="img/beach.jpg" width= "380" height="600" alt="beach">
</div>
<div class="col-md-4 col-xs-12 intro column">
<h2>Looks like an Introduction</h2>
<p>this is the text of my introductory paragraph</p>
</div>
<div class="col-md-4 col-xs-12 skills column">
<h3>My Skills</h3>
<ul id="skill set">
<li>Not web development
<li>not coding of any sort
</ul>
</div>
</div>
<div class="main_text">
<h3>Even more about me</h3>
<p>Drinking vinegar roof party mlkshk, kogi pour-over paleo banjo. Food truck distillery fixie, meditation kogi fingerstache Austin jean shorts PBR&B cronut squid. Asymmetrical freegan fingerstache XOXO. Chambray narwhal selvage Bushwick, pork belly 90's four dollar toast lo-fi polaroid actually seitan DIY. Viral cred organic 3 wolf moon, forage food truck tilde Carles polaroid retro Schlitz distillery aesthetic tofu American Apparel. Sartorial Truffaut polaroid migas four loko chillwave, DIY selfies messenger bag artisan. Truffaut artisan put a bird on it, art party Carles twee chillwave locavore messenger bag gentrify seitan hoodie.</p>
</div>
</div><!--end container-->
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World!</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Custom styles for this template go here -->
<link href="css/styles.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="nav">
<a href="#">Home</a>
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<!--div class="jumbotron"-->
<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/portfolioheroimage_edited.jpg" alt="hello">
<div class="carousel-caption">
<h1>Welcome!</h1>
<p>Have fun exploring my website.</p>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage3_edited.jpg" alt="hello">
<div class="carousel-caption">
<h1>Welcome!</h1>
<p>Have fun exploring my website.</p>
</div>
</div>
<div class="item">
<img src="img/lesson8-portfolioheroimage2.jpg" alt="hello">
<div class="carousel-caption">
<h1>Welcome!</h1>
<p>Have fun exploring my website.</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 class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4 col-xs-12">
<h2>Portfolio Concept</h2>
<p>One of the websites that I would like to have in my concept is a site similar to www.heuteinhamburg.de. Just something where you can list events, parties, projects and the like while giving everything a simple, intuitive and novel look that stays in your mind and that is not readily forgotten after the user has left the website</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4 col-xs-12">
<h2>Project Goals</h2>
<p>My course officially runs for 6 months but i want to try to do a lot of work during july and august as I am basically free then. From september on, I will either continue to study or work. Depending on which it will be i might have to go a bit slower then.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4 col-xs-12">
<h2>Course Goals</h2>
<p>I am not changing careers, because I dont even have one yet. I would like to build something own and me and my friends already had some nice ideas, but its just impossible to do anything today without knowing how to write at least some code. I would also find it extremely helpful to be able to earn some extra money as a freelancer all the while doing something I (probabyl) like and which will be helpful for me. So in that sense I am trying to enhance my skill set. And in the future, when I have succesfully finished this course I might even go further and start a mobile developing course.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<hr>
</div> <!-- /container -->
</div> <!--container-fluid-->
<div class="contaniner">
<div class="row" id= "puppyrow">
<div class="col-lg-3 col-md-6 col-xs-12">
<img src="img/puppy.jpg" class= "img-responsive">
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
<img src="img/puppy.jpg">
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
<img src="img/puppy.jpg">
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
<img src="img/puppy.jpg">
</div>
</div>
</div>
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
styles.css
/* Start Nav Bar */
.nav {
background-color: black;
position: fixed;
width: 100%;
top: 0;
float: right;
z-index: 1;
}
.nav a {
color: white;
text-transform: uppercase;
padding: 100px 10px 20px;
top: 0;
transition: color 600ms;
}
.nav a:hover {
color: #ff0;
text-decoration: none;
}
.nav ul li {
display: inline-block;
float: right;
}
.nav ul li a {
color: white;
text-transform: uppercase;
padding: 10px 10px 10px;
top: 0;
}
/* End Nav Bar */
.carousel {
height: 100%;
}
.container-fluid {
padding-left: 0px;
padding-right: 0px;
}
/* fonts */
h1,
p {
color: black;
}
/* End fonts*/
/*Start About*/
* { box-sizing: border-box;}
body {
background-color: #fffeea;
color: #34495e;
}
.container {
width: 80%;
margin: 0 auto;
padding-top: 50px;
}
.header h1 {
text-align: center;
margin-bottom: 50px;
}
.main_text {
clear: both;
padding-top: 60px;
}
.skills {
background-color: #5AD4C2;
color: #FFF;
padding-bottom: 490px;
}
/*Typography*/
h1,
h2,
h3 {
font-family: 'Open Sans', sans-serif;
}
p {
font-family: 'Roboto Slab', serif;
}
.skills column ul li {
font-family: 'Roboto Slab', serif;
}
.intro p {
font-family: 'Open Sans', sans-serif;
font-size: 3em;
font-weight: 100;
-webkit-margin-before: 0;
}
.skills h3 {
text-align: center;
text-transform: uppercase;
}
/*End About*/
@dogweather
Copy link

Looks good. Just a couple of things:

  1. you should make sure that you have no space between the = and ". You only did that in a couple of places. Not a big deal.
  2. You probably saw that the puppies layout isn't quite reacting correctly at different sizes. It's probably because you've got that extra class on one of the images: https://gist.github.com/andrefe90/cfc386f3ec7fdcc62f56#file-index-html-L125

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment