From 20ac805a3bdd3a567300b0321fd20e9f7e5f86dd Mon Sep 17 00:00:00 2001 From: Shelley McIntyre <73217296+SLMcIntyre@users.noreply.github.com> Date: Tue, 17 Nov 2020 14:34:50 -0500 Subject: [PATCH 01/14] 1st draft of blog mockup -added header, cards, and footer --- .vscode/settings.json | 3 + blog-post.html | 17 ++ blog-post.png => images/blog-post.png | Bin blog.png => images/blog.png | Bin index.html | 226 ++++++++++++++++++++++++++ styles/styles.css | 126 ++++++++++++++ 6 files changed, 372 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 blog-post.html rename blog-post.png => images/blog-post.png (100%) rename blog.png => images/blog.png (100%) create mode 100644 index.html create mode 100644 styles/styles.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/blog-post.html b/blog-post.html new file mode 100644 index 0000000..c0dcce1 --- /dev/null +++ b/blog-post.html @@ -0,0 +1,17 @@ + + + + + + Document + + + + + + + + + + + \ No newline at end of file diff --git a/blog-post.png b/images/blog-post.png similarity index 100% rename from blog-post.png rename to images/blog-post.png diff --git a/blog.png b/images/blog.png similarity index 100% rename from blog.png rename to images/blog.png diff --git a/index.html b/index.html new file mode 100644 index 0000000..9385073 --- /dev/null +++ b/index.html @@ -0,0 +1,226 @@ + + + + + + Document + + + + + + + + +
+ + + + + +
+ + + +
+
+
+ +
+

Ullamcorper Nibh Parturient

+

Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis Mollis, porttitor logula, eget lacinia odio sem nec elit.

+
+
+ Last updated 3 mins ago +
+
+
+ +
+
+ +
+

Condimentum Ultricies Ullamcorper

+

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur fermentum.

+
+
+ Last updated 3 mins ago +
+
+
+ +
+
+ +
+

Nibh Fusce Parturient Tristique

+

Nulla vitae libero, augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. +

+
+
+ Last updated 3 mins ago +
+
+
+ +
+
+ +
+

Nullam Mattis Sit Tellus

+

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus auctor. Cras mattis consectetur puruamet fermentum.

+
+
+ Last updated 3 mins ago +
+
+ +
+ +
+
+ +
+

Porta Condimentum Tellus

+

Nulla vitae libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed

+
+
+ Last updated 3 mins ago +
+
+
+ +
+
+ +
+

Consectetur Ligula Etiam

+

Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit.

+
+
+ Last updated 3 mins ago +
+
+ +
+ +
+
+ +
+

Tortor Pharetra Fermentum

+

Donec sed odio dui. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam ultricies vehicula ut id elit. Fusce cursus commodo.

+
+
+ Last updated 3 mins ago +
+
+ +
+ +
+
+ +
+

Ligula Inceptos Cursus Sit

+

Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla consectetur. Donec sed odio duiamet fermentum. Donec Ullamcorper nulla non metus auctor fringilla.

+
+
+ Last updated 3 mins ago +
+
+ +
+ +
+
+ +
+

Ornare Elit Cursus Tellus

+

Donec sed odio dui. Praesent commodo cursus magna, vel consectetur. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur eros.

+
+
+
+
+ Last updated 3 mins ago +
+
+
+
+ +
+ + + +
+
+
+
POPULAR POSTS
+
+ +
+
TWITTER
+
+ +
+
A LITTLE ABOUT ME
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

+ +

Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.

+
+ +
+
CONTACT FORM
+
+
+
+ + + + + + +
+ + \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 0000000..d984e79 --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,126 @@ +.main-content { + margin-right: 100px; + margin-left: 100px; +} + +.navbar-expand-lg { + background-color: #283044; + +} + +.navbar-brand { + color: #ffffff; + padding-left: 100px; + font-family: 'Dancing Script', cursive; + + +} + +.nav-link { + color: #ffffff; + border-right: 100px; + +} + +.card-deck { + margin-top: 40px; +} + +.card-img-top { + background-color: #564E52; + + } + + .hr { + border-bottom:1px dotted #000; + /* padding-bottom:1px;*/ + position:relative; +} + +.hr:after { + border-bottom:1px dotted #000; + content:''; + left:0; + position:absolute; + bottom:-3px; + width:100%; +} + + .secondary-content { + background-color: #353F5A; + color: #ffffff; + padding-left: 120px; + padding-right: 100px; + } + + + footer{ + background-color: #283044; + color: #ffffff; + font-size: 20px; + padding-top: 20px; + padding-bottom: 30px; + padding-left: 125px; + + } + + + +/*Social Media Icons*/ + +.social-media{ + + padding-left: 820px; + margin-top: -20px; + +} + .fa { + padding: 10px; + font-size: 30px; + width: 40px; + text-align: center; + text-decoration: none; + margin: 5px 2px; + + + + } + + .fa:hover { + opacity: 0.7; + } + + .fa-rss { + background: #ff6600; + color: white; + } + + .fa-facebook { + background: #3B5998; + color: white; + } + + .fa-twitter { + background: #55ACEE; + color: white; + } + + .fa-dribbble { + background: #ea4c89; + color: white; + } + + .fa-pinterest { + background: #cb2027; + color: white; + } + + .fa-linkedin { + background: #007bb5; + color: white; + } + + /* end Social Media Icons*/ + + + From 1739a70ba5e8453fb9165314d549c93174c77a04 Mon Sep 17 00:00:00 2001 From: Shelley McIntyre <73217296+SLMcIntyre@users.noreply.github.com> Date: Tue, 17 Nov 2020 14:40:53 -0500 Subject: [PATCH 02/14] added catergory comments to css stylesheet --- styles/styles.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index d984e79..89203d9 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -3,6 +3,8 @@ margin-left: 100px; } +/*navbar*/ + .navbar-expand-lg { background-color: #283044; @@ -22,6 +24,10 @@ } +/*end navbar*/ + +/*cards*/ + .card-deck { margin-top: 40px; } @@ -46,6 +52,8 @@ width:100%; } +/*end cards*/ + .secondary-content { background-color: #353F5A; color: #ffffff; @@ -54,6 +62,8 @@ } +/*footer*/ + footer{ background-color: #283044; color: #ffffff; @@ -122,5 +132,5 @@ /* end Social Media Icons*/ - + /*end footer*/ From 2fe7810ff02b2c222c72af0b5c221cadceab772c Mon Sep 17 00:00:00 2001 From: Shelley McIntyre <73217296+SLMcIntyre@users.noreply.github.com> Date: Tue, 17 Nov 2020 15:11:43 -0500 Subject: [PATCH 03/14] changed background color of header, footer, and secondary content --- index.html | 2 ++ styles/styles.css | 23 +++++++---------------- 2 files changed, 9 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 9385073..fa2e6f4 100644 --- a/index.html +++ b/index.html @@ -192,9 +192,11 @@
TWITTER
A LITTLE ABOUT ME
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.

+
diff --git a/styles/styles.css b/styles/styles.css index 89203d9..baa1b57 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -6,22 +6,18 @@ /*navbar*/ .navbar-expand-lg { - background-color: #283044; - + background-color: #203646; } .navbar-brand { color: #ffffff; padding-left: 100px; font-family: 'Dancing Script', cursive; - - } .nav-link { color: #ffffff; border-right: 100px; - } /*end navbar*/ @@ -34,8 +30,7 @@ .card-img-top { background-color: #564E52; - - } +} .hr { border-bottom:1px dotted #000; @@ -55,7 +50,7 @@ /*end cards*/ .secondary-content { - background-color: #353F5A; + background-color: #274154; color: #ffffff; padding-left: 120px; padding-right: 100px; @@ -65,25 +60,24 @@ /*footer*/ footer{ - background-color: #283044; + background-color: #203646; color: #ffffff; font-size: 20px; padding-top: 20px; padding-bottom: 30px; padding-left: 125px; - - } +} /*Social Media Icons*/ .social-media{ - padding-left: 820px; margin-top: -20px; - } + + .fa { padding: 10px; font-size: 30px; @@ -91,9 +85,6 @@ text-align: center; text-decoration: none; margin: 5px 2px; - - - } .fa:hover { From 5e39a52f2f191df7be1a7784d41f81a7c4c68b64 Mon Sep 17 00:00:00 2001 From: Shelley McIntyre <73217296+SLMcIntyre@users.noreply.github.com> Date: Wed, 18 Nov 2020 00:50:08 -0500 Subject: [PATCH 04/14] changed background color of card image placeholder --- index.html | 403 +++++++++++++++++++++++----------------------- styles/styles.css | 3 + 2 files changed, 205 insertions(+), 201 deletions(-) diff --git a/index.html b/index.html index fa2e6f4..4fa936f 100644 --- a/index.html +++ b/index.html @@ -1,228 +1,229 @@ - - - - Document - - - - - - - - -
- - - - - -
- - - -
-
-
- -
-

Ullamcorper Nibh Parturient

-

Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis Mollis, porttitor logula, eget lacinia odio sem nec elit.

-
-
- Last updated 3 mins ago -
+ + + + Document + + + + + + + + +
+ +
+ -
-
- -
-

Condimentum Ultricies Ullamcorper

-

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur fermentum.

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

Ullamcorper Nibh Parturient

+

Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis Mollis, porttitor logula, eget lacinia odio sem nec elit.

+
+
+ Last updated 3 mins ago +
+
-
- Last updated 3 mins ago + +
+
+ +
+

Condimentum Ultricies Ullamcorper

+

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur fermentum.

+
+
+ Last updated 3 mins ago +
+
-
-
-
-
- -
-

Nibh Fusce Parturient Tristique

-

Nulla vitae libero, augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. -

+
+
+ +
+

Nibh Fusce Parturient Tristique

+

Nulla vitae libero, augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. +

+
+
+ Last updated 3 mins ago +
+
-
- Last updated 3 mins ago -
-
-
-
-
- -
-

Nullam Mattis Sit Tellus

-

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus auctor. Cras mattis consectetur puruamet fermentum.

+
+
+ +
+

Nullam Mattis Sit Tellus

+

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus auctor. Cras mattis consectetur puruamet fermentum.

+
+
+ Last updated 3 mins ago +
+
+
-
- Last updated 3 mins ago -
-
- -
-
-
- -
-

Porta Condimentum Tellus

-

Nulla vitae libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed

+
+
+ +
+

Porta Condimentum Tellus

+

Nulla vitae libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed

+
+
+ Last updated 3 mins ago +
+
-
- Last updated 3 mins ago -
-
-
-
-
- -
-

Consectetur Ligula Etiam

-

Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit.

+
+
+ +
+

Consectetur Ligula Etiam

+

Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit.

+
+
+ Last updated 3 mins ago +
+
+
-
- Last updated 3 mins ago -
-
- -
-
-
- -
-

Tortor Pharetra Fermentum

-

Donec sed odio dui. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam ultricies vehicula ut id elit. Fusce cursus commodo.

+
+
+ +
+

Tortor Pharetra Fermentum

+

Donec sed odio dui. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam ultricies vehicula ut id elit. Fusce cursus commodo.

+
+
+ Last updated 3 mins ago +
+
+
-
- Last updated 3 mins ago -
-
- -
-
-
- -
-

Ligula Inceptos Cursus Sit

-

Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla consectetur. Donec sed odio duiamet fermentum. Donec Ullamcorper nulla non metus auctor fringilla.

+
+
+ +
+

Ligula Inceptos Cursus Sit

+

Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla consectetur. Donec sed odio duiamet fermentum. Donec Ullamcorper nulla non metus auctor fringilla.

+
+
+ Last updated 3 mins ago +
+
+
-
- Last updated 3 mins ago -
-
- -
-
-
- -
-

Ornare Elit Cursus Tellus

-

Donec sed odio dui. Praesent commodo cursus magna, vel consectetur. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur eros.

+
+
+ +
+

Ornare Elit Cursus Tellus

+

Donec sed odio dui. Praesent commodo cursus magna, vel consectetur. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur eros.

+
+
+
+
+ Last updated 3 mins ago +
+
-
-
-
- Last updated 3 mins ago -
-
-
-
- -
- - - -
-
-
-
POPULAR POSTS
+
+
+ + -
-
TWITTER
-
+
+
+
+
POPULAR POSTS
+
+ +
+
TWITTER
+
-
-
A LITTLE ABOUT ME
- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

+
+
A LITTLE ABOUT ME
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

-

Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.

- -
+

Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.

+ +
-
-
CONTACT FORM
+
+
CONTACT FORM
+
+
-
-
- -
- ©2011 Ikaros. Theme by elemis. - - - - -
- - - - -
- + + + + + + + + \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index baa1b57..b72c305 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -28,9 +28,12 @@ margin-top: 40px; } +/* .card-img-top { background-color: #564E52; + color: #564E52; } +*/ .hr { border-bottom:1px dotted #000; From 045d54af4d93d80782629825fdaf799ca5b2e9d6 Mon Sep 17 00:00:00 2001 From: Shelley McIntyre <73217296+SLMcIntyre@users.noreply.github.com> Date: Wed, 18 Nov 2020 02:15:15 -0500 Subject: [PATCH 05/14] added contact form to secondary-content --- index.html | 22 +++++++++++++++----- styles/styles.css | 51 ++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 63 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 4fa936f..056c30b 100644 --- a/index.html +++ b/index.html @@ -167,12 +167,12 @@

Ligula Inceptos Cursus Sit

Ornare Elit Cursus Tellus

Donec sed odio dui. Praesent commodo cursus magna, vel consectetur. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur eros.

+ +
-
-
-
- Last updated 3 mins ago -
+ + Last updated 3 mins ago +
@@ -201,7 +201,19 @@
A LITTLE ABOUT ME
+
CONTACT FORM
+
+ +
+
+ +
+
+ +
+ +
diff --git a/styles/styles.css b/styles/styles.css index b72c305..d6220f8 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -35,12 +35,14 @@ } */ - .hr { - border-bottom:1px dotted #000; - /* padding-bottom:1px;*/ - position:relative; +/* + hr { + border-bottom:2px dotted #000; + outline-offset: 2px; } +*/ +/* .hr:after { border-bottom:1px dotted #000; content:''; @@ -48,7 +50,8 @@ position:absolute; bottom:-3px; width:100%; -} +} +*/ /*end cards*/ @@ -59,6 +62,39 @@ padding-right: 100px; } + h6 { + padding-top: 30px; + padding-bottom: 18px; + } + + .input-container{ + padding-bottom: 8px; + + } + + #input1 { + background-color: #2a2d34; + border-color: #2a2d34; + border-top: 0px; + border-left: 0px; + width: 225px; +} + +#input2 { + background-color: #2a2d34; + border-color: #2a2d34; + border-top: 0px; + border-left: 0px; + width: 225px; + + } + + #text { + background: #2a2d34; + border-color: #2a2d34; + width: 225px; +} + /*footer*/ @@ -69,6 +105,7 @@ padding-top: 20px; padding-bottom: 30px; padding-left: 125px; + } @@ -78,6 +115,10 @@ .social-media{ padding-left: 820px; margin-top: -20px; + margin-right: 100px; + margin-left: -100px; + + } From 8c40b652a0294e5c76dacf39f9de17465a9bd806 Mon Sep 17 00:00:00 2001 From: Shelley McIntyre <73217296+SLMcIntyre@users.noreply.github.com> Date: Wed, 18 Nov 2020 03:31:38 -0500 Subject: [PATCH 06/14] added submit and older posts buttons --- index.html | 8 ++++++-- styles/styles.css | 42 ++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 46 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 056c30b..5ef235f 100644 --- a/index.html +++ b/index.html @@ -149,7 +149,7 @@

Tortor Pharetra Fermentum

- +

Ligula Inceptos Cursus Sit

Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla consectetur. Donec sed odio duiamet fermentum. Donec Ullamcorper nulla non metus auctor fringilla.

@@ -175,6 +175,7 @@

Ornare Elit Cursus Tellus

+
@@ -202,7 +203,7 @@
A LITTLE ABOUT ME
-
CONTACT FORM
+
CONTACT FORM
@@ -212,6 +213,9 @@
CONTACT FORM
+ + +
diff --git a/styles/styles.css b/styles/styles.css index d6220f8..fae1bf3 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -53,13 +53,20 @@ } */ +.button{ + margin-top: 100px; + margin-bottom: 60px; + margin-left: 30px; +} /*end cards*/ .secondary-content { background-color: #274154; color: #ffffff; - padding-left: 120px; padding-right: 100px; + padding-bottom: 30px; + padding-left: 120px; + } h6 { @@ -94,7 +101,38 @@ border-color: #2a2d34; width: 225px; } +/* +button{ + background-color: rgb(90, 125, 153); + color: #fff; + width: 125px; + +} +*/ +button { + /*box-shadow: 0px 10px 14px -7px #276873;*/ + background:linear-gradient(to bottom, #75b3c9 5%, #408c99 100%); + background-color:#75b3c9; + border-radius:6px; + border-color: #75b3c9; + display:inline-block; + cursor:pointer; + color:#ffffff; + font-family:Verdana; + font-size:19px; + padding:5px 40px; + text-decoration:none; + text-shadow:0px 1px 0px #3d768a; +} +button:hover { + background:linear-gradient(to bottom, #408c99 5%, #75b3c9 100%); + background-color:#408c99; +} +button:active { + position:relative; + top:1px; +} /*footer*/ @@ -105,7 +143,7 @@ padding-top: 20px; padding-bottom: 30px; padding-left: 125px; - + } From 4ba78396e8fb040beda7634c3aabb53a08ca7ba6 Mon Sep 17 00:00:00 2001 From: Shelley McIntyre <73217296+SLMcIntyre@users.noreply.github.com> Date: Sun, 22 Nov 2020 12:55:30 -0500 Subject: [PATCH 07/14] added dotted lines to cards and fixed social media icons --- images/speech-bubbles.png | Bin 0 -> 342 bytes index.html | 239 ++++++++++++++++++++++---------------- styles/styles.css | 81 ++++++------- 3 files changed, 179 insertions(+), 141 deletions(-) create mode 100644 images/speech-bubbles.png diff --git a/images/speech-bubbles.png b/images/speech-bubbles.png new file mode 100644 index 0000000000000000000000000000000000000000..cff3a75f1920352d1c636cf181675085e45e48c6 GIT binary patch literal 342 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6n2Mb|LpV4>-?)JUISV`@i-B}L z2s3_MbjKOUkSuYHC<)F_D=AMbN@XZ7FW1Y=%Pvk%EJ)SMFG`>N&PEET=&GlSV~EDY z+6#)_&V>RDALgG|uyJwO%rlK8agA1o>mMdzmV^EZ+f+X?OZYZ9HfJUn?Z^>%+~jD$ z!Q86qC@|*@kKNtbf6Uj(l<$AsC#-hdU}n(PEIrOOyT7WnG^#I8^LBW4;`;uL?q3ye zc&>YQs?M?cOlkDCwXAW+8kWV%o9*z}#;$d)Ma*Jkaros + +
- +

Nullam Mattis Sit Tellus

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus auctor. Cras mattis consectetur puruamet fermentum.

+
+
+
-
- Last updated 3 mins ago -
- -
+ + Last updated 3 mins ago +
+
- +

Porta Condimentum Tellus

Nulla vitae libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed

+
-
- Last updated 3 mins ago -
-
-
+
+
+
+ + Last updated 3 mins ago + +
- +

Consectetur Ligula Etiam

Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit.

+
-
- Last updated 3 mins ago -
-
- -
+
+
+
+ + Last updated 3 mins ago + +
- +

Tortor Pharetra Fermentum

Donec sed odio dui. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam ultricies vehicula ut id elit. Fusce cursus commodo.

+
-
- Last updated 3 mins ago -
-
- -
+
+
+
+ + Last updated 3 mins ago + +
- +

Ligula Inceptos Cursus Sit

Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla consectetur. Donec sed odio duiamet fermentum. Donec Ullamcorper nulla non metus auctor fringilla.

+
+
+
+
-
- Last updated 3 mins ago -
-
- + + Last updated 3 mins ago +
- +

Ornare Elit Cursus Tellus

Donec sed odio dui. Praesent commodo cursus magna, vel consectetur. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur eros.

-
+
+
+
+
- Last updated 3 mins ago - +
+
+ View Article +
+
+ 49 +
+
+ + +
- +
+
+
+
+ + - -
-
-
-
POPULAR POSTS
-
- -
-
TWITTER
-
+
+
+
+
+
POPULAR POSTS
+
+ +
+
TWITTER
+
-
-
A LITTLE ABOUT ME
- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

+
+
A LITTLE ABOUT ME
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

-

Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.

- -
+

Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.

+ +
-
-
-
CONTACT FORM
-
- -
-
- -
-
- -
- - - - - +
+
+
CONTACT FORM
+
+ +
+
+ +
+
+ +
+ + + + + +
-
-
- ©2011 Ikaros. Theme by elemis. - - -
diff --git a/styles/styles.css b/styles/styles.css index fae1bf3..a6f694a 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -5,14 +5,18 @@ /*navbar*/ + .navbar-expand-lg { background-color: #203646; + } .navbar-brand { color: #ffffff; padding-left: 100px; + border-right: 50px; font-family: 'Dancing Script', cursive; + } .nav-link { @@ -20,47 +24,51 @@ border-right: 100px; } + /*end navbar*/ /*cards*/ .card-deck { margin-top: 40px; + margin-bottom: 73px; } -/* -.card-img-top { - background-color: #564E52; - color: #564E52; -} -*/ -/* - hr { - border-bottom:2px dotted #000; - outline-offset: 2px; +.hr { + border-top: 1.5px dotted #cccccc; + padding: 1px 3px 0px 3px; + color: #ffffff; + background-color: #ffffff; + height: 1px; + width: 98%; + } -*/ - -/* -.hr:after { - border-bottom:1px dotted #000; - content:''; - left:0; - position:absolute; - bottom:-3px; - width:100%; + +.hr2 { + border-top: 1.5px dotted #cccccc; + padding: 1px 3px 0px 3px; + margin-left: 3px; + color: #ffffff; + background-color: #ffffff; + height: 1px; + width: 96.5%; + } -*/ + +/*end cards*/ .button{ - margin-top: 100px; - margin-bottom: 60px; + margin-top: 24px; + margin-bottom: 58px; margin-left: 30px; } -/*end cards*/ - .secondary-content { +/* end main-content */ + +/*footer*/ + + .footer-content { background-color: #274154; color: #ffffff; padding-right: 100px; @@ -101,14 +109,6 @@ border-color: #2a2d34; width: 225px; } -/* -button{ - background-color: rgb(90, 125, 153); - color: #fff; - width: 125px; - -} -*/ button { /*box-shadow: 0px 10px 14px -7px #276873;*/ @@ -134,9 +134,9 @@ button:active { top:1px; } -/*footer*/ - footer{ + +.footer-bottom { background-color: #203646; color: #ffffff; font-size: 20px; @@ -154,19 +154,20 @@ button:active { padding-left: 820px; margin-top: -20px; margin-right: 100px; - margin-left: -100px; + margin-left: 20px; } .fa { - padding: 10px; - font-size: 30px; - width: 40px; + padding: 1.5px; + font-size: 11px; + width: 25px; + height: 25px; text-align: center; text-decoration: none; - margin: 5px 2px; + margin: 3px 0px; } .fa:hover { From 573fac43265419af4f1f2af520621b8212dabcb6 Mon Sep 17 00:00:00 2001 From: Shelley McIntyre <73217296+SLMcIntyre@users.noreply.github.com> Date: Sun, 22 Nov 2020 16:57:03 -0500 Subject: [PATCH 08/14] added formatting for calendar and speech bubble icons at card bottom --- images/calendar-17-grey-icon.png | Bin 0 -> 573 bytes images/calendar-17-lightgrey-icon.png | Bin 0 -> 529 bytes images/speech-bubble-grey.png | Bin 0 -> 549 bytes index.html | 9 +++------ styles/styles.css | 18 ++++++++++++++++++ 5 files changed, 21 insertions(+), 6 deletions(-) create mode 100644 images/calendar-17-grey-icon.png create mode 100644 images/calendar-17-lightgrey-icon.png create mode 100644 images/speech-bubble-grey.png diff --git a/images/calendar-17-grey-icon.png b/images/calendar-17-grey-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..0c054c837b22dddbb23b28d5da8aab87e9a2fa2d GIT binary patch literal 573 zcmV-D0>b@?P)FKhG~|uj-{{Tfq9Go0P1Ucv;2&FYN_c+*;G@8q$IXn2Bj_1D5 z^Ld`<9u5Ym=KF7Jo_#au{iy!*;8Zz@#KjEvryGsN)SBbWYe*L1FhDt<+m=%Etwtdt z`~m3F-gf&=dd+d>Rk<-*_py}$xw$&&sMI_gbSLSmqv25_W?7IB!xcjP8dWWZKS=jO z08%0g7`ePzWntK~G5nbU#~>HBx{9^Z;eHdROcL5P(AMhuPc$iYPyIh$-QT3DQnmKH zfs2ayHk)_n0IJrW6P4?KCh)3!)m&jmT*LK|cU<00xdIdbY>92bfZk&pVn( zMBXdmBFOXJcqx}_01fy(b=}%`AjeXMXM<`*exp*}Eip0iGRjkJHZOskQ1FVb`(;O< zVX9Or#wZVf4k_~}$~zY5(Dbwm90!(Wv)NDo1k`G^QXuyMHJ#{b#saNuY+M6o5SELD z?8mV|W_>*bz5_pc-UG3_>E&zDy`=^pF zUiZ8+n~#B1efvb+pere)RoP@00000 LNkvXXu0mjfx)%s7 literal 0 HcmV?d00001 diff --git a/images/calendar-17-lightgrey-icon.png b/images/calendar-17-lightgrey-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..36cdaeb895ebe883ed473fdd837d5a0343c0396b GIT binary patch literal 529 zcmV+s0`C2ZP){Gv~SI%omJF zH}@Oe+`k^TJ}V!UTzh0%$uxZQNm{CgaL2?s-~d1~O>7wI=3Zq*#`2;g$NFX*UyBBk z%QNnNx)?1JSE?Z>8g%kUvMgH>Yyd@;Wd}>!nS!^1cEn&@!zn7!L)ZU#cI((ifmwN@ zWs~N=sJPvb?5b${JsN#P7nQABvxi6buSl|92&W`YV|-~Q$r?bG=O=}`_!m#{ayd;O z%`D1%cm*5-F!2^x`(4qkU^+2`?gN$#_i%Lfg6}|v)punZ(o)s6D2jIfR1>6%H>;Qfh{)ZtnjjTls0sj@ z0IDjTPG_kM@M8u50M5Au5!rXnJyq4T=Wl?B^k(qx0;uX~AXL?d&bimQ09Acn)m>Fz zjl$Jb`lfSkUuNs`iX5u^5 zA@}?JP2dSo`g&$H)dXX8yWMl%`wieSzYc#6I0QPt8ZZw>C#VFN0{$L2YmAwk&n)*K nSIuVgGY|(su>7|?{|)^FlQOMoG3#$~00000NkvXXu0mjfkA(Y} literal 0 HcmV?d00001 diff --git a/index.html b/index.html index cee8536..670a512 100644 --- a/index.html +++ b/index.html @@ -195,16 +195,13 @@

Ornare Elit Cursus Tellus

-
- View Article +
+ 25 december, 2011
- 49 + 49
- - -
diff --git a/styles/styles.css b/styles/styles.css index a6f694a..4e6067f 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -56,12 +56,30 @@ } +.card__info { + padding: 15px; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.8em; + +} + +.card__info i { + font-size: 0.9em; + margin-right: 8px; +} + /*end cards*/ .button{ margin-top: 24px; margin-bottom: 58px; margin-left: 30px; + width: 112px; + height: 31px; + padding: 3px 11px 5px 10px; + } /* end main-content */ From 2d842d3af5d4af3141364882d4fe2aae8900cab8 Mon Sep 17 00:00:00 2001 From: Shelley McIntyre <73217296+SLMcIntyre@users.noreply.github.com> Date: Sun, 22 Nov 2020 17:16:12 -0500 Subject: [PATCH 09/14] corrected formatted for icons at card bottom and applied to all of the cards --- index.html | 96 +++++++++++++++++++++++++++++++++++------------ styles/styles.css | 18 +++++---- 2 files changed, 82 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index 670a512..4c771a8 100644 --- a/index.html +++ b/index.html @@ -63,9 +63,15 @@

Ullamcorper Nibh Parturient

- - Last updated 3 mins ago - +
+
+ 25 december, 2011 +
+
+ 15 +
+
+
@@ -79,9 +85,15 @@

Condimentum Ultricies Ullamcorper

- - Last updated 3 mins ago - +
+
+ 25 december, 2011 +
+
+ 21 +
+
+
@@ -96,9 +108,15 @@

Nibh Fusce Parturient Tristique

- - Last updated 3 mins ago - +
+
+ 25 december, 2011 +
+
+ 23 +
+
+
@@ -112,9 +130,15 @@

Nullam Mattis Sit Tellus

- - Last updated 3 mins ago - +
+
+ 25 december, 2011 +
+
+ 13 +
+
+
@@ -128,9 +152,15 @@

Porta Condimentum Tellus

- - Last updated 3 mins ago - +
+
+ 25 december, 2011 +
+
+ 11 +
+
+
@@ -144,9 +174,15 @@

Consectetur Ligula Etiam

- - Last updated 3 mins ago - +
+
+ 25 december, 2011 +
+
+ 13 +
+
+
@@ -160,9 +196,15 @@

Tortor Pharetra Fermentum

- - Last updated 3 mins ago - +
+
+ 25 december, 2011 +
+
+ 17 +
+
+
@@ -176,8 +218,14 @@

Ligula Inceptos Cursus Sit

- - Last updated 3 mins ago +
+
+ 25 december, 2011 +
+
+ 11 +
+
@@ -201,7 +249,7 @@

Ornare Elit Cursus Tellus

49
- + diff --git a/styles/styles.css b/styles/styles.css index 4e6067f..a6e944b 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -31,18 +31,20 @@ .card-deck { margin-top: 40px; - margin-bottom: 73px; + margin-bottom: 73px; + } .hr { border-top: 1.5px dotted #cccccc; padding: 1px 3px 0px 3px; + margin-top: 20px; color: #ffffff; background-color: #ffffff; height: 1px; - width: 98%; - + width: 98%; + } .hr2 { @@ -52,23 +54,23 @@ color: #ffffff; background-color: #ffffff; height: 1px; - width: 96.5%; - + width: 96.5%; } .card__info { padding: 15px; + margin-right: 20px; + margin-left: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 0.8em; - } -.card__info i { +/*.card__info i { font-size: 0.9em; margin-right: 8px; -} +} */ /*end cards*/ From d553e63735dd20cf135d796070e55b3b2fe21764 Mon Sep 17 00:00:00 2001 From: Shelley McIntyre <73217296+SLMcIntyre@users.noreply.github.com> Date: Mon, 23 Nov 2020 01:17:23 -0500 Subject: [PATCH 10/14] added text & formatting in footer, corrected colors of card img placeholder, header & footer to match mockup --- images/twitter-icon-16px-lightgrey.png | Bin 0 -> 460 bytes images/twitter-icon-lightgrey.png | Bin 0 -> 709 bytes index.html | 73 ++++++++++++++++++++----- styles/styles.css | 64 ++++++++++++++++++---- 4 files changed, 114 insertions(+), 23 deletions(-) create mode 100644 images/twitter-icon-16px-lightgrey.png create mode 100644 images/twitter-icon-lightgrey.png diff --git a/images/twitter-icon-16px-lightgrey.png b/images/twitter-icon-16px-lightgrey.png new file mode 100644 index 0000000000000000000000000000000000000000..539ee8874b142b9723b8c44254333777867fcbd1 GIT binary patch literal 460 zcmV;-0WpEG;c1hc$%^R-qREK&*i1ESapB7_tHJ4t0{ z7qCfTXK8Fqm0m$a1q%zYR8kq6e6(V+@osjrS1gkIj!gp5y(?RYry6E>&Y2nbUvl?~ zyI2403!vT3=O!jTSt;z~s?0vvUa!}PR(v|>c5jtNSCXeV zcY%w*2xvZ9@mXj=F*a?qD8_(MIj_DSc2~133ukPr)v7rx4!G*FV%(CuE9)G6L0mZ< zo4m~Kyp@Fv;M^XUX$0JFdapaxo!vxNJAaFF`}fE{;gJ;eP}cvuyQ z`!;|zoBHYaGB7x-9qb1DHzFHP9pA$56cS6QoI(?jF2J!D%WP!cv%MiGyMV`Pmq1fxFw7L0000Kj$XJDsAq~qcwp>wu zyj(wM&k`X8=|gk`z<)|p9qQ3t&?YjGys&?Ip9Vi|3 rNs#ZT4vFYXG3IeB7W0Du{$2eBam?XUCvYC?00000NkvXXu0mjf>0Us) literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 4c771a8..9e219f0 100644 --- a/index.html +++ b/index.html @@ -54,7 +54,7 @@
- card image cap + card image cap

Ullamcorper Nibh Parturient

Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis Mollis, porttitor logula, eget lacinia odio sem nec elit.

@@ -76,7 +76,7 @@

Ullamcorper Nibh Parturient

- +

Condimentum Ultricies Ullamcorper

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur fermentum.

@@ -98,7 +98,7 @@

Condimentum Ultricies Ullamcorper

- +

Nibh Fusce Parturient Tristique

Nulla vitae libero, augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. @@ -121,7 +121,7 @@

Nibh Fusce Parturient Tristique

- +

Nullam Mattis Sit Tellus

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus auctor. Cras mattis consectetur puruamet fermentum.

@@ -143,7 +143,7 @@

Nullam Mattis Sit Tellus

- +

Porta Condimentum Tellus

Nulla vitae libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed

@@ -165,7 +165,7 @@

Porta Condimentum Tellus

- +

Consectetur Ligula Etiam

Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit.

@@ -187,7 +187,7 @@

Consectetur Ligula Etiam

- +

Tortor Pharetra Fermentum

Donec sed odio dui. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam ultricies vehicula ut id elit. Fusce cursus commodo.

@@ -209,7 +209,7 @@

Tortor Pharetra Fermentum

- +

Ligula Inceptos Cursus Sit

Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla consectetur. Donec sed odio duiamet fermentum. Donec Ullamcorper nulla non metus auctor fringilla.

@@ -231,7 +231,7 @@

Ligula Inceptos Cursus Sit

- +

Ornare Elit Cursus Tellus

Donec sed odio dui. Praesent commodo cursus magna, vel consectetur. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur eros.

@@ -268,19 +268,66 @@

Ornare Elit Cursus Tellus

POPULAR POSTS
+

Vivamus sagittis lacus vel augue laoreet rutrum dolor auctor.

+
+ 14 Nov, 2012 +
+
+
+
+
+ +

Scelerisque nisl consectetur et.

+
+ 22 May, 2012 +
+
+
+
+
+ +

Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce

+
+ 15 July, 2012 +
+ + +
TWITTER
+

+ Praesent commodo cursus magna Morbi leo risus nulla consectetur. - 21 hours ago

+
+
+
+
+
+
+ +

+ Vestibulum id ligula porta euismod semper. auctor dolor fermentum. - 2 days ago

+
+
+
+
+
+
+ +

+ Donec Ullamcorper nulla non metus auctor. - 3 days ago

+ + +
A LITTLE ABOUT ME
- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

-

Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.

- +

Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.

+
diff --git a/styles/styles.css b/styles/styles.css index a6e944b..d0e842c 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -7,7 +7,8 @@ .navbar-expand-lg { - background-color: #203646; + background-color: #3d3f42; + height: 94px; } @@ -16,12 +17,15 @@ padding-left: 100px; border-right: 50px; font-family: 'Dancing Script', cursive; + + } .nav-link { color: #ffffff; border-right: 100px; + } @@ -35,6 +39,10 @@ } +.card-img-top{ + color: #7f7f7f; +} + .hr { border-top: 1.5px dotted #cccccc; @@ -67,11 +75,6 @@ font-size: 0.8em; } -/*.card__info i { - font-size: 0.9em; - margin-right: 8px; -} */ - /*end cards*/ .button{ @@ -86,10 +89,13 @@ /* end main-content */ + + + /*footer*/ .footer-content { - background-color: #274154; + background-color: #3d3f42; color: #ffffff; padding-right: 100px; padding-bottom: 30px; @@ -102,9 +108,47 @@ padding-bottom: 18px; } + .footer-content-text { + color: #bfc0c0; + line-height: 175%; + + } + + .twitter-icon { + + width: 10px; + height: 8px; + padding-right: 10px; + size: 1px; +} + +.post-timeframe { + color: #a2d2ff; +} + + .footer-hr { + border-top: 1.5px dotted #505255; + padding: 1px 2px 0px 2px; + margin-top: 20px; + color: ##505255; + height: 1px; + width: 98%; + +} + +.footer-hr2 { + border-top: 1.5px dotted #505255; + padding: 1px 2px 0px 2px; + margin-bottom: 20px; + margin-left: 3px; + color: #505255; + height: 1px; + width: 96.5%; +} + + .input-container{ - padding-bottom: 8px; - + padding-bottom: 8px; } #input1 { @@ -157,7 +201,7 @@ button:active { .footer-bottom { - background-color: #203646; + background-color: #333538; color: #ffffff; font-size: 20px; padding-top: 20px; From 590e77427eebee87bdf00e9cc174fd25a1088c08 Mon Sep 17 00:00:00 2001 From: Shelley McIntyre <73217296+SLMcIntyre@users.noreply.github.com> Date: Mon, 23 Nov 2020 06:03:48 -0500 Subject: [PATCH 11/14] added blogpost page text --- blog-post.html | 249 +++++++++++++++++++++++++++++++++++++++++++--- index.html | 12 +-- styles/styles.css | 90 ++++++++++++++++- 3 files changed, 326 insertions(+), 25 deletions(-) diff --git a/blog-post.html b/blog-post.html index c0dcce1..cc45185 100644 --- a/blog-post.html +++ b/blog-post.html @@ -1,17 +1,238 @@ - - - - Document - - - - - - - - - - + + + + Document + + + + + + + + +
+ + + + +
+
+ + +
+ +
+
+
+
+

23

+

JAN

+
+

Ridiculus Mattis Lorem Dolor Inceptos

+
+
+
+
+ +
Posted by admin in Journal, Photography, Web Design
+ + + + +
+

Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Aenean leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes ridiculus. +

+ +

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. +

+ +

Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. +

+ +

Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+
+ +
+
+
+
+ + + + Read More +
+
+
+ + + + +
+ +

Popular Posts

+
+ Vestibum Malesuada Etiam Magna.

+
+ 22 Nov, 2012 + + +

Other Widgets

+
+

This is a PhotoShop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. +

+ +

+ Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. +

+ +
+
+
+ +
+
+ + + + + + + +
+
+
+
+
POPULAR POSTS
+

Vivamus sagittis lacus vel augue laoreet rutrum dolor auctor.

+
+ 14 Nov, 2012 +
+
+
+
+
+ +

Scelerisque nisl consectetur et.

+
+ 22 May, 2012 +
+
+
+
+
+ +

Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce

+
+ 15 July, 2012 +
+ + + +
+ +
+
TWITTER
+

+ Praesent commodo cursus magna Morbi leo risus nulla consectetur. - 21 hours ago

+
+
+
+
+
+
+ +

+ Vestibulum id ligula porta euismod semper. auctor dolor fermentum. - 2 days ago

+
+
+
+
+
+
+ +

+ Donec Ullamcorper nulla non metus auctor. - 3 days ago

+ +
+ +
+
A LITTLE ABOUT ME
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

+ +

Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.

+ +
+ +
+
+
CONTACT FORM
+
+ +
+
+ +
+
+ +
+ + + + +
+
+
+ +
+ ©2011 Ikaros. Theme by elemis. + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 9e219f0..2560def 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Document + Jkaros @@ -12,7 +12,7 @@ -
+
- - +
+
@@ -262,7 +262,7 @@

Ornare Elit Cursus Tellus

- +
@@ -343,7 +343,6 @@
CONTACT FORM
- @@ -365,6 +364,7 @@
CONTACT FORM
+ diff --git a/styles/styles.css b/styles/styles.css index d0e842c..57c6c7e 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1,11 +1,8 @@ -.main-content { - margin-right: 100px; - margin-left: 100px; -} /*navbar*/ + .navbar-expand-lg { background-color: #3d3f42; height: 94px; @@ -31,6 +28,67 @@ /*end navbar*/ +.main-content { + margin-right: 100px; + margin-left: 100px; +} + +.primary-content{ + height:1000%; + padding-top: 30px; + padding: 1px 16px; + margin-top: 0px; + margin-left: 200px; + width: 640px; +} + + +.date { + float: left; + width: 75px; height: 75px; + background: #ececec; + border: 1px solid #d2d2d2; + border-radius: 360px; + padding-top: 10px; + margin-right: 11px; + text-align: center; + line-height: 80%; + font-family: "Montserrat", sans-serif; + font-size: 20px; +} + +h3 { + margin-bottom: + +} + +.article-content { + padding-top: 20px; + line-height: 150%; +} + +.hr3 { + border-top: 1.5px dotted #cccccc; + padding: 1px 3px 0px 3px; + margin-right: 30px; + margin-top: 20px; + color: #ffffff; + background-color: #ffffff; + height: 1px; + width: 98%; + +} + +.hr4 { + border-top: 1.5px dotted #cccccc; + padding: 1px 3px 0px 3px; + margin-left: 3px; + color: #ffffff; + background-color: #ffffff; + height: 1px; + width: 96.5%; +} + /*cards*/ .card-deck { @@ -87,6 +145,28 @@ } +.sidebar{ + + float:right; + background-color: #f5f5f5; + padding-top: 30px; + padding-bottom: 200px; + margin-top: 0px; + width: 200px; + position: fixed; + height: 100%; + overflow: auto; +} + + ul{ + list-style-type: none; + padding-bottom: 30px; + } + + li{ + display:block; + } + /* end main-content */ @@ -130,7 +210,7 @@ border-top: 1.5px dotted #505255; padding: 1px 2px 0px 2px; margin-top: 20px; - color: ##505255; + color: #505255; height: 1px; width: 98%; From 70a1c6ff8e6be497696a1b918694f7aed006ce3a Mon Sep 17 00:00:00 2001 From: Shelley McIntyre <73217296+SLMcIntyre@users.noreply.github.com> Date: Mon, 23 Nov 2020 06:13:13 -0500 Subject: [PATCH 12/14] updated margins --- styles/styles.css | 50 +++++------------------------------------------ 1 file changed, 5 insertions(+), 45 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 57c6c7e..ac4ccb2 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -34,12 +34,10 @@ } .primary-content{ - height:1000%; + height:100%; padding-top: 30px; - padding: 1px 16px; margin-top: 0px; - margin-left: 200px; - width: 640px; + margin-left: 100px; } @@ -49,46 +47,12 @@ background: #ececec; border: 1px solid #d2d2d2; border-radius: 360px; - padding-top: 10px; - margin-right: 11px; + padding: 0px; text-align: center; - line-height: 80%; - font-family: "Montserrat", sans-serif; + font-family: "Montserrat sans-serif; font-size: 20px; } -h3 { - margin-bottom: - -} - -.article-content { - padding-top: 20px; - line-height: 150%; -} - -.hr3 { - border-top: 1.5px dotted #cccccc; - padding: 1px 3px 0px 3px; - margin-right: 30px; - margin-top: 20px; - color: #ffffff; - background-color: #ffffff; - height: 1px; - width: 98%; - -} - -.hr4 { - border-top: 1.5px dotted #cccccc; - padding: 1px 3px 0px 3px; - margin-left: 3px; - color: #ffffff; - background-color: #ffffff; - height: 1px; - width: 96.5%; -} - /*cards*/ .card-deck { @@ -147,15 +111,11 @@ h3 { .sidebar{ - float:right; + height:100%; background-color: #f5f5f5; padding-top: 30px; padding-bottom: 200px; margin-top: 0px; - width: 200px; - position: fixed; - height: 100%; - overflow: auto; } ul{ From ec4d06c0310c6a4f73bc70c976e893e333e4d9bf Mon Sep 17 00:00:00 2001 From: Shelley McIntyre <73217296+SLMcIntyre@users.noreply.github.com> Date: Tue, 24 Nov 2020 08:33:21 -0500 Subject: [PATCH 13/14] corrected margins & forms on blog post page --- blog-post.html | 149 +++++++++++++++++------ styles/styles.css | 294 +++++++++++++++++++++++++++++++++++++++------- 2 files changed, 361 insertions(+), 82 deletions(-) diff --git a/blog-post.html b/blog-post.html index cc45185..83a8b02 100644 --- a/blog-post.html +++ b/blog-post.html @@ -53,67 +53,138 @@
-
-
-

23

-

JAN

+ +
+ +
+

23

+

JAN

+
+

Ridiculus Mattis Lorem Dolor Inceptos

+
-

Ridiculus Mattis Lorem Dolor Inceptos

-
-
-
-
- -
Posted by admin in Journal, Photography, Web Design
- +
+
+

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

+ + - + -
-

Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Aenean leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes ridiculus. -

+
+

Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Aenean leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes ridiculus. +

-

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. -

+

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. +

-

Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. -

+

Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. +

-

Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-
+

Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+
-
-
-
-
+
+
+
+
+ +
+
+
Related Posts
+ placeholder image placeholder image placeholder image placeholder image + +
+
+
+
+
+
+
- Read More -
-
-
+ + + + +
+
Submit a Comment
+

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

+
+ +
+
+ +
+
+ +
+
+ +
+ + + +
+ +
+
+
+
+ -

Popular Posts

+
POPULAR POSTS
- Vestibum Malesuada Etiam Magna.

-
- 22 Nov, 2012 + dummyimage +

Vestibum Malesuada Etiam Magna

+ 22 Nov, 2012 + +
+ dummyimage +

Mattis Egestas Fringilla Consectetur

+ 15 Nov, 2012 + +
+ dummyimage +

Justo Lorem Fermentum Ultricies Pharetra

+ 12 Nov, 2012 +
+
+
+
+ + + + +
+
SEARCH
+
+ +
+ -

Other Widgets

-
-

This is a PhotoShop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. + +

+
+
+
+ + + +
CUSTOM TEXT
+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

- Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. + Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Fusce mauris condimentum.

diff --git a/styles/styles.css b/styles/styles.css index ac4ccb2..81d87fb 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -14,15 +14,11 @@ padding-left: 100px; border-right: 50px; font-family: 'Dancing Script', cursive; - - - } .nav-link { color: #ffffff; - border-right: 100px; - + border-right: 100px; } @@ -33,32 +29,12 @@ margin-left: 100px; } -.primary-content{ - height:100%; - padding-top: 30px; - margin-top: 0px; - margin-left: 100px; -} - - -.date { - float: left; - width: 75px; height: 75px; - background: #ececec; - border: 1px solid #d2d2d2; - border-radius: 360px; - padding: 0px; - text-align: center; - font-family: "Montserrat sans-serif; - font-size: 20px; -} /*cards*/ .card-deck { margin-top: 40px; margin-bottom: 73px; - } .card-img-top{ @@ -109,24 +85,6 @@ } -.sidebar{ - - height:100%; - background-color: #f5f5f5; - padding-top: 30px; - padding-bottom: 200px; - margin-top: 0px; -} - - ul{ - list-style-type: none; - padding-bottom: 30px; - } - - li{ - display:block; - } - /* end main-content */ @@ -134,6 +92,10 @@ /*footer*/ +footer { + clear: both; +} + .footer-content { background-color: #3d3f42; color: #ffffff; @@ -312,3 +274,249 @@ button:active { /*end footer*/ + + +/* Blog Page Custom CSS*/ + +.primary-content{ + height:100%; + padding-top: 30px; + margin-top: 0px; + margin-left: 100px; + +} + +.container-fluid { + position: relative; +} + +.date { + float: left; + width: 75px; height: 75px; + background: #ececec; + border: 1px solid #d2d2d2; + border-radius: 360px; + padding: 0px; + text-align: center; + font-family: "Montserrat" sans-serif; + /* font-size: 25px; */ +} + +.date-1 { + font-size: 30px; + margin-bottom: 0px; + +} + +.date-2 { + font-size: 20px; + margin-top: 0px; + +} + +.hr3 { + border-top: 1.5px dotted #cccccc; + padding: 1px 3px 0px 3px; + margin-left: 20px; + color: #ffffff; + background-color: #ffffff; + height: 1px; + width: 80%; + +} + +.hr4 { + border-top: 1.5px dotted #cccccc; + padding: 1px 3px 0px 3px; + margin-left: 20px; + color: #ffffff; + background-color: #ffffff; + height: 1px; + width: 79%; +} + + +.article-content{ + width: 640px; + +} + +.hr5 { + border-top: 1.5px dotted #cccccc; + padding: 1px 3px 0px 3px; + margin-left: 0px; + color: #ffffff; + background-color: #ffffff; + height: 1px; + width: 640px; + +} + +.hr6 { + border-top: 1.5px dotted #cccccc; + padding: 1px 3px 0px 3px; + margin-left: 1px; + color: #ffffff; + background-color: #ffffff; + height: 1px; + width: 638px +} + +section { + align: justify-content; + +} + +.hr7 { + border-top: 1.5px dotted #cccccc; + padding: 1x 3px 3px 3px; + margin-bottom: 1px; + margin-left: 0px; + color: #ffffff; + background-color: #ffffff; + height: 1px; + width: 640px; + +} + +.hr8 { + border-top: 1.5px dotted #cccccc; + padding: 1px 3px 3px 3px; + margin-left: 1px; + color: #ffffff; + background-color: #ffffff; + height: 1px; + width: 638px +} + + +#name { + background-color: #f7f7f7; + border: 1px solid #E1E1E1; + border-top: 0px; + border-left: 0px; + height: 37px; + width: 640px; +} + +#email { + background-color: #f7f7f7; + border: 1px solid #E1E1E1; + border-top: 0px; + border-left: 0px; + margin-top: 16px; + height: 37px; + width: 640px; + } + + #website { + background-color: #f7f7f7; + border: 1px solid #E1E1E1; + border-top: 0px; + border-left: 0px; + margin-top: 16px; + height: 37px; + width: 640px; + } + + #text2 { + background-color: #f7f7f7; + border: 1px solid #E1E1E1; + margin-top: 16px; + width: 640px; +} + +#submit-button-2 { + /*box-shadow: 0px 10px 14px -7px #276873;*/ + background:linear-gradient(to bottom, #75b3c9 5%, #408c99 100%); + background-color:#75b3c9; + border-radius:3px; + border-color: #75b3c9; + display:inline-block; + cursor:pointer; + color:#ffffff; + font-family:Verdana; + font-size:15px; + margin-top: 16px; + margin-bottom: 50px; + padding: 3px 20px 3px; + width: 112px; + height: 31px; + text-decoration:none; + text-shadow:0px 1px 0px #3d768a; +} +button:hover { + background:linear-gradient(to bottom, #408c99 5%, #75b3c9 100%); + background-color:#408c99; +} +button:active { + position:relative; + top:1px; +} + + +.vl { + border-left: 1.5px dotted #cccccc; + height: 840px; + width: 98%; + position: absolute; + padding: 1px 0px 0px 0px; + margin-top: 20px; + margin-right: 100px; + margin-left: -45px; + color: #ffffff; + float: right; + +} + +.vl2 { + border-left: 1.5px dotted #cccccc; + height: 840px; + width: 96.5%; + position: absolute; + padding: 1px 0px 0px 0px; + margin-top: 20px; + margin-right: 100px; + margin-left: -50px; + color: #ffffff; + float: right; + +} + + +.sidebar{ + float: right; + height:100%; + width: 262px; + padding-right: -5px; + padding-bottom: 200px; + margin-top: -1425px; + margin-right: -200px; + margin-left: 100px; + + + +} + +.sidebar-content-text { + display: block; + margin-top: 15px; + width: 262px; +} + +.sidebar-img { + float: left; + margin-right: 13px; + +} + +#searchbar { + height: 35px; + width: 262px; + background-color: #f7f7f7; + border: 1px solid #E1E1E1; +} + + + +/* End Blog Page */ \ No newline at end of file From 8626b21c4cf881c939450d40abaa37e39c1373ac Mon Sep 17 00:00:00 2001 From: Shelley McIntyre <73217296+SLMcIntyre@users.noreply.github.com> Date: Wed, 25 Nov 2020 08:35:34 -0500 Subject: [PATCH 14/14] updated formatting of article header and comment section --- blog-post.html | 67 +++++++++++++++++++++-------- styles/styles.css | 107 +++++++++++++++++++++++++++++++++++++++------- 2 files changed, 140 insertions(+), 34 deletions(-) diff --git a/blog-post.html b/blog-post.html index 83a8b02..a085792 100644 --- a/blog-post.html +++ b/blog-post.html @@ -3,19 +3,21 @@ - Document + Ridiculus Mattis Lorem Dolor Inceptos - + + +