Skip to content

Instantly share code, notes, and snippets.

@marekdano

marekdano/custom.css

Last active November 2, 2015 13:34
Show Gist options
  • Save marekdano/aa42a71ef186dc1868b5 to your computer and use it in GitHub Desktop.
Save marekdano/aa42a71ef186dc1868b5 to your computer and use it in GitHub Desktop.
Download ZIP
careerfoundry module 2 exercise 5
Raw
custom.css
/*** Main page ***/
* {
box-sizing: border-box;
}
body {
background-color: #f2f2f2;
color: #333;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-top: 40px;
}
a {
text-decoration: none;
}
a:hover, a:visited, a:active, a:focus {
text-decoration: none;
color: #333;
}
.header {
text-align: center;
margin: 0 0 3% 0;
}
.anchor {
padding-top: 50px;
}
/* Navigation bar */
.navbar {
border: none;
}
.nav > li > a {
border-bottom: 4px solid transparent;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.nav > li > a:hover {
background: transparent;
color: #f1f1f1;
border-bottom: 4px solid #E69500;
}
a.navbar-brand:hover {
text-decoration: none;
color: #fff;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover {
background-color: #fff;
color: #000;
}
.nav a {
text-align: center;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.05em;
font-size: 14px;
padding: 12px 10px;
color: #c3c3c3;
}
.main-wrapper {
padding: 0;
}
/* Carousel */
.carousel-caption {
padding-left: 25px;
padding-right: 25px;
bottom: 40%;
background: rgba(255,255,255,0.8);
color: #010101;
text-shadow: none;
}
.carousel-caption h1 {
font-size: 3em;
font-weight: 600;
}
.carousel-caption p {
font-size: 1.2em;
letter-spacing: .06em;
}
.carousel-btn {
padding-top: 15px;
}
.carousel-caption a {
background: rgba(51,122,183,1);
color: #fafafa;
}
/************ NOT USED *************/
/* Jumbotron */
/*
.jumbotron {
background: url('../img/landscape.jpg') no-repeat;
background-size: cover;
padding-top: 15em;
}
.jumbotron h1 {
color: #fff;
}
*/
/************* NOT USED ************/
/******* About page - old style *******/
/* Sections */
/********** OLD STYLE ************/
/*
.image img {
height: 100%;
width: 100%;
}
.column {
float: left;
width: 33%;
}
.intro {
padding: 0 0 0 30px;
}
*/
/************* NOT USED ****************/
.skills {
background-color: #8FAFAF;
border: #f2f2f2 15px solid;
}
.padding-down {
padding-bottom: 4%;
}
.main-text {
padding-bottom: 4em;
}
#skill-list {
list-style: none;
padding-left: 5px;
padding-bottom: 10px;
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 {
background: url('../img/mountain3.jpg') no-repeat 75% center fixed;
background-attachment: fixed;
background-size: cover;
z-index: 10;
color: #F0F0F0;
height: 100%;
}
.details {
max-width: 420px;
padding: 5%;
border: #DEDEDE 3px solid;
border-radius: 5px;
margin: 8% 0 20% 0;
}
.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 {
margin-bottom: 10%;
}
.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;
}
/******* Portfolio *******/
#work {
background: #fff;
padding-bottom: 5%;
}
#work img {
padding: 30px 20px;
}
/************ Media Query *************/
@media screen and (min-width: 480px and max-width: 768px) {
.carousel-caption {
bottom: 20%;
}
.carousel-caption h1 {
font-size: 1.8em;
}
}
@media screen and (max-width: 480px) {
.carousel-caption {
bottom: 10%;
}
.carousel-caption h1 {
font-size: 1.6em;
}
p.carousel-btn a {
font-size: 0.9em;
}
}
Raw
index
<!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">
<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 data-spy="scroll" data-target=".navbar">
<!-- Navigation bar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand home-logo" href="index.html">marekdano</a>
</div><!-- /navbar-header -->
<div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- navbar-collapse -->
</div><!-- /container-fluid -->
</nav><!-- /nav -->
<!-- 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>
</div>
-->
<div class="container-fluid main-wrapper">
<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.jpg" alt="portfolio image 1">
<div class="carousel-caption">
<h1>Hi, there</h1>
<p class="hidden-xs hidden-sm">I'm Marek Dano. I'm a web developer based in Dublin. I'm currently studing a web development on CareerFoundry.</p>
<p class="carousel-btn">
<a class="btn btn-lg btn-primary" href="#about">About me</a>
</p>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage2.jpg" alt="porfolio image 2">
<div class="carousel-caption">
<h1>Explore my porfolio</h1>
<p class="hidden-xs hidden-sm">Find what I've made while I was pushing myself to work as a web developer </p>
<p class="carousel-btn">
<a class="btn btn-lg btn-primary" href="#work">My Portfolio</a>
</p>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage3.jpg" alt="porfolio image 3">
<div class="carousel-caption">
<h1>Wants me to work for you?</h1>
<p class="hidden-xs hidden-sm">Wants to create a company, portfolio website or online shop. Please let me know how I can help with it.</p>
<p class="carousel-btn">
<a class="btn btn-lg btn-primary" href="#contact">Contact me</a>
</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><!-- /carousel -->
</div> <!-- /container-fluid -->
<div class="container">
<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 -->
</div><!-- /container-->
<!-- About section -->
<div class="container anchor" id="about">
<div class="header">
<h1>About me</h1>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 padding-down">
<img src="img/unsplash-guyonwall.jpg" class="img-responsive" alt="profile picture">
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<h2>A bit about myself</h2>
<p>Brooklyn kitsch mumblecore High Life. Single-origin coffee</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 skills">
<h3>My Skills</h3>
<ul id="skill-list">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div>
</div><!-- /row -->
<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><!-- /main-text -->
</div><!-- /container -->
<div class="container-fluid anchor" id="work">
<div class="container">
<div class="header">
<h1>Work</h1>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img src="img/kitten.png" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img src="img/kitten.png" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img src="img/kitten.png" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img src="img/kitten.png" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img src="img/kitten.png" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img src="img/kitten.png" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img src="img/kitten.png" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img src="img/kitten.png" class="img-responsive" alt="">
</div>
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /work container-fluid -->
<div class="container anchor" id="faq">
<div class="header">
<h1>FAQ</h1>
<h5>Quick answers</h5>
</div> <!-- end header -->
<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><!-- /accordion -->
</div><!-- /faq container -->
<div class="anchor" id="contact">
<div class="header">
<h1>Contact</h1>
<h5>Reach me whenever you want</h5>
</div><!-- /header -->
<div class="container">
<div class="row">
<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><!-- /details -->
</div><!-- /row -->
</div> <!-- /container -->
</div><!-- /#contact -->
<!-- ============================= -->
<!-- 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 -->
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 600, function () {
window.location.hash = href;
});
return false;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment