CodeYourFuture · MartinBoylan · May 8, 2020 · May 8, 2020 · May 22, 2020
diff --git a/.DS_Store b/.DS_Store
diff --git a/week1/.DS_Store b/week1/.DS_Store
diff --git a/week1/2-reading/my-first-webpage.html b/week1/2-reading/my-first-webpage.html
@@ -0,0 +1 @@
+<p>This is my firstwebpage!</p>
diff --git a/week1/3-website/.DS_Store b/week1/3-website/.DS_Store
diff --git a/week1/3-website/.vscode/settings.json b/week1/3-website/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5503
+}
diff --git a/week1/3-website/1209195-firefly-serenity-wallpaper-1920x1080-for-tablet.jpg b/week1/3-website/1209195-firefly-serenity-wallpaper-1920x1080-for-tablet.jpg
diff --git a/week1/3-website/Firefly-Serenity-Ship.jpg b/week1/3-website/Firefly-Serenity-Ship.jpg
diff --git a/week1/3-website/cant-stop-the-signal-mr-universe-serenity-firefly.gif b/week1/3-website/cant-stop-the-signal-mr-universe-serenity-firefly.gif
diff --git a/week1/3-website/css/.DS_Store b/week1/3-website/css/.DS_Store
diff --git a/week1/3-website/css/index.html b/week1/3-website/css/index.html
@@ -0,0 +1,66 @@
+<!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>Firefly and Serenity fan page</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>
+    <header>
+      <nav class="nav-links">Articles | Sign Up</nav>
+        <h1 class="title">Firefly and Serenity</h1>
+        <h2 class="title">(For the fans)</h2>
+    </header>
+      <section class="image-section">
+        <img src=https://wp-media.patheos.com/blogs/sites/541/2019/08/cant-stop-the-signal-mr-universe-serenity-firefly.gif alt="Can't stop the signal Mal">
+      </section>
+      <section>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dolor nec congue porttitor. 
+        In justo arcu, gravida blandit congue sit amet, elementum nec arcu. In scelerisque a felis eu consequat. 
+        Donec blandit, libero sit amet lacinia congue, mi justo congue odio, eget ullamcorper eros erat et neque. 
+        </p>
+      </section>
+    <main class = "wrapper">
+      <article>
+        <h2>Firefly</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dolor nec congue porttitor. 
+          In justo arcu, gravida blandit congue sit amet, elementum nec arcu. In scelerisque a felis eu consequat. 
+          Donec blandit, libero sit amet lacinia congue, mi justo congue odio, eget ullamcorper eros erat et neque. 
+          Integer lacinia arcu urna, eu laoreet tortor placerat vitae.
+        </p>
+      </article>
+      <article>
+        <h2>Serenity</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dolor nec congue porttitor. 
+          In justo arcu, gravida blandit congue sit amet, elementum nec arcu. In scelerisque a felis eu consequat. 
+          Donec blandit, libero sit amet lacinia congue, mi justo congue odio, eget ullamcorper eros erat et neque. 
+          Integer lacinia arcu urna, eu laoreet tortor placerat vitae.
+        </p>
+      </article>
+      <article>
+        <h2>Books</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dolor nec congue porttitor. 
+          In justo arcu, gravida blandit congue sit amet, elementum nec arcu. In scelerisque a felis eu consequat. 
+          Donec blandit, libero sit amet lacinia congue, mi justo congue odio, eget ullamcorper eros erat et neque. 
+          Integer lacinia arcu urna, eu laoreet tortor placerat vitae.
+        </p>
+      </article>
+    </main>
+    <footer>
+      <p>More events</p>
+      <p>Sign up to my newsletter</p>
+    </footer>
+
+  </body>
+</html>
diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css
@@ -6,3 +6,152 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+
+ body, html {
+     height: 125vh;
+     margin: 0;
+     font-size: 20px;
+     font-family: Arial Verdana, sans-serif;
+     margin-left: 40px;
+     margin-right: 40px;
+     margin-bottom: 40px;
+ }
+.nav-links {
+    display:flex;
+    justify-content: flex-end;
+    padding: 10px; 
+    background-color: #DC143C;
+    color: white;
+    text-decoration: none;
+
+
+}
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+
+}
+
+li {
+    display: inline;
+
+}
+
+nav a {
+    color: white;
+    text-decoration: none;
+}
+
+
+
+.title {
+    text-align: center;
+    display: block;
+    color: white;
+    font-weight: bold;
+    text-transform: uppercase;
+    background-color: rgb(13, 123, 192);
+    padding: 20px;
+    font-size: 50px;
+}
+
+.image-section {
+    height: 360px;
+	background-image: url('http://getwallpapers.com/wallpaper/full/0/7/0/1209195-firefly-serenity-wallpaper-1920x1080-for-tablet.jpg');
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+	padding: 100px 5%;
+
+}
+
+.kicker {
+    max-width: 500px;
+}
+.wrapper {
+    display:grid;
+    grid-template-columns: 1fr 1fr 1fr;
+
+}
+
+.one {
+    grid-column: 0/3;
+    grid-row: 1;
+    }
+
+.two {
+    grid-column: 2/3;
+    grid-row: 1;
+    }
+
+.three {
+    grid-column: 3/3;
+    grid-row: 1
+}
+
+footer {
+    text-align: center;
+    padding-bottom: 50px;
+}
+
+.more-events {
+    text-align: center;
+    background: orange;
+    padding: 0.6em 1em;
+    display: inline-block;
+    color: white;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.newsletter {
+    text-align: center;
+    background: red;
+    padding: 0.6em 1em;
+    display: inline-block;
+    color: white;
+    font-weight: bold;
+    text-transform: uppercase;
+
+}
+
+.firefly {
+    text-align: center;
+    background: darkcyan;
+    padding: 0.6em 1em;
+    display: inline-block;
+    color: white;
+    font-weight: bold;
+    text-transform: uppercase;
+
+}
+
+
+
+.serenity {
+    text-align: center;
+    background: rgb(185, 74, 74);
+    padding: 0.6em 1em;
+    display: inline-block;
+    color: white;
+    font-weight: bold;
+    text-transform: uppercase;
+
+}
+
+.books {
+    text-align: center;
+    background: darkkhaki;
+    padding: 0.6em 1em;
+    display: inline-block;
+    color: white;
+    font-weight: bold;
+    text-transform: uppercase;
+
+}
+
+article:first-child {
+    font-style: italic;
+}
diff --git a/week1/3-website/index.html b/week1/3-website/index.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <title>My Blog</title>
+    <title>Firefly and Serenity fan page</title>
     <link
       href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
       rel="stylesheet"
@@ -16,7 +16,54 @@
     <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 -->
+    <header>
+      <nav class="nav-links">
+        <ul>
+          <li><a href="#Articles">Articles</a></li> | 
+          <li><a href="#Sign-Up">Sign Up</a></li>
+        </ul>
+      </nav>
+        <h1 class="title">Can't Stop the Signal</h1>
+    </header>
+      <section class="image-section">
+
+      </section>
+      <section>
+        <p class="kicker">A fansite for all things related to Firefly and Serenity. 
+
+        </p>
+      </section>
+    <main class="wrapper">
+      <article class="one" id="Articles">
+        <h2 class="firefly">Firefly</h2>
+        <p class>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dolor nec congue porttitor. 
+          In justo arcu, gravida blandit congue sit amet, elementum nec arcu. In scelerisque a felis eu consequat. 
+          Donec blandit, libero sit amet lacinia congue, mi justo congue odio, eget ullamcorper eros erat et neque. 
+          Link to <a href="https://www.imdb.com/title/tt0303461/">Firefly IMDB</a>
+        </p>
+      </article>
+      <article class="two">
+        <h2 class="serenity">Serenity</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dolor nec congue porttitor. 
+          In justo arcu, gravida blandit congue sit amet, elementum nec arcu. In scelerisque a felis eu consequat. 
+          Donec blandit, libero sit amet lacinia congue, mi justo congue odio, eget ullamcorper eros erat et neque. 
+          Link to <a href="https://www.imdb.com/title/tt0379786/?ref_=fn_al_tt_2">Serenity IMDB</a>
+        </p>
+      </article>
+      <article class="three">
+        <h2 class= "books">Books</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dolor nec congue porttitor. 
+          In justo arcu, gravida blandit congue sit amet, elementum nec arcu. In scelerisque a felis eu consequat. 
+          Donec blandit, libero sit amet lacinia congue, mi justo congue odio, eget ullamcorper eros erat et neque. 
+          Check out these <a href="https://www.goodreads.com/shelf/show/firefly-serenity">Goodreads.</a>
+        </p>
+      </article>
+    </main>
+    <footer>
+      <p class="more-events">More events</p>
+      <p class="newsletter" id="Sign-Up">Sign up to my newsletter</p>
+    </footer>
+
   </body>
 </html>
diff --git a/week2/.DS_Store b/week2/.DS_Store
diff --git a/week2/1-flexbox-froggy/Screen Shot 2020-05-17 at 12.57.33 PM.png b/week2/1-flexbox-froggy/Screen Shot 2020-05-17 at 12.57.33 PM.png
diff --git a/week2/2-website/.DS_Store b/week2/2-website/.DS_Store
diff --git a/week2/2-website/.vscode/settings.json b/week2/2-website/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}