diff --git a/README.md b/README.md index f5895e0b..e43bad9e 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,5 @@ 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) + +Link to deployed page: https://github.com/GeneTinderholm/assignment_markup_warmup/tree/master diff --git a/assets/adImg.png b/assets/adImg.png new file mode 100644 index 00000000..97b7849d Binary files /dev/null and b/assets/adImg.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..7d5fb0c7 --- /dev/null +++ b/index.html @@ -0,0 +1,55 @@ + + + + +A Web Page + + + + + +
+ +
+
+

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. Praesent at est et dui convallis fringilla vel ut leo. Sed commodo ipsum ligula. Donec viverra ipsum et lorem porta pharetra. Ut magna purus, mattis vel elit ut, feugiat

+

Additional Thoughts...

+

Nunc facilisis sit amet neque a posuere. Integer gravida maximus augue, in mollis ex porta sed. Sed vulputate tempus elit, id hendrerit est semper in. Donec eu arcu

+ +
+
+

Another Posty Post

+

Written 1/2/2000

+

Only Thoughts...

+

Sed elementum risus eget mauris finibus viverra. Nunc finibus eros et metus pellentesque consectetur. Integer tempor tempus lacus a consequat. Nunc aliquam, leo eu scelerisque molestie, est sem sagittis metus, at placerat

+
+
+
+

A Posty Post

+

Written 1/1/2000

+

Be it Resolved

+

Sed vestibulum urna lorem, sit amet suscipit enim efficitur et. Phasellus semper porttitor sapien sit amet condimentum. Fusce sit amet purus dapibus, vestibulum mauris sed, aliquet sapien. Donec euismod lacus tempor, ultrices turpis non

+

faucibus libero. Fusce augue tellus, faucibus ac velit quis, sollicitudin elementum velit. Vivamus sollicitudin erat at

+
+
+ +
+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..e096c298 --- /dev/null +++ b/styles.css @@ -0,0 +1,185 @@ +body{ + background-color:#FFF; + font-family: Helvetica, Arial, sans-serif; +} + +nav{ + display:flex; + align-items:center; + justify-content: flex-start; + background-color:#FFE599; + width:100%; + height:75px; + font-size:2em; + text-indent:50px; + margin-bottom: 10px; + border-style:solid; + border-width: 2px; + border-color: #000; +} + +@media (max-width:989px){ + nav{ + text-indent: 10px; + height:50px; + font-size:1.5em; + margin-bottom: 0px; + } +} + +aside{ + background-color:#D5A6BD; + border-style:solid; + border-width: 2px; + border-color: #000; + width:400px; + height:600px; + margin-right: 10px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +@media (max-width: 989px){ + aside{ + display:none; + } +} + +section{ + background-color:#B6D7A8; + text-align: center; + border-radius: 10px; + height:100px; + width:100%; + border-style:solid; + border-width: 2px; + border-color: #000; +} + +@media (max-width: 989px){ + section{ + border-radius: 0px; + } +} + +@media (min-width: 990px){ + section{ + margin-bottom:10px; + } +} + +#first, #second{ + margin:10px; + background-color:#A2C4C9; + max-width:45%; + display:inline-block; + padding:10px; + border-style:solid; + border-width: 2px; + border-color: #000; +} +/* +@media (max-width: 989px){ + #first, #second{ + background-color:#A2C4C9; + max-width:45%; + min-width:30%; + display:inline-block; + padding:10px; + border-style:solid; + border-width: 2px; + border-color: #000; + margin:10px; + } +} +*/ +@media (min-width: 990px){ + #first{ + margin-left:0px; + } +} + +#third{ + margin:10px; + background-color:#A2C4C9; + max-width:30%; + display:inline-block; + padding:10px; + border-style:solid; + border-width: 2px; + border-color: #000; +} + +@media (max-width:989px){ + #third{ + max-width:100%; + } +} + +@media (min-width: 990px){ + #third{ + margin-right:0px; + } +} + +footer{ + background-color:#9FC5F8; + padding: 1px; + border-radius: 10px; + margin-top: 10px; + border-style:solid; + border-width: 2px; + border-color: #000; +} + +@media (max-width: 989px){ + footer{ + border-radius: 0px; + } +} + +@media (min-width: 990px){ + #everythingButAdContainer{ + max-width:990px; + } +} + +#firstTwoContainer{ + max-width:100%; + display:flex; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: nowrap; +} + +#articleContainer{ + max-width:100%; + position:relative; + display:flex; + align-items: flex-start; + justify-content: space-between; + flex-wrap: nowrap; +} + +@media (max-width: 989px){ + #articleContainer{ + flex-wrap: wrap; + } +} + +#everythingContainer{ + display:flex; + align-items: flex-start; + justify-content: center; +} + +img{ + height:300px; + width:350px; +} + +h2, h3{ + text-align: center; +}