From 5c553f64421caea65a05913f7729552c3307ea61 Mon Sep 17 00:00:00 2001 From: Kalyn Smith Date: Sun, 15 Nov 2020 23:20:47 -0500 Subject: [PATCH] Completed CSS-Mock --- blog-post.html | 229 ++++++++++++++++ images/Dots-Horizontal.png | Bin 0 -> 1270 bytes blog-post.png => images/blog-post.png | Bin blog.png => images/blog.png | Bin index.html | 277 +++++++++++++++++++ style/styles.css | 373 ++++++++++++++++++++++++++ 6 files changed, 879 insertions(+) create mode 100644 blog-post.html create mode 100644 images/Dots-Horizontal.png rename blog-post.png => images/blog-post.png (100%) rename blog.png => images/blog.png (100%) create mode 100644 index.html create mode 100644 style/styles.css diff --git a/blog-post.html b/blog-post.html new file mode 100644 index 0000000..7763dd3 --- /dev/null +++ b/blog-post.html @@ -0,0 +1,229 @@ + + + + + + + + + + + + +
+ +
+ + +
+ +
+
+
+
+
23 JAN


+

Pellentesque euismod libero nulla

+ dots
+

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

+
+
+
+
+
+
+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod libero nulla, eu laoreet sapien ultricies a. Aliquam erat volutpat. Mauris quis magna ultricies, tempus velit at, dapibus orci. Nulla massa neque, hendrerit ultricies turpis sed, euismod pretium risus. Curabitur luctus, turpis quis tristique mattis, arcu nisl accumsan lectus, non vulputate eros nisl ac tellus. Aenean porttitor arcu mi, sit amet interdum ligula euismod ut.


+

Nam ac erat quis lorem commodo bibendum. In hac habitasse platea dictumst. Quisque quis nibh ac orci placerat consequat vestibulum non tortor.


+
+

Phasellus vehicula augue sed velit vehicula gravida. Pellentesque eget ante eget sem suscipit sodales. Nunc feugiat, est non dignissim tristique, neque lacus vulputate nulla, hendrerit dignissim elit augue rhoncus mi. Cras scelerisque ultrices condimentum.


+
+

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.


+ dots +
+ +

Related Posts

+
+
+
+ Placeholder +
+
+
+
+ Placeholder +
+
+
+
+ Placeholder +
+
+
+
+ Placeholder +
+
+
+ dots +
+ +

2 Responses to "Pellentesque euismod libero nulla"

+
+
+
+ Placeholder +
+
+
+

Barney Stinson

+

Vestibulum placerat tempus mauris.

+

+

+
+
+
+ Placeholder +
+
+
+

Ted Evelyn Mosby

+

Duis nec fringilla nulla.

+
+
+ dots + +
+

Submit a Comment

+

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

+
+
+ +

+
+ +

+
+ +

+ +
+ +
+
+
+
+
+ + + + + + diff --git a/images/Dots-Horizontal.png b/images/Dots-Horizontal.png new file mode 100644 index 0000000000000000000000000000000000000000..2a7790afe06d3bc546c1c0534e8b4a7bc7c3ca23 GIT binary patch literal 1270 zcmeAS@N?(olHy`uVBq!ia0y~yU`YkCy*b!`p6p%Mdr6&uI_P6(4 z`tP=$J{~o7XNJ*gJ%gIr>leRoT|R01%&E&)*`=mEefYCH(6$i6 zW|v!*NiEwdGvh+Yf@KqKshXR#Fpq}d41`d7cRozs_H&E%``!k4X_zJGnPEe+N# zZOhbUx4Q5D{Qkf1mL>nd;u(ip>#FAzER3Hl?UQG)bD`PgEz@rK08=fO)p}qkO<(z0 z%_KB!)`b+O;MV_E`y$Rtl!KbLh*2~7Yc C& + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+ Placeholder +
+

Morbi quis congue enim

+

Vestibulum velit tortor, pellentesque nec mattis vitae, bibendum non augue.Donec quis purus ac orci sodales ultricies interdum vitae velit.

+ dots +
+ + + + + 17 January, 2012 + 15 +
+
+
+
+
+
+ Placeholder +
+

Proin est risus

+

Vestibulum velit tortor, pellentesque nec mattis vitae, bibendum non augue.Aenean sit amet justo quis sapien venenatis consequat nec sed nisi.

+ dots +
+ + + + + 15 January, 2012 + 21 +
+
+
+
+
+
+ Placeholder +
+

Aliquam erat volutpat

+

Suspendisse fermentum elit ut neque porta, vitae tempus urna pharetra. In vel nulla tincidunt libero vehicula viverra vel et est.

+ dots +
+ + + + + 11 January, 2012 + 23 +
+
+
+
+
+
+ Placeholder +
+

Vestibulum tincidunt nec

+

Donec magna ante, semper eget elementum ac, dapibus a ligula. Nam blandit turpis ac accumsan vehicula. Praesent dui sem, auctor a fringilla at.

+ dots +
+ + + + + 09 January, 2012 + 13 +
+
+
+
+
+
+ Placeholder +
+

Dictum consectetur nisl

+

Aenean eu ex at tortor blandit hendrerit. Quisque commodo lacus at velit porttitor congue. Praesent dui sem, auctor a fringilla at.

+ dots +
+ + + + + 05 January, 2012 + 11 +
+
+
+
+
+
+ Placeholder +
+

Etiam ut porta metus

+

Phasellus id mollis augue. Praesent dui sem, auctor a fringilla at, blandit ac ex. In vel nulla tincidunt libero vehicula viverra vel et est.

+ dots +
+ + + + + 03 January, 2012 + 13 +
+
+
+
+
+
+ Placeholder +
+

Hac habitasse platea

+

Suspendisse potenti. Mauris aliquam finibus ligula, cursus vulputate eros pharetra non. Praesent dui sem, auctor a fringilla at.

+ dots +
+ + + + + 01 January, 2012 + 17 +
+
+
+
+
+
+ Placeholder +
+

Curabitur nisl libero

+

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec tortor lectus, posuere vel placerat in, dapibus quis eros.

+ dots +
+ + + + + 29 December, 2011 + 11 +
+
+
+
+
+
+ Placeholder +
+

Erat id feugiat venenatis

+

Fusce dictum libero eu nibh lobortis rutrum. Vivamus cursus quam id ligula dictum, et dignissim mi condimentum. In nulla tincidunt libero vehicula viverra est.

+ dots +
+ + + + + 25 December, 2011 + 49 +
+
+
+
+
+
+ dots +
+
+ +
+
+
+
+
+ +
+
+
+
+
+
POPULAR POSTS
+

Sed gravida urna et purus dapibus, et accumsan massa feugiat.
14 Nov, 2012

+

Ut tristique pharetra orci, ac sollicitudin mauris tempor vitae.
22 May, 2012

+

Vivamus suscipit est vel urna dictum sodales.

+
+
+
TWITTER
+

Curabitur luctus erat nec arcu pellentesque convallis. -21 hours ago

+

Cras gravida fermentum ante, in egestas lacus accumsan vitae. -2 days ago

+

Pellentesque magna lacus, pellentesque at pretium pretium, maximus eu lectus. -3 days ago


+
+
+
A LITTLE ABOUT ME
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vitae sem posuere mattis ac in eros. Etiam ullamcorper malesuada erat, luctus pulvinar purus ultrices id. Morbi porttitor ex sit amet facilisis lacinia.

+

Mauris rutrum consectetur luctus. Morbi ut convallis mauris, vel eleifend tellus. Nunc sapien augue, tristique sit amet aliquam ac, euismod at nisl. Vivamus vel purus et lorem dictum pharetra vitae eu lectus.

+
+
+
CONTACT FORM
+
+ +

+
+ +

+
+ +
+
+
+
+
+
© 2011 Ikaros. Theme by elemis.
+ + + + + + +
+
+ + + + diff --git a/style/styles.css b/style/styles.css new file mode 100644 index 0000000..d139c92 --- /dev/null +++ b/style/styles.css @@ -0,0 +1,373 @@ +.navbar .navbar-brand { + font-size: 2rem; + padding: auto; + font-family:cursive; + margin-left:175px; +} + +.card-text { + font: bold; +} +.card-body { + background-color: rgb(240, 238, 238); + height: 150px; + width:50; +} + + + +.card-body-index { + background-color: rgb(240, 238, 238); + height: 230px; + width:60; + display: auto; + padding-top: 5%; + padding-right: 5%; + padding-bottom:10%; + padding-left: 5%; + +} + + +/*Gray box at top*/ +.jumbotron { + background: no-repeat center center; + height:300px; + width: 620px; + padding-top: 20%; + padding-bottom: 20%; +} + + +.segment-one h5{ + font-family: courgette; + color:#fff; + letter-spacing:2px; + margin: 10px 0; +} +.segment-two h5{ +font-family: courgette; + +} +.segment-three h5{ +font-family: courgette; +} +.segment-four h5{ +font-family: courgette; + +} + + + +#box-1{ +background-color: #27292b; + +} +#box-2{ +background-color: #27292b; + +} +#box-3{ +background-color: #27292b; + +} + + + + +/* Number next to title*/ +.numberCircle { +width: 110px; +line-height: 100px; +border-radius: 50%; +text-align: center; +font-size: 20px; +border: 1px solid #dcdcdc; +float: left; +background-color: #dcdcdc; +} + + + +/*Footer*/ + .jumbotron { + padding-top: 3rem; + padding-bottom: 3rem; + margin-bottom: 0; + background-color: #fff; + } + @media (min-width: 768px) { + .jumbotron { + padding-top: 6rem; + padding-bottom: 6rem; + } + } + .jumbotron p:last-child { + margin-bottom: 0; + } + .jumbotron h1 { + font-weight: 300; + } + .jumbotron .container { + max-width: 40rem; + } + + h5,h5{ color:#fff}; +h5{ font-size: 18px; + +} +.footer-top{ +background: #3a3d40; +padding: 40px 0; +} +p{ +color:#626466; +} +.footer-bottom { +background-color: #2f3235; +height: 200px; +} + + + /* Hover */ +.fa:hover { + opacity: 0.7;} + + + /* icons */ + /* Facebook */ + .fa-facebook { + background-color: #3B5998; + color: white; + height:50px; + width:50px; + + } + /* Twitter */ + .fa-twitter { + background-color: #55ACEE; + color: white; + height:50px; + width:50px; + + } + + /* RSS */ + .fa-rss { + background-color: #EB700B; + color: white; + height:50px; + width:50px; + + } + + /* Pintrest*/ + .fa-pinterest { + background-color: #EB0B0B; + color: white; + height:50px; + width:50px; + + } + + /* Linkedin */ + .fa-linkedin { + background-color: #0B6EF0; + color: white; + height:50px; + width:50px; + margin-right:130px; + } + + /*Dribble*/ + .fa-dribbble { + background-color: #F70389; + color: white; + height:50px; + width:50px; + } + +/* stylelint-disable selector-list-comma-newline-after */ + +.blog-header { + line-height: 1; + border-bottom: 1px solid #e5e5e5; +} + +.blog-header-logo { + font-family: "Playfair Display", Georgia, "Times New Roman", serif; + font-size: 2.25rem; +} + +.blog-header-logo:hover { + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Playfair Display", Georgia, "Times New Roman", serif; +} + +.display-4 { + font-size: 2.5rem; +} +@media (min-width: 768px) { + .display-4 { + font-size: 3rem; + } +} + +.nav-scroller .nav-link { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: .875rem; +} + +.card-img-right { + height: 100%; + border-radius: 0 3px 3px 0; +} + +.flex-auto { + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} + +.h-250 { height: 250px; } +@media (min-width: 768px) { + .h-md-250 { height: 250px; } +} + + +/*Blog posts*/ +.blog-post { + margin-bottom: 4rem; +} +.blog-post-title { + margin-bottom: .25rem; + font-size: 2.5rem; +} +.blog-post-meta { + margin-bottom: 1.25rem; + color: #999; + +} + + +/* Blocks */ +#post-one{ + display: inline-block; + +} +#post-two{ + float:right; +} +#post-three{ + float:right; +} +#post-four{ + float:left; +} + + +/* Respond boxes*/ +#respond-one{ + float: left; + +} +#respond-two{ + display: inline-flex; + margin-left:75px; + +} + +/*side bar*/ +.sidebar{ + background:white; + padding:20px; + border-radius:5px; + +} +#sidebar{ + float: right; + width:400px; + margin-left: 10px; + margin-right: 70px; + padding-top: 50px; +} +#main-content{ + width:900px; + +} + + + +/*side boxes*/ +p { + margin: 0; +} +.blog-card { + height: 10rem; + width: 15rem; + display: flex; + +} +.blog-card__image { + height:50%; + width:50%; + background-color:#2f3235; + margin-right:.5rem; +} + + + +/*Bootstrap core CSS*/ +.bd-placeholder-img { + font-size: 1.125rem; + text-anchor: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +@media (min-width: 768px) { + .bd-placeholder-img-lg { + font-size: 3.5rem; + }} + +/*Vertical Line*/ + .vl { + border-left: 3px dotted lightgray; + height: 1000px; + position: absolute; + left: 50%; + margin-left: 200px; + margin-top: 60px + } + + + +/*Lines between words in navbar*/ + ul { + list-style:none; + } + ul li{ + display:inline-block; + padding:0 7px; + position:relative; + } + ul li:not(:last-child)::after{ + content:""; + border:1px solid #2f3235; + border-width: 1px 1px 0 0; + position:absolute; + right:-3px; + top:0; + height:100%; + } + + /*Elemis in footer bottom*/ + .copy{ + margin-left:120px; + color:#626466; + padding-top:50px; + }