Goldilocks & My Story

<!DOCTYPE html>
<html>
<head>
    <title>
        Goldilocks and the Three Bears
    </title>
</head>
<body>
    <h1>Goldilocks and the Three Bears</h1>

<p>Once upon a time, there were three bears, a Papa Bear, a Mama Bear and a Baby Bear.</p>

<p>One day, the three bears sat down to breakfast. &ldquo;This porridge is too <em>hot</em>!&rdquo; said Papa Bear. &ldquo;This porridge is too <em>hot</em>!&rdquo; said Mama Bear. &ldquo;This porridge is too <em>hot</em>!&rdquo; said Baby Bear. &ldquo;Let's go for a walk,&rdquo; said Mama Bear. &ldquo;When we come back, our porridge will be just right.&rdquo;</p>

<p>Along came Goldilocks. She walked into the houses. She saw three bowls of porridge. &ldquo;This is too <em>hot</em>,&rdquo; said Goldilocks. &ldquo;This is too <em>cold</em>, &rdquo;said Goldilocks. &ldquo;This is just right!&rdquo; said Goldilocks. And she ate all up. She ate the Baby Bear's porridge.</p>

<p>Goldilocks went into the living room. She saw three chairs. &ldquo;This is too <em>hard</em>,&rdquo; said Goldilocks. &ldquo;This is too <em>soft</em>,&rdquo; said Goldilocks. &ldquo;This is just right!&rdquo; said Goldilocks. Then crash, the chair broke. </p>

<p>Goldilocks felt tired. She went into the bedroom. She saw three beds. &ldquo;This bed is too <em>hard</em>,&rdquo; said Goldilocks. &ldquo;This bed is too <em>soft</em>,&rdquo; said Goldilocks. &ldquo;This bed is just right!&rdquo; said Goldilocks. And she fell fast asleep.</p>

<p>The three bears came home. They went into the kitchen. &ldquo;Someone's been eating my porridge,&rdquo; said Papa Bear. &ldquo;Someone's been eating my porridge,&rdquo; said Mama Bear. &ldquo;Someone's been eating my porridge,&rdquo; said Baby Bear. &ldquo;And they ate it all up!&rdquo;</p>

<p>The three bears went into the living room. &ldquo;Someone's been sitting in my chair!&rdquo; said Papa Bear. &ldquo;Someone's been sitting in my chair!&rdquo; said Mama Bear. &ldquo;Someone's been sitting in my chair!&rdquo; said Baby Bear. &ldquo;And now it's broken!&rdquo;</p>

<p>The three bears went into the bedroom. &ldquo;Someone's been sleeping in my bed!&rdquo; said Papa Bear. &ldquo;Someone's been sleeping in my bed!&rdquo; said Mama Bear. &ldquo;Someone's been sleeping in my bed!&rdquo; said Baby Bear. &ldquo;And here she is!&rdquo;</p>

<p>Goldilocks woke up. She saw three angry bears looking at her. Goldilocks jumped out of bed. She ran out of the house. And she never came back again.</p>

</body>
</html>

Adding some CSS!

body{
    max-width: 36em;
    width: 90%;
    font-size: 1.125em;
    font-family: cursive;
    line-height: 1.5;
    margin: 4em auto;
    }
h1{
    font-size: 5em;
    font-weight: bold;
    line-height: 1;
    padding: 0;
    margin: 0.5em 0;
    color: #E01B5D;
}
h2{
    font-size: 3em;
    font-weight: bold;
    line-height: 1;
    padding: 0;
    margin: 0.5em 0;
    color: #E01B5D ;
}
p{
    padding: 0;
    margin: 0 0 1.5em 0;
    color: #040561;
}
.imtro{
    font-size: 1.25em;
}

My Final HTML!

<!DOCTYPE html>
<html>
<head>
    <title>
        Goldilocks and the Three Bears
    </title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <h1>Goldilocks and the Three Bears</h1>

<p class="intro">Once upon a time, there were three bears:</p>
<ol class="bear-intros">
   <li><img src="papa-bear.png" alt="Papa Bear"/> a Papa Bear</li>
   <li><img src="mama-bear.png" alt="Mama Bear"/> a Mama Bear</li>
   <li><img src="baby-bear.png" alt="Baby Bear"/> a Baby Bear</li>
<h2>One day, the three bears sat down to breakfast.</h2>
<blockquote>
    <p> &ldquo;This porridge is too <em>hot</em>!&rdquo;</p>
    <img src="papa-bear-head.png" alt="Papa Bear"/>
    <p> &ldquo;This porridge is too <em>hot</em>!&rdquo;</p>
    <img src="mama-bear-head.png" alt="Mama Bear"/>
    <p>&ldquo;This porridge is too <em>hot</em>!&rdquo;</p>
    <img src="baby-bear-head.png" alt="Baby Bear"/>
    <p>&ldquo;Let's go for a walk, When we come back, our porridge will be just right.&rdquo;</p>
    <img src="mama-bear-head.png" alt="Mama Bear"/>
</blockquote>
<h2>Along came Goldilocks</h2>
<img src="goldilocks.png" alt="Goldilocks"/>
<h3>She walked into the house. </h3>
<p>She saw three bowls of porridge.
<blockquote>
    <p>&ldquo;This is too <em>hot</em>. This is too <em>cold</em>. This is just right!&rdquo;</p>
    <img src="goldilocks-head.png" alt="Goldilocks"/>
</blockquote>
<p> And she ate all up. She ate the Baby Bear's porridge.</p>

<p>Goldilocks went into the living room. She saw three chairs.</p>
<blockquote>
  <p>&ldquo;This is too <em>hard</em>. This is too <em>soft</em>. This is just right!&rdquo; </p>
  <img src="goldilocks-head.png" alt="Goldilocks"/>
</blockquote>
<p>Then <strong>CRASH</strong>, the chair broke. </p>
<p>Goldilocks felt tired. She went into the bedroom. She saw three beds.</p>
<blockquote>
  <p>&ldquo;This bed is too <em>hard</em>. This bed is too <em>soft</em>. This bed is just right!&rdquo;.</p>
  <img src="goldilocks-head.png" alt="Goldilocks"/>
</blockquote>
<p> And she fell fast asleep.</p>
<h2>The three bears came home.</h2>
<h3> They went into the kitchen.</h3>
<blockquote>
   <p>&ldquo;Someone's been eating my porridge.&rdquo;</p>
   <img src="papa-bear-head.png" alt="Papa Bear"/>
   <p>&ldquo;Someone's been eating my porridge.&rdquo;</p>
   <img src="mama-bear-head.png" alt="Mama Bear"/>
   <p>&ldquo;Someone's been eating my porridge. And they ate it all up!&rdquo;</p>
   <img src="baby-bear-head.png" alt="Baby Bear"/>
</blockquote>
<h3>The three bears went into the living room.</h3>
<blockquote>
  <p>&ldquo;Someone's been sitting in my chair!&rdquo;</p>
  <img src="papa-bear-head.png" alt="Papa Bear"/>
  <p>&ldquo;Someone's been sitting in my chair!&rdquo;</p>
  <img src="mama-bear-head.png" alt="Mama Bear"/>
  <p>&ldquo;Someone's been sitting in my chair! And now it's broken!&rdquo;</p>
  <img src="baby-bear-head.png" alt="Baby Bear"/>
</blockquote>
<h3>The three bears went into the bedroom.</h3>
<blockquote>
  <p>&ldquo;Someone's been sleeping in my bed!&rdquo;</p>
  <img src="papa-bear-head.png" alt="Papa Bear"/>
  <p>&ldquo;Someone's been sleeping in my bed!&rdquo;</p>
  <img src="mama-bear-head.png" alt="Mama Bear"/>
  <p>&ldquo;Someone's been sleeping in my bed! And here she is!&rdquo;</p>
  <img src="baby-bear-head.png" alt="Baby Bear"/>
</blockquote>
<h2>Goldilocks woke up.</h2>
<img src="goldilocks-head.png" alt="Goldilocks"/>
<p>She saw three angry bears looking at her. Goldilocks jumped out of bed. She ran out of the house. And she <strong>never</strong> came back again.</p>
</body>
</html>

And the CSS to Go with It!

body{
    max-width: 36em;
    width: 90%;
    font-size: 1.125em;
    font-family: cursive;
    line-height: 1.5;
    margin: 4em auto;
    text-align: center;
    background: #F7E4F4;
    }
h1{
    font-size: 5em;
    color: #E01B5D ;
}
h2{
    font-size: 3em;
    color: #E01B5D;
}
h1,h2,h3{
    font-weight: bold;
    line-height: 1;
    padding: 0;
    margin: 0 0 1.5em 0;
}
h3{
    color: #D9D500;
}
p{
    padding: 0;
    margin: 1em 0 1em 0;
    color: #040561;
}
.intro{
    font-size: 1.25e;
}
cite{
    color: #F0CF16;
}
ol{
    padding: 0;
    font-size: 1.25em;
    color: #040561;
    margin: 0 0 1.5em 0;
}
blockquote{
    padding: 0;
    margin: 0 0 1.5em 0;
}
blockquote p{
    margin-bottom: 0.25em;
}
img{
    max-width: 100%;
    margin: 0 auto 4em auto;
}
.bear-intros{
    list-style: none;
}
.bear-intros li{
    width: 75%;
    margin: 0 auto 3em auto;
}
blockquote img{
    width: 3em;
    border-radius: 2.5em;
    border: 3px solid #F0CF16;
    background: #F5F37A;
}

I thought we were going to be uploading two projects, but the site only lets us upload one per class. Here is the beginnings of my final project about me or the topic of my choice.

The HTML!

<!DOCTYPE html>
<html>
<head>
  <title>
    My Hawaiian Adventures
  </title>
  <link rel="stylesheet" href="HawaiiStyle.css"/>
</head>
<body>
    <h1>Dreaming of Hawai'i</h1>
    <p>I first went to Hawai'i in the fall of 2008. The University of Hawai'i, Manoa, was one of the schools that was part of the National Student Exchange program, of which my school was also a part. I applied and was accepted, so at the end of August I hopped on a plane and flew across the country and over the Pacific Ocean.</p>
    <p>Hawai'i is often referred to as 'Paradise' and after four months there, I felt like there was a lot of truth to that label. I was able to see some of the most amazing natural sites, all while being around the most friendly people I had ever met.</p>
    <p>Once I had been there about a month, I didn't want to leave, but I still had one semester left that I had to complete at my home university. So, December came and I packed my bags and headed back to Boston.</p>
    <p>However, I knew I wouldn't be able to stay away.</p>
    <img align=left src="puu2.jpg" alt="hike"/>
    <h3>Pu'u 'Ualaka'a</h3>
    <p>In the spring of 2012, I was lucky enough to hike in  Pu'u 'Ualaka'a Park.
    The hike provided beautiful views of the lush valley below.</p>
 </body>
 </html>

The CSS!

body{
    margin: 1.5em auto;
    color: #F0115B;
    max-width: 36em;
    width: 90%;
    background: #11D9F0;
    font-family: "Candy Stripe BRK";
}
h1{
    padding: 0;
    margin: auto;
    font-size: 6em;
    text-align: center;
    font-family: "AdineKirnberg-Script", serif;
}
h3{
    padding: 0;
    margin: auto;
    font-size: 3em;
    font-family: "AdineKirnberg-Script", serif;
    color: #091766;
}
img{
    max-width: 100%;
    margin: 0 1em 1em auto;
    width: 8em;
    border-radius: 1.5em;
    border: 5px solid #1193F0;
}
cite{
    padding: 0;
    margin-top: 0;

}

And the beginning screenshot!

Some progress, I'ved added the following:

HTML

<img class="Turtle"align=left src="Sea_Turtle.jpg" alt="Sea Turtle"/>

<img class="Dorm"align=right src="View_from_Dorm.jpg" alt="Dorm"/>

CSS

body{
    margin: 1.5em auto;
    color: #F0115B;
    max-width: 36em;
    width: 90%;
    background: #11D9F0;
    font-family: "Candy Stripe BRK", serif;
    border-radius: .5em;
    border: 7px dotted #F5EC90;
}

.Dorm{
    max-width: 100%;
    margin: 0 0.5em 1em 1em;
    width: 10em;
    border-radius: 4em;
    border: 6px double #B91BE0;
}
p{
    margin: 1em;
}
.Turtle{
    max-width: 100%;
    margin: 0 1em 1em 0.5em;
    width: 9em;
    border-radius: 0.25em;
    border: 3px double #F5AE67;
}

Comments

Please sign in or sign up to comment.