Skip to content

Instantly share code, notes, and snippets.

@garybunofsky

garybunofsky/index.html

Created January 2, 2018 15:24
Show Gist options
  • Save garybunofsky/2aa36addf800139d18809735f171ba9b to your computer and use it in GitHub Desktop.
Save garybunofsky/2aa36addf800139d18809735f171ba9b to your computer and use it in GitHub Desktop.
Download ZIP
Front End Web Development: Lesson 3, CSS the Right Way // source https://jsbin.com/tifahaz
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Front End Web Development: Lesson 3, CSS the Right Way</title>
<style id="jsbin-css">
html {
font-family: sans-serif;
color:#333;
}
.card {
background:#fff;
border:1px solid #eaeaea;
border-radius:5px;
}
.card h4 {
font-size:1.25em;
}
.card ul {
margin:0 0 0 -40px;
}
.card ul li {
line-height:1.56em;
padding:1em .75em;
}
.card img {
height:auto;
object-fit: cover;
max-height:400px;
width:100%;
}
.content-container {
padding:1.5em;
}
/* Answer 1 */
.card ul {
list-style:none;
}
/* Answer 2 */
.card ul li {
border-bottom:1px solid #b7b7b7;
}
.card ul li:last-of-type {
border-bottom:none;
}
/* Answer 3 */
.card ul li:nth-child(odd) {
background:#f9f9f9;
}
/* Answer 4 */
.card h4 {
color:#01adc7;
}
/* Answer 5 */
.card {
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
}
/* Answer 6 */
.card ul li::before {
color: #01adc7;
content: "\2022";
margin-right:0.25em;
}
/* Answer 7 */
.card a {
color:#01adc7;
}
.card a:hover {
color:#0d8fa2;
}
</style>
</head>
<!--
1. Remove the bullets from the unordered list.
2. Add a border to the bottom of all list items except the last one.
3. Add a background color to every other list item.
4. Change the color of the h4 to #01adc7;
5. Let's give it some depth; Add a box-shadow property to the card.
6. Add blue bullets to the unordered list. Use the same hex color as the heading.
7. Style the link color to blue, hex code #01adc7. Change all link colors to #01adc7 for their hovered, active and visited state.
-->
<body>
<div class="card">
<img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=1500&q=80" alt="">
<div class="content-container">
<h4>Playing with CSS</h4>
<ul>
<li>
The intial release of CSS was December 17, 1996.
</li>
<li>
The CSS em unit was originally derived from the width of the capital letter <strong>M</strong>.
</li>
<li>
Eric Meyer has a great <a href="https://meyerweb.com/eric/tools/css/reset/" target="_blank">CSS reset snippet</a>. This block of code helps reduce browser inconsistencies, making it easier to style across all browsers.
</li>
<li>
CSS stands for Cascading Style Sheet.
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself" target="_blank">DRY</a> is an acronym in development that stands for <em>Don't Repeat Yourself</em>. Many languages, including CSS, suggest keeping your code DRY.
</li>
<li>
If you want to include a font, you'll likely need to use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" target="_blank">@font-face</a>.
</li>
</ul>
</div>
</div>
<script id="jsbin-javascript">
var hamburger = document.getElementById('menu');
var main = document.getElementById('main');
var isDesktop = function () {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth;
console.log('The width is ' + x);
if (x < 961) {
return false;
} else {
return true;
}
}
hamburger.addEventListener('click', function(){
main.classList.toggle('isOpened');
});
console.log(isDesktop());
</script>
<script id="jsbin-source-css" type="text/css">html {
font-family: sans-serif;
color:#333;
}
.card {
background:#fff;
border:1px solid #eaeaea;
border-radius:5px;
}
.card h4 {
font-size:1.25em;
}
.card ul {
margin:0 0 0 -40px;
}
.card ul li {
line-height:1.56em;
padding:1em .75em;
}
.card img {
height:auto;
object-fit: cover;
max-height:400px;
width:100%;
}
.content-container {
padding:1.5em;
}
/* Answer 1 */
.card ul {
list-style:none;
}
/* Answer 2 */
.card ul li {
border-bottom:1px solid #b7b7b7;
}
.card ul li:last-of-type {
border-bottom:none;
}
/* Answer 3 */
.card ul li:nth-child(odd) {
background:#f9f9f9;
}
/* Answer 4 */
.card h4 {
color:#01adc7;
}
/* Answer 5 */
.card {
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
}
/* Answer 6 */
.card ul li::before {
color: #01adc7;
content: "\2022";
margin-right:0.25em;
}
/* Answer 7 */
.card a {
color:#01adc7;
}
.card a:hover {
color:#0d8fa2;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var hamburger = document.getElementById('menu');
var main = document.getElementById('main');
var isDesktop = function () {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth;
console.log('The width is ' + x);
if (x < 961) {
return false;
} else {
return true;
}
}
hamburger.addEventListener('click', function(){
main.classList.toggle('isOpened');
});
console.log(isDesktop());</script></body>
</html>
Raw
jsbin.tifahaz.css
html {
font-family: sans-serif;
color:#333;
}
.card {
background:#fff;
border:1px solid #eaeaea;
border-radius:5px;
}
.card h4 {
font-size:1.25em;
}
.card ul {
margin:0 0 0 -40px;
}
.card ul li {
line-height:1.56em;
padding:1em .75em;
}
.card img {
height:auto;
object-fit: cover;
max-height:400px;
width:100%;
}
.content-container {
padding:1.5em;
}
/* Answer 1 */
.card ul {
list-style:none;
}
/* Answer 2 */
.card ul li {
border-bottom:1px solid #b7b7b7;
}
.card ul li:last-of-type {
border-bottom:none;
}
/* Answer 3 */
.card ul li:nth-child(odd) {
background:#f9f9f9;
}
/* Answer 4 */
.card h4 {
color:#01adc7;
}
/* Answer 5 */
.card {
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
}
/* Answer 6 */
.card ul li::before {
color: #01adc7;
content: "\2022";
margin-right:0.25em;
}
/* Answer 7 */
.card a {
color:#01adc7;
}
.card a:hover {
color:#0d8fa2;
}
Raw
jsbin.tifahaz.js
var hamburger = document.getElementById('menu');
var main = document.getElementById('main');
var isDesktop = function () {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth;
console.log('The width is ' + x);
if (x < 961) {
return false;
} else {
return true;
}
}
hamburger.addEventListener('click', function(){
main.classList.toggle('isOpened');
});
console.log(isDesktop());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment