GSchool Workshop Demo - Winter 2015
How do I make an gschool workshop demo - winter 2015?
Basic website layout using HTML and CSS . What is a gschool workshop demo - winter 2015? How do you make a gschool workshop demo - winter 2015? This script and codes were developed by Chris Holder on 20 June 2022, Monday.
GSchool Workshop Demo - Winter 2015 Previews
GSchool Workshop Demo - Winter 2015 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>gSchool Workshop Demo - Winter 2015</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
/* Clearfix */
.clearfix:before,
.clearfix:after { content: " "; display: table;
}
.clearfix:after { clear: both;
}
.clearfix { *zoom: 1;
}
/* Styles Here */
body { font-family: 'Open Sans', helvetica, sans-serif;
}
header { background: #ccc; padding: 10px;
}
.logo { float: left; width: 45px;
}
nav { float: right; margin-top: 11px; text-align: right;
}
nav a { text-decoration: none; margin-right: 20px; font-size: 13px; color: #444; transition: 333ms all ease-in-out;
}
nav a:last-of-type { margin: 0;
}
nav a:hover { color: red;
}
/* Hero */
.hero { background: pink; background-image: url('https://unsplash.imgix.net/uploads/1411589183965bdf6e141/5f468e98?fit=crop&fm=jpg&h=700&q=75&w=1050'); background-size: cover; background-position: center; background-attachment: fixed;
}
.hero h1 { text-align: center; margin: 0; padding: 100px 0; color: white; color: rgba(255,255,255,1); text-shadow: 0 0 10px #444;
}
/* Columns & Row */
.row { margin: 0 auto 2em; width: 90%; max-width: 600px;
}
.column { float: left; width: 49%; margin-right: 2%;
}
.column:last-of-type { margin-right: 0;
}
/* Footer */
footer { background: #ccc; padding: 5px 0; text-align: center; font-size: 11px;
}
/* Responsive */
@media (max-width: 500px) { header { text-align: center; } header .row { margin-bottom: 0; } .logo { float: none; width: 80px; } nav { float: none; text-align: center; } .column { width: 100%; margin-right: 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header class="clearfix"> <div class="row"> <img class="logo" src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Large.png"/> <nav> <a href="/">Home</a> <a href="/about.html">About</a> <a href="/contact.html">Contact</a> </nav> </div>
</header>
<div class="hero"> <h1>This is the Hero Headline</h1>
</div>
<div class="row clearfix"> <div class="column"> <h3>Column Heading</h3> <p>Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> <div class="column"> <h3>Column Heading</h3> <p>Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div>
</div>
<footer>Copyright 2015 - Cool Person</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
GSchool Workshop Demo - Winter 2015 - Script Codes CSS Codes
* { box-sizing: border-box;
}
/* Clearfix */
.clearfix:before,
.clearfix:after { content: " "; display: table;
}
.clearfix:after { clear: both;
}
.clearfix { *zoom: 1;
}
/* Styles Here */
body { font-family: 'Open Sans', helvetica, sans-serif;
}
header { background: #ccc; padding: 10px;
}
.logo { float: left; width: 45px;
}
nav { float: right; margin-top: 11px; text-align: right;
}
nav a { text-decoration: none; margin-right: 20px; font-size: 13px; color: #444; transition: 333ms all ease-in-out;
}
nav a:last-of-type { margin: 0;
}
nav a:hover { color: red;
}
/* Hero */
.hero { background: pink; background-image: url('https://unsplash.imgix.net/uploads/1411589183965bdf6e141/5f468e98?fit=crop&fm=jpg&h=700&q=75&w=1050'); background-size: cover; background-position: center; background-attachment: fixed;
}
.hero h1 { text-align: center; margin: 0; padding: 100px 0; color: white; color: rgba(255,255,255,1); text-shadow: 0 0 10px #444;
}
/* Columns & Row */
.row { margin: 0 auto 2em; width: 90%; max-width: 600px;
}
.column { float: left; width: 49%; margin-right: 2%;
}
.column:last-of-type { margin-right: 0;
}
/* Footer */
footer { background: #ccc; padding: 5px 0; text-align: center; font-size: 11px;
}
/* Responsive */
@media (max-width: 500px) { header { text-align: center; } header .row { margin-bottom: 0; } .logo { float: none; width: 80px; } nav { float: none; text-align: center; } .column { width: 100%; margin-right: 0; }
}
| Developer | Chris Holder |
| Username | see8ch |
| Uploaded | June 20, 2022 |
| Rating | 3 |
| Size | 3,433 Kb |
| Views | 30,360 |
Do you need developer help for GSchool Workshop Demo - Winter 2015?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Chris Holder (see8ch) Script Codes
| Name | Size |
| GSchool Workshop Demo - Winter 2015 | 2,017 Kb |
| One from many. | 2,423 Kb |
| DevCamp 2014 - Denver Public Library | 5,033 Kb |
| Readable typography mixin - auto line height | 2,827 Kb |
| Styling Placeholders with a mixin | 4,205 Kb |
| Experiment - SCSS SVG Background Image with Variables | 3,270 Kb |
| Northerli Logo | 5,477 Kb |
| Code Motel Logo | 3,759 Kb |
| My Logo | 2,811 Kb |
| A Pen by Chris Holder | 2,538 Kb |
Create amazing marketing copy with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
| Login-ng-modal | Heedoo | 3,566 Kb |
| Incremental game | Eprouver | 5,868 Kb |
| Importable Clearfix | Corysimmons | 1,411 Kb |
| Chuck Norris Background | Manz | 1,967 Kb |
| Addthis_button | Esambino | 1,691 Kb |
| Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
| Simple personal profile | Miroot | 2,856 Kb |
| Brent Burns Tribute Page | Nevada48 | 2,569 Kb |
| Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!