From 41170d915cda3873667a8d09f537cb4cbe6fb93c Mon Sep 17 00:00:00 2001 From: Lucas Kimanzi Date: Sat, 21 Nov 2020 22:45:23 -0500 Subject: [PATCH 1/3] navbar_reposition --- blogpost.css | 109 ++++++++++++++++ blogpost.html | 320 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 356 ++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 186 ++++++++++++++++++++++++++ 4 files changed, 971 insertions(+) create mode 100644 blogpost.css create mode 100644 blogpost.html create mode 100644 index.html create mode 100644 style.css diff --git a/blogpost.css b/blogpost.css new file mode 100644 index 0000000..05e53be --- /dev/null +++ b/blogpost.css @@ -0,0 +1,109 @@ +/* THIS FILE CONTAINS STYLES ONLY FOR 'blogpost.html' */ + +/* Main Body */ + +.date { + background-color: rgb(199, 199, 199); + display: inline-block; + padding: 30px; +} + +.post_heading h3 { + padding-bottom: 20px; + border-bottom: 1px dashed var(--border-color); +} + +/* '*' Here means every child-element */ + +.post_heading > * { + padding: 10px 0; +} + +.main_body > * { + margin-top: 5px; + border-bottom: 1px dashed var(--border-color); +} + +.main_body > :last-child { + border: none; +} + +.main_body__post img { + margin: 10px 0; +} + +/* Response or Comment Section */ + +.responses > * { + margin: 10px 0; +} + +.response_text { + padding: 5px; + border: 1px solid var(--border-color); + margin: 5px 0; + background-color: rgb(248, 248, 248); +} + +/* Sidebar */ + +.sidebar { + border-left: 1px dashed var(--border-color); +} + +.sidebar__search { + padding: 20px 0px; + border-top: 1px dashed var(--border-color); + border-bottom: 1px dashed var(--border-color); +} + +.sidebar .form-bg, +.main_body__new_comment .form-bg { + background-color: rgb(248, 248, 248); + + border: 1px solid gray; +} + +/* Response or Comment Section */ + +/* Media Query for Responsiveness */ + +@media (max-width: 1200px) { + .post_info { + display: flex !important; + flex-direction: column !important; + justify-content: center; + align-items: center; + width: 100%; + } + .main_body__post img { + width: 100%; + align-self: center; + justify-self: center; + } + .main_body__related_posts > { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + } + + .main_body__related_posts > * { + display: flex !important; + justify-content: space-around !important; + + align-items: center; + flex-direction: column !important; + } + .related_post :first-child { + margin: 10px 0; + } + h1, + h2, + h3 { + text-align: center; + } + + .responses img { + width: auto; + } +} diff --git a/blogpost.html b/blogpost.html new file mode 100644 index 0000000..d9b743c --- /dev/null +++ b/blogpost.html @@ -0,0 +1,320 @@ + + + + + + + + + + Blog Home + + + +
+
+

MyWebsite

+ +
+
+ + + +
+
+
+
+
+

+ 23
Jan +

+
+
+

Ridiculus Mattis Lorem Dolor Inceptos

+

Posted by admin in Journal,Photography,Web Design | 9 Comments

+
+
+ + +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum adipisci laborum eligendi similique, quas quaerat quam quia cupiditate quae et consequatur dolor laudantium enim fuga nesciunt doloribus aliquam repudiandae exercitationem!

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus consectetur possimus ab ipsam autem odit totam maiores explicabo! Rem ipsam, ratione tempora voluptatibus dicta accusamus iure saepe architecto tenetur nobis. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ex expedita, reiciendis sint et ullam, consequuntur nobis quos sapiente pariatur a iure, repellendus mollitia ad ipsum sunt ea magnam suscipit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ex expedita, reiciendis sint et ullam, consequuntur nobis quos sapiente pariatur a iure, repellendus mollitia ad ipsum sunt ea magnam suscipit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ex expedita, reiciendis sint et ullam, consequuntur nobis quos sapiente pariatur a iure, repellendus mollitia ad ipsum sunt ea magnam suscipit.

+
+ + +
+

Related Posts

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + + +
+

2 Responses to "Ridiculus Mattis Lorem Dolor Inceptos"

+
+
+
+ +
+
+

Barney Stinson

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum quo aliquam quas at nobis, voluptatibus numquam quisquam atque

+
+ + +
+
+
+
+ +
+
+

Sarah Tancrady

+

This is just a dummy body for the comment

+
+
+
+
+
+ + + +
+
Submit a Comment
+

Your email address will not be published. Required fields are marked *

+
+
+ +
+
+ +
+
+ +
+
+ + + +
+ +
+
+ +
+ + + + + + +
+
+

Popular Posts

+ +
+ +
+ Bestibum Laesuada Etiam Manga +

22 Nov, 2020

+
+
+ +
+ +
+ Bestibum Laesuada Etiam Manga +

22 Nov, 2020

+
+
+ +
+ +
+ Bestibum Laesuada Etiam Manga +

22 Nov, 2020

+
+
+ +
+ + + +
+

Search

+
+
+ +
+
+
+ + +
+

Custom Text

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa animi corrupti incidunt totam distinctio voluptatibus tenetur maxime saepe obcaecati!

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi cumque obcaecati eos distinctio ullam commodi, placeat repudiandae, nisi, voluptates aperiam cupiditate magni. Totam rem sequi recusandae ab culpa tempora maxime!

+
+
+
+
+ + + +
+
+
+ +
+

Popular Posts

+
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias aperiam provident
14 Nov, 2020

+ +
+
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias aperiam provident
14 Nov, 2020

+ +
+
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias aperiam provident
14 Nov, 2020

+ +
+
+ + +
+

Twitter

+
+

+ Lorem ipsum dolor, + sit amet consectetur adipisicing elit. Consequuntur quam possimus praesentium + mollitia - 21 hours ago +

+
+
+

+ Lorem ipsum dolor, + sit amet consectetur adipisicing elit. Consequuntur quam possimus praesentium + mollitia - 21 hours ago +

+
+
+

+ Lorem ipsum dolor, + sit amet consectetur adipisicing elit. Consequuntur quam possimus praesentium + mollitia - 21 hours ago +

+
+ + +
+ + +
+

A Little About Me

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi eos ullam quas explicabo corrupti deserunt, consequatur

+
+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi eos ullam quas explicabo corrupti deserunt, consequatur

+ +
+ + +
+

Contact Form

+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..257aafe --- /dev/null +++ b/index.html @@ -0,0 +1,356 @@ + + + + + + + + + Blog Home + + + + +
+
+

MyWebsite

+ +
+
+ + +
+ +
+
+ Card image cap +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content.

+
+ + + + 17 January, 2012 + + + + + 21 + +
+
+
+
+ Card image cap +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content.This card has supporting text below as a natural lead-in to additional content.

+
+ + + + 17 January, 2012 + + + + + 21 + +
+
+
+
+ Card image cap +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content. + +

+
+ + + + 17 January, 2012 + + + + + 21 + +
+
+
+
+ Card image cap +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content.

+
+ + + + 17 January, 2012 + + + + + 21 + +
+
+
+
+ Card image cap +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content.This card has supporting text below as a natural lead-in to additional content.

+
+ + + + 17 January, 2012 + + + + + 21 + +
+
+
+
+ Card image cap +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content. + +

+
+ + + + 17 January, 2012 + + + + + 21 + +
+
+
+
+ Card image cap +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content. + +

+
+ + + + 17 January, 2012 + + + + + 21 + +
+
+
+
+ Card image cap +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content. + +

+
+ + + + 17 January, 2012 + + + + + 21 + +
+
+
+
+ Card image cap +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content. + +

+
+ + + + 17 January, 2012 + + + + + 21 + +
+
+
+
+
+
+
+ +
+
+ + + +
+
+
+ +
+

Popular Posts

+
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias aperiam provident
14 Nov, 2020

+ +
+
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias aperiam provident
14 Nov, 2020

+ +
+
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias aperiam provident
14 Nov, 2020

+ +
+
+ + +
+

Twitter

+
+

+ Lorem ipsum dolor, + sit amet consectetur adipisicing elit. Consequuntur quam possimus praesentium + mollitia - 21 hours ago +

+
+
+

+ Lorem ipsum dolor, + sit amet consectetur adipisicing elit. Consequuntur quam possimus praesentium + mollitia - 21 hours ago +

+
+
+

+ Lorem ipsum dolor, + sit amet consectetur adipisicing elit. Consequuntur quam possimus praesentium + mollitia - 21 hours ago +

+
+ + +
+ + +
+

A Little About Me

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi eos ullam quas explicabo corrupti deserunt, consequatur

+
+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi eos ullam quas explicabo corrupti deserunt, consequatur

+ +
+ + +
+

Contact Form

+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a15cd22 --- /dev/null +++ b/style.css @@ -0,0 +1,186 @@ +/* THIS FILE CONTAINS SOME GLOBAL STYLES AS WELL AS STYLES FOR 'index.html' */ + +/* Globals such as Navbar or Footer */ + +:root { + /* Editing these colours will automatically change colors of whole website */ + --primary-color: rgb(41, 41, 41); + --border-color: #d3d3d3; + + +/* Resets & Utils */ + +ul { + list-style-type: none; +} + +a { + text-decoration: none; + color: black; +} + +.flex { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +/* Navigation Bar */ + +.top_nav { + background-color: #333; + + color: #fff; + height: 70px; +} + +.top_nav ul { + display: flex; +} + +.top_nav a { + font-weight: 500; + text-decoration: none; + text-transform: uppercase; + border: 1px solid black; + color: #fff; + padding: 30px; +} + +.top_nav a:hover { + /* border-color: aqua; */ + color: aqua; +} + +.top_nav a .selected { + color: aqua; +} + +.top_nav .flex { + overflow: hidden; + justify-content: space-between; +} + +.logo a { + border: none; + text-transform: none; +} + +/* Main-Body Styles */ + +.date-comments-wrapper { + border-top: dashed 2px var(--border-color); +} + +.date-comments { + margin: 5px 0; +} + +.older_posts { + padding: 20px 0; + border-top: dashed 2px var(--border-color); +} + +/* Pre-Footer */ + +.pre-footer { + padding: 50px 0px; + color: white; + background-color: var(--primary-color); +} + +.pre-footer h3 { + font-size: 16px; +} + +.popular_post, +.tweet { + border-bottom: dashed 1px var(--border-color); + padding: 10px 0; +} + +.tweet-time { + color: aqua; +} + +.form-bg { + background-color: rgb(29, 29, 29); +} +.form-control { + border: none; +} + +/* Footer */ + +footer { + color: white; + background-color: rgb(20, 20, 20); + padding: 20px 0px; +} + +footer .flex { + justify-content: space-between; +} + +.footer__social_icons a { + color: white; + text-decoration: none; +} + +.footer__social_icons > * { + border-radius: 2px; + padding: 5px 10px; + margin: 0px 5px; +} + +/* Footer Icons */ + +#rss { + background-color: #ee802f; +} + +#facebook { + background-color: #3b5998; +} + +#twitter { + background-color: #00acee; +} + +#pinterest { + background-color: #c8232c; +} + +#linkedin { + background-color: #0e76a8; +} + +/* Media Query for Responsiveness */ + +@media (max-width: 1200px) { + .top_nav { + height: 100%; + } + .top_nav .flex { + flex-direction: column; + } + + .top_nav ul { + display: flex; + flex-direction: column; + } + + .top_nav a { + font-weight: 500; + text-decoration: none; + text-transform: uppercase; + border: 1px solid b; + color: #fff; + margin: 5px 0; + padding: 10px 500px; + } + .top_nav li { + margin: 10px 0; + } +} From 13993bdd0398631ba560a66d7fbfe652aa74bb56 Mon Sep 17 00:00:00 2001 From: Lucas Kimanzi Date: Sat, 21 Nov 2020 22:48:39 -0500 Subject: [PATCH 2/3] nav_barwork --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 257aafe..71128e9 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ -
+

MyWebsite

-
+ ---->
From 963ea91a792015bff405f2e13400dfedde0ec4a3 Mon Sep 17 00:00:00 2001 From: Lucas Kimanzi Date: Sun, 22 Nov 2020 20:47:05 -0500 Subject: [PATCH 3/3] fixed nav bar, put css and images in separate folders --- blogpost.html | 4 ++-- images/500x500.jpg | Bin 0 -> 4899 bytes index.html | 6 +++--- blog.png => samples/bloghome.png | Bin blog-post.png => samples/blogpost.png | Bin blogpost.css => styles/blogpost.css | 0 style.css => styles/style.css | 2 +- 7 files changed, 6 insertions(+), 6 deletions(-) create mode 100644 images/500x500.jpg rename blog.png => samples/bloghome.png (100%) rename blog-post.png => samples/blogpost.png (100%) rename blogpost.css => styles/blogpost.css (100%) rename style.css => styles/style.css (99%) diff --git a/blogpost.html b/blogpost.html index d9b743c..c68ab2f 100644 --- a/blogpost.html +++ b/blogpost.html @@ -5,8 +5,8 @@ - - + + Blog Home diff --git a/images/500x500.jpg b/images/500x500.jpg new file mode 100644 index 0000000000000000000000000000000000000000..000d5e613cea774aeae331b9eb6914f1244c030e GIT binary patch literal 4899 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 71128e9..04a1256 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,13 @@ - + Blog Home - +

MyWebsite

-
----> +
diff --git a/blog.png b/samples/bloghome.png similarity index 100% rename from blog.png rename to samples/bloghome.png diff --git a/blog-post.png b/samples/blogpost.png similarity index 100% rename from blog-post.png rename to samples/blogpost.png diff --git a/blogpost.css b/styles/blogpost.css similarity index 100% rename from blogpost.css rename to styles/blogpost.css diff --git a/style.css b/styles/style.css similarity index 99% rename from style.css rename to styles/style.css index a15cd22..50e2ba1 100644 --- a/style.css +++ b/styles/style.css @@ -6,7 +6,7 @@ /* Editing these colours will automatically change colors of whole website */ --primary-color: rgb(41, 41, 41); --border-color: #d3d3d3; - +} /* Resets & Utils */