Last active
February 20, 2016 17:30
-
-
Save mathewsanders/47d87d5ba84f33bc9f98 to your computer and use it in GitHub Desktop.
Design in the browser, activity 2: add basic styles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Not great practice, but for a quick start I like to reset all elements to 1rem */ | |
* { | |
font-size: 1rem; | |
color: #4A4A4A; | |
} | |
h1, h2, h3, h4, h5 { | |
margin: 0; | |
} | |
body { | |
padding: 0; margin: 0; | |
font-family: Helvetica; | |
line-height: 120%; | |
} | |
/* styles specific for navigation container */ | |
nav { | |
margin: 0.5em 1em; | |
padding: 1em; | |
overflow: auto; | |
} | |
nav h1 { | |
display: inline; | |
float: left; | |
} | |
nav a, a { | |
color: #37BFD7; | |
} | |
/* remaining style declarations ommited for readability */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Coffee Finder ☕️ New York</title> | |
<link rel="stylesheet" href="default.css"> | |
</head> | |
<body> | |
<nav> | |
<h1>☕️ Coffee Finder <a >New York</a></h1> | |
<ul id="sort"> | |
<li><a href="#">Nearby</a></li> | |
<li><a href="#">Name</a></li> | |
</ul> | |
</nav> | |
<main> | |
<div class="cafe-card"> | |
<h1>Cafe Grumpy</h1> | |
<p class="description">Hip local coffeehouse chain serving a range of house-roasted brews in a relaxed setting.</p> | |
<dl class="address"> | |
<dt>Address</dt> | |
<dd>224 W 20th St, New York, NY 10011</dd> | |
</dl> | |
<div class="map"></div> | |
</div> | |
<div class="cafe-card"> | |
<h1>Cafe Grumpy</h1> | |
<p class="description">Hip local coffeehouse chain serving a range of house-roasted brews in a relaxed setting.</p> | |
<dl class="address"> | |
<dt>Address</dt> | |
<dd>224 W 20th St, New York, NY 10011</dd> | |
</dl> | |
<div class="map"></div> | |
</div> | |
<div class="cafe-card"> | |
<h1>Cafe Grumpy</h1> | |
<p class="description">Hip local coffeehouse chain serving a range of house-roasted brews in a relaxed setting.</p> | |
<dl class="address"> | |
<dt>Address</dt> | |
<dd>224 W 20th St, New York, NY 10011</dd> | |
</dl> | |
<div class="map"></div> | |
</div> | |
</main> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment