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..dfc9d430 100644 --- 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; +} \ No newline at end of file diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 67dfc7f5..1014b9a7 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -1,22 +1,113 @@ + - + 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
+ Sololearn logo +
+
+
+
+

Drop-in Sessions

+

Meet-ups to build on basics skills on;

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

Projects:

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

Fundamentals

+

Introduction to Programming

+ Code.org logo +
    +
  • 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:

+ Capgemini logo + +
    +
  • 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 diff --git a/week2/.vscode/settings.json b/week2/.vscode/settings.json new file mode 100644 index 00000000..8dcad861 --- /dev/null +++ b/week2/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "cSpell.words": [ + "Osagie" + ], + "editor.formatOnPaste": true, + "editor.formatOnSave": true +} \ No newline at end of file diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 5cb025ce..7c14c289 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,19 +1,288 @@ +/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ +/*declared the default or root font-size in percentage: [1rem = 10px]*/ + +html { + font-size: 62.5%; + box-sizing: border-box; + /*font-size: 10px;*/ +} body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 1.5rem; +} + +/*contains the logo and navigation links*/ +.nav-bar { + background-color: white; + position: fixed; + width: 100%; + top: 0; + border-bottom: 0.01rem solid #eee; + height: 7rem; + display: flex; + align-items: center; +} + +.logo-nav { + width: 60%; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + height: 4rem; +} + +.nav-link ul { + display: flex; + text-decoration: none; + list-style: none; + box-sizing: border-box; + margin: 0px; + padding: 0; +} + +.nav-link ul li { + display: flex; + list-style: none; + justify-content: center; + padding: 1rem; + margin: 0.6rem; +} + +/*makes the first menu stand out*/ +#active { + color: #000; + font-weight: 599; +} + +.nav-link ul a { + text-decoration: none; + font-size: 1.7rem; + color: rgb(92, 91, 91); +} + +/*background image and introduction section*/ +.intro { + background-image: url(../img/first-background.jpg); + background-size: cover; + background-position: center bottom; + background-repeat: no-repeat; + display: flex; + flex-direction: column; + align-items: center; + overflow: hidden; + height: 73.5rem; +} + +.intro h2 { + color: #ffffff; + font-size: 4.8rem; + font-weight: 300; + text-align: center; + justify-items: center; + margin-top: 0rem; + margin-left: -2.8rem; + padding-top: 24.5rem; +} + +h3 { + color: #ffffff; + text-align: center; + justify-items: center; + padding-top: 0rem; + margin-top: -2.75rem; + font-size: 2.563rem; + font-weight: 300; +} + +/*button normal state*/ +button { + background-color: #f15b29; + padding: 1.2rem 1.6rem; + color: white; + border-radius: 5px; + font-size: 1.8rem; + border: none; + outline: none; +} + +/*color slightly darker on hover*/ +button:hover { + background-color: #e74c0f; +} + +/*contains icons and description*/ +.karma_needs { + display: flex; + flex-direction: column; + justify-content: center; + margin-top: 5.5rem; + margin-bottom: 8rem; +} + +/*targets only the paragraph*/ +.karma_needs > p { + font-size: 4.5rem; + font-weight: lighter; + text-align: center; + margin-bottom: 2rem; +} + +/*aligns the icons and descriptions in a row*/ +.icon-items { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + list-style-type: none; +} + +/*selects all icon images*/ +.karma_needs img { + display: flex; + width: 13rem; + justify-items: center; +} + +/*targets all the icon descriptions*/ +h4 { + text-align: center; + font-size: 2.5rem; + margin-top: 4rem; + font-weight: 400; +} + +.icon-items li { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + padding-left: 1rem; + padding-right: 1rem; + margin-left: 2rem; + margin-right: 2rem; + box-sizing: border-box; + list-style-type: none; +} + +.social-media { + display: flex; + flex-direction: column; + justify-content: center; + margin-bottom: 15rem; +} + +.social { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +/*.social-media li:hover { + display: flex; + padding: 20px 40px;*/ + +.media { + display: flex; + text-decoration: none; + margin-left: 8rem; + margin-bottom: 3rem; +} + +.media li { + list-style-type: none; + font-size: 2.5rem; + font-weight: 0rem; + font-weight: 0rem; + margin-right: 1.05rem; + margin-left: 1.05rem; +} + +hr { + border-top: 0.1rem solid #eee; + margin: 1.313rem 0; + width: 85.15rem; +} + +h5 { + text-align: center; + font-size: 1.75rem; + margin-top: 1rem; + font-weight: 400; + box-sizing: border-box; + justify-content: center; + margin-left: 12rem; +} + +/*grouped the social media as having common attributes*/ +#twitter, +#facebook, +#instagram { + font-size: 2rem; + width: 3rem; + height: 3rem; + border: 0.1rem solid #c3e5c5; + border-radius: 2.8rem; + box-sizing: border-box; + padding: 1.8rem; + display: flex; + align-items: center; + justify-content: center; +} + +#twitter { + color: #4ea3b8; +} + +#facebook { + color: #2653b8; +} + +#instagram { + color: #3e79aa; +} + +.copyright { + display: flex; + font-size: 1.4rem; + text-align: center; + margin-left: 12rem; + font-weight: 30; +} + +/*applied some media query to add to web responsiveness*/ +@media (max-width: 800px) { + body { + width: 800px; + } +} + +@media (max-width: 1000px) { + .logo-nav { + width: 80%; + } +} + +@media (max-width: 480px) { + body { + width: 400px; + } } /** * Add your custom styles below * * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks + * - Be organized, use comments and separate your styles into meaningful chunks * for example: General styles, Navigation styles, Hero styles, Footer etc. * - * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' + * - When using Flex-box, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ - - diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 876b59d6..d2a8c33c 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -1,21 +1,90 @@ - - - - Karma - - - - - - - - + + + + + Karma + + + + + + + +
+
+ + + - - - +
+
- +
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+
+ +
+
+ +
+

Everyone needs a little Karma.

+ +
+ + + + + + + + + + + \ No newline at end of file