diff --git a/blog-post.html b/blog-post.html new file mode 100644 index 0000000..6d2a070 --- /dev/null +++ b/blog-post.html @@ -0,0 +1,280 @@ + + + + + + + + + + Blog Post + + + +
+ +
+ +
+ + + +
+
+
+
+ +

Ridiculus Mattis Lorem Dolor Inceptos

+
+

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

+ + grey box + +

Maecanas faucivus mollis interdum. Aenean lacinia vivendum 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, apharetra augue. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Enteger 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 vivendum 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

+ grey box + grey box + grey box + grey box +
+ + +
+ + +
+

2 Responses to "Ridiculus Mattis Lorem Dolor Inceptos"

+ + +
+ User Image +
+
+
Barney Stinson
+

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

+
+ + +
+ + User Image + +
+
+
Ted Evelyn Mosby
+

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.

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

Popular Posts

+ + + pop post image +
+ Vestibum Malesuada Etiam Magna
+ 22 Nov, 2012 +
+ + pop post image +
+ Mattis Egestas Fringilla Consectetur
+ 15 Nov, 2012 +
+ + pop post image +
+ Justo Lorem Fermentum Ultricies Pharetra
+ 12 Nov, 2012 +
+ +
+ + + + + + + +
+

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.

+ Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Fusce mauris condimentum.

+
+ +
+
+
+
+ + +
+
+

Submit a Comment

+

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

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+ + +
+ +
+
+
+
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
+

Twitter Icon Praesent commodo cursus magna Morbi leo risus nulla consectetur.

- 21 hours ago + +
+ +

Twitter Icon Vestibulum id ligula porta euismod semper. auctor dolor fermentum.

- 2 days ago + +
+ +

Twitter Icon 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
+
+ +
+
+ +
+
+ +
+ +
+
+
+
+
+ + + +
+ + + + + + \ No newline at end of file diff --git a/images/Ikaros.png b/images/Ikaros.png new file mode 100644 index 0000000..a34de8f Binary files /dev/null and b/images/Ikaros.png differ diff --git a/images/articleDate.png b/images/articleDate.png new file mode 100644 index 0000000..9c39b71 Binary files /dev/null and b/images/articleDate.png differ 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/images/greyBox.png b/images/greyBox.png new file mode 100644 index 0000000..c540254 Binary files /dev/null and b/images/greyBox.png differ diff --git a/images/twitterIcon.png b/images/twitterIcon.png new file mode 100644 index 0000000..9e5e217 Binary files /dev/null and b/images/twitterIcon.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..8581b81 --- /dev/null +++ b/index.html @@ -0,0 +1,336 @@ + + + + + + + + + Ikaros Blog + + + +
+ +
+ + +
+ + +
+
+
+
+
+ +
+ grey box +
+
Ullacorper Nibh Parturient
+

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

+
+
+ + + + 17 January, 2012 +
+ + + 15 +
+
+
+
+ + +
+ grey box +
+
Nullam Mattis Sit Tellus
+

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

+
+
+ + + + 09 January, 2012 +
+ + + 13 +
+
+
+
+ + +
+ grey box +
+
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.

+
+
+ + + + 01 January, 2012 +
+ + + 17 +
+
+
+
+
+ + +
+ +
+ grey box +
+
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.

+
+
+ + + + 15 January, 2012 +
+ + + 21 +
+
+
+
+ + +
+ grey box +
+
Porta Condimentum Tellus
+

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

+
+
+ + + + 05 January, 2012 +
+ + + 11 +
+
+
+
+ + +
+ grey box +
+
Ligula Inceptos Cursus Sit
+

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

+
+
+ + + + 29 December, 2011 +
+ + + 11 +
+
+
+
+ +
+ +
+ +
+ grey box +
+
Nibh Fusce Parturient Tristique
+

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

+
+
+ + + + 11 January, 2012 +
+ + + 23 +
+
+
+
+ + +
+ grey box +
+
Consectetur Ligula Etiam
+

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

+
+
+ + + + 03 January, 2012 +
+ + + 13 +
+
+
+
+ + +
+ grey box +
+
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.

+
+
+ + + + 25 december, 2011 +
+ + + 49 +
+
+
+
+ +
+
+
+ + + +
+
+ +
+ +
+
+
+
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
+

Twitter Icon Praesent commodo cursus magna Morbi leo risus nulla consectetur.

- 21 hours ago + +
+ +

Twitter Icon Vestibulum id ligula porta euismod semper. auctor dolor fermentum.

- 2 days ago + +
+ +

Twitter Icon 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
+
+ +
+
+ +
+
+ +
+ +
+
+
+
+
+ + +
+ + + + + \ No newline at end of file diff --git a/styles/blogPostCSS.css b/styles/blogPostCSS.css new file mode 100644 index 0000000..d9c9c62 --- /dev/null +++ b/styles/blogPostCSS.css @@ -0,0 +1,188 @@ +#articleDate { + float: left; +} + +#blogImage { + margin-top: 5px; + margin-bottom: 20px; +} + +#articleTitle { + font-size: 20px; + font-weight: bold; + margin-bottom: -10px; + color: #555555ff; +} + +#sideBar { + float: right; +} + +.relPostsIMG { + width: 167px; + height: 110px; + margin-right: 12px; + margin-bottom: 40px; +} + +#artDateIMG { + float: left; + margin-right: 10px; +} + +#postedBy { + font-size: 13px; + margin-top: -10px; + color: grey; +} + +#blogIMG { + width: 710px; + height: 270px; + margin: 20px 0px 20px 0px; +} + + +.artText { + font-size: 15px; + color: #555555ff; +} + +#headingBtmBrk { + border-top: 1px dotted #9999; + border-bottom: 1px dotted #9999; + +} + +#articleBtmBrk { + border-top: 1px dotted #9999; + border-bottom: 1px dotted #9999; + margin-top: 40px; + margin-bottom: 40px; +} + +#relatedPostsTxt { + font-size: 16px; + font-weight: bold; + margin-bottom: 20px; + color: #555555ff; + +} + +#relatedPostsBrk { + border-top: 1px dotted #9999; + border-bottom: 1px dotted #9999; + margin-bottom: 40px; +} + +#responsesTitle { + font-size: 16px; + font-weight: bold; + margin-bottom: 20px; + color: #555555ff; +} + +#responsesBrk { + border-top: 1px dotted #9999; + border-bottom: 1px dotted #9999; + margin-bottom: 40px; + margin-top: 40px; + +} + +.commentIMGs { + width: 70px; + height: 70px; +} + +.commentTxt { + font-size: 14px; + color: #555555ff; +} + +#card1 { + border: solid 1px; + background-color: #f7f7f7ff; + border-color: #e1e1e1ff; + padding: 20px 20px 20px 20px; + color: #555555ff; +} + +#article { + border-right: dotted 1px #9999; + padding-right: 20px; + color: color: #555555ff; +} + +#rightPopPostTtl { + color: #555555ff; +} + +.popPostsIMG { + width: 70px; + height: 70px; + margin: 15px 12px 15px 0px; +} + +.popPostTxt { + font-size: 12px; + color: #555555ff; +} + +.popPostTxt::after{ + content: "\a"; +} + +.popPostDates { + font-size: 8px; + +} + +#searchBar{ + border-top: dotted 1px #9999; + border-bottom: dotted 1px #9999; + padding: 40px 0px 40px 0px; + +} + +#searchTxt { + font-weight: bold; + font-size: 14px; + color: #555555ff; +} + +#search { + background-color: #f7f7f7ff; + border-color: #e1e1e1ff; + width: 260px; + height: 35px; + border-width: 1px; +} + +#customTextBox { + padding-top: 40px; +} + +#customTitle { + font-size: 14px; + font-size: bold; + color: #555555ff; +} + +.customTitleTxt { + font-size: 14px; + color: #555555ff; + +} + +#subCommentTtl { + color: #555555ff; +} + +#subCommentTtl, p { + color: #555555ff; +} + + + + diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..a73848d --- /dev/null +++ b/styles/style.css @@ -0,0 +1,261 @@ +.naviBorder { + border-right: 1px solid #2d3032ff; + padding-left: 20px; + padding-right: 20px; +} + +.card-text { + color: #555555ff; +} + +.card-title { + color: #555555ff; +} + +.cardFootProps { + background-color: rgb(255, 255, 255); + color: #9999; + +} + +.hrInCards { + border-top: 1px dotted #9999; + border-bottom: 1px dotted #9999; +} + +#artOneImg { + height: 200px; +} + +#artTwoImg { + height: 205px; +} + +#artThreeImg { + height: 200px; +} + +#artFourImg { + height: 220px; +} + +#artFiveImg { + height: 191px; +} + +#artSixImg { + height: 230px; +} + +#artSevenImg { + height: 190px; +} + +#artEightImg { + height: 200px; +} + +#artNineImg { + height: 220px; +} + +.btn-primary { + text-decoration-color: white; +} + +#hrBlog { + margin-bottom: 20px; + border: 1px dotted; + color: #b1b1b1ff; +} + +#oldPostBtn { + background-color: #719cb7ff; + border-color: #52768cff; +} + +#bottomNav { + margin-top: 55px; + margin: auto; + background-color: #3a3d40ff; + color: #bcbcbdff; + padding-bottom: 60px; +} + +.bottomNavHeadings { + color: #d4d4d4ff; + padding-bottom: 30px; + padding-top: 40px; + font-size: 15px; + font-weight: bold; +} + +.bottomNavParas { + font-size: 13px; + line-height: 25px; + color: #afafafff; + +} + +.bottomNavSpans { + font-size: 10px; +} + +.popPostDates { + color: #666b70ff +} + +.twitterTimes { + color: #7695a9ff; +} + +.twitterImg { + height: 15px; + width: 15px; +} + +#formSubmitBtn { + color: white; + background-color: #638194ff; + border-color: #52768cff; + width: 110px; + height: 30px; + border-radius: 4px 4px; + border-width: 1px; + font-size: 13px; +} + +#formInput1 { + background-color: #27292bff; + border-color: #27292bff; +} + +#formInput2 { + background-color: #27292bff; + border-color: #27292bff; + margin-bottom: 0px; +} + +#formInput3 { + background-color: #27292bff; + width: 255px; + height: 140px; + border-color: #27292bff; +} + +#endFooter { + height: 80px; + background-color: #2f3235ff; + border-top: solid 2px #24272aff; + padding-top: 25px; +} + +#footerText { + color: #666b70ff; + padding-left: 390px; + font-size: 12px; +} + +#socialMediaBtns { + float: right; + margin-right: 400px; +} + +.fa-facebook { + background: #3B5998; + color: white; + width: 20px; + height: 18px; + text-align: center; + } + + .fa-twitter { + background: #55ACEE; + color: white; + width: 20px; + height: 18px; + text-align: center; + } + + .fa-rss { + background: #ff6600; + color: white; + width: 20px; + height: 18px; + text-align: center; + } + + .fa-dribbble { + background: #ea4c89; + color: white; + width: 20px; + height: 18px; + text-align: center; + } + + .fa-pinterest { + background: #cb2027; + color: white; + width: 20px; + height: 18px; + text-align: center; + } + + .fa-linkedin { + background: #007bb5; + color: white; + width: 20px; + height: 18px; + text-align: center; + } + + #commentInput { + width: 640px; + height: 185px; + background-color: #f7f7f7f7; + } + + #nameInput { + width: 640px; + background-color: #f7f7f7f7; + } + + #emailInput { + width: 640px; + background-color: #f7f7f7f7; + } + + #websiteInput { + width: 640px; + background-color: #f7f7f7f7; + } + + + #commentSubmit{ + width: 110px; + height: 30px; + text-align: center; + background-color: #719cb7ff; + border-color: #52768cff; + color: white; + padding: 0px 0px; + margin-bottom: 50px; + + } + + #mainContainer { + padding: 0px 0px; + width: 975px; + margin: auto; + } + + #fullPageCont { + padding: 0px 0px; + } + + #ikarosNav { + padding-left: 380px; + } + + + \ No newline at end of file