Skip to content

Instantly share code, notes, and snippets.

@marekdano

marekdano/about.html

Last active October 27, 2015 15:37
Show Gist options
  • Save marekdano/58c9e238e7a6eed22811 to your computer and use it in GitHub Desktop.
Save marekdano/58c9e238e7a6eed22811 to your computer and use it in GitHub Desktop.
Download ZIP
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>
<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
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>
<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>marek@me.com</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
custom.css
/*** Main page ***/
* {
box-sizing: border-box;
}
body {
background-color: #f2f2f2;
color: #333;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
a:hover, a:visited, a:active, a:focus {
text-decoration: none;
color: #333;
}
/* 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 */
.jumbotron {
background: url('../img/landscape.jpg') no-repeat;
background-size: cover;
padding-top: 15em;
}
.jumbotron h1 {
color: #fff;
}
/******* Contact page *******/
/* Sections */
.about-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 */
.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;
}
/******* Contact page *******/
/* Sections */
.contact-container {
margin: 0 auto;
height: 100%;
padding-top: 4em;
background: url('../img/mountain3.jpg') no-repeat 75% center fixed;
background-size: cover;
z-index: 10;
color: #F0F0F0;
}
.header {
text-align: center;
margin: 5% 0;
}
.details {
display: block;
max-width: 420px;
margin: 10em 10em 15em;
padding: 5%;
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;
}
/******* FAQ page *******/
.faq-container {
width: 80%;
margin: 0 auto;
padding: 2em;
}
.header-icon {
float: right;
padding: 14px 14px;
background: url('../img/icons/arrow_lightblue_down.png') no-repeat 1px;
}
.panel-group .panel {
margin: 15px;
}
.panel-default > .panel-heading {
background-color: #fdfdfd;
}
.panel-default > .panel-heading:hover {
background-color: #fff;
}
.panel-heading > a {
color: #009FDA;
}
.panel-heading > a:hover {
color: #333;
}
.panel-heading > a:focus {
color: #333;
}
.panel-title {
padding: 7px 0 ;
}
/* Typo */
.panel-title {
letter-spacing: 0.04em;
font-size: 1.3em;
}
.panel-body {
font-size: 1.1em;
}
Raw
faq.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>FAQ</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.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="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div> <!-- end navigation bar -->
<div class="faq-container">
<div class="header">
<h1>FAQ</h1>
<h5>Quick answers</h5>
</div> <!-- end header -->
<div class="wrapper">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="header-icon"></div>
<h4 class="panel-title">
Why did you decide to become a web developer?
</h4>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<div class="header-icon"></div>
<h4 class="panel-title">
What is your design process?
</h4>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<div class="header-icon"></div>
<h4 class="panel-title">
Who are your clients?
</h4>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<div class="header-icon"></div>
<h4 class="panel-title">
What is your average project turnaround?
</h4>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div> <!-- end wrapper -->
</div> <!-- end container -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<!-- Bootstrap core JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<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
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>
<!-- 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