Hour 12 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Listing 12.1

/* CSS Document */

body { background-color: #dfdfdf; }
#main { 
/*	width: 960px; */
	background-color: #fff;
	margin: 0 auto;
}

Listing 12.1 HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    <h2>Not Your Mother's Weed</h2>
    </header>
    <nav>
    	<ul>
        	<li>Home</li>
           <li>Products</li>
           <li>Services</li>
           <li>Support</li>
       </ul>
    </nav>
    <article>
      <h3>What is a Dandelion?</h3>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </article>
    <aside>
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </aside>
    <footer>
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </footer>
    </div>
  </body>
</html>

Listing 12.2

/* CSS Document */

body { background-color: #dfdfdf; }
#main { 
	width: 960px;
	background-color: #fff;
	margin: 0 auto;
}

Listing 12.3

/* CSS Document */

body { background-color: #dfdfdf; }
#main { 
	width: 80%;
	background-color: #fff;
	margin: 0 auto;
}
article {
	width: 50%;
}

Listing 12.4

/* CSS Document */
html, body { margin: 0; padding: 0; border: 0; }
body { background-color: #dfdfdf; }
#main { 
	width: 100%;
	background-color: #fff;
	margin: 0 auto;
}
header, article, aside, footer, nav {
	width: 100%;
}
nav ul, nav ul li { 
	display: block; 
	list-style-type: none; 
	padding: 0; 
	margin: 0; 
}

nav ul li {
	background-color: black;
	color: white;
	padding: 2% 1%;
	border: 1px solid #DFDFDF;
}

@media screen and (min-width: 481px) {
	nav ul { 
		background-color: #000;
		padding: 2% 1%;
	}
	nav ul li { 
		width: 20%;
		display: inline; 
		border: none;
		border-right: 1px solid #dfdfdf;
		padding-right: 2%;
	}
	article { width: 48%; float: left; }
	aside { width: 48%; float: right;  }
	aside img { width: 100%; height: auto; }
	footer { clear: both; }
}
@media screen and (min-width:481px) and  (max-width: 800px){
	#main { width: 90%; }
}
@media screen and (min-width: 801px){
	#main { width: 70%; }
}

Listing 12.5

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link href="rwd code 12.6.css" rel="stylesheet">
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    <h2>Not Your Mother's Weed</h2>
    </header>
    <nav>
    	<ul>
        	<li>Home</li>
           <li>Products</li>
           <li>Services</li>
           <li>Support</li>
       </ul>
    </nav>
    <article>
      <h3>What is a Dandelion?</h3>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </article>
    <div id="col2">
    <aside>
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </aside>
    <footer>
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </footer>
    </div>
    </div>
  </body>
</html>

Listing 12.6

/* CSS Document */

html, body { margin: 0; padding: 0; border: 0; }
body { background-color: #dfdfdf; }
#main { 
	width: 100%;
	background-color: #fff;
	margin: 0 auto;
}
header, article, aside, footer, nav {
	width: 100%;
}
nav ul, nav ul li { 
	display: block; 
	list-style-type: none; 
	padding: 0; 
	margin: 0; 
}

nav ul li {
	background-color: black;
	color: white;
	padding: 2% 1%;
	border: 1px solid #DFDFDF;
}

@media screen and (min-width: 481px) {
	nav ul { 
		background-color: #000;
		padding: 2% 1%;
	}
	nav ul li { 
		width: 20%;
		display: inline; 
		border: none;
		border-right: 1px solid #dfdfdf;
		padding-right: 2%;
	}
	article, aside { width: 48%; float: left; }
	#col2, footer { width: 48%; float: right;  }
	aside img { width: 100%; height: auto; }
}
@media screen and (min-width:481px) and  (max-width: 800px){
	#main { width: 90%; }
}
@media screen and (min-width: 801px){
	#main { width: 70%; }
}

Listing 12.7

/* CSS Document */

html, body { margin: 0; padding: 0; border: 0; }
body { background-color: #dfdfdf; }
#main { 
	width: 100%;
	background-color: #fff;
	margin: 0 auto;
}
header, article, aside, footer, nav {
	width: 100%;
}
nav ul, nav ul li { 
	display: block; 
	list-style-type: none; 
	padding: 0; 
	margin: 0; 
}

nav ul li {
	background-color: black;
	color: white;
	padding: 2% 1%;
	border: 1px solid #DFDFDF;
}

@media screen and (min-width: 481px) {
	nav ul { 
		background-color: #000;
		padding: 2% 1%;
	}
	nav ul li { 
		width: 20%;
		display: inline; 
		border: none;
		border-right: 1px solid #dfdfdf;
		padding-right: 2%;
	}
	article { width: 48%; float: left; }
	aside { width: 48%; float: right;  }
	aside img { width: 100%; height: auto; }
	footer { clear: both; }
	/* columns */ 
	article {
		-moz-column-count: 2; 
		-webkit-column-count: 2; 
		column-count: 2;
	}
}
@media screen and (min-width:481px) and  (max-width: 800px){
	#main { width: 90%; }
}
@media screen and (min-width: 801px){
	#main { width: 70%; }
}

Listing 12.7 HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link href="rwd code 12.7.css" rel="stylesheet">
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    <h2>Not Your Mother's Weed</h2>
    </header>
    <nav>
    	<ul>
        	<li>Home</li>
           <li>Products</li>
           <li>Services</li>
           <li>Support</li>
       </ul>
    </nav>
    <article>
      <h3>What is a Dandelion?</h3>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </article>
    <aside>
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </aside>
    <footer>
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </footer>
    </div>
  </body>
</html>

Leave a Reply

Your email address will not be published.