This repository was archived by the owner on Oct 26, 2020. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 42
Osagie/week1 #31
Open
osagiestar
wants to merge
32
commits into
CodeYourFuture:master
Choose a base branch
from
osagiestar:Osagie/week1
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Osagie/week1 #31
Changes from all commits
Commits
Show all changes
32 commits
Select commit
Hold shift + click to select a range
b014080
added more on html and css
osagiestar 5accfa5
more info added
osagiestar 7c10c75
removed comments
osagiestar ac91c60
css editted
osagiestar 959022b
added more details
osagiestar db91634
just a test
osagiestar ed74b03
updated html and more styling
osagiestar 754bfef
change some styling
osagiestar fa4e448
html editing
osagiestar 363ff94
added hover color on CSS and list tags on html
osagiestar b32c41e
added more details
osagiestar 85c840c
Flukeout img
osagiestar d3d808d
added te boxes and some editting
osagiestar b5a9270
Merge branch 'Osagie/week1' of https://github.com/osagiestar/HTML-CSS…
osagiestar 9459fdd
improving page with shadow boxes
osagiestar 465bb46
aighning the box-shadows
osagiestar 5de98c8
alighning the box-shadows and related paragraphs
osagiestar f3f8d51
complete retructuring and styling of blog
osagiestar 8155d30
setting in order the contents of the box-shadows
osagiestar a40b4ea
max-width and height added on profile pic
osagiestar 7108015
added social media links
osagiestar c5fe22b
debugging
osagiestar 7eeabb1
added logos and links
osagiestar e476666
aligning the logos
osagiestar 55e7789
adding CSS comments
osagiestar 8d14661
tidying up CSS codes
osagiestar 7f4bd28
applied a class 'course' to target all the boxes
osagiestar 1855ecd
applied text descriptions to the HTML file
osagiestar 95709ed
applied internal-link and external-links classes
osagiestar 1105304
a group class for company logos
osagiestar 3b64b4d
removed dormant IDs and tidied up codes
osagiestar 7dc06d7
double checked up codes
osagiestar File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,127 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <!--Head Markup--> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1, shrink-to-fit=no" | ||
| /> | ||
| <meta charset="UTF-8"/> | ||
| <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 rel="stylesheet" href="css/style.css" /> | ||
| <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> | ||
| <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 Container--> | ||
| <main class="container"> | ||
|
|
||
| <!--Navigation Menu--> | ||
| <header> | ||
| <h1 class="topic"> My Coding Brag Blog </h1> | ||
| <menu class="nav"> | ||
| <nav id="navigation"> | ||
| <a id="active" class="internal-link" href="#Intro"> Pre-Bootcamp </a> | ||
| <a class="internal-link" href="#Start"> Drop-in Sessions </a> | ||
| <a class="internal-link" href="#Fundamentals"> Fundamentals </a> | ||
| <a class="internal-link" href="#FullStack"> Full Stack Web Dev </a> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <!--Introduction--> | ||
| <section class="introduce"> | ||
| <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> | ||
|
|
||
| <!--Social media icons--> | ||
| <div class="social"> | ||
| <ul> | ||
| <li> <i class="fa 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> | ||
|
|
||
| <!--Container sections--> | ||
| <section class="course"> | ||
| <article id="prelim"> | ||
| <h2> 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="external-link" href="https://www.sololearn.com/">This is SoloLearn link</a> <br> | ||
| <img class="company-logo" src="https://i.ytimg.com/vi/4HpAujV1OOc/maxresdefault.jpg" alt="Sololearn logo"> | ||
| </article> | ||
| </section> | ||
|
|
||
| <section class="course"> | ||
| <article id="drop-in"> | ||
| <h2>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="external-link" href="https://www.freecodecamp.org/osagie">This is FreeCodeCamp link</a> | ||
| <img class="company-logo" 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="course"> | ||
| <article id="coursestart"> | ||
| <h2>Fundamentals</h2> | ||
| <h3> Introduction to Programming</h3> | ||
| <img class="company-logo" 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="external-link" href="https://www.khanacademy.org/computing/computer-programming/programming">This is my Khan Academy link</a> | ||
| </article> | ||
| </section> | ||
|
|
||
| <section class="course"> | ||
| <article id="fulldev"> | ||
| <h2>Full Stack Web Development</h2> | ||
| <h3>The eight-month course covers:</h3> | ||
| <img class="company-logo" 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="external-link" href="https://github.com/osagiestar">This is my Github link</a> | ||
| </article> | ||
| </section> | ||
|
|
||
| <!--Footer--> | ||
| <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> | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Applied the 'fa' class twice
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Corrected it. I have made I believe you meant only the one on facebook link. I initially tried fa fa (twice) for all of them and then fa fa fa (thrice). I got same result. Not quite sure why???