moonstruck - page

<!------------------------------------------------------------------------

                        MOONSTRUCK
                        BY @ATLASTHEMES
                        pls don't remove credit
                        THANKS!<3

------------------------------------------------------------------------->

<!DOCTYPE html>
<head>
<link rel="shortcut icon" href="{Favicon}">

<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,400i,700" rel="stylesheet">

<title>moonstruck</title><!-- title for browser tab -->

<style type="text/css" >
body {color: #444;font-family: 'Merriweather', sans-serif;background: #fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;}

a{color: #aaa;text-decoration: none;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
a:hover{color: #444;}
b {font-weight: 700;color: #888;}
i {font-style: italic;color: #aaa;letter-spacing:0.5px;}

.sidebar {position:fixed;top:0px;left:0;height:100vh;width: 140px;z-index:999!important;border-right:1px solid #eee;padding-top: 250px;padding-left: 50px;background-color: #fff;}
.sidebar-title {font-family: 'Merriweather', sans-serif;font-size: 14px;color: #444;text-transform: lowercase;text-align: right;margin: 2px;padding-right: 7px;padding-bottom: 5px;}
.sidebar-link a{display: block;width: auto;height: 12px;color: #aaa;
font-size: 9.5px;text-transform: lowercase;text-align: right;padding: 2px;background: #fff;margin-right: 10px;}
.sidebar-link a:hover{color: #666666;}


.section {display: block;margin-left: 225px;margin-top:50px;padding-top: 20px;width: 650px;background: transparent;}
.project {display: block;float: left;width: 650px;min-height: 215px;margin-bottom: 20px;padding-bottom: 20px;text-align: left;color: #444;background: #fff;}
.title {margin-left: 165px;font-size: 14px;font-family: 'Merriweather', calibri, sans-serif;color: #444;text-transform: lowercase;}
.subheading {margin-left: 165px;margin-top: 5px;margin-bottom: 8px;font-family: 'Merriweather', sans-serif;font-size: 9.5px;color: #aaa;text-transform: lowercase;letter-spacing: 1px;}
.synopsis {font-family: 'Merriweather', calibri, sans-serif;font-size: 10px;line-height:18px;color: #444;margin-left: 165px;margin-right: 6px;}

.picture-box {display: inline-block;position: absolute;float: left;width: 150px;height: 150px;margin: 0px 10px 0px 0px;background: #fff;}
.picture-box img {display: block;width: 150px;height: 150px;margin: 0px;padding: 0px;border-radius:5px;}

.wip-link {display: inline-block;position: absolute;width: 150px;margin-top: 160px;text-align: center;font-family: 'Merriweather', sans-serif;font-size: 9.5px;text-transform: lowercase;}
.wip-link a {color: #aaa;margin-right: 4px;margin-left: 4px;}
.wip-link a:hover{color: #666;}

/* -- pls don't edit! -- */
.credit a {font-family:times new roman;font-size: 14px;color: #888;position: fixed;right: 15px;bottom: 15px;}

</style>
</head>
<body>
<!------------------------------------------------------------------------->
<!-------------------------- EDITING BEGINS HERE -------------------------->
<!------------------------------------------------------------------------->

<div class="sidebar">

<!-- sidebar title -->
<div class="sidebar-title">works in progress</div>

<!-- sidebar links -->
<div class="sidebar-link">
<a href="/">return</a>
<a href="/">link</a>
<a href="/">link</a>
<a href="http://www.tumblr.com./dashboard">dash</a>
</div></div>

<div class="section">

<!-----START FIRST BOX----->
<div class="project"><div class="picture-box">

<!-- image url -->
<img src="https://farm5.staticflickr.com/4819/45782984821_89d4930bde_m.jpg"></div>

<div class="wip-link">
    <a href="/">link</a>
    <a href="/">link</a>
    <a href="/">link</a></div>

<div class="title">title one</div>

<div class="subheading">
    genre &rang; poetry<br/>
    currently &rang; editing</div>

    <div class="synopsis">
    Write a little about your project here. This is <b>bold</b>. This is <i>italics</i>. This is a <a href="/">link</a>. The images are 150px x 150px. You can write as much as you want here and this area will extend to the length of your text. There are three links underneath the photo. You can use these to link to tags, sideblogs, pinterest boards, etc. I feel like this is a good length for a blurb, but this will extend however long you need it to. Directions are in the code, but feel free to send me an ask if you have any questions! Images via unsplash.com.
</div></div>
<!-----END FIRST BOX----->


<!-----START SECOND BOX----->
<div class="project"><div class="picture-box">

<img src="https://farm5.staticflickr.com/4817/43965552890_ae46723889_m.jpg"></div>

<div class="wip-link">
    <a href="/">link</a>
    <a href="/">link</a>
    <a href="/">link</a></div>

<div class="title">title two</div>

<div class="subheading">
    genre &rang; recipes<br/>
    currently &rang; developing</div>

    <div class="synopsis">
    Write a little about your project here. This is <b>bold</b>. This is <i>italics</i>. This is a <a href="/">link</a>. The images are 150px x 150px. You can write as much as you want here and this area will extend to the length of your text. There are three links underneath the photo. You can use these to link to tags, sideblogs, pinterest boards, etc. I feel like this is a good length for a blurb, but this will extend however long you need it to. Directions are in the code, but feel free to send me an ask if you have any questions! Images via unsplash.com.
</div></div>
<!-----END SECOND BOX----->


<!-----START THIRD BOX----->
<div class="project"><div class="picture-box">

<img src="https://farm2.staticflickr.com/1915/43965552680_fff8992c48_m.jpg"></div>

<div class="wip-link">
    <a href="/">link</a>
    <a href="/">link</a>
    <a href="/">link</a></div>

<div class="title">title three</div>

<div class="subheading">
    genre &rang; fantasy<br/>
    currently &rang; daydreaming</div>

    <div class="synopsis">
    Write a little about your project here. This is <b>bold</b>. This is <i>italics</i>. This is a <a href="/">link</a>. The images are 150px x 150px. You can write as much as you want here and this area will extend to the length of your text. There are three links underneath the photo. You can use these to link to tags, sideblogs, pinterest boards, etc. I feel like this is a good length for a blurb, but this will extend however long you need it to. Directions are in the code, but feel free to send me an ask if you have any questions! Images via unsplash.com.
</div></div>
<!-----END THIRD BOX----->


<!-- to add more boxes: copy the first box in its entirety, from "start first box" to "end first box" and past it after the LAST box. update numbering for easy organization :) -->


</div>

<!-- credit - pls dont remove <3 -->
<div class="credit"><a href="http://www.atlasthemes.tumblr.com" target="_blank" title="atlas themes">a</a></div>
</body>
</html>