DysfunctionalCoders · Nexalas · Sep 27, 2021
diff --git a/index.html b/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Homeworkweek1</title>
+    <link rel="stylesheet" href="./styles.css">
+    <style>
+
+
+        body {
+            margin: 0;
+            background-color: black;
+        }
+
+
+
+        article {
+            padding: 10px;
+            margin: 5px;
+
+            height: 615px;
+            width: 250px;
+
+        }
+
+        /* Add your flexbox CSS below here */
+        section {
+            display: flex;
+            justify-content: center;
+        }
+
+    </style>
+</head>
+<body>
+
+<section>
+
+    <article class="bos">
+        <p><center style="font-size: 36px; "><u>The Brotherhood of Steel needs you!</u></center></p>
+
+        <p>The Commonwealth is <u>no longer safe.</u> The brotherhood is looking for new recruits to help bolster its ranks. Come and help us fight for you home.</p>
+        <p><center>Benefits</center></p>
+        <center>
+            <ul style="list-style: none;
+            position: relative;
+            right: 15px;">
+                <li>Monthly Pay</li>
+                <li>Full Rations</li>
+                <li>Medical Care</li>
+                <li>Combat Training</li>
+                <li><span style="color: red">Heated</span> Barracks</li>
+            </ul>
+
+     </center>
+     <img class="bos1" height="150" width="125" src="https://www.ipadwallpaper.net/wp-content/uploads/2011/06/fallout-3-ipad-wallpaper.jpg" alt="bos">
+    </article>
+
+    <article class="power1">
+        <img  class ="power" height ="150" width = "225" src="https://v1cdn.destructoid.com/143644_fallout3-620x.jpg" alt="power armor">
+
+        <p> <center class="local"><u>Find Us</u></center></p>
+        <div class="helpful">
+            <h3>Local Base is Boston Airport. (Be aware, approach unarmed, slowly, and announce yourself.)</h3>
+            <h3>Tune in to Military Frequency <span style="color: blue">AF95</span> to hear the latest safety announcements and instructions.</h3>
+            <h3>Watch for local and regular patrols in your area. Report any suspicious activity and ask about our recruiting program.</h3>
+
+
+
+        </div>
+
+
+
+    </article>
+
+    <article class="logo">
+        <center><img height="75" width="75" src="https://i.etsystatic.com/7573568/r/il/d45f10/2004715265/il_794xN.2004715265_p6rk.jpg" alt="boslogo"></center>
+
+        <p><center class="contribute"><b>How to contribute.</b></center></p>
+
+        <p>If you find any unauthorized technology or have any infirmation of any fugitives that are illegally using outlawed items, please bring said items to us, or bring us the information. You <i>could</i> be given caps or rations in compensation.</p>
+         <p><b>Please report to Boston Airport for all such inquiries.</b></p>
+
+         <img height="150" width="250" src="https://external-preview.redd.it/A36dEsyrW7OQmrd1LB4e00winK7K1bctCkEEOJ-8Oeo.jpg?auto=webp&s=c6aae6c02fd861e26c4f79eb45a1914dcc12f992" alt="energy weapon" style="position: relative; top: 30px;">
+    </article>
+
+</section>
+</body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,58 @@
+
+html {
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+
+.bos {
+background-color: lightgray;
+}
+
+.bos1 {
+
+    position: relative;
+     left: 65px;
+}
+
+
+
+.power {
+    position: relative;
+top: 15px;
+left: 12px;
+
+}
+
+.local {
+    position: relative;
+    top: 25px;
+    font-size: 40px;
+
+}
+
+.info {
+    position: relative;
+    top: 25px; 
+}
+
+.power1 {
+
+background-color: lightgray;
+
+}
+
+.helpful {
+    position: relative;
+    top: 40px;
+    font-size: 15px;
+
+}
+
+.logo {
+    background-color: lightgray;
+}
+.contribute {
+    font-size: 36px;
+    border-bottom: 7px solid black;
+    border-top: 7px solid black;
+}