diff --git a/blogpost.html b/blogpost.html new file mode 100644 index 0000000..c68ab2f --- /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/images/500x500.jpg b/images/500x500.jpg new file mode 100644 index 0000000..000d5e6 Binary files /dev/null and b/images/500x500.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..04a1256 --- /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/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/styles/blogpost.css b/styles/blogpost.css new file mode 100644 index 0000000..05e53be --- /dev/null +++ b/styles/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/styles/style.css b/styles/style.css new file mode 100644 index 0000000..50e2ba1 --- /dev/null +++ b/styles/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; + } +}