CodeYourFuture · osagiestar · May 10, 2020 · May 10, 2020 · May 10, 2020 · May 10, 2020
diff --git a/week1/1-advanced-css/CSS SelectorFlukeout.png b/week1/1-advanced-css/CSS SelectorFlukeout.png
diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css
@@ -1,8 +1,192 @@
-/**
- * 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 {
+  font-family: "Roboto", sans-serif;
+}
+
+.container {
+  background-color: #aa8d39;
+  width: 100%;
+  height: 2100px;
+  margin: 50px 50px 0px, 150px;
+  padding: 5px 0px 5px;
+  border-color: magenta;
+}
+
+.topic {
+  font-size: 2em;
+  text-align: center;
+  color:white;
+  background-color: #d4b16a;
+}
+
+/*the links for the menu*/
+.nav {
+  color: white;
+  background-color: rgb(197, 145, 40);
+  margin-bottom: 0px;
+}
+
+#navigation {
+  text-align: center;
+  position: flexible;
+  top: 0;
+  font-size: 25px;
+  padding: 0px;
+  margin-bottom: 0px;
+  }
+
+.link {
+  color: rgb(77, 13, 52);
+  text-align: center;
+  margin: 60px;
+}
+
+/*targets the heading child tag*/
+.pre > h2 {
+  text-decoration: underline;
+  margin: 60px;
+}
+
+.profile-image {
+  width: 150px;
+  height: 150px;
+  float:left;
+  border-radius: 10px;
+  border: 5px solid rgb(133, 79, 79);
+  margin: 30px;
+  height:auto;
+ }
+
+ /*group class code for logos*/
+ .solo, .codepen, .codeorg,  .capgemini {
+  width: 150px;
+  height: 150px;
+  border-radius: 10px;
+  border: 5px solid rgb(133, 79, 79);
+  margin-bottom: 10px;
+  margin-right: 60px;
+  margin-top: 0px;
+  max-width: 100%;
+  height:auto;
+  float:right;
+ }
+
+ .cyf_logo {
+  width: 100px;
+  height:75px;
+  border-radius: 5px;
+  border: 5px rgb(34, 24, 24);
+  margin-bottom: 30px;
+  margin-right: 110px;
+  margin-top: 5px;
+  max-width: 100%;
+  height:auto;
+  float: right;
+}
+
+/*handles the social media links*/
+.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;
+}
+
+/*allows change of color on hover event*/
+.social li:hover {
+  padding: 20px 40px;
+}
+
+/*grouped code for all boxes*/
+.prelim, .coursestart, .drop-in, .full{ 
+  background-color: #ffe9aa;
+  box-sizing: border-box;
+  width: 1000px;
+  height: 350px;
+  box-shadow: 5px 10px 5px black;
+  border-radius: 10px;
+  text-align: center;
+  padding: 10px;
+  margin: 10px 30px 20px 280px;
+}
+
+/*targets only the Pre-Bootcamp menu link*/
+a[href*="Intro"] {
+  background-color: rgb(189, 238, 144);
+}
+
+/*selects the paragraph only as direct child*/
+.pre > p {
+  margin-top: 60px;
+  margin-bottom: 10px;
+  margin-right: 200px;
+  margin-left: 300px;
+  text-align: justify;
+  color: white;
+  font-size: 20px;
+}
+
+/*.link-image{
+  vertical-align: right;
+}*/
+
+h1,
+h2 {
+  text-align: center;
+  color: rgb(47, 233, 34);
+}
+
+h3 {
+  text-align: center;
+  color: rgb(16, 23, 48);
+  font-weight: 1200;
+}
+
+ul {
+  margin: 0px;
+  text-align: left;
+  font-size: 22px;
+  list-style: none;
+}
+
+ol {
+  list-style: none;
+  font-size: 20px;
+}
+
+/*link to all the url on the boxes*/
+.weblink{
+  text-align: justify;
+}
+
+/*selects and styles the second on the list*/
+.fulldev li:nth-child(2) {
+  color: rgb(212, 151, 27);
+}
+
+/*for the href links*/
+a:hover {
+  color: green;
+}
+
+#footer {
+  background-color: lightpink;
+  box-sizing: border-box;
+  width: 700px;
+  height: 50px;
+  box-shadow: 5px 10px 5px black;
+  margin: auto;
+  text-align: center;
+  vertical-align: middle;
+}
diff --git a/week1/3-website/index.html b/week1/3-website/index.html
@@ -1,22 +1,113 @@
 <!DOCTYPE html>
 <html lang="en">
+
   <head>
     <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <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 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>
-  <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
-  </body>
-</html>
+  <main class="container">
+    <header>
+      <h1 class="topic"> My Coding Brag Blog </h1>
+      <menu class="nav">
+        <nav id="navigation">
+          <a class="link" href="#Intro"> Pre-Bootcamp </a>
+          <a class="link" href="#Start"> Drop-in Sessions </a>
+          <a class="link" href="#Fundamentals"> Fundamentals </a>
+          <a class="link" href="#FullStack"> Full Stack Web Dev </a>
+        </nav>
+    </header>
+    <section class="pre">
+      <h2>Tech Passion and Quest</h2>
+      <p> <img class="profile-image" src="https://pbs.twimg.com/profile_images/1218723944443891712/2KB9GnZv_400x400.jpg"
+        alt="Profile picture"> Welcome to my first blog ever! Yay!!! Well, I have always had a passion for technology.
+        My quest for developing my skills prompted me to attend a few paid trainings. But with no mentor, no
+        proper structure of learning, no road map for personal development, my focus always
+        shifted away for a couple of reasons including lack of direction and no support. My passion meant I
+        followed a few trainers on YouTube but I self learning is always going to be a challenge.
+        But then I was pretty fortunate to have my wife's friend, a Software Developer, introduced me to Code Your
+        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:</h3>
+        <ul>
+          <li>HTML using SoloLearn App</li>
+          <li>CSS tutorial on SoloLearn App</li>
+        </ul>
+        <a class="weblink" href="https://www.sololearn.com/">This is SoloLearn link</a> <br>
+        <img class="solo" src="https://i.ytimg.com/vi/4HpAujV1OOc/maxresdefault.jpg" alt="Sololearn logo">
+      </article>    
+    </section>
+    <section class="drop">
+      <article class="drop-in">
+        <h2 id="Start">Drop-in Sessions</h2>
+        <h3>Meet-ups to build on basics skills on;</h3>
+        <ul>
+          <li>HTML using FreeCodeCamp</li>
+          <li>CSS using FreeCodeCamp</li>
+        </ul>
+        <a class="weblink" href="https://www.freecodecamp.org/osagie">This is FreeCodeCamp link</a>
+        <img class="codepen" src="https://i1.wp.com/sevenseasmedia.org/wp-content/uploads/2017/05/listing-codepen-logo.jpg?ssl=1" alt="Codepen logo">
+        <h3>Projects:</h3>
+        <ol>
+         <li>Product Landing Page</li>
+         <li>Tribute page</li> 
+        </ol>
+      </article>  
+    </section>
+    <section class="fundaments">
+      <article class="coursestart">
+        <h2 id="Fundamentals">Fundamentals</h2>
+        <h3> Introduction to Programming</h3>
+        <img class="codeorg" src="https://www.museumofaviation.org/wp-content/uploads/2018/08/pasted-image-0-4.png" alt="Code.org logo">
+        <ul>
+          <li>Algorithm learning on Code.org</li>
+          <li>Basic JavaScript using ProcessingJS</li>
+          <li>Learning How to Learn - Coursera PD Tutorials</li>
+        </ul> 
+        <a class="weblink" href="https://www.khanacademy.org/computing/computer-programming/programming">This is my Khan Academy link</a>
+      </article>
+    </section>
+
+    <section class="full">
+      <article class="fulldev">
+        <h2 id="FullStack">Full Stack Web Development</h2>
+        <h3>The eight-month course covers:</h3>
+        <img class="capgemini" src="https://img.youtube.com/vi/kTlvxuuRWdE/0.jpg" alt="Capgemini logo">
+
+        <ul>
+          <li>Advanced HTML</li>
+          <li>Advanced CSS (this is where we are at the time of this blog)</li>
+          <li>JavaScript</li> 
+          <li>Front-end development using ReactJS</li> 
+          <li>Back-end development using NodeJS</li> 
+        </ul>
+       <a class="weblink" href="https://github.com/osagiestar">This is my Github link</a>
+      </article>
+    </section>
+
+    <footer id="footer">
+      <img class="cyf_logo" src="https://www.pngkey.com/png/full/20-206722_logo-code-your-future-logo.png" alt="CodeYourFuture logo">
+      <p class="copyright">© <em>Osagiestar 2020</em> CYF Birmingham</p>
+
+    </footer>
+  </main>
+
+</html>
diff --git a/week2/.vscode/settings.json b/week2/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+    "cSpell.words": [
+        "Osagie"
+    ],
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true
+}