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..8f970aa4 --- /dev/null +++ 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.

+
+
+
+ + + + + + +
+ + + + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + \ 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; +} + +}