Skip to content

Instantly share code, notes, and snippets.

@catob

catob/app.js

Last active August 29, 2015 14:25
Show Gist options
  • Save catob/3b7f12e813dd2308da7b to your computer and use it in GitHub Desktop.
Save catob/3b7f12e813dd2308da7b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
var hipsterCat = [
{ title: "First Project", img: "img/hipster-cat-3.jpg" },
{ title: "Second Project", img: "img/hipster-cat-3.jpg" },
{ title: "Third Project", img: "img/hipster-cat-3.jpg" },
{ title: "Fourth Project", img: "img/hipster-cat-3.jpg" }
];
$(document).ready(function(){
// google maps api
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.49082,13.42379,17),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(marker, 'click', function(){
map.setZoom(15);
map.setCenter(marker.getPosition());
});
};
google.maps.event.addDomListener(window, 'load', initialize);
// images for work section
for (var i = 0; i < hipsterCat.length; ++i) {
$("#" + i).css("background-image", "url(" + hipsterCat[i].img + ")");
};
$(".image").mouseenter(function() {
$(this).html("<p class='image-info'><span class='image-proj-title'>Title:</span><br>" + hipsterCat[this.id].title + "</p>");
}).mouseleave(function() {
$("p.image-info").html("");
});
// smooth scroll
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
// twitter button
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
// facebook button
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// tooltip
$(function (){
$('#tooltip-1').tooltip();
});
$(function (){
$('.button-tooltip').tooltip();
});
// tooltip on send button
$(function (){
$('[data-toggle="tooltip"]').tooltip();
});
// change color on contact form textarea
$("textarea").css("background-color", "#d3d3d3");
// add text from contact form
$("#send-button").on("click", function(){
var comment = $("textarea").val();
$("#visible-comment").html("<span> Your text: </span>" + comment);
return false;
});
// character counter on text input field
$("textarea").on("keyup", function(){
var charCount = $("textarea").val().length;
$("#char-count").html(charCount);
if (charCount > 50) {
$("#char-count").css("color", "#FF0000");
} else {
$("#char-count").css("color", "#444");
};
});
// zebra table
var rows = $(".my-row");
for (var i=0; i < rows.length; i++) {
if (i%2===1) {
$(rows[i]).css("background-color", "pink");
} else {
$(rows[i]).css("background-color", "white");
};
};
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World!</title>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Custom styles for this template go here -->
<link href="css/styles.css" rel="stylesheet">
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Amatic+SC|Roboto:400,300' rel='stylesheet' type='text/css'>
<!-- Google maps -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD8BElPaPozNPky-oxaSIEvo_ZyvT4XUI8"></script>
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- jQuery Media Plugin -->
<script src="js/jquey.media.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- 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 data-spy="scroll" data-target=".navbar">
<!-- facebook button -->
<div id="fb-root"></div>
<!-- navbar starts here -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="project-name pull-left">
<a href="index.html">Project Name</a>
</div>
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div>
</div>
</div> <!-- end navcontainer -->
</nav> <!-- navbar ends here -->
<section class="main">
<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/hero.jpg" alt="...">
<div class="carousel-caption caption-1">
<h1>Hello there.</h1>
<p>I'm Cato, a web developer based in Berlin.</p>
</div>
</div>
<div class="item">
<img src="img/hero-2.jpg" alt="...">
<div class="carousel-caption caption-2">
<p>Mlkshk single-origin coffee PBR Vice, Echo Park Pitchfork Wes Anderson Brooklyn <span class="hidden-xs">keytar flexitarian readymade Truffaut kitsch scenester small batch. Put a bird on it raw denim Banksy organic, Carles sartorial small batch PBR&B. Brooklyn cray Thundercats</span></p>
</div>
</div>
<div class="item">
<img src="img/hero-3.jpg" alt="...">
<div class="carousel-caption caption-3">
<p class="text-right">Plaid hoodie photo booth whatever meditation trust fund. Roof party American Apparel stumptown, four dollar toast Godard Pinterest chia pug.<span class="hidden-xs"> Viral tousled organic meditation swag</span></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>
</section>
<section class="about" id="about">
<div class="container anchor">
<h1>About</h1>
<div class="row">
<div class="col-md-4 col-xs-12">
<div class="about-image">
<img class="img-responsive" src="img/hipster-cat-1.png" alt="">
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="about-intro">
<h2>Intro</h2>
<p>Cray PBR selvage lomo Austin, farm-to-table freegan mixtape. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.</p>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="skills column">
<h3>My Skills</h3>
<ul id="my_skills">
<li>Awesome</li>
<li>Awesomer</li>
</ul>
</div>
</div>
</div>
<hr>
<div class="portfolio-goals">
<div class="row">
<div class="col-md-4 col-xs-12">
<h2>Portfolio Concept</h2>
<p>I want to create a new nice and simple portfolio, maybe something like <a href="http://jasonalvis.co.uk/" target="_blank" id="tooltip-1" title="Really cool personal portfolio site">this</a>. I have some projects that I've done in a previous class, so I will have a good amount of stuff for the work section.</p>
<p><a class="btn btn-default button-tooltip" href="#" role="button" title="Check it out!">View details &raquo;</a></p>
</div>
<div class="col-md-4 col-xs-12">
<h2>Project Goals</h2>
<p>I will commit 40h per week to the class. This first week will be a bit less, but I'll finish the portfolio next week.</p>
<p><a class="btn btn-default button-tooltip" href="#" role="button" title="Check it out!">View details &raquo;</a></p>
</div>
<div class="col-md-4 col-xs-12">
<h2>Course Goals</h2>
<p>I want to start a career as a web developer and get a job as a junior developer. Although my ultimate goal is to get a full time job, I wouldn't mind trying to freelance and built on my portfolio.</p>
<p><a class="btn btn-default button-tooltip" href="#" role="button" title="Check it out!">View details &raquo;</a></p>
</div>
</div>
</div>
<hr>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe>
</div>
</div> <!-- /container -->
</section>
<section class="work" id="work">
<div class="container anchor">
<h1>Work</h1>
<div class="row" id"name">
<div class="col-md-3 col-xs-6">
<img src="img/hipster-cat-1.png" class="img-responsive" alt="">
<h2>Hipster Cat</h2>
</div>
<div class="col-md-3 col-xs-6">
<img src="img/hipster-cat-1.png" class="img-responsive" alt="">
<h2>Hipster Cat</h2>
</div>
<div class="col-md-3 col-xs-6">
<img src="img/hipster-cat-1.png" class="img-responsive" alt="">
<h2>Hipster Cat</h2>
</div>
<div class="col-md-3 col-xs-6">
<img src="img/hipster-cat-1.png" class="img-responsive" alt="">
<h2>Hipster Cat</h2>
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-6">
<div class="image" id="0"></div>
</div>
<div class="col-md-3 col-xs-6">
<div class="image" id="1"></div>
</div>
<div class="col-md-3 col-xs-6">
<div class="image" id="2"></div>
</div>
<div class="col-md-3 col-xs-6">
<div class="image" id="3"></div>
</div>
</div>
</div>
</section>
<section class="coffee-image hidden-xs"></section>
<section class="contact" id="contact">
<div class="container anchor">
<h1>Contact</h1>
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="contact-info">
<h2>Cato Benjaminsen</h2>
<p><span class="glyphicon glyphicon-home"> Kottbusser Damm 76, 10967 Berlin</p>
<p><span class="glyphicon glyphicon-phone-alt"> 49 152 37793797</p>
<p><span class="glyphicon glyphicon-envelope"> [email protected]</p>
</div>
<div class="contact-image" id="map-canvas" style="height:291px; width:400px;">
<!-- <iframe width="400" height="291" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=Kottbusser%20Damm%2076%2C%20Berlin%2C%20Germany&key=AIzaSyD8BElPaPozNPky-oxaSIEvo_ZyvT4XUI8" allowfullscreen></iframe> -->
</div>
</div>
<div class="col-md-6 col-xs-12">
<h2>Say Hello.</h2>
<form action="/login" method="post" name="login">
<div class="form-group">
<label for="name">Your Name:</label>
<input id="name" class="form-control" placeholder="Enter Name" type="text" name="name" title="LOOK AT ME!">
<label for="email">Your Email:</label>
<input id="email" class="form-control" required="required" placeholder="Enter Email" type="email" name="email">
<label for="textarea">Your Message:</label>
<textarea class="form-control" placeholder="Enter Message" style="resize:none" cols="40" rows="8"></textarea>
<p id="char-count"></p>
<button id="send-button" type="button" class="btn" data-toggle="tooltip" title="Send me a message!">Send</button>
</div>
</form>
<p><span id="visible-comment"></span></p>
</div>
</div>
</div>
</section>
<section class="faq" id="faq">
<div class="container anchor">
<h1>FAQ</h1>
<!-- Large modal -->
<div class="modal-button">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Check out my resume.</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Resume</h4>
</div>
<div class="modal-body">
<iframe id="modal-frame" src="http://www.smashingmagazine.com/images/design-cv-resume/evalotta_lamm.pdf" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- modal end -->
<!-- zebra table -->
<table>
<tr class="my-row table-headline">
<th>Services</th>
<th>Service1</th>
<th>Service2</th>
</tr>
<tr class="my-row">
<th>Feature1</th>
<th>Property1</th>
<th>Property2</th>
</tr>
<tr class="my-row">
<th>Feature2</th>
<th>Property1</th>
<th>Property2</th>
</tr>
<tr class="my-row">
<th>Feature3</th>
<th>Property1</th>
<th>Property2</th>
</tr>
<tr class="my-row">
<th>Feature4</th>
<th>Property1</th>
<th>Property2</th>
</tr>
<tr class="my-row">
<th>Feature5</th>
<th>Property1</th>
<th>Property2</th>
</tr>
</table>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
What am i?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
AWESOME
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Question 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Pitchfork trust fund meggings fashion axe +1. Aesthetic gastropub trust fund, kogi messenger bag hoodie Bushwick Pitchfork 8-bit chambray bitters readymade hashtag cred sriracha. Raw denim lomo PBR&B 3 wolf moon heirloom Williamsburg master cleanse yr. Quinoa tilde church-key viral Schlitz literally, cliche direct trade McSweeney's Pitchfork freegan cray cronut. DIY mixtape lumbersexual flexitarian occupy. American Apparel ennui disrupt four loko, Tumblr Etsy whatever keytar. Church-key Vice 3 wolf moon forage sriracha fixie.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Question 3
</a>
</h4>
</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>
</div>
</section>
<footer>
<div id="footer-content">
<div class="social-icons">
<ul>
<li class="icons"><a href="http://github.com/catob" target="_blank"><i class="fa fa-github"></i></a></li>
<li class="icons"><a href="http://linkedin.com/in/catobenjaminsen" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li class="icons"><a href="http://facebook.com/catobenjaminsen" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li class="icons"><a href="http://twitter.com/catobenj" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li class="icons"><a href="mailto:[email protected]"><i class="fa fa-envelope"></i></a></li>
</ul>
</div>
</div>
<div class="copyright">
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="525" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div>
<a href="https://twitter.com/catobenj" class="twitter-follow-button" data-show-count="false">Follow @catobenj</a>
<p>&copy; Cato Benjaminsen, 2015. </p>
</div>
</footer>
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Raw
styles.css
/* GLOBAL */
* { box-sizing: border-box; }
/* global styles */
body {
position: relative;
}
h1 {
text-align: center;
font-size: 3em;
font-family: 'Roboto', sans-serif;
margin-bottom: 45px;
color: #48485B;
}
hr {
border-color: #7e7e7e;
margin-top: 30px;
}
.container-fluid {
padding: 0;
}
.anchor {
padding-top: 40px;
}
/* NAV */
.navbar-inverse {
background-color: #48485B;
padding: 0 50px;
}
.navbar-inverse .navbar-nav > li > a {
color: #fff;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 600ms;
}
.navbar-inverse .navbar-nav > li > a:hover {
color: #D98161;
text-decoration: none;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover {
background-color: #D98161;
}
.project-name {
display: inline;
padding-top: 4px;
}
.project-name a {
font-family: 'Amatic SC', cursive;
color: #fff;
font-size: 2em;
text-decoration: none;
}
/* Carousel */
.carousel ol {
margin-bottom: 100px;
}
.carousel-caption {
bottom: 0;
top: 7%;
text-shadow: none;
}
.caption-1 h1 {
color: #fff;
font-size: 5em;
margin-bottom: 0;
}
.caption-1 p {
color: #fff;
font-size: 1.6em;
}
.caption-2 {
width: 15%;
text-align: left;
}
.caption-2 p {
color: #000;
}
.caption-3 {
margin-top: 5%;
width: 40%;
}
.caption-3 p {
font-size: 2em;
font-family: 'Roboto', sans-serif;
}
#carousel-example-generic {
padding-top: 50px;
}
/* About */
.about {
padding: 50px 0;
background-color: #ededed;
}
.about-image {
padding-bottom: 30px;
}
.video {
text-align: center;
}
/* Work */
.work {
margin-bottom: 100px;
}
.work h1 {
padding-top: 25px;
}
.work h2 {
text-align: center;
font-size: 2em;
padding-bottom: 25px;
}
/*js images*/
.image {
box-sizing:border-box;
border:2px solid pink;
width:200px;
height:200px;
margin:5px;
display:inline-block;
position:relative;
}
.image-info {
display:inline-block;
color:#fff;
font-family:Futura;
text-transform:uppercase;
font-weight:700;
letter-spacing:0.5em;
line-height:1.6;
position:absolute;
top:15%;
left:22%;
}
.image-proj-title {
font-weight:100;
}
/* Contact */
.contact {
background-color: #F1C19F;
}
.contact h1 {
padding-top: 25px;
}
.contact h2 {
color: #48485B;
padding-bottom: 5px;
}
.contact-image {
padding: 15px 0 30px 0;
}
.contact button a {
color: #48485B;
}
.contact form label {
margin: 7px 3px;
color: #48485B;
font-weight: 400;
font-size: 1.1em;
}
.contact form button {
margin-top: 15px;
background-color: #48485B;
color: #fff;
}
.contact form button:hover {
background-color: #D98161;
color: #fff;
}
.contact-info {
color: #48485B;
}
#char-count {
display: block;
float: right;
margin-top: 5px;
}
/* FAQ */
/*table*/
.faq table {
width: 100%;
margin: 20px 0;
}
table .my-row {
text-align: center;
}
table .table-headline {
font-size: 1.1em;
}
.faq {
background-color: #F1C19F;
padding-bottom: 15px;
}
.faq h1 {
margin-bottom: 30px;
}
.modal-button {
text-align: center;
margin-bottom: 20px;
}
.modal-body {
height: 500px;
}
#modal-frame {
height: 100%;
width: 100%;
padding: 10px;
}
/* Footer */
footer {
height: 90px;
background-color: #48485B;
}
#footer-content {
text-align: center;
display: table;
width: 100%;
height: inherit;
}
.social-icons {
display: table-cell;
vertical-align: middle;
}
.social-icons ul {
margin: 0;
padding: 0;
}
.social-icons li {
display: inline;
padding: 0 5px;
}
.social-icons li a {
color: #fff;
font-size: 2em;
transition: color 600ms;
}
.social-icons li a:hover {
color: #D98161;
}
.copyright {
text-align: center;
background-color: #48485B;
}
.copyright p {
margin: 0;
font-size: 0.75em;
color: #fff;
font-weight: 100;
padding-bottom: 5px;
}
/* facebook button */
.fb-like {
padding-bottom: 2px;
}
/* MOBILE */
@media (max-width: 480px) {
h1 {
margin-bottom: 20px;
padding-top: 0;
}
.navbar-inverse {
padding: 0 10px;
}
.carousel-caption {
top: 4%;
}
.caption-1 h1 {
font-size: 2.8em;
margin-top: 0;
}
.caption-1 p {
font-size: 1em;
}
.caption-2 {
width: 40%;
}
.caption-3 {
margin-top: 0;
width: 55%;
}
.caption-3 p {
font-size: 1em;
margin-top: 0;
}
.about {
padding: 0px;
}
.work h2 {
font-size: 1.4em;
padding-bottom: 25px;
}
}
@media (max-width: 767px) {
.carousel ol {
margin-bottom: 0;
}
/* video */
.video {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.carousel ol {
margin-bottom: 0;
}
}
/* coffee image */
.coffee-image {
background-image: url("../img/coffee.jpg");
background-size: cover;
background-attachment: fixed;
height: 300px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment