Skip to content

Instantly share code, notes, and snippets.

@marekdano

marekdano/about.html

Created October 26, 2015 08:31
Show Gist options
  • Save marekdano/3834c3fb8293f8087d62 to your computer and use it in GitHub Desktop.
Save marekdano/3834c3fb8293f8087d62 to your computer and use it in GitHub Desktop.
Download ZIP
careerfoundry module 2 exercise 1
Raw
about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About me</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/about_style.css">
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation bar -->
<div class="nav">
<div class="home-logo">
<a href="index.html">Home</a>
</div>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- Main container -->
<div class="container">
<div class="header">
<h1>About me</h1>
</div>
<div class="image column">
<img src="img/unsplash-guyonwall.jpg" alt="profile picture">
</div>
<div class="intro column">
<h2>A bit about myself</h2>
<p>Brooklyn kitsch mumblecore High Life. Single-origin coffee</p>
</div> <!-- end intro -->
<div class="skills column">
<h3>My Skills</h3>
<ul id="skill-list">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div> <!-- end skills -->
<div class="main-text">
<h3>More about me</h3>
<p>Stumptown synth 8-bit, listicle direct trade occupy umami tattooed banh mi whatever Brooklyn kitsch mumblecore High Life. Single-origin coffee Bushwick gluten-free DIY, readymade cliche banh mi +1 sriracha dreamcatcher put a bird on it Etsy craft beer whatever retro. Ethical four dollar toast cardigan, deep v kitsch Banksy irony High Life. Tilde Neutra Etsy, street art four dollar toast Truffaut chambray 8-bit meggings. Hoodie bicycle rights YOLO, salvia meditation mixtape master cleanse McSweeney's pug Tumblr. Intelligentsia health goth cliche, stumptown banh mi twee Banksy umami salvia typewriter. Tote bag listicle twee DIY Vice.</p>
</div><!-- end main-text -->
</div><!-- end container -->
</body>
</html>
Raw
about_style.css
/* main */
* {
box-sizing: border-box;
}
body {
background-color: #f2f2f2;
color: #333;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* Sections */
.container {
width: 80%;
margin: 0 auto;
padding-top: 2em;
}
.header h1 {
text-align: center;
padding: 30px 0 20px;
}
.image img {
height: 100%;
width: 100%;
}
.column {
float: left;
width: 33%;
}
.intro {
padding: 0 0 0 30px;
}
.skills {
background-color: #8FAFAF;
padding: 10px 0;
}
.main-text {
padding: 10px 0;
clear: both;
}
#skill-list {
list-style: none;
padding-left: 5px;
margin-left: 50px;
}
/* Typography */
h1,
h2,
h3,
p {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.intro p {
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size: 2em;
font-weight: 100;
margin-top: 0;
}
.skills h3 {
text-align: center;
text-transform: uppercase;
}
/*** Navigation bar ***/
.nav {
display: inline-block;
background: black;
position: fixed;
width: 100%;
top: 0;
}
.nav ul {
float: right;
margin: 0;
padding-right: 20px;
}
.nav ul li {
float: left;
padding: 20px 10px 20px;
list-style: none;
}
.nav ul li a {
border-bottom: 3px solid transparent;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.nav ul li a:hover {
color: #fff;
border-bottom: 1px solid #fff;
text-decoration: none;
padding: 4px 6px;
}
.home-logo {
float: left;
display: block;
padding: 20px 6px;
margin: 0 4px 0 40px;
color: #c3c3c3;
}
.home-logo a:hover {
text-decoration: none;
color: #fff;
font-weight: 700;
}
.nav a {
text-align: center;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.05em;
font-size: 14px;
padding: 12px 6px;
margin: 0 4px;
color: #c3c3c3;
}
Raw
contact.html
<!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>Contact me</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/contact_style.css">
<!-- 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]-->
<title>Contact</title>
</head>
<body>
<!-- Navigation bar -->
<div class="nav">
<div class="home-logo">
<a href="index.html">Home</a>
</div>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- Main container -->
<div class="container">
<div class="header">
<h1>Contact</h1>
<h5>Reach me whenever you want</h5>
</div><!-- end header -->
<div class="details">
<h2>Marek Dano</h2>
<p class="email"><i class="fa fa-envelope"></i><span>[email protected]</span></p>
<p class="phone"><i class="fa fa-phone"></i><span>+353 1 234567</span></p>
<p class="address"><i class="fa fa-home"></i><span>123 Somewhere St., City, ANYWHERE</span></p>
</div> <!-- end details -->
</div><!-- end container -->
</body>
</html>
Raw
contact_style.css
/* main */
body {
background: url('../img/mountain3.jpg') no-repeat 75% center fixed;
background-size: cover;
color: #F0F0F0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* Sections */
.container {
width: 80%;
margin: 0 auto;
padding-top: 4em;
}
.header {
text-align: center;
margin: 5% 0;
}
.details {
display: block;
position: absolute;
padding: 5%;
top: 40%;
border: #DEDEDE 3px solid;
border-radius: 5px;
}
.details h2 {
margin-top: 0.5em;
}
.details span {
padding-left: 8px;
}
/* Typography */
.header h5 {
color: #EFC67B;
font-style: oblique;
font-weight: 800;
}
.details h2 {
font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
font-weight: bold;
letter-spacing: 0.15em;
}
.details i {
color: #EFC67B;
}
.details p {
font-weight: 600;
letter-spacing: 0.05em;
}
/*** Navigation bar ***/
.nav {
display: inline-block;
background: black;
position: fixed;
width: 100%;
top: 0;
}
.nav ul {
float: right;
margin: 0;
padding-right: 20px;
}
.nav ul li {
float: left;
padding: 20px 10px 20px;
list-style: none;
}
.nav ul li a {
border-bottom: 3px solid transparent;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.nav ul li a:hover {
color: #fff;
border-bottom: 1px solid #fff;
text-decoration: none;
padding: 4px 6px;
}
.home-logo {
float: left;
display: block;
padding: 20px 6px;
margin: 0 4px 0 40px;
color: #c3c3c3;
}
.home-logo a:hover {
text-decoration: none;
color: #fff;
font-weight: 700;
}
.nav a {
text-align: center;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.05em;
padding: 12px 6px;
margin: 0 4px;
font-size: 14px;
color: #c3c3c3;
}
Raw
custom.css
/*** Navigation bar ***/
.nav {
display: inline-block;
background: black;
position: fixed;
width: 100%;
top: 0;
}
.nav ul {
float: right;
margin: 0;
padding-right: 20px;
}
.nav ul li {
float: left;
padding: 20px 10px 20px;
list-style: none;
}
.nav ul li a {
border-bottom: 3px solid transparent;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.nav ul li a:hover {
color: #fff;
border-bottom: 1px solid #fff;
text-decoration: none;
padding: 4px 6px;
}
.home-logo {
float: left;
display: block;
padding: 20px 6px;
margin: 0 4px 0 40px;
color: #c3c3c3;
}
.home-logo a:hover {
text-decoration: none;
color: #fff;
font-weight: 700;
}
.nav a {
text-align: center;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.05em;
font-size: 14px;
padding: 12px 6px;
margin: 0 4px;
color: #c3c3c3;
}
.jumbotron {
background: url('../img/landscape.jpg') no-repeat;
background-size: cover;
padding-top: 15em;
}
.jumbotron h1 {
color: #fff;
}
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>Marek Dano - student of CareerFoundry</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Custom styles for this template go here -->
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- 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>
<!-- Navigation bar -->
<div class="nav">
<div class="home-logo">
<a href="index.html">Home</a>
</div>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Marek Dano, Student of CareerFoundry.</h1>
<p>This is a template for my porfolio website. </p>
<a href="https://google.com">Google</a>
<a href="about.html"><strong>About</strong></a>
<a href="contact.html"><strong>Contact</strong></a>
</div><!-- /container -->
</div><!-- /jumbotron -->
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio</h2>
<p>List of my future projects...</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>The goal of this project is making the portfolio template of my next created projects on careerfoundry.</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>Bring my skills to the next level. Learn new skills and be prepare for entry level web developer position after six months.</p>
<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 -->
<!-- ============================= -->
<!-- Bootstrap core JS -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment