imaginings

Notes

This was my very first venture into making a website. (Thanks, Neocities.) Consequently, I think it looks horrible. The HTML and CSS are wacky, but I've edited them a bit to hopefully improve readability. They're still not great, though if you'd like to look through the code or even use it, that's cool with me. This also originally had a fancier background, but I've removed it for the moment until I have some more time to update.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
	  <meta charset="UTF-8"> 
	  <title>imaginings</title> 
	  <link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive|Pontano+Sans' rel='stylesheet' type='text/css'>
	  <link href="/style.css" rel="stylesheet" type="text/css" media="all">   
  </head> 
  
  <body> 
    <div class="menu"> 
      <a href="http://imaginings.neocities.org">the dream</a><br><br> 
      <a href="http://imaginings.neocities.org">the forest</a><br><br> 
      <a href="http://imaginings.neocities.org">the mountain</a><br><br> 
      <a href="http://imaginings.neocities.org">the cabin</a><br><br> 
      <div class="cred"><a href="https://imaginings.neocities.org">template from imaginings</a><br>
      	background <a href="https://www.flickr.com/photos/rubyblossom/">here</a>
      </div>
  	</div>

<h1 class="main, head">rainy</h1>

<div class="main"> 
    	<div class="quote">  
      	<span class="title">Quote of the Day</span> 
      	<hr class="tline"><br> 
      	<p>You will always be fond of me. I represent to you all the sins you never had the courage to commit.</p>
      	―Oscar Wilde, <em>The Picture of Dorian Gray</em> 
    	</div> 
  	</div>

<div class="main"> 
    	<span class="title">Notes</span> 
    	<hr class="tline">
    	<p>This was my very first venture into making a website. (Thanks, Neocities.) Consequently, I think it looks horrible. The HTML and CSS are wacky, but I've edited them a bit to hopefully improve readability. They're still not great, though if you'd like to look through the code or even use it, that's cool with me.</p> 
  	</div>  
  </body> 
</html>

CSS

body {  
  background: url(https://farm3.staticflickr.com/2881/9706974939_ffef60bbed_o.jpg) no-repeat center center fixed;  
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover; 
  color: #000000; 
  font-size: 11px; 
}    
 
.head { 
  background-color: #ffffff; 
  color: #000000; 
  text-align: center; 
  width: 500px; 
  padding: 10px 50px; 
  opacity: 0.8; 
  font-family: 'Cedarville Cursive', times; 
  font-size: 57px; 
  font-weight: lighter; 
  letter-spacing: 20px;
  margin: 10px auto;
}

.main { 
  background-color: #ffffff; 
  color: #000000; 
  text-align: justify; 
  width: 500px; 
  padding: 30px 50px; 
  font-family: 'Pontano Sans', sans-serif; 
  line-height: 17px; 
  opacity: 0.8; 
  display: block;
  margin: 10px auto;
} 
      
.menu { 
  position: fixed; 
  background-color: #ffffff; 
  padding: 10px; 
  float: left; 
  opacity: 0.8; 
  font-family: 'Pontano Sans', sans-serif; 
}

a { 
	font-family: 'Pontano Sans', sans-serif; 
	color: #000000; 
	text-decoration: none; 
	padding: 2px; 
} 
 
a:hover { 
  color: #ffffff; 
  background-color: #A0C1DB; 
  transition: 1.5s; 
  text-shadow: 2px 2px #000000; 
}

.quote { 
  text-align: right; 
}

.tline { 
  border-top: 1px dotted; 
}

.title { 
  font-family: "Cedarville Cursive", times; 
  font-size: 20px; 
  line-height: 15px; 
}

.rititle { 
  font-family: "Cedarville Cursive", times; 
  font-size: 20px; 
  line-height: 15px; 
  float: right; 
} 
      
.creds {
  font-size: 10px;
}