diff --git a/index.html b/index.html index f74abbf..c570099 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,35 @@ - Introduction to the DOM + Aaron King...DOM +
+
+ Header +
+
+
+
+
+
Placeholder
+
+
New!
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure architecto, et hic saepe, maiores fugiat asperiores eum est consectetur assumenda voluptates, provident facere cumque molestiae maxime neque dolorum quod repellendus. +
+
+
+
+ Placeholder +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, natus numquam magnam eveniet distinctio facere possimus tenetur ducimus nobis mollitia, nisi impedit voluptates eius nam accusantium vel est alias? Sint. +
+
+
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..4bfc287 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,68 @@ +body +{ + margin: 0; + padding: 0; +} + +.header +{ + border: solid black 3px; +} + +.header__title +{ + font-size: 36px; + text-align: center; + padding: 15px; +} + +.content-container +{ + display: flex; + flex-direction: column; +} + +.post +{ + display: flex; + border: solid black 2px; + flex-direction: column; +} + +.post__title +{ + display: flex; + font-size: 23px; + padding-left: 10px; + +} + +.post__copy +{ + display: flex; + padding: 15px; +} + +.new +{ + display: flex; + background-color: gray; + padding: 10px; + align-self: flex-end; + position: absolute; + top: 85px; +} + +.new--red-label +{ + color: red; +} + +@media (min-width: 900px) +{ + .content-container + { + display: flex; + flex-direction: row; + } +} \ No newline at end of file