JSFiddle - React, Tailwind, and code Playground

by cordeliaf

HTML

<div id="main">
	<div id="changeImg"><img src="http://cordeliafong.com/parallax/images/IMG_5223-360-w-graphicPen.jpg"></div>
    <div id="name"><h1>cordelia.fong</h1></div>
    <div id=menu> <a href="#" class="about">about</a> . <a href="#" class="work">work</a> . <a href="#" class="contact">contact</a></div>
</div>

<!--<div id="aboutMe">
<div>Something About Me...</div>
    <div>What i Have</div>
    <div>Where i Go</div>
    <div>Where i Live</div>
    <div>What i Do</div>
</div>

<div id="portfolio">

</div>

<div id="contactForm">

</div>-->

CSS

/*@import url(http://fonts.googleapis.com/css?family=Roboto:300);*/
 
@media (max-width: 600px) {
  font-size:1.2em;
  }
@import url(http://fonts.googleapis.com/css?family=Raleway:300, 700);
 /*body {
    font-family:Verdana, Geneva, sans-serif; background-image:url(images/3dots.gif);  background-repeat:repeat-x;background-position:right top bottom;
    /*background-color: #ccc;
}*/
 body {
    font-family:Verdana, Geneva, sans-serif; /*background-image:url(images/IMG_0656-PE.jpg);  background-repeat:repeat-y;background-position:right top bottom;
    background-color: #ccc;*/
	    background-image:url(http://www.culturalsolutions.co.uk/images/para.png), url(http://www.culturalsolutions.co.uk/images/para.png), url(http://www.culturalsolutions.co.uk/images/para.png);
   background-position:100px 0, 0 100px, 250px 200px;width: 1024px; height: 3000px;
}

#main { 	border: 1px #003300 solid; padding: 20px; width:60%;  margin: auto;margin-top:5%;margin-bottom:5%; background-color:#fff;
	}
h1 {font-size: 3em; padding-bottom:50px;margin: auto;
    /*color: green;width:500px;
   max-width:100%;height:auto;
	 max-width:100%;height:auto;*/
}
#menu, p, h1 {margin:inherit;
}
a, a:link, a:hover, a:visited {
    color: #000;
    text-decoration:none;
}
.changeColor {
    color: #fff;
}
.h1-change {
    color:#cf997d;
}
#name{max-width:100%;height:auto;}
img {max-width:100%;height:auto;}

#myImg {
	/*background:url('http://cordeliafong.com/parallax/images/IMG_5223-360-w-graphicPen.jpg';)*/
	}
*/
.changeImage{ 
	background:url('images/IMG_5223-360-w-chacoal.jpg');
/*	background: url('http://capauwels.com/img/instagram/2013-03-02_1362218618.jpg') no-repeat fixed center center / 0% auto #000;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-opacity: 1;
    opacity: 1;
	background:url('images/IMG_5223-360-w-chacoal.jpg');
    background-repeat:no-repeat;
    background-position: 10%;*/
}
.flip {
    -webkit-transform:rotate(20deg);
   ...

JavaScript

//change color when mouseover
    var name = document.getElementById("name");
		name.addEventListener("mouseover", function () {
    	name.classList.toggle("h1-change");
    });

/*var changeImg = document.getElementById("changeImg");
	changeImg.addEventListener("mouseover", function() {
   // changeImg.classList.toggle("flip");
   changeImg.addEventListener("mouseover", function() { changeImg.classList.toggle("spin")});
});
*/
var myImg = document.getElementById("myImg");
myImg.addEventListener("mouseover", function () {
    myImg.classList.toggle("changeImage");
});