From 0571d1dd8465168054880749e01b8c405b79f35c Mon Sep 17 00:00:00 2001 From: afo32 <63719917+afo32@users.noreply.github.com> Date: Wed, 20 Aug 2025 17:01:14 +0000 Subject: [PATCH 1/2] First Commit --- index.html | 47 +++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 83 insertions(+) create mode 100644 index.html create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 000000000..972e09543 --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + Breathe Code Photo Feed + + + +
+
+

Breathe Code Photo Feed

+
+
+
+
+

My first photo

+

12/14

+baby cat +

this is my first photo! i want to eat

+ +
+
+

Im eating

+

12/17

+baby cat eating +

Im eating!

+ +
+
+

Sleepy time

+

12/17

+baby cat sleeping +

zzz....

+ +
+
+

Best hour

+

12/19

+baby cat playing +

PLAY TIME!

+ +
+
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..8d945b9c7 --- /dev/null +++ b/styles.css @@ -0,0 +1,36 @@ +.title { + display: flex; + justify-content:center ; +} + +.big-container { + background-color: rgb(192, 192, 192); + display: flex; + flex-direction: column; + align-items: center; +} + +.box { + background-color: white; + margin: 10px; + padding: 15px; + width: 300px; + border-radius: 5px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.box-img { + width: 100%; + border-radius: 5px; +} + +.box-title, .box-date { +margin: 0 0 10px 0; +} + +.box-date { + color: rgb(216, 216, 216) +} \ No newline at end of file From 50bee3b7a6b8dec34482565dc6a223a44bd3d6cb Mon Sep 17 00:00:00 2001 From: afo32 <63719917+afo32@users.noreply.github.com> Date: Sat, 6 Sep 2025 11:18:46 +0000 Subject: [PATCH 2/2] First commit --- index.html | 72 +++++++++++++++++++++++------------------------- styles.css | 80 +++++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 95 insertions(+), 57 deletions(-) diff --git a/index.html b/index.html index 972e09543..5f8eda6da 100644 --- a/index.html +++ b/index.html @@ -2,46 +2,42 @@ - - Breathe Code Photo Feed + Instagram + - -
-
-

Breathe Code Photo Feed

+
+
+
+
+ +
+
+

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.

+
+
-
-
-
-

My first photo

-

12/14

-baby cat -

this is my first photo! i want to eat

- -
-
-

Im eating

-

12/17

-baby cat eating -

Im eating!

- -
-
-

Sleepy time

-

12/17

-baby cat sleeping -

zzz....

- -
-
-

Best hour

-

12/19

-baby cat playing -

PLAY TIME!

- -
-
- + \ No newline at end of file diff --git a/styles.css b/styles.css index 8d945b9c7..c13c21353 100644 --- a/styles.css +++ b/styles.css @@ -1,36 +1,78 @@ -.title { - display: flex; - justify-content:center ; +main { + background-color: black; +} + +svg { + width: 30px; + height: 30px; } -.big-container { - background-color: rgb(192, 192, 192); +.post { display: flex; flex-direction: column; align-items: center; } -.box { +.post-header { background-color: white; - margin: 10px; - padding: 15px; - width: 300px; - border-radius: 5px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: flex; - flex-wrap: wrap; 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; } -.box-img { - width: 100%; - border-radius: 5px; +.post-body-icons svg { + margin: 5px; } -.box-title, .box-date { -margin: 0 0 10px 0; +.post-body-title { + margin: 10px 10px; } -.box-date { - color: rgb(216, 216, 216) +.post-body-description { + margin: 0 10px 10px 10px; } \ No newline at end of file