<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="title">
<h1>Hawa's Digital Diary</h1>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://i.pinimg.com/564x/a2/22/fa/a222fa42ead6f9d564140efa4c3c7eee.jpg"/>
</div>
<div class="diary-text-wrapper">
<h2>My first day of school</h2>
<h4>September 3, 2018</h4>
<div class="separator"></div>
<h3>Dear Diary,</h3>
<p>I had the best first day of school EVER today. Today was my first day of fifth grade, and I couldn't wait to see my friends. I woke up this morning, got dressed, ate breakfast as fast as I could, and brushed my teeth. Afterwards, I grabbed my backpack, shouted "BYE!" to my family, and then dashed out the door to school.</p>
<p>For the first day of school, I had Geography, Math, English, and Art class. I enjoyed all of them very much! I met a new student in English class today, her name was Fernanda. She was super nice, and told me she was from Mexico. I asked her to teach me how to say "Hello, nice to meet you!" in Spanish, and I taught her the same in Somali. Since today was the first day of school, we didn't get any homework today, hooray!</p>
<p>Tomorrow, I have Science, Music, Physical Education, and Social Studies class. I am really enjoying fifth grade so far. I hope tomorrow is just as good!</p>
<h3>- Hawa</h3>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://app.bsd.education/resources/projects/digital-diary/park.jpg" />
</div>
<div class="diary-text-wrapper">
<h2>My day at the park</h2>
<h4>September 8, 2018</h4>
<div class="separator"></div>
<h3>Dear Diary,</h3>
<p>Today was the weekend, so I got to sleep in late. When I woke up, I could smell breakfast cooking downstairs. My dad makes breakfast for everyone on the weekends. I think he makes the BEST pancakes in the world. My favorite are his blueberry pancakes.</p>
<p>After breakfast, I went to the park with my friends, and we also invited the new girl that we met on the first day of school to join us. We played Tag, climbed trees, and played soccer too! Everyone had a really great time. </p>
<p>Right now, I am sitting at my desk writing this, remembering all the fun things that happened today. Tomorrow, my sister is going to take me to my first ever swimming class - I'm super excited!</p>
<h3>- Hawa</h3>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
background-color: #304163;
}
h1 {
text-align: center;
color: #dddddd;
font-size: 80px;
font-family: "Amatic SC", cursive;
}
h2 {
font-family: "Amatic SC", cursive;
font-size: 50px;
margin: 0;
padding: 0;
color: #516c8d;
}
h3 {
font-family: "Amatic SC";
font-size: 30px;
color: #516c8d;
}
h4 {
font-family: "Roboto Condensed", sans-serif;
font-weight: 400;
font-size: 20px;
color: #516c8d;
}
p {
text-align: justify;
font-size: 18px;
font-family: "Roboto Condensed", sans-serif;
color: #28385e;
}
.card {
position: relative;
height: auto;
width: 85%;
background-color: #dddddd;
margin: 50px auto;
padding-bottom: 50px;
-webkit-box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);
}
/* grey line that separates the diary title and date from the entry content */
.separator {
margin-top: 10px;
border: 1px solid #C3C3C3;
}
/* container that holds the image */
.img-wrapper {
position: relative;
width: 100%;
overflow: -webkit-paged-x;
margin-bottom: 20px;
}
img {
height: auto;
width: 100%;
}
/* div that contains all the diary entry text */
.diary-text-wrapper {
margin-left: 5%;
margin-right: 20px;
}