diff --git a/index.html b/index.html new file mode 100644 index 000000000..5f8eda6da --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + Instagram + + + +
+
+
+
+ +
+
+

HTML5

+

Andres

+
+
+ +
+
+
+ Lapras +
+
+
+ + +
+ +
+
+

Liked by AndresJM, persona5, Penelope32 and 1.000.000 others

+
+
+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non eius magnam error, nisi voluptas, consequatur consectetur perspiciatis, sunt ipsa possimus reprehenderit eveniet voluptate. Molestias omnis eligendi esse. Recusandae, quos illo.

+
+
+
+
+ + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..c13c21353 --- /dev/null +++ b/styles.css @@ -0,0 +1,78 @@ +main { + background-color: black; +} + +svg { + width: 30px; + height: 30px; +} + +.post { + display: flex; + flex-direction: column; + align-items: center; +} + +.post-header { + background-color: white; + display: flex; + justify-content: space-between; + align-items: center; + margin: 10px 0 0 0; + width: 500px; +} + +.post-header-name { + flex-grow: 8; + margin: 0 10px 0 10px; +} + +.post-header-name h2, p { + margin: 0; +} + +.first-icon { + margin-left: 10px; +} + +.second-icon { + margin-right: 10px; +} + +h2 { + font-size:large; +} + +img { + width: 500px; + height: 400px; +} + +.post-body { + background-color: white; + width: 500px; + display: flex; + flex-direction: column; + margin-bottom: 10px; +} + +.post-body-icons { + display: flex; +} + +.last { + + flex-grow: 6; +} + +.post-body-icons svg { + margin: 5px; +} + +.post-body-title { + margin: 10px 10px; +} + +.post-body-description { + margin: 0 10px 10px 10px; +} \ No newline at end of file