JSFiddle - React, Tailwind, and code Playground

by Alma Grace

HTML

<div class="header">
    <img id="logo" src="http://www.clker.com/cliparts/E/W/P/P/y/f/barbecue-utensils-hi.png" alt="chef logo" />
    	<h1>ALMA GRACE</h1>

    	<h3 id="subtitle">Favourite Recipes</h2>

	</div>

	<div class="main-content">
		<div class="col-recipe">
			<p id="text1">I love cooking and I enjoy trying new recipes. My family and friends love my food. This website is dedicated to home cooks who share the same passion that I have.</p>
<!--comment-->

<p class="button">Display more content...</p>            


            
		<div class="col-one">	
			<h4>Lasagna</h4>
            
     
            
			<img id="lasagna" src="http://images.media-allrecipes.com/userphotos/250x250/00/03/24/32427.jpg" alt="Lasagna" /> 
			<p>Ricotta, assorted meats, mozzarella cheese, tomato sauce and tender pasta baked in the oven. 
			<a href="http://allrecipes.com/Recipe/Worlds-Best-Lasagna/Detail.aspx?event8=1&prop24=SR_Thumb&e11=lasagna&e8=Quick%20Search&event10=1&e7=Recipe%20Hub" target="_blank">World's Best Lasagna</a>
			</p>
		</div>
		
		<div class="col-two">
			<h4>Seafood Soup</h4>
			<img id="seafood" src="http://awetthai.com/wp-content/uploads/2013/12/tom-yum-seafood-soup-awet-thai.jpg" alt="Seafood Soup" /> 
			<p>The ultimate seafood soup with fish (halibut, snapper, bass and/or grouper), shellfish, shrimp and lobster. 
			<a href="http://www.foodnetwork.com/recipes/tyler-florence/the-ultimate-sea-food-soup-recipe.html" target="_blank">Ultimate Seafood Soup</a>
			</p>
		</div>
		<div class="col-three">		
			<h4>Chicken Souvlaki</h4>
			<img id="chicken" src="http://images.media-allrecipes.com/userphotos/250x250/00/23/09/230908.jpg" alt="Chicken Souvlaki" /> 
			<p>This recipe features the fresh-tasting combination of lemon juice, garlic, and olive oil that is so prevalent in Greek cuisine.
			<a...

CSS

body {
    background: url("http://www.prlog.org/11598193-granite-kitchen-countertop.jpg");
    margin: auto;
    width: 690px;
    font-family:'Arial', sans serif;
    color: #000;
}
p.button {
    width: 150px;
    background:#dedede;
    font-size:15px;
    color:#222;
    border:2px dotted #888;
    z-index:10;
    margin-top:1em;
}
p.button:hover {
    background:#444;
    color:#ddd;
    cursor:pointer;
}
p {
    line-height: 20px;
    color: #000;
}
a {
    color: #e25d33;
    font-size: 14px;
}
a:hover {
    font-color: #000088;
}
a:visited {
    text-decoration: none;
    color: #990099;
}
a:focus {
    text-decoration: none;
    color: #000088;
    border-bottom-style: solid;
}
.header {
    margin: 20px 0 20px 0;
    background-color: #ffffff;
    padding: 15px;
    color: #000000;
    text-shadow:0px 0px 2px #FFFFFF, 2px 2px 2px #333333;
    box-shadow: 5px 5px 5px #330000;
    opacity: 0.9;
}
.header img {
    float: left;
    height:100px;
    margin: 10px 20px 0 0;
}
h1 {
    font-family: Arial, cursive;
    font-size: 2em;
    color: #000;
    margin: 0;
}
h3 {
    font-family: Arial, cursive;
    font-size: 1.5em;
    color: #000088;
}
h2, h4 {
    color: #000000;
    text-shadow:0px 0px 2px #FFFFFF, 2px 2px 2px #333333;
}
h5 {
    font-family: Arial, cursive;
    font-size: 1em;
    color: #000;
}
.main-content {
    padding: 15px;
    overflow:hidden;
    opacity: 0.9;
}
.col-recipe {
    padding: 5px 5px 10px 10px;
    background-color: #ffffff;
    width:650px;
    float:left;
    margin-right: 40px;
}
.main-content img {
    width:190px;
    height: 142px;
    box-shadow: 1px 1px 5px #330000;
    border-radius: 5px 5px 5px 5px;
}
.main-content  img:hover{
	position: relative;
	top: -30px;
	left: 80px;
	transform: scale(1.5);
	transition: all 1s;

}
.col-one {
    padding: 5px 10px 5px 5px;
    background-color: #fff;
    width:200px;
    float:left;
}
.col-two {
    padding: 5px 10px 5px 5px;
    background-color: #fff;
    width:200px;
   ...

JavaScript

//Alma Grace HW#2 (April 10, 2014)

function addEventsToHTML() {
    var stitle = document.getElementById('subtitle');
    stitle.onmouseover = changeSubTitle;

    function changeSubTitle() {
        this.style.background = "#F00";
        document.getElementById("logo").src = "http://www.sd71.bc.ca/sd71/school/courtmid/2003_student_web/7_3/2_b_john/Images/Cooking_utensils.gif";
        document.getElementById("subtitle").innerHTML = "Yummy Recipes";
    }
}

addEventsToHTML();

var text1 = document.getElementById("text1");

document.querySelector(".button").addEventListener("click", function () {

    document.getElementById("text1").innerHTML = "I love cooking and I enjoy trying new recipes. My family and friends love my food. This website is dedicated to ALL home cooks who share the same passion that I have." + "<br>" + "<br>" + "The recipes in my web page are my favourites: breakfast, lunch and dinner. The recipes are easy. Try them. I hope you will enjoy it as much as I do. Have fun!" + "<br>";

    text1.style.color = "#0000ff";

});