Skip to content

Instantly share code, notes, and snippets.

@benbagley

benbagley/calculator.html

Last active April 18, 2016 13:12
Show Gist options
  • Save benbagley/27855b5710af2a454b49 to your computer and use it in GitHub Desktop.
Save benbagley/27855b5710af2a454b49 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Website - Introduction for CareerFoundry
Raw
calculator.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">
<title>Hello World!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./css/styles.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-default">
<div id="calculator">
<div class="container-fluid">
<input type="text" class="form-control" placeholder="Enter sum">
<div class="buttons">
<div class="row">
<div class="col-md-1"><a href="#" class="btn btn-primary">7</a></div>
<div class="col-md-1"><a href="#" class="btn btn-primary">8</a></div>
<div class="col-md-1"><a href="#" class="btn btn-primary">9</a></div>
<div class="col-md-1"><a href="#" class="btn btn-primary">/</a></div>
</div>
<div class="row">
<div class="col-md-1"><a href="#" class="btn btn-primary">4</a></div>
<div class="col-md-1"><a href="#" class="btn btn-primary">5</a></div>
<div class="col-md-1"><a href="#" class="btn btn-primary">6</a></div>
<div class="col-md-1"><a href="#" class="btn btn-primary">*</a></div>
</div>
<div class="row">
<div class="col-md-1"><a href="#" class="btn btn-primary">1</a></div>
<div class="col-md-1"><a href="#" class="btn btn-primary">2</a></div>
<div class="col-md-1"><a href="#" class="btn btn-primary">3</a></div>
<div class="col-md-1"><a href="#" class="btn btn-primary">-</a></div>
</div>
<div class="row">
<div class="col-md-1"><a href="#" class="btn btn-primary">0</a></div>
<div class="col-md-1"><a href="#" class="btn btn-primary">.</a></div>
<div class="col-md-1"><a href="#" class="btn btn-primary">=</a></div>
<div class="col-md-1"><a href="#" class="btn btn-primary">+</a></div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Raw
custom.js
// Twitter
!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');
$(document).ready(function() {
// Smooth scrolling
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;
});
// Stellar
$.stellar();
// Tooltips
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
$("textarea").css("background", "rgb(182, 204, 241)");
$(".button").on("click", function() {
var comment = $(".message-box").val();
console.log("clicked");
return false;
});
$(".button").on("click", function() {
console.log("clicked");
var comment = $(".message-box").val();
console.log(comment);
$("#visible-comment").html(comment);
//2conditional//
if($(".message-box").val() == 0) {
$(".message-box").css("border-color", "red");
} else {
$(".message-box").hide();
}
});
$(".message-box").on("keyup", function() {
console.log("keyup happened");
var charCount;
$(".message-box").on("keyup", function() {
console.log("keyup happened");
var textlength = 3;
var text = "string";
charCount = $(".message-box").val().length;
console.log(charCount);
$("#char-count").html(charCount);
if(charCount > 50) {
$("#char-count").css("color", "red");
} else {
$("#char-count").css("color", "black");
};
});
});
// Work Section - work.js is good to go console message
console.log(works[i]);
//looping through works array and adding images with borders using modulus operators
for(var i = 0; i < works.length; i++ ){
$("#work").append("\
<div class='col-sm-6 col-md-3'>\
<a href='#' class='work-img'>\
<img class='img-responsive' src='" + works[i].pic + "'>\
<span class='info'><p class='proj-title'>Title:</p> " + works[i].title + "</span>\
</a>\
</div>\
");
$("#work").css("text-align", "center");
// var images = $("#work img");
// if(i%2 === 0) {
// $(images[i]).css("border", "2px solid DodgerBlue");
// } else {
// $(images[i]).css("border", "2px solid Salmon");
// };
$(".work-img").mouseenter(function(){
$(".info", this).show();
}).mouseleave(function(){
$(".info", this).hide();
});
};
//mouseenter effect for titles to pop up on hover
$(".work-img").mouseenter( function() {
$(".info", this).show();
});
$(".work-img").mouseleave( function() {
$(".info", this).hide();
});
// Google Map
// var map;
// function initMap() {
// var map = new google.maps.Map(document.getElementById('map'), mapProp1 {
// center: {lat: -52.4775215, lng: -1.9336709},
// zoom: 8
// });
// }
});
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">
<title>Hello World!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./css/styles.css">
<script>!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');</script>
<!-- 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-default">
<div id="fb-root"></div>
<script>(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_GB/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-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" href="#top">Ben Clarke</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Portfolio <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#work">Work #1</a></li>
<li><a href="#work">Work #2</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="home">
<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/carousel/image-1" alt="">
<div class="carousel-caption">
<h3>This is a birds-eye view of a forest</h3>
<p>It's a neat image</p>
</div>
</div>
<div class="item">
<img src="./img/carousel/trello_redesign.jpg" alt="Trello">
<div class="carousel-caption">
<h3>This is a Trello redesign that my good friend Mackenzie Child did</h3>
<p><a href="http://mackenziechild.me">http://mackenziechild.me</a></p>
</div>
</div>
...
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>About Me</h2>
<p>My name is Ben Clarke. I am a 20 years old from the United Kingdom, I enjoy developing, and I am alsodoing this course in order to get more knowledge, I have already created a few applications with RoR already, an example of this would be a Pintrest Clone.</p>
</div>
<div class="col-md-6">
<h2>Goals</h2>
<p>By the end of this course I aim to go freelance full-time, and hopefully if all goes well I will branch off into my own company.</p>
</div><!-- /col -->
</div>
<hr>
</div> <!-- /container fluid -->
</div><!-- end home -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 text-center">
<button class="btn btn-default">
<a href="https://github.com/ben-clarke">Link to Github</a>
</button>
</div>
</div>
</div>
<!-- ABOUT PAGE -->
<div class="container-fluid" id="about">
<header>
<h2>About Me</h2>
</header><!-- header -->
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="img-fluid center-block"> <img src="./img/me.jpg" alt="Me">
</div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-12">
<div class="intro">
<h2>Introduction</h2>
<p>I am a 20 years old developer/freelance, currently doing a development course on CareerFoundry.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" data-stellar-background-ratio="500">
<div class="skills">
<h3>My Skills</h3>
<ul id="skill-list">
<li><a href="#" title="Ruby On Rails" data-toggle="tooltip" data-placement="top" id="tooltip1">RoR (Ruby On Rails)</a></li>
<li><a href="#" title="CSS / SASS" data-toggle="tooltip" data-placement="left" id="tooltip2">CSS / SASS</a></li>
<li><a href="#" title="HTML" data-toggle="tooltip" data-placement="bottom" id="tooltip3">HTML</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main-text">
<h3>More About Me</h3>
<p>I am 20 years old.<p>
<br>
<p>I started creating websites or rather learning how they work in 2008 after I just felt that it was something that I was interested in and therefore started learning what I can, so that’s exactly what I did I started off with HTML and CSS to begin with and I really enjoyed learning it, I researched on new techniques/methods etc. I started to find free templates online and downloaded them to learn more, I would open them up dreamweaver and take bits of code out to see what it did and why, I did this for a while. I got really involved with IT whilst at school and got to knew my teachers well, so as the years passed, I started to focus on IT more than web but still try and do both, so I decided to take a level 2 BTEC Diploma whilst at school to further my education in IT and web, I passed with flying colours but I didn’t want to stop there I went on to do a another diploma this time Level 3 at South and City College Birmingham after this I went on to do a Graphic and Web Diploma at clevercherry which are based in the Jewellery Quarter.</p>
<br>
<p>I then, after the diploma at clevercherry, got at job at Succeed, which are again based in the jewellery quarter and I have been there until late February 2015 to where I was made redundant.</p>
</div>
</div>
</div>
</div> <!-- /container fluid -->
<div class="container">
<div class="row" id="work">
</div><!-- / row -->
</div><!-- / container -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="180" height="315" src="https://www.youtube.com/embed/oAIN024Rf7U" frameborder="0" allowfullscreen>
</iframe>
</div>
<div class="row">
<h2 class="learn-more">Learn More</h2>
<div class="modal-button">
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
</div>
</div>
<!-- Small modal -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" 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">My C.V</h4>
</div>
<div class="modal-body">
<embed id="modalembed" src="cv.pdf">
</div>
</div>
</div>
</div>
<div class="container-fluid" id="contact">
<div class="jumbotron col-lg-12">
<h2>Contact Us</h2>
<p>If you have any queries regarding what I do or you want a quote, then please do contact me.</p>
</div>
<div class="col-sm-4 col-md-4">
<div id="map"></div>
</div>
<form class="col-sm-6 col-md-6">
<div class="form-group">
<label><span class="glyphicon glyphicon-envelope"></span> * Email address</label><br>
<input type="email" class="form-control" placeholder="Email" required=”required”>
</div>
<div class="form-group">
<label><span class="glyphicon glyphicon-phone"></span> Phone Number</label><br>
<input type="<tel></tel>" class="form-control" placeholder="Phone Number">
</div>
<div class="form-group">
<label>* Message</label>
<textarea style="resize: none" cols="60" rows="5" required="required" class="form-control message-box" minlength="20"placeholder="* Type your message here"></textarea>
<p id="char-count"></p>
<p id="visible-comment"></p>
</div>
<button type="submit" class="button">Submit</button>
</form>
</div>
<div class="container-fluid" id="faq">
<h2>FAQ</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="glyphicon glyphicon-plus"></span>
<h4>Why did you decide to become a developer?</h4>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>I decided that I wanted to become a developer a few years ago.</p>
<p>It started back in High School while I did a BTEC Diploma and we started HTML // CSS basics using Dreamweaver, fast forward as the summer break was coming up I decided to learn HTML and CSS during the summer.</p>
<p>I continued coding throughout school, college and now I'm looking to do it full-time either as a full-time job or as a freelancer.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<span class="glyphicon glyphicon-plus"></span>
<h4>What is your development process</h4>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>When I receive a email from a potential client or a existing client, the email usually provides what they want first off (which is great). What I do first off is that I contact the client with a few ideas and opinions regarding the project.</p>
<p>Next I contact the client regarding the costs of the project, obviously this depends on the project, however I send a final brief of the project, to the client, after this the client will then decide whether it is cost effective for them and whether they want to go ahead with the project.</p>
<p>After the go ahead I get to work, creating a design (if needed) if the client does not require a re-design and already has one I of course gets this sent to be. I get started on the website straight away and chip away until the site is done (This could take anywhere from 2 weeks to a 1 month) but again this depemds on the project. Throughout the design / development process I of course update the client every step of the way and answer any questions they have.</p>
<p>After I am happy with the site I then get to test the site, check for bugs, spelling etc and fix accordingly.</p>
<p>After this I email the client that the site is complete and put the site on a test domain (usually on heroku), after I get the check that the client is happy and I get the go ahead to go live, I upload the website to my own deployment server and change the DNS for the domain accordingly. I provide the client with support, updates etc even after the site has gone live.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<span class="glyphicon glyphicon-plus"></span>
<h4>Who are your clients?</h4>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>I have a number of clients that I have done sites for:</p>
<ul>
<li>Recyclapak - <a href="http://www.recyclapak.co.uk">recyclapak.co.uk</a></li>
<li>Melting Pot Mosaics - <a href="http://www.meltingpotmosaics.co.uk">meltingpotmosaics.co.uk</a></li>
<li>Ammarah Iqbal - <a href="http://aiqbaldesigns.com">aiqbaldesigns.com</a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- /container fluid -->
<footer>
<p>&copy; Ben Clarke, 2015.</p>
<nav>
<ul>
<li><a href="#top">Home</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
<li class="social"><a href="https://twitter.com/benclarke__" class="twitter-follow-button" data-show-count="false">Follow @benclarke__</a></li>
<li class="social"><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></li>
</ul>
</nav>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$('.hover').mouseover(function() {
$('.text').css("visibility","visible");
});
$('.hover').mouseout(function() {
$('.text').css("visibility","hidden");
});
</script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/work.js"></script>
<script src="js/custom.js"></script>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 52.53762, lng: 13.39597},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyFgrq1Hc9oB6IqCfSHYZl5VT2yruOmdU&callback=initMap"
async defer></script>
</body>
</html>
Raw
styles.css
\:root {
font-size: 16px;
}
body {
padding-top: 3.850em;
position: relative;
background: #eee;
margin: 0 auto;
color: #34495e;
width: 100%;
}
.container-fluid {
padding: 0;
}
.column {
display: inline-block;
position: absolute;
padding: 0 20px;
left: 380px;
width: 50%;
}
/* Typography */
h1,
h2,
h3,
p {
text-align: center;
font-weight: 600;
margin: 1em 0;
}
p {
text-align: left;
font-weight: 400;
}
.header h1 {
text-align: center;
}
p {
text-align: center;
}
.intro p {
-webkit-margin-before: 0;
font-weight: 400;
margin: 1em 2em;
font-size: 1.5em;
}
.skills h3 {
text-transform: uppercase;
text-align: center;
}
.main-text h3 {
margin: 1.5em 0;
}
.main-text p {
font-size: 1.2em;
text-align: left;
margin: 0 auto;
width: 960px;
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 0;
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-right{
margin-right: 0;
}
/**** HOMEPAGE ****/
#home #carousel-example-generic {
margin-top: -18px;
}
#home header {
padding: 5em;
}
#home header h2 { text-align: center; }
#home strong { color: #fff; }
.learn-more { text-align: left; float: left; margin-left: 2em; }
.modal-button { float: right; padding: 15px; margin-right: 2em; }
#modalembed { height: 1000px; width: 100%; padding: 10px; }
.btn { margin: 2em 0; }
/**** ABOUT ****/
.center-block {
margin: 1em 0;
display: block;
}
.main-text {
position: relative;
clear: both;
}
.skills {
background: url("../img/turquoise-polygon.jpg") no-repeat center center fixed;
position: relative;
padding: 1.5em 0;
color: #fff
}
#skill-list {
text-align: center;
list-style: none;
display: inline;
width: inherit;
}
#
#skill-list a {
color: #fff;
}
/**** WORK ****/
#work {
margin: 0.625em 0;
position: relative;
}
#work .text {;
visibility: hidden;
}
#work img:hover {
opacity: 0.20;
}
#work h3 {
margin-top: -4.8em;
color:#000;
}
#work p {
margin-top: -1.3em;
color: #000
}
.work-img {
display: block;
margin: auto;
max-width: 200px;
position: relative;
}
.info {
position: absolute;
display: none;
top: 40%;
left: 10%;
color: #fff;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.5em;
line-height: 1.6;
}
p.proj-title {
top: 35%
color: #fff;
}
.proj-title {
font-weight:700;
}
/**** CONTACT ****/
iframe {
margin: -60px 20px;
}
#map iframe {
position: relative;
height: 300px;
width: 100%;
}
#contact {
background: url("../img/contact-bg.jpg");
background-attachment: fixed;
background-size: cover;
position: relative;
margin: 1em 0;
height: 48em;
width: 100%;
top: 0;
}
#contact .jumbotron {
background: transparent;
text-align: center;
margin-top: -1em;
color: #fff;
}
#contact .jumbotron p {
font-size: 1.5rem
}
#contact p {
margin-top: -5px;
font-size: 1.5em;
color: #fff;
}
#contact p a {
color: #fff;
border-bottom: 1px solid #ccc;
}
#contact p a:hover {
text-decoration: none;
}
form {
color: #fff
}
.form-group {
position: relative;
width: 99%;
left: 20%;
}
textarea {
min-height: 10em;
resize: none;
}
.form-control {
border-bottom: 2px solid #E9E9E9;
border-right: 0;
border-left: 0;
border-top: 0;
}
input[type="submit"], .button {
border: 2px solid #fff;
background: transparent;
text-decoration: none;
position: relative;
text-align: center;
padding: 1em 2em;
font-size: 1em;
color: #fff;
left: 20%;
outline: none;
}
.button:hover {
border: 2px solid #fff;
background: #fff;
color: #000;
}
/**** FAQ PAGE ****/
#faq {
margin: 0 auto;
width: 960px;
}
#faq .panel-heading {
background: rgb(115, 172, 89);
}
.panel-title span {
font-size: 0.80em;
}
.panel-title h4 {
display: inline-block;
}
.panel-body {
background: rgb(127, 182, 101);
}
.panel-body a {
color: rgb(173, 122, 190);
}
/**** FOOTER ****/
footer {
float: left;
}
footer p {
margin-left: 13em;
float: left;
}
footer nav {
margin: 1em 11em;
float: right;
}
footer nav li {
margin-right: 40px;
list-style: none;
float: left;
}
/**** CALCULATOR ****/
#calculator {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.11);
-moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.11);
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.11);
transform: translate(-50% -50%);
position: relative;
margin: 10em auto;
background: #fff;
height: 25em;
width: 650px;
}
#calculator input {
margin: 2em auto 0 auto;
border-radius: 0;
width: 97%;
}
#calculator .buttons {
position: absolute;
margin: 2em 15em;
width: 100%;
}
#map {
height: 500px;
width: 500px;
z-index: 999;
position: absolute;
margin: -5.4em 3em;
}
Raw
work.js
var works = [
{
title: "Coming Soon",
pic: "http://enrolo.co.uk/wp-content/uploads/2015/12/COMING-SOON-1.jpg"
},
{
title: "Coming Soon",
pic: "http://enrolo.co.uk/wp-content/uploads/2015/12/COMING-SOON-1.jpg"
},
{
title: "Coming Soon",
pic: "http://enrolo.co.uk/wp-content/uploads/2015/12/COMING-SOON-1.jpg"
},
{
title: "Coming Soon",
pic: "http://enrolo.co.uk/wp-content/uploads/2015/12/COMING-SOON-1.jpg"
}
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment