From fd4be20fdefd30e5669fb177ba9334286650d1d3 Mon Sep 17 00:00:00 2001 From: AdrianSS Date: Wed, 3 Dec 2025 21:30:22 +0000 Subject: [PATCH 1/4] Primer comit: subiendo Instagram Photo Feed con Bootstrap --- .vscode/settings.json | 6 ++ index.html | 154 ++++++++++++++++++++++++++++++++++++++++++ styles.css | 136 +++++++++++++++++++++++++++++++++++++ 3 files changed, 296 insertions(+) create mode 100644 index.html create mode 100644 styles.css diff --git a/.vscode/settings.json b/.vscode/settings.json index 24da33c3e..0e3a04214 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,5 +3,11 @@ "editor.defaultFormatter": "esbenp.prettier-vscode", "workbench.editorAssociations": { "*.md": "vscode.markdown.preview.editor" + }, + "[html]": { + "editor.defaultFormatter": "vscode.html-language-features" + }, + "[css]": { + "editor.defaultFormatter": "vscode.css-language-features" } } diff --git a/index.html b/index.html new file mode 100644 index 000000000..44f3f130f --- /dev/null +++ b/index.html @@ -0,0 +1,154 @@ + + + + + + + Instagram + + + + + + + + + +
+ + +
+ +
+
+
foto
+
foto
+
foto
+
foto
+
foto
+
foto
+
+
+ +
+
+ +
+

Rebekka

+ +
+ +

101Likes
“Bro! Is that it for today?”

+
+
+ +
+

Joi

+ +
+ +

101Likes
“I’m so happy when I’m with you.”

+
+
+ +
+

Cyborg

+ +
+ +

101Likes
“The net is vast and infinite.”

+
+
+ +
+

Neo

+ +
+ +

101Likes
“I know kung fu.”

+
+
+ +
+

Lucy

+ +
+ +

101Likes
- “Night City’s not a place you leave… it’s a + place + that leaves you.”

+
+
+ +
+

Hacker

+ foto +
+ +

101Likes
"Lo único que te ofrezco es la verdad, nada + más.” +

+
+
+ +
+

Motoko

+ foto +
+

101Likes
“If a technological feat is possible, man + will do + it. Almost as if it’s wired into + the core of our being.”

+
+
+ + +
+
+ + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..ab7347059 --- /dev/null +++ b/styles.css @@ -0,0 +1,136 @@ +/* Estilos generales */ +body { + align-items: center; + background-color: gray; + font-family: Arial, sans-serif; +} + +/* Container Instagram+Icono*/ +.containter-fotos-grid { + align-items: flex-start; + align-content: space-between; +} + +.container-botones { + display: flex; + justify-content: center; + gap: 10px; + margin: 20px 0; + +} + +.boton1 { + appearance: none; + background-color: red; + border-radius: 40em; + border-style: none; + box-shadow: #ADCFFF 0 -12px 6px inset; + box-sizing: border-box; + color: #000000; + cursor: pointer; + display: inline-block; + font-family: -apple-system, sans-serif; + font-size: 1.2rem; + font-weight: 700; + letter-spacing: -.24px; + margin: 0; + outline: none; + padding: 1rem 1.3rem; + quotes: auto; + text-align: center; + text-decoration: none; + transition: all .15s; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; +} + +.boton1:active { + transform: scale(1.025); + background-color: #167101; + color: #fff;; +} + +.boton2:active { + transform: scale(1.025); + background-color: #167101; + color: #fff;; +} + +.boton2 { + appearance: none; + background-color: blue; + border-radius: 40em; + border-style: none; + box-shadow: #ADCFFF 0 -12px 6px inset; + box-sizing: border-box; + color: #000000; + cursor: pointer; + display: inline-block; + font-family: -apple-system, sans-serif; + font-size: 1.2rem; + font-weight: 700; + letter-spacing: -.24px; + margin: 0; + outline: none; + padding: 1rem 1.3rem; + quotes: auto; + text-align: center; + text-decoration: none; + transition: all .15s; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; +} + +.boton2:active { + transform: scale(1.025); +} + +.boton2.active { + background-color: #167101; + color: #fff; +} + + + +/* Navbar */ +.navbar { + border-bottom: 1px transparent #ddddddda; +} + +.container-fotos-scroll { + max-width: 700px; + margin: 0 auto; +} + +/* Fotos en cuadrícula */ +.fotos-grid img { + width: 100%; + height: auto; + border-radius: 8px; + transition: transform 0.2s ease; +} + +.fotos-grid img:hover { + transform: scale(1.); +} + +/* Fotos en scroll */ + +.container-fotos-scroll img { + width: 100%; + height: 400px; + object-fit: cover; /* asegura que todas se vean uniformes */ + border: 6px solid #fff; /* borde blanco tipo marco */ + border-radius: 6px; /* esquinas redondeadas */ + box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* sombra para dar profundidad */ + padding: 4px; /* espacio entre la foto y el borde */ + background-color: #f0f0f0; +} + +.fotos-scroll img { + height: 100vh; + width: 100%; + opacity: 0.8; +} \ No newline at end of file From 4e733d25247202644dce58fbb199aa10efac6373 Mon Sep 17 00:00:00 2001 From: AdrianSS Date: Thu, 4 Dec 2025 21:07:15 +0000 Subject: [PATCH 2/4] --- index.html | 309 +++++++++++++++++++++++++++++++---------------------- styles.css | 199 +++++++++++++++++----------------- 2 files changed, 283 insertions(+), 225 deletions(-) diff --git a/index.html b/index.html index 44f3f130f..6972d845b 100644 --- a/index.html +++ b/index.html @@ -7,148 +7,205 @@ Instagram + - - +
+
+ +
    + + +
+
+
+ + +
+
+
foto
+
foto
+
foto
+
foto
+
foto
+
foto
+
+
+ +
+
+
+
+

Joi

+

04/12

+
+ +
+

101Likes
“I’m so happy when I’m with + you.”

+
+
+ +
+
+

Cyborg

+

10/11

+
+ +
+

101Likes
“The net is vast and infinite.”

+
+
+ +
+
+

Neo

+

22/10

+
+ +
+

101Likes
“I know kung fu.”

+
+
+ +
+
+

Lucy

+

15/10

+
+ +
+

101Likes
- “Night City’s not a place you leave… + it’s a place that leaves you.”

+
+
+ +
+
+

Hacker

+

01/10

+
+ foto +
+

101Likes
"Lo único que te ofrezco es la verdad, + nada más.” +

+
+
+ +
+
+

Motoko

+

20/09

+
+ foto +
+

101Likes
“If a technological feat is + possible, man + will do it. Almost as if it’s wired into + the core of our being.”

+
+
-
-

Motoko

- foto -
-

101Likes
“If a technological feat is possible, man - will do - it. Almost as if it’s wired into - the core of our being.”

- -
- + \ No newline at end of file diff --git a/styles.css b/styles.css index ab7347059..ee3826004 100644 --- a/styles.css +++ b/styles.css @@ -1,136 +1,137 @@ /* Estilos generales */ body { - align-items: center; - background-color: gray; + margin: 0; + padding: 0; + background-color: darkwhite; font-family: Arial, sans-serif; + color: #111; +} + + +.navbar-brand svg { + height: 22px; + width: 22px; } -/* Container Instagram+Icono*/ -.containter-fotos-grid { - align-items: flex-start; - align-content: space-between; +/* Menú derecho */ +/* .collapse-navbar-collapse { + display: flex; + align-items: center; + gap: 12px; +} */ + +.collapse-navbar-collapse ul { + list-style: none; + display: flex; + gap: 12px; + margin: 0; + padding: 0; + align-items: center; } +/* Botones de vista */ .container-botones { display: flex; justify-content: center; gap: 10px; margin: 20px 0; - } -.boton1 { - appearance: none; - background-color: red; - border-radius: 40em; - border-style: none; - box-shadow: #ADCFFF 0 -12px 6px inset; - box-sizing: border-box; - color: #000000; - cursor: pointer; - display: inline-block; - font-family: -apple-system, sans-serif; - font-size: 1.2rem; - font-weight: 700; - letter-spacing: -.24px; - margin: 0; - outline: none; - padding: 1rem 1.3rem; - quotes: auto; - text-align: center; - text-decoration: none; - transition: all .15s; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; +/* Contenedor de fotos en cuadrícula (usa bootstrap cols) */ +.container-fotos-grid { + max-width: 980px; + width: 100%; + margin: 20px auto; + padding: 0 12px; + box-sizing: border-box; } -.boton1:active { - transform: scale(1.025); - background-color: #167101; - color: #fff;; +.container-fotos-grid img, +.container-fotos-grid .foto { + width: 100%; + border-radius: 8px; + transition: all 0.3s ease; + cursor: pointer; } -.boton2:active { - transform: scale(1.025); - background-color: #167101; - color: #fff;; +/*Efecto al pasar el ratón */ +.container-fotos-grid img:hover, +.container-fotos-grid .foto:hover { + transform: scale(1.05); /* agranda ligeramente */ + box-shadow: 0 0 15px #0ff; /* glow estilo neón */ + border: 2px solid #0ff; /* borde resaltado */ } -.boton2 { - appearance: none; - background-color: blue; - border-radius: 40em; - border-style: none; - box-shadow: #ADCFFF 0 -12px 6px inset; - box-sizing: border-box; - color: #000000; - cursor: pointer; - display: inline-block; - font-family: -apple-system, sans-serif; - font-size: 1.2rem; - font-weight: 700; - letter-spacing: -.24px; - margin: 0; - outline: none; - padding: 1rem 1.3rem; - quotes: auto; - text-align: center; - text-decoration: none; - transition: all .15s; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; +/* Fotos en scroll */ +.container-fotos-grid img, +.container-fotos-grid .col-6 img, +.container-fotos-grid .col-md-4 img { + width: 100%; + height: auto; + aspect-ratio: 1 / 1; + object-fit: cover; + border-radius: 6px; + min-height: 220px; + display: block; } -.boton2:active { - transform: scale(1.025); +@media (max-width: 768px) { + .container-fotos-grid img { + min-height: 180px; + } } -.boton2.active { - background-color: #167101; - color: #fff; +@media (max-width: 480px) { + .container-fotos-grid img { + min-height: 140px; + } +} +/* Fotos en scroll (cards) */ +.container-fotos-scroll { + max-width: 760px; + width: 100%; + margin: 0 auto 40px; + display: flex; + flex-direction: column; + gap: 18px; + padding: 12px; + box-sizing: border-box; + max-height: 80vh; } - - -/* Navbar */ -.navbar { - border-bottom: 1px transparent #ddddddda; +.container-fotos-scroll .card { + border: 1px solid rgba(0, 0, 0, 0.06); + border-radius: 10px; + overflow: hidden; + background-color: #fff; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); + width: 100% !important; + max-width: 100%; } -.container-fotos-scroll { - max-width: 700px; - margin: 0 auto; +.container-fotos-scroll .card-title { + font-size: 1.2rem; + font-weight: bold; + padding: 8px 12px; + border-bottom: 1px solid #eee; + margin: 0; } -/* Fotos en cuadrícula */ -.fotos-grid img { +.container-fotos-scroll img { width: 100%; height: auto; - border-radius: 8px; - transition: transform 0.2s ease; + display: block; + max-height: 480px; + object-fit: cover; } -.fotos-grid img:hover { - transform: scale(1.); -} - -/* Fotos en scroll */ - -.container-fotos-scroll img { - width: 100%; - height: 400px; - object-fit: cover; /* asegura que todas se vean uniformes */ - border: 6px solid #fff; /* borde blanco tipo marco */ - border-radius: 6px; /* esquinas redondeadas */ - box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* sombra para dar profundidad */ - padding: 4px; /* espacio entre la foto y el borde */ - background-color: #f0f0f0; +.card .card-body { + padding: 12px 14px; } -.fotos-scroll img { - height: 100vh; - width: 100%; - opacity: 0.8; +.scroll-img { + display: flex; + flex-direction: column; + gap: 18px; + align-items: stretch; } \ No newline at end of file From 53fd1ad8111169b4b4915edc5826fc54494c0323 Mon Sep 17 00:00:00 2001 From: AdrianSS Date: Sun, 14 Dec 2025 19:04:45 +0000 Subject: [PATCH 3/4] ultimando detalles --- index.html | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 6972d845b..227370b1b 100644 --- a/index.html +++ b/index.html @@ -34,16 +34,23 @@
-

title

+

Subir nuevo Post +

- ... +
+
+ + +
+
-
- - +
+ + +
@@ -57,9 +64,10 @@

title

  • +
    • Perfil
      • From 1228365f188eea85ead6bddf5ee2e1a80e6d8d9f Mon Sep 17 00:00:00 2001 From: AdrianSS Date: Mon, 15 Dec 2025 13:25:43 +0000 Subject: [PATCH 4/4] Ultima version --- index.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 227370b1b..6428b14fb 100644 --- a/index.html +++ b/index.html @@ -44,11 +44,18 @@

      Subir nuevo Post +
      + + +

-
@@ -92,7 +99,7 @@

Subir nuevo Post + class="fa-solid fa-square" style="color: [_]#000000;">