diff --git a/week1/1-advanced-css/CSS SelectorFlukeout.png b/week1/1-advanced-css/CSS SelectorFlukeout.png new file mode 100644 index 00000000..50637b26 Binary files /dev/null and b/week1/1-advanced-css/CSS SelectorFlukeout.png differ diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 75e9841e..71d88a36 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -1,8 +1,185 @@ -/** - * 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. - * - */ +/*General style*/ +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; +} + +/*Navigation style*/ +.topic { + font-size: 2em; + text-align: center; + color:white; + background-color: #d4b16a; +} + +.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; + } + +.internal-link { + color: rgb(77, 13, 52); + text-align: center; + margin: 60px; +} + +a:hover { + color: green; +} + +#active { + background-color: rgb(189, 238, 144); +} + +/*Introduction session style*/ +.introduce > h2 { + text-decoration: underline; + margin: 60px; +} + +.introduce > p { + margin-top: 60px; + margin-bottom: 10px; + margin-right: 200px; + margin-left: 300px; + text-align: justify; + color: white; + font-size: 20px; +} + +.profile-image { + width: 150px; + height: 150px; + float: left; + border-radius: 10px; + border: 5px solid rgb(133, 79, 79); + margin: 30px; + height:auto; + } + + /*Social media style*/ +.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; +} + +/*Container section styles*/ +.course{ + 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; +} + +.company-logo { + 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; + } + +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*/ +.external-link{ + text-align: center; +} + +/*selects and styles the second on the list*/ +#fulldev li:nth-child(2) { + color: rgb(212, 151, 27); +} + +/*Footer style*/ +#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; +} + +.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; +} \ No newline at end of file diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 67dfc7f5..ac31d756 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -1,22 +1,127 @@ + + - - + + My Blog - - - + + + + - - - - - + + +
+ + +
+

My Coding Brag Blog

+ + +
+ + +
+

Tech Passion and Quest

+

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.
+ So, below is a summary of the study path so far and the journey ahead. Hope you have fun!!! +

+ + + +
+ + +
+
+

Pre-Bootcamp

+

Pre-Selection

+

First; was the completion of the basic tutorials on:

+
    +
  • HTML using SoloLearn App
    • +
  • CSS tutorial on SoloLearn App
    • +
+ This is SoloLearn link
+ +
+
+ +
+
+

Drop-in Sessions

+

Meet-ups to build on basics skills on;

+
    +
  • HTML using FreeCodeCamp
    • +
  • CSS using FreeCodeCamp
    • +
+ This is FreeCodeCamp link + +

Projects:

+
    +
  1. Product Landing Page
    2. +
  2. Tribute page
    3. +
+
+
+ +
+
+

Fundamentals

+

Introduction to Programming

+ +
    +
  • Algorithm learning on Code.org
    • +
  • Basic JavaScript using ProcessingJS
    • +
  • Learning How to Learn - Coursera PD Tutorials
    • +
+ This is my Khan Academy link +
+
+ +
+
+

Full Stack Web Development

+

The eight-month course covers:

+ + +
    +
  • Advanced HTML
    • +
  • Advanced CSS (this is where we are at the time of this blog)
    • +
  • JavaScript
    • +
  • Front-end development using ReactJS
    • +
  • Back-end development using NodeJS
    • +
+ This is my Github link +
+
+ + + +
+ + \ No newline at end of file