added social media links

week1/3-website/css/style.css

@@ -1,3 +1,12 @@
+.container {
+  background-color: #aa8d39;
+  width: 100%;
+  height: 1900px;
+  margin: 50px 50px 0px, 150px;
+  padding: 5px 0px 5px;
+  border-color: magenta;
+}
+
 .topic {
   font-size: 2em;
   text-align: center;
@@ -21,20 +30,11 @@
   }
 
 .link {
-  color: darkblue;
+  color: rgb(77, 13, 52);
   text-align: center;
   margin: 75px;
 }
 
-.container {
-  background-color: #aa8d39;
-  width: 100%;
-  height: 1900px;
-  margin: 50px 50px 0px, 150px;
-  padding: 5px 0px 5px;
-  border-color: magenta;
-}
-
 .pre > h2 {
   text-decoration: underline;
   margin: 60px;
@@ -46,15 +46,38 @@ img {
   height: 150px;
   border-radius: 10px;
   border: 5px solid rgb(133, 79, 79);
-  margin: 10px;
+  margin: 30px;
   max-width: 100%;
   height:auto;
  }
 
+.social {
+  padding: 0px;
+  margin-right: 0px;
+  position: absolute;
+  top: 25%;
+}
+
+.social li {
+  list-style-type: none;
+  padding: 20px;
+  transition: .6s;
+  color: white;
+  position: relative;
+}
+
+.social li i {
+  font-size: 40px;
+}
+
+.social li:hover {
+  padding: 20px 40px;
+}
+
 .prelim, .coursestart, .drop-in, .full{ 
   background-color: #ffe9aa;
   box-sizing: border-box;
-  width: 900px;
+  width: 1000px;
   height: 300px;
   box-shadow: 5px 10px 5px black;
   border-radius: 10px;
@@ -63,16 +86,11 @@ img {
   margin: 10px 30px 20px 280px;
 }
 
-#intro {
-  margin-top: 0px;
-}
-
-#text{
-  color: white;
-  float: right;
+a[href*="Intro"] {
+  background-color: rgb(189, 238, 144);
 }
 
-.pre > p, .drop> p {
+.pre > p {
   margin-top: 60px;
   margin-bottom: 10px;
   margin-right: 200px;
@@ -82,47 +100,25 @@ img {
   font-size: 20px;
 }
 
-.drop > p {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  color: burlywood;
-}
-
-a[href*="Intro"] {
-  background-color: rgb(189, 238, 144);
-}
-
-h2 ~ ul {
-font-size: 20px;
-}
-
-h3 ~ ol {
-  text-align: right;
-}
-
-.drop-in ul:nth-child(2){
-font-style: italic;
-}
-
 h1,
 h2 {
   text-align: center;
   color: rgb(123, 230, 116);
 }
 
-
 h3 {
   text-align: center;
   color: rgb(16, 23, 48);
 }
 
 ul {
-  margin: 10px 10px 20px 20px;
+  margin: 0px;
   text-align: left;
+  font-size: 20px;
 }
 
-ul li:nth-child(3n) {
-  text-shadow: 2px 1px rgb(119, 112, 70);
+ol {
+  font-style: italic;
 }
 
 a:hover {

week1/3-website/index.html

@@ -8,6 +8,7 @@
     <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" />
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
   </head>
   <main class="container">
     <header>
@@ -32,17 +33,26 @@ <h2>Tech Passion and Quest</h2>
         Furure Bootcamp. <br>
         So, below is a summary of the study path so far and the journey ahead. Hope you have fun!!!
       </p>  
+      <div class="social">
+        <ul>
+          <li> <i class="fa fa-facebook"></i> </li>
+          <li> <i class="fa fa fa-twitter"></i> </li>
+          <li> <i class="fa fa fa-google"></i> </li>
+          <li> <i class="fa fa fa-linkedin"></i> </li>
+        </ul>
+      </div>
+    </section>
+    <section>
       <article class="prelim">
         <h2 id="Intro"> Pre-Bootcamp</h2>
         <h3> Pre-Selection</h3>
-        <h3>First; was the completion of the basic tutorials on:</3>
+        <h3>First; was the completion of the basic tutorials on:</h3>
         <ul>
           <li>HTML using SoloLearn App</li>
           <li>CSS tutorial on SoloLearn App</li>
         </ul>
       </article>    
     </section>
-
     <section class="drop">
       <article class="drop-in">
         <h2 id="Start">Drop-in Sessions</h2>
@@ -51,14 +61,13 @@ <h3>A meet-up to build on basics skills on;</h3>
           <li>HTML using FreeCodeCamp</li>
           <li>CSS using FreeCodeCamp</li>
         <ul>
-          <p>Projects:</p>
+        <p>Projects:</p>
         <ol>
          <li>Product Landing Page</li>
          <li>Tribute page</li> 
         </ol>
       </article>  
     </section>
-
     <section class="fundaments">
       <article class="coursestart">
         <h2 id="Fundamentals">Fundamentals</h2>
@@ -80,13 +89,14 @@ <h3>The eight-month course covers:</h3>
           <li>Advanced HTML</li>
           <li>Advanced CSS</li>                                                                                                                                                                                                                                                                                                                                                                                                                                 
           <li>JavaScript</li> 
-          <li>Front-end development using ReactJS</li>                                                                  opment using React</li>
+          <li>Front-end development using ReactJS</li> 
           <li>Back-end development using NodeJS</li> 
         </ul>
       </article>
     </section>
+
     <footer id="footer">
-        <p class="copyright">© <em>Osagiestar 2020</em> CYF Birminghamm</p>
+        <p class="copyright">© <em>Osagiestar 2020</em> CYF Birmingham</p>
     </footer>
   </main>