[DWD] Week 01

I made simple HTML pages and uploaded it to my GitHub repo and my server in Digital Ocean.
Prior to doing the coding, I designed the pages I would make on Sketch:

It is really handy to get the CSS attributes of each item from Sketch.

Followings are the codes for index.html and style.css files:

[index.html]

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <title>QUTOES&FABLES</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Muli:200i,600,900" rel="stylesheet">
</head>
<body>
  <header>
    <h1>QUOTES & FABLES</h1>
  </header>
  <nav>
    <img src="images/oval1.png">
    <a href="2.html"><img src="images/oval2.png"></a>
    <a href="3.html"><img src="images/oval2.png"></a>
  </nav>
  <section>
    <div class="page-num">1</div>
    <article id="content1" class="content">
      There was a man who was condemned to death. When told of the sentence, he immediately offered a bargain to the king: “Postpone the execution one year, and I will teach your horse to fly.” Intrigued by this, the king agreed. <br>
      One of his friends asked him if he really expected to escape death by this manoeuvre. <br>
      “A lot can happen in a year. There might be a revolution and a new government. 
      There might be a foreign invasion, or the present king might die. 
      Besides that, my captors might get careless and I will be able to escape. 
      And, who knows? Maybe I can teach that damned horse to fly!” 
    </article>
    <article class="ref">- An Old Sufi Legend</article>
  </section>
    
</body>
</html>

[style.css]

html {
  margin: 0;
  padding: 0;
  font-family: 'Muli', sans-serif;
}

h1 {
  /* QUOTES & FABLES: */
  font-family: Muli-Black;
  font-size: 48px;
  color: #000000;
  letter-spacing: 0;
  line-height: 35px;
  text-align: center;
  margin-top: 104px;
  margin-bottom: 104px;
}

nav {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
}

img {
  display: inline-block;
  margin-right: 20px;
  width: 10px;
  height: 10px;
}

.page-num {
  display:block;
  width: 1204px;

  margin-top: 104px;
  margin-left: auto;
  margin-right: auto;

  /*margin-left: 118px;*/
  font-family: Muli-Black;
  font-size: 48px;
  color: #5F5F5F;
  letter-spacing: 0;
  line-height: 35px;
  text-align: left;
}

.content {
  display: block;
  width: 1204px;

  margin-top: 57px;
  margin-left: auto;
  margin-right: auto;

  font-family: Muli-SemiBold;
  font-size: 25px;
  color: #5F5F5F;
  letter-spacing: 0;
  line-height: 40px;
}

.ref {
  display: block;
  width: 1204px;

  margin-top: 57px;
  margin-left: auto;
  margin-right: auto;

  font-family: Muli-ExtraLightItalic;
  font-size: 20px;
  color: #5F5F5F;
  letter-spacing: 0;
  line-height: 35px;
  text-align: right;
}

2.html and 3.html have the same HTML structure to index.html, though only their content is different.

You can see the complete pages by following this link: QUOTES & FABLES

Next time, I will try to use <iframe> so that I can reuse the <header> and <nav> parts.

 

Leave a Reply

Your email address will not be published. Required fields are marked *