Skip to content

Instantly share code, notes, and snippets.

@iarigby

iarigby/dabblet.css

Last active August 29, 2015 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iarigby/2c98409ca0afa90a2337 to your computer and use it in GitHub Desktop.
Save iarigby/2c98409ca0afa90a2337 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
html, body {
margin: 0;
padding: 0;
}
.btn-header li{
border: 1px solid grey;
color: #333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: 1.3px;
padding: 5px 20px;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
margin-bottom: 20px;
margin-left: 5px;
}
h2 {
color: black;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 53px;
margin-top: 0;
margin-bottom: 80px;
}
.main {
position: relative;
height: 320px;
width: 60%;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: rgba(250,250,250,0.6);
}
.main h1 {
color: black;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 0px;
text-transform: uppercase;
}
.title {
color: black;
}
.header {
background-color: rgba(0,0,0,0.8);
height: 20xp;
}
.header ul li {
font-family: 'Raleway', sans-serif;
color: white;
display: inline;
list-style-type: none;
vertical-align: middle;
}
.header ul {
text-align: center;
line-height: 40px;
margin-left: auto;
margin-right: auto;
padding-right: 10%;
padding-left: 10%;
}
html {
background: url(http://www.typesofengineers.org/wp-content/uploads/2015/04/Hiscox-Now-Offers-an-Insurance-Product-Catered-Towards-Architects-Engineers-and-Design-Professionals.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.logo {
height: 150px;
width: 450px;
margin-top: 15px;
}
.button {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
width: 300px;
background: gray;
border: 0px;
/*Step 3: Text Styles*/
color: rgba(0, 0, 0, 0.55);
text-align: center;
font: bold 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
/*Step 3: Link Styling*/
a.button {
text-decoration: none;
color: white;
}
.container {
margin: 0 auto;
}
.jumbotron {
height: 520px;
}
.nav {
margin: 0;
padding: 20px 0;
}
.nav li {
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
}
.btn-default {
border: 1px solid #333;
color: #333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 15px 50px;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
background-color: rgba(250,250,250,0.6);12.5%;
}
.supporting .align {
margin-left: 12.5%;
margin-right: 12.5%;
}
.supporting .col {
float: left;
width: 33%;
font-family: 'Raleway', sans-serif;
text-align: center;
}
.supporting img {
height: 200px;
}
.supporting h2 {
padding-top: 10px;
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 50px;
margin-bottom: 40px;
}
.clearfix {
clear: both;
}
.footer {
background-color: #333;
color: #fff;
padding: 30px 0;
}
.footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="header">
<div class="container">
<ul class="btn-header">
<li> About Us </li>
<li> Our Services </li>
<li> Projects </li>
<li> Updates </li>
<li> Contact </li>
<li> Work at Saunders </li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="main">
<img class="logo" src="http://i.imgur.com/5OgIXfd.png">
<h1 class="title">Saunders Group</h1>
<h2> Infrastructure Consultants </h2>
<!-- <p> <a href='#' class="button"> In </a> </p> -->
</div>
</div>
</div>
<div class="supporting">
<div class="align">
<div class="container">
<div class="col">
<img src="http://www2.psd100.com/ppp/2013/11/0501/Architectural-drawings-icon-1105193018.png">
<h2>Design</h2>
<p>We cover all areas of Urban Infrastructure Consulting & Planning with Project Management Support covering the Caucasus and Central Asian Markets.</p>
<!-- <a class="btn-default" href="#">Learn more</a> -->
</div>
<div class="col">
<img src="https://supervisionassist.com/assets/img/tour/checklist.png">
<h2>Supervision</h2>
<p>We have a team of staff that cover all aspects of project management, financial and administrative control and support.</p>
<!-- <a class="btn-default" href="#">Learn more</a> -->
</div>
<div class="col">
<img src="http://www2.psd100.com/ppp/2013/11/0501/Engineering-and-technical-personnel-Icon-1105193105.png">
<h2>Engineering</h2>
<p>We aim to provide efficient and effective local support in emerging markets for large engineering, urban and agriculture development projects.</p>
<!-- <a class="btn-default" href="#">Learn more</a> -->
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="footer">
<div class="container">
<p> Saunders Group LTD</p>
</div>
</div>
</body>
</html>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment