A Pen by Weini Zhou

Thumbnail
This awesome code was written by wzhou, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright wzhou ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Weini Zhou</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<html>
<head>
	<title>Healthy Eating Page 2</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<div class="content">
		<div class="top_block block_1">
			<div class="content">
        <font color="white"><h1><center>Healthy Eating Tip 2</center></h1></font>
			</div>
		</div>
		<div class="top_block block_2">
			<div class="content">
        <h3><p><b>Tip # 2: Look at nutrition labels</b></p></h3>
        <p><h3><b><font color="white">Have you ever wondered what those charts on the back of food you buy were?</p></font>
        <font color="black" <p>It is called a nutrition label.</p></font>
       <font color="white"><p>It is important to know how to read the label. It tells you how much calories, sodium,      and vitamins you are consuming by eating/drinking that food.</p></font>
      <p>What you see in a nutrition label
      <ol>
        <li>Calories is a unit of heat used to tell the amount of energy food produces in the body. You may think that the more calories in food is better, but if you don't use that energy, it will turn to fat.</li>
        <li>Sodium is salt.</li>
        <li>Cholesterol is waxy substance that comes from 2 sources, food and your body. Too much can give you a stroke or heart attack.</li>
        <center><img src="http://www.heb.com/static/images/nutrition-facts-label.gif"></center>
      </ol></p>
    <ul class="pull-left">
          <li><a href="https://codepen.io/wzhou/pen/jEWZVP">Home Page</a></li>
        
         <li><a href="https://codepen.io/wzhou/pen/PwOqKy?editors=110">Tip 1</a></li>
         <li><a href="https://codepen.io/wzhou/pen/OPxvep">Tip 3</a></li>
         
			</div>
		</div>
	</div>
<!-- 
 * Layout generated with http://layzilla.com
 * Layout generator is free of use.
 * We appreciate if you leave this comment block in commercial use of generator.
 * All comment and ideas can be submitted to us using contacts below.
 *
 *    site: www.jmholding.com
 *   email: info@jmholding.ru
 *  twitter: @jmholding
 -->
</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/wzhou/a-pen-by-weini-zhou-OPxvYW */
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%; 
}

.content {
	min-height: 100%;
	position: relative;
	overflow: auto;
	z-index: 0; 
}

.background {
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
}

.top_block {
	width: 100%;
	display: block; 
}

.bottom_block {
	position: absolute;
	width: 100%;
	display: block;
	bottom: 0; 
}

.left_block {
	display: block;
	float: left; 
}

.right_block {
	display: block;
	float: right; 
}

.center_block {
	display: block;
	width: auto; 
}

.block_1 {
	width: 100%;
	height: 70px;
	background-color: #51d6c7;
}

.block_2 {
	width: 100%;
	height: 669px;
	background-color: #f28e8e;
}


Comments