added blog page for practice #37
There are no files selected for viewing
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
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 |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>A yr of Code Blog | Read me </title> | ||
| <link rel="stylesheet" href="styles/style.css"> | ||
| <link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css"> | ||
|
Contributor
There was a problem hiding this comment. Cool way to pull in your mobile-specific styles, but your path is invalid (should be |
||
| <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet"> | ||
| </head> | ||
| <body class="blogmain"> | ||
| <div class = "container"> | ||
| <!-- Navbar and Page Menu --> | ||
| <div class="header box"> | ||
|
Contributor
There was a problem hiding this comment. Prefer using |
||
| <div class="logo"> | ||
| <a class="logo" href="bloghome.html"> | ||
| <img src="images/bloglogo.png.png" alt="Homepage"> | ||
| </a> | ||
| <h1> | ||
| A year of Code Blog | ||
| </h1> | ||
| <ul class="listnav"> | ||
|
Contributor
There was a problem hiding this comment. Consider wrapping this with a |
||
| <li><a href="#">About</a></li> | ||
| </ul> | ||
| <ul class="listnav"> | ||
| <li><a href="blog.html"> Most Current Blog Post</a></li> | ||
|
Contributor
There was a problem hiding this comment. Put both |
||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="blogcontent"> | ||
| <h2> BLOG TITLE Heading </h2> | ||
| <h5> Title description , DATE </h5> | ||
|
Contributor
There was a problem hiding this comment. Jumping from |
||
| <h5> Author -- Bukunmi G </h5> | ||
| <img class = "blogpostfoto" src= "images/blog2.jpg" alt="blog picture"> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. | ||
| Architecto, ipsam excepturi necessitatibus similique dolores non consequuntur eos sequi, perferendis mollitia adipisci eveniet cum, | ||
| impedit minima alias provident cumque ipsum quos?.Lorem | ||
| </p> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus voluptatem placeat blanditiis | ||
| at et aliquid architecto adipisci ipsa | ||
| maxime nesciunt perspiciatis quaerat labore, quidem velit vel fugiat | ||
| esse id? Veniam. | ||
| </p> | ||
| <figure> | ||
|
Contributor
There was a problem hiding this comment. Nice use of |
||
| <img src="images/blog3.jpg" alt="coding"> | ||
| <figcaption><b> Fig.1 - Me Procastinating before I start coding away.</b></figcaption> | ||
|
Contributor
There was a problem hiding this comment. Avoid legacy style tags, including |
||
| </figure> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus voluptatem placeat blanditiis | ||
| at et aliquid architecto adipisci ipsa | ||
| maxime nesciunt perspiciatis quaerat labore, quidem velit vel fugiat | ||
| esse id? Veniam. | ||
| </p> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus voluptatem placeat blanditiis | ||
| at et aliquid architecto adipisci ipsa | ||
| maxime nesciunt perspiciatis quaerat labore, quidem velit vel fugiat | ||
| esse id? Veniam. | ||
| </p> | ||
| <blockquote>“I wish for a world that views disability, mental or physical, not as a hindrance but as unique attributes | ||
| that can be seen as powerful assets if given the right opportunities. Accessability in | ||
| technology is a basic human right. Let us advance digital equity together. ” | ||
| </blockquote> | ||
| <span>❝</span> | ||
| <i> Anywhere I see suffering, that is where I want to be, doing what I can</i> | ||
| <span>❠</span> | ||
|
Contributor
There was a problem hiding this comment. I think you might want 10078 here. 80 gives me a broken glyph. |
||
| <br> | ||
|
Contributor
There was a problem hiding this comment. Prefer to use margin styling to handle spacing between elements rather than stacking |
||
| <br> | ||
| <hr> | ||
|
Contributor
There was a problem hiding this comment.
|
||
| <br> | ||
| <br> | ||
| <div class="containerbio"> | ||
| <img class="avatar" src="images/avatar.png" alt="bukunmi's avatar"> | ||
| <p>Bukunmi is <u>a public health professional and programmer</u> | ||
| spending a year to expand her programming knowledge. Come learn and laugh with her.... | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| <footer id="main-footer"> | ||
|
Contributor
There was a problem hiding this comment.
|
||
| <div class="footercontainer"> | ||
| <!--The content you put in footer--> | ||
| <div> | ||
| <img src="images/bloglogo.png.png" alt="logo"> | ||
| </div> | ||
| <div class="newsletter"> | ||
| <h3> Email Newletter</h3> | ||
| <span>Subscribe for future updates</span> | ||
| <form> | ||
| <input type="email" placeholder="Enter Email..."> | ||
| <input type="submit" value="subscribe" class="btn"> | ||
| </form> | ||
| </div> | ||
| <div> | ||
| <h3> Blog Links</h3> | ||
| <ul class="list"> | ||
| <li><a href="#">Who is Bukunmi?</a></li> | ||
| <li><a href="#">Most recent Blog post</a></li> | ||
| <li><a href="#">Bukunmi's portfolio</a></li> | ||
| <li><a href="#">Bukunmi's Git page</a></li> | ||
| </ul> | ||
| </div> | ||
| <div> | ||
| <h3> Follow Me</h3> | ||
| <ul class="list"> | ||
| <li><a href="#">Linkedin</a></li> | ||
| <li><a href="#">Twitter</a></li> | ||
| <li><a href="#">Instagram</a></li> | ||
| <li><a href="#">Github</a></li> | ||
| </ul> | ||
| </div> | ||
| <div> | ||
| <p> | ||
| Copyright © 2022 and beyond. All Rights Reserved. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| </html> | ||
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 |
|---|---|---|
| @@ -0,0 +1,155 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>A yr of Code Blog | Read me </title> | ||
| <link rel="stylesheet" href="styles/style.css"> | ||
| <link rel="stylesheet" media="screen and (max-width: 768px)" href="styles/mobile.css"> | ||
| <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet"> | ||
| </head> | ||
| <body> | ||
| <div class = "container"> | ||
| <!-- Navbar and Page Menu --> | ||
| <div class="header box"> | ||
| <div class="logo"> | ||
| <a class="logo" href="bloghome.html"> | ||
| <img src="images/bloglogo.png.png" alt="Homepage"> | ||
|
Contributor
There was a problem hiding this comment. Try to keep your image names clean. This picked up and extra file extension. |
||
| </a> | ||
| <h1> | ||
| A year of Code Blog | ||
| </h1> | ||
| <ul class="listnav"> | ||
| <li><a href="#">About</a></li> | ||
| </ul> | ||
| <ul class="listnav"> | ||
| <li><a href="blog.html"> Most Current Blog Post</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- Blog showcase/most current posting--> | ||
| <div> | ||
| <div class="showcasebox"> | ||
| <div class="showcasecontent"> | ||
| <h1><span>Blog Post title</span></h1> | ||
| <p><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt quidem est itaque doloremque | ||
| facere culpa velit quo a assumenda. Repudiandae id aliquid vel eaque praesentium architecto | ||
| distinctio quis in pariatur.</span> | ||
| </p> | ||
| <a href="blog.html" class="btn"> Read More</a> | ||
| </div> | ||
| </div> | ||
| <!-- Old Blog Posts--> | ||
| <section class="postcontainer"> | ||
| <h2 class="mostread"><span>Most Read Posts</span></h2> | ||
| <div class="posts"> | ||
| <article class="card"> | ||
|
Contributor
There was a problem hiding this comment. Nice use of |
||
| <div class="order"> | ||
| <img src="images/blog1.jpg" alt="woman"> | ||
| </div> | ||
| <div> | ||
| <h3> | ||
| <a href="#"> Lorem impsum dolor sit</a> | ||
| </h3> | ||
| <p> | ||
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit quis similique nemo omnis, | ||
| perspiciatis laborum soluta libero nihil vitae doloremque facere, animi laboriosam, tenetur | ||
| ipsum qui illo neque! Vel, fugiat! | ||
| </p> | ||
| </div> | ||
| </article> | ||
| <article class="card"> | ||
| <div class="order"> | ||
| <img src="images/blog2.jpg" alt="woman"> | ||
|
Contributor
There was a problem hiding this comment. Make sure that the alt tag describes the image.
Contributor
There was a problem hiding this comment. It's a good idea to resize images to be lower resolution. If the image data is much larger than the size it will be displayed at, this causes the visitor to consume more data than necessary, and slows down displaying the page (large images are harder for the browser to display and take some time to resize). |
||
| </div> | ||
| <div> | ||
| <h3> | ||
| <a href="#"> Lorem impsum dolor sit</a> | ||
| </h3> | ||
| <p> | ||
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit quis similique nemo omnis, | ||
| perspiciatis laborum soluta libero nihil vitae doloremque facere, animi laboriosam, tenetur | ||
| ipsum qui illo neque! Vel, fugiat! | ||
| </p> | ||
| </div> | ||
| </article> | ||
| <article class="card"> | ||
| <div class="order"> | ||
| <img src="images/Banner.png" alt="woman"> | ||
| </div> | ||
| <div> | ||
| <h3> | ||
| <a href="#"> Lorem impsum dolor sit</a> | ||
| </h3> | ||
| <p> | ||
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit quis similique nemo omnis, | ||
| perspiciatis laborum soluta libero nihil vitae doloremque facere, animi laboriosam, tenetur | ||
| ipsum qui illo neque! Vel, fugiat! | ||
| </p> | ||
| </div> | ||
| </article> | ||
| <article class="card"> | ||
| <div class="order"> | ||
| <img src="images/blog3.jpg" alt="woman"> | ||
| </div> | ||
| <div> | ||
| <h3> | ||
| <a href="#"> Lorem impsum dolor sit</a> | ||
| </h3> | ||
| <p> | ||
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit quis similique nemo omnis, | ||
| perspiciatis laborum soluta libero nihil vitae doloremque facere, animi laboriosam, tenetur | ||
| ipsum qui illo neque! Vel, fugiat! | ||
| </p> | ||
| </div> | ||
| </article> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </div> | ||
|
Contributor
There was a problem hiding this comment. There's an extra closing |
||
| </body> | ||
| <footer id="main-footer"> | ||
|
Contributor
There was a problem hiding this comment. As in the other file, |
||
| <div class="footercontainer"> | ||
| <!--The content you put in footer--> | ||
| <div> | ||
| <img src="images/bloglogo.png.png" alt="logo"> | ||
| </div> | ||
| <div class="newsletter"> | ||
| <h3> Email Newletter</h3> | ||
| <span>Subscribe for future updates</span> | ||
| <form> | ||
| <input type="email" placeholder="Enter Email..."> | ||
| <input type="submit" value="subscribe" class="btn"> | ||
| </form> | ||
| </div> | ||
| <div> | ||
| <h3> Blog Links</h3> | ||
| <ul class="list"> | ||
| <li><a href="#">Who is Bukunmi?</a></li> | ||
| <li><a href="#">Most recent Blog post</a></li> | ||
| <li><a href="#">Bukunmi's portfolio</a></li> | ||
| <li><a href="#">Bukunmi's Git page</a></li> | ||
| </ul> | ||
| </div> | ||
| <div> | ||
| <h3> Follow Me</h3> | ||
| <ul class="list"> | ||
| <li><a href="#">Linkedin</a></li> | ||
| <li><a href="#">Twitter</a></li> | ||
| <li><a href="#">Instagram</a></li> | ||
| <li><a href="#">Github</a></li> | ||
| </ul> | ||
| </div> | ||
| <div> | ||
| <p> | ||
| Copyright © 2022 and beyond. All Rights Reserved. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| </html> | ||
Empty file.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| /* Nav Bar */ | ||
| .listnav { | ||
| display: none; | ||
| } | ||
|
|
||
| /* Main Blog Post */ | ||
| .showcasecontent h1, | ||
| p { | ||
| font-weight: bold; | ||
| justify-content: left; | ||
| inline-size: 80%; | ||
| } | ||
|
|
||
| .showcasecontent span { | ||
| background: rgba(255, 240, 0, 0.6); | ||
| } | ||
|
|
||
| .showcasecontent { | ||
| padding: 2rem; | ||
| background: url("../images/Banner.png") no-repeat center center/cover; | ||
| top: 0; | ||
| left: 0; | ||
| width: 80%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| /* Blog page post*/ | ||
| .blogpostfoto { | ||
| width:85%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .containerbio { | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| /* Most Read Posts Cards */ | ||
| .card p, | ||
| h3 { | ||
| inline-size: 95%; | ||
| font-size: smaller; | ||
| } | ||
|
|
||
| .card h3 { | ||
| font-size: small; | ||
| text-align: center; | ||
| } | ||
|
|
||
| /* Footer */ | ||
| .list, | ||
| .newsletter, | ||
| .footercontainer h3 { | ||
| display: none; | ||
| } |
Oops, something went wrong.
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.
Watch out for the extra
>at the end of the comment. That's throwing off the validator.