fzero/0README.md

## 0README.md

      
                Raw

        
              0README.md
            
          
    Intro to CSS
This is the code we've worked on during May 22 class. Feel free to use it as reference!

  
## base.css
/* This CSS file is loaded before theme.css */

body {
  margin: 40px 10% 400px 10%;
  background-color: #ffffff;
}

## index.html
<!DOCTYPE html>
<html>

<head>
  <title>My Awesome Profile Page</title>

  <!-- This loads google fonts - see https://fonts.google.com -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab:300,400" rel="stylesheet">

  <!-- Base css file -->
  <link rel="stylesheet" type="text/css" href="base.css">

  <!-- Theme css file -->
  <link rel="stylesheet" type="text/css" href="theme.css">
</head>


  <body>
    <header>

      <nav>
        <ul>
          <li>
            <a href="">Link 1</a>
          </li>
          <li>
            <a href="">Link 2</a>
          </li>
          <li>
            <a href="">Link 4</a>
          </li>
          <li>
            <a href="">Link 4</a>
          </li>
        </ul>
      </nav>

      <section>
        <h1>Mr. Person Guy</h1>
        <h4>Phd. Md. Awesome person. - Human being (part time)</h4>
      </section>

    </header>

    <h2>Header outside main</h2>

    <main>
      <h2>About</h2>

      <p>
      <img class="picture"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Golde33443.jpg/420px-Golde33443.jpg" />
      Seitan cardigan cold-pressed meh, pug viral tilde meditation gluten-free letterpress 8-bit retro forage yr. <strong>Forage af asymmetrical</strong>, craft beer pinterest DIY taxidermy meggings echo park shaman vice scenester XOXO letterpress.</p>

      <h2 id="unique">By the way...</h2>
      <p>Seitan cardigan cold-pressed meh, pug viral tilde meditation gluten-free letterpress 8-bit retro forage yr. <strong>Forage af asymmetrical</strong>, craft beer pinterest DIY taxidermy meggings echo park shaman vice scenester XOXO letterpress. Subway tile <span class="highlight">kombucha lyft tacos gluten-free tbh locavore seitan butcher farm-to-table sartorial taiyaki scenester intelligentsia.</p>
        <p>These are things:
          <ul>
            <li>Football</li>
            <li>Barbeque</li>
            <li>A third thing just to justify this</li>
            <li>Fourth?</li>
          </ul>
        </p>
        <p>Vice before they sold out knausgaard adaptogen jean shorts ugh</span> artisan stumptown post-ironic retro fixie viral vape. Wolf palo santo +1 knausgaard celiac fixie shaman glossier affogato photo booth iPhone godard. Squid portland fingerstache, lumbersexual DIY bespoke affogato tacos bitters.</p>

      <aside>Seitan cardigan cold-pressed meh, pug viral tilde meditation gluten-free letterpress 8-bit retro forage yr.</aside>
    </main>
  </body>

</html>

## theme.css
/*
We got this from Google fonts. Pasted here for reference:
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto Slab', serif;
*/

/*
body is also defined in base.css, but these definitions
will take hold, since this file is loaded after
(i.e. below it) on the html file.
*/
body {
  font-family: 'Open Sans', sans-serif;
  margin-top: 140px;
}

/*
You can define properties for multiple tags, classes and ids
in one go by separating them with commas
*/
h1, h2 {
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
}

/*
You can specify any other properties separately after that
*/
h1 {
  color: #cb2222;
}

h2 {
  color: blue;
}

/*
This block sets the style for the nav tag
*/
nav {
  font-family: "Roboto Slab", serif;
  font-size: 24px;
  text-align: center;
  background: rgba(0,0,0, .1);
  padding: 10px;
  /*
  The navigation block has a fixed position at the top of the page,
  defined by the following properties
  */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/*
This sets the style for a tags withing the nav tag
*/
nav a {
  color: black;
  text-decoration: none;
}

/*
This sets the style for ul tags withing the nav tag
*/
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 5px;
}

/*
This sets the style for li within ui within nav
*/
nav ul li {
  display: inline;
  margin-right: 20px;
}

aside {
  border: 10px solid black;
  border-radius: 10px;
  background-color: lightblue;
  padding: 15px;
  margin-top: 60px;
}

main h2 {
  color: gray;
  font-size: 22px;
}

p {
  font-size: 18px;
}

/*
The blocks below refer to the "clearfix hack". They make sure
the contents will be displayed properly when using the float
property (see .picture) below.

Reference: http://learnlayout.com/clearfix.html
*/
main p {
  overflow: auto;
}
.clearfix {
  overflow: auto;
}

/*
Class definitions: only elements with class="picture" will be
affected by the following blocks
*/
.picture {
  display: inline-block; /* image is displayed as block, but flows with text */
  float: right; /* image is displayed to the right of the text */
  margin: 0 0 10px 10px;
  box-shadow: 5px 3px 16px 4px #ccc;
  width: 33%;
  border-radius: 15px;
}

.highlight {
  background-color: yellow;
}

.bolder {
  font-weight: bolder;
}

/*
The definition below will only be applied to the unique
element with id="unique"
*/
#unique {
  border-bottom: 1px solid black;
}
	/* This CSS file is loaded before theme.css */

	body {
	margin: 40px 10% 400px 10%;
	background-color: #ffffff;
	}
	<!DOCTYPE html>
	<html>

	<head>
	<title>My Awesome Profile Page</title>

	<!-- This loads google fonts - see https://fonts.google.com -->
	<link href="https://fonts.googleapis.com/css?family=Open+Sans\|Roboto+Slab:300,400" rel="stylesheet">

	<!-- Base css file -->
	<link rel="stylesheet" type="text/css" href="base.css">

	<!-- Theme css file -->
	<link rel="stylesheet" type="text/css" href="theme.css">
	</head>


	<body>
	<header>

	<nav>
	<ul>
	<li>
	<a href="">Link 1</a>
	</li>
	<li>
	<a href="">Link 2</a>
	</li>
	<li>
	<a href="">Link 4</a>
	</li>
	<li>
	<a href="">Link 4</a>
	</li>
	</ul>
	</nav>

	<section>
	<h1>Mr. Person Guy</h1>
	<h4>Phd. Md. Awesome person. - Human being (part time)</h4>
	</section>

	</header>

	<h2>Header outside main</h2>

	<main>
	<h2>About</h2>

	<p>
	<img class="picture" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Golde33443.jpg/420px-Golde33443.jpg" />
	Seitan cardigan cold-pressed meh, pug viral tilde meditation gluten-free letterpress 8-bit retro forage yr. <strong>Forage af asymmetrical</strong>, craft beer pinterest DIY taxidermy meggings echo park shaman vice scenester XOXO letterpress.</p>

	<h2 id="unique">By the way...</h2>
	<p>Seitan cardigan cold-pressed meh, pug viral tilde meditation gluten-free letterpress 8-bit retro forage yr. <strong>Forage af asymmetrical</strong>, craft beer pinterest DIY taxidermy meggings echo park shaman vice scenester XOXO letterpress. Subway tile <span class="highlight">kombucha lyft tacos gluten-free tbh locavore seitan butcher farm-to-table sartorial taiyaki scenester intelligentsia.</p>
	<p>These are things:
	<ul>
	<li>Football</li>
	<li>Barbeque</li>
	<li>A third thing just to justify this</li>
	<li>Fourth?</li>
	</ul>
	</p>
	<p>Vice before they sold out knausgaard adaptogen jean shorts ugh</span> artisan stumptown post-ironic retro fixie viral vape. Wolf palo santo +1 knausgaard celiac fixie shaman glossier affogato photo booth iPhone godard. Squid portland fingerstache, lumbersexual DIY bespoke affogato tacos bitters.</p>

	<aside>Seitan cardigan cold-pressed meh, pug viral tilde meditation gluten-free letterpress 8-bit retro forage yr.</aside>
	</main>
	</body>

	</html>
	/*
	We got this from Google fonts. Pasted here for reference:
	font-family: 'Open Sans', sans-serif;
	font-family: 'Roboto Slab', serif;
	*/

	/*
	body is also defined in base.css, but these definitions
	will take hold, since this file is loaded after
	(i.e. below it) on the html file.
	*/
	body {
	font-family: 'Open Sans', sans-serif;
	margin-top: 140px;
	}

	/*
	You can define properties for multiple tags, classes and ids
	in one go by separating them with commas
	*/
	h1, h2 {
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
	}

	/*
	You can specify any other properties separately after that
	*/
	h1 {
	color: #cb2222;
	}

	h2 {
	color: blue;
	}

	/*
	This block sets the style for the nav tag
	*/
	nav {
	font-family: "Roboto Slab", serif;
	font-size: 24px;
	text-align: center;
	background: rgba(0,0,0, .1);
	padding: 10px;
	/*
	The navigation block has a fixed position at the top of the page,
	defined by the following properties
	*/
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	}

	/*
	This sets the style for a tags withing the nav tag
	*/
	nav a {
	color: black;
	text-decoration: none;
	}

	/*
	This sets the style for ul tags withing the nav tag
	*/
	nav ul {
	list-style-type: none;
	padding: 0;
	margin: 5px;
	}

	/*
	This sets the style for li within ui within nav
	*/
	nav ul li {
	display: inline;
	margin-right: 20px;
	}

	aside {
	border: 10px solid black;
	border-radius: 10px;
	background-color: lightblue;
	padding: 15px;
	margin-top: 60px;
	}

	main h2 {
	color: gray;
	font-size: 22px;
	}

	p {
	font-size: 18px;
	}

	/*
	The blocks below refer to the "clearfix hack". They make sure
	the contents will be displayed properly when using the float
	property (see .picture) below.

	Reference: http://learnlayout.com/clearfix.html
	*/
	main p {
	overflow: auto;
	}
	.clearfix {
	overflow: auto;
	}

	/*
	Class definitions: only elements with class="picture" will be
	affected by the following blocks
	*/
	.picture {
	display: inline-block; /* image is displayed as block, but flows with text */
	float: right; /* image is displayed to the right of the text */
	margin: 0 0 10px 10px;
	box-shadow: 5px 3px 16px 4px #ccc;
	width: 33%;
	border-radius: 15px;
	}

	.highlight {
	background-color: yellow;
	}

	.bolder {
	font-weight: bolder;
	}

	/*
	The definition below will only be applied to the unique
	element with id="unique"
	*/
	#unique {
	border-bottom: 1px solid black;
	}