From e79044fd83d13baa0b535dcb5e34dfedd96d461d Mon Sep 17 00:00:00 2001 From: Elias Hantula Date: Sun, 5 Nov 2017 23:02:31 -0500 Subject: [PATCH 1/2] name --- README.md | 1 + index.html | 0 2 files changed, 1 insertion(+) create mode 100644 index.html diff --git a/README.md b/README.md index f5895e0b..d6717d72 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,4 @@ assignment_markup_warmup_sprint And 1 and 2! And 1, and 2...! [An HTM5 and CSS3 project from the Viking Code School](http://www.vikingcodeschool.com) +Elias Hantula \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..e69de29b From 7981e344e609d6588b3208cee2a6bfe56a3292b4 Mon Sep 17 00:00:00 2001 From: Elias Hantula Date: Mon, 6 Nov 2017 14:20:31 -0500 Subject: [PATCH 2/2] exercise --- index.html | 63 ++++++++++++++++++ styles.css | 184 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 247 insertions(+) create mode 100644 styles.css diff --git a/index.html b/index.html index e69de29b..8f970aa4 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,63 @@ + + + + + + + + +
+ +
+
+ +
+

The Lorem Micro Blog
By Foo Bar

+
+

A Most Posty Post

Written 1/3/2000
First Thoughts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper tempus lacus nec sollicitudin. Proin pulvinar urna eget erat molestie, non pulvinar libero faucibus. Duis ultrices fringilla dui at cursus. Vestibulum eu nisi id enim sagittis sodales.

+ +Additional Thoughts +

+Nam facilisis in ex eget semper. Curabitur nibh eros, hendrerit sit amet auctor sed, porta sed velit. Praesent accumsan lorem mauris, in luctus augue elementum ac. Phasellus iaculis vitae lacus vitae finibus. Fusce in enim volutpat ante vehicula pellentesque. Aliquam erat volutpat.

Another Posty Post

Written 1/2/2000
Only Thoughts...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper tempus lacus nec sollicitudin. Proin pulvinar urna eget erat molestie, non pulvinar libero faucibus. Duis ultrices fringilla dui at cursus. Vestibulum eu nisi id enim sagittis sodales. Nam facilisis in ex eget semper. Curabitur nibh eros, hendrerit sit amet auctor sed, porta sed velit. Praesent accumsan lorem mauris, in luctus augue elementum ac. Phasellus iaculis vitae lacus vitae finibus. Fusce in enim volutpat ante vehicula pellentesque. Aliquam erat volutpat.

A Posty Post

Written 1/1/2000
Be it Resolved

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper tempus lacus nec sollicitudin. Proin pulvinar urna eget erat molestie, non pulvinar libero faucibus. Duis ultrices fringilla dui at cursus. Vestibulum eu nisi id enim sagittis sodales. Nam facilisis in ex eget semper. Curabitur nibh eros, hendrerit sit amet auctor sed, porta sed velit. Praesent accumsan lorem mauris, in luctus augue elementum ac. Phasellus iaculis vitae lacus vitae finibus. Fusce in enim volutpat ante vehicula pellentesque. Aliquam erat volutpat.

+
+

This copyrighted telecast is presented by the authority of the Office of the Commisioner of Blogging.Praesent accumsan lorem mauris, in luctus augue elementum ac.

+
+ + + + + + +
+ + + + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..2ab16bf1 --- /dev/null +++ b/styles.css @@ -0,0 +1,184 @@ + + +.container { + max-width: 990px; + margin: 0 auto; + + + +} + +.top { +position:fixed; + border: 2px solid black; + background-color: yellow; + width: 100%; + +} +.main-title { + +} + + +.writings { + padding-top: 25px; + + +} + +.intro1 { + border: 2px solid black; + background-color: green; + max-width: 100%; + padding: 10px; + text-align: center; + border-radius: 25px; + +} + + +h5 { + text-align: center; +} +.articles { + +width: 100%; +position: relative; + + + + +} + +h3 { + + padding-top: 10px; +} + +footer.date { + + padding-bottom: 5px; +} + +.articles::after { + content: ""; + clear: both; + display: table; +} + +.article1 { + + border: 2px solid black; + margin: 5px; + background-color: #7bccc8; + max-width: 30%; + float: left; + position: relative; +} +.article2 { + + border: 2px solid black; + margin: 5px; + background-color: #7bccc8; + position: relative; + max-width: 30%; + float: left; +} + +.article3 { + + border: 2px solid black; + margin: 5px; + background-color: #7bccc8; + max-width: 30%; + position: relative; + float: left; + +} +.ad { + + +max-height: 320px; + max-width: 120px; + border: 2px solid black; + background-color: red; + margin-top: -350px; + margin: 10 auto; + + + + + +} +.copyright { + border:2px solid black; + border-radius: 25px; + font-size: 15px; + background-color: blue; + padding: 7px; + +} + +h3 { + text-align: center; + font-weight: bold; + font-size: 18px; +} + +.date { + text-align: center; + font-size: 13px; +} + +.adcontent { + height: 50%; + width: 95%; + background: white; + border: 2px solid black; + margin-top: 50px; + +} + +.intro { + font-weight: bold; + padding: 2px; +} + +p { + padding: 5px; +} + +@media screen and (max-width: 990px) { + + .writings .intro1 { + border: 2px solid black; + background-color: green; + max-width: 100%; + border-radius: 0px; + + text-align: center; +} +} +@media screen and (max-width: 990px) { + .copyright { + + border:2px solid black; + font-size: 15px; + background-color: blue; + padding: 7px; + border-radius: 0px; + +} + +} + +@media screen and (max-width: 990px){ +.ad{ +display:none; + +} +h5 { + display:none; +} + +}