CodeYourFuture · bireworld · May 10, 2020 · May 10, 2020 · May 22, 2020 · May 22, 2020
diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css
@@ -1,8 +1,61 @@
-/**
- * Add your custom styles below
- * 
- * Remember: 
- * - Be organised, use comments and separate your styles into meaningful chunks
- *    for example: General styles, Navigation styles, Hero styles, Footer etc.
- * 
- */
+.body {
+    background-color: #4a4;
+  }
+  .blog-name {
+    text-align: center;
+    margin: 30px 8px;
+    padding: 15px;
+    border-radius: 5px;
+    background: #fca;
+  }
+
+  .article-1 h3 {
+    text-align: center;
+  }
+  h3 {
+    display: block;
+    font-size: 1.17em;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+  }
+  .article {
+    display: grid;
+    grid-template-columns: 31vw 31vw 31vw;
+    grid-gap: 30px;
+    justify-items: center;
+    font: 1rem/1.56 "ubuntu", Verdana, Arial, sans-serif;
+  }
+  article:first-child {
+    color: #123;
+    background-color: #faa;
+  }
+  .article_1 {
+    border-radius: 1em;
+    text-align: center;
+    color: #aceef3;
+
+    font-size: 1.5vw;
+    background-color: rgb(38, 107, 109);
+  }
+
+  img {
+    max-width: 50%;
+    display: block;
+    height: auto;
+    margin: 0 auto;
+  }
+
+  #img-div {
+    background: green;
+    padding: 10px;
+    margin: -10;
+    height: 10;
+  }
+  .rights {
+    text-align: center;
+    font: 1.2rem/1.56 "ubuntu", Verdana, Arial, sans-serif;
+  }
+
diff --git a/week1/3-website/index.html b/week1/3-website/index.html
@@ -1,22 +1,83 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <title>My Blog</title>
-    <link
-      href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link rel="stylesheet" href="css/style.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
-  </head>
-  <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
-  </body>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <link href="//fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css" />
+  <title>My Random Blog</title>
+
+  <link rel="stylesheet" href="css/style.css" />
+  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+</head>
+
+<body class="body">
+
+  <header class="header">
+    <h1 class="blog-name"> Random Blog</h1>
+    <figure id="img-div">
+      <img id="image" src="https://i.pinimg.com/564x/c3/10/1f/c3101fe3211edcc5a47153290e4e8f6d.jpg" alt="Lorem Ipsum" />
+
+    </figure>
+    <nav class="navbar">
+    </nav>
+    <div class="article">
+      <article class="article_1">
+
+        <h3>Left</h3>
+
+        <section>
+
+          <p>Donec efficitur massa justo, et dignissim ante pretium id. In lorem magna, commodo vel tristique at,
+            dignissim ac dui. Fusce ac diam a ex pellentesque porttitor malesuada eget ante. Nam finibus porta mauris.
+            Pellentesque convallis mi nec massa convallis bibendum. Aenean ornare augue vitae mattis posuere. Lorem
+            ipsum dolor sit amet, consectetur adipiscing elit. Aliquam metus metus, ornare vitae vehicula ac, lobortis
+            in ligula.</p>
+          <a href="https://www.lipsum.com/feed/html" target="_blank">Lorem Ipsum</a>
+          </session>
+      </article>
+
+      <article class="article_1">
+        <h3>Middle Article</h3>
+        <section>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis enim sapien, convallis id aliquet ut,
+            fermentum at velit. In auctor venenatis feugiat. Nullam pharetra ornare urna a elementum. In convallis
+            posuere pretium. Nulla mattis molestie tellus, eu gravida diam ultrices vitae. Nunc ultrices, nisl quis
+            varius fringilla, est ante pellentesque odio, id condimentum est justo nec quam. Orci varius natoque
+            penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum et purus ipsum. Maecenas
+            mauris nisl, fringilla a egestas et, tincidunt vel urna.
+          </p>
+          <a href="https://www.lipsum.com/feed/html" target="_blank">Lorem Ipsum</a>
+        </section>
+      </article>
+
+      <article class="article_1">
+        <h3>Right</h3>
+        <section>
+          <p>
+            Aenean lacinia, justo nec porta tincidunt, elit magna mollis nibh, at vulputate est sem eu lorem. Integer
+            leo turpis, cursus ut tincidunt at, accumsan quis enim. Donec malesuada porttitor gravida. Ut dictum mi
+            ornare, egestas tellus nec, euismod dolor. Curabitur ex arcu, consectetur ac porttitor sed, efficitur
+            placerat justo. Aliquam placerat viverra velit vitae egestas. Duis dapibus ex sem. Aliquam fringilla augue a
+            nibh aliquet, ut auctor dui rhoncus. Sed tincidunt aliquam ante nec venenatis. Integer aliquet tortor sed ex
+            pretium, viverra rutrum sem hendrerit. Nunc eu auctor elit, a fringilla risus. Mauris ornare velit sit amet
+            mi porta, non vestibulum augue faucibus.
+          </p>
+          <a href="https://www.lipsum.com/feed/html" target="_blank">Lorem Ipsum</a>
+        </section>
+      </article>
+    </div>
+
+  </header>
+  <footer>
+
+    <section class="rights">
+      All rights reserved by Random Blog. Copyright © 2020
+    </section>
+  </footer>
+
+</body>
+
 </html>