breatheco-de · johannaalamo · Jul 10, 2023 · Jul 10, 2023 · Jul 10, 2023 · Jul 10, 2023
diff --git a/assets/css/style_body.css b/assets/css/style_body.css
@@ -0,0 +1,24 @@
+body {
+    background: rgba(0,0,50,1);
+    font-family: 'Montserrat', sans-serif;
+}
+
+.background-rest {
+    background-image: linear-gradient(180deg, rgba(0,0,50,1) 0%, rgba(2,76,161,1) 100%);
+}
+
+.backgroundimg {
+    background-image: url("../img/img-background.jpg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    padding: 5px 0px 0px 0px;
+}
+
+.marginback {
+    margin: -1px 0px 0px 0px;
+}
+
+.switchlogo {
+    object-fit: cover;
+}
diff --git a/assets/css/style_header.css b/assets/css/style_header.css
@@ -0,0 +1,21 @@
+header.navbar {
+    background: #1f003b;
+    box-shadow: 0px -3px 19px 1px #fe6e42;
+}
+
+header .navbar-brand img {
+    max-height: 49px;
+}
+
+.navbar-toggler,
+header .btn-primary {
+    border: 1px solid #ff5d2c !important;
+    background: #fe6e42;
+    letter-spacing: 1.5px;
+}
+
+header .btn-primary:hover,
+header .btn-primary:active {
+    background: #ff5d2c;
+}
+
diff --git a/assets/img/arcane.jpg b/assets/img/arcane.jpg
diff --git a/assets/img/botw.jpg b/assets/img/botw.jpg
diff --git a/assets/img/img-background.jpg b/assets/img/img-background.jpg
diff --git a/assets/img/logo.png b/assets/img/logo.png
diff --git a/assets/img/logo2.png b/assets/img/logo2.png
diff --git a/assets/img/nintendo_switch_logo_positivo.jpg b/assets/img/nintendo_switch_logo_positivo.jpg
diff --git a/assets/img/pngkit_firewatch-logo-png_1945935.png b/assets/img/pngkit_firewatch-logo-png_1945935.png
diff --git a/assets/img/ps5.png b/assets/img/ps5.png
diff --git a/assets/img/skyrim.jpg b/assets/img/skyrim.jpg
diff --git a/assets/img/xbox-series-s-1.jpg b/assets/img/xbox-series-s-1.jpg
diff --git a/index.html b/index.html
@@ -1,44 +1,171 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <title>Choose a website</title>
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    </head>
-    <body>
-        <div class="container">
-            <h1 class="mb-5">GIT & Bootstrap Collaborative Project</h1>
-            <div class="row">
-                <div class="col-sm-4 bg-dark text-center">
-                    <a href="./website/designs/thumb.jpg"><img style="max-height: 400px;" class="img-responsive" src="website/designs/thumb.jpg"></img></a>
-                </div>
-                <div class="col-sm">
-                    <h2>One Page Wonder - Start Bootstrap Template</h2>
-                    <a class="btn btn-primary" href="./website/">Live Version</a>
-                    <a class="btn btn-warning" href="./website/designs/thumb.jpg">How it Should Look</a>
-                    <a class="btn btn-danger" href="./website/designs/guide.jpg">See the Guide</a>
-
-                    <div>
-                        <h2>Tips:</h2>
-                        <p>Copy and tweak components from <a href="https://getbootstrap.com/" target="_blank" >getbootstrap.com</a>.</p>
-                        <p>If you are looking at an example from <a href="https://getbootstrap.com/docs/5.1/examples/" target="_blank">https://getbootstrap.com/docs/5.1/examples/</a>, you can use the inspector (right mouse click to open this panel up) and then select the section you want in the "Elements" tab. Then go to copy, and copy element to quickly add to your project.</p>
-                        <p>To push changes to the website, remember this sequence:</p>
-                            <ul>
-                                <li>git add .</li>
-                                <li>git commit -m "what you modified"</li>
-                                <li>git push</li>
-                            </ul>
-                            <p>To see changes from teammates:</p>
-                                <ul>
-                                    <li>git pull</li>
-                                </ul>
-                                <p>To customize elements, use the style.css file located in assets/css.</p>
-                    </div>
-                </div>
+<html lang="es">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Collaborative Website - Git Test</title>
+
+  <link rel="stylesheet" href="./assets/css/style_header.css">
+  <link rel="stylesheet" href="./assets/css/style_body.css">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+</head>
+
+<body>
+  <!-- Header -->
+  <header class="navbar navbar-expand-lg navbar-dark">
+    <div class="container-fluid px-4">
+      <a class="navbar-brand p-2" href="#">
+        <img class="img-fluid me-1" src="./assets/img/pngkit_firewatch-logo-png_1945935.png" alt="Firewatch Logo">
+      </a>
+      <button class="navbar-toggler shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse pt-3 pt-lg-0 justify-content-end" id="navbarNav">
+        <ul class="navbar-nav align-items-center text-center">
+          <li class="btn btn-sm btn-primary text-white mx-2 w-50 text-nowrap mb-2 mb-lg-0">
+            <a class="h6 fw-normal p-1 m-0 nav-link text-white" aria-current="page" href="#acerca">
+              <strong>Acerca</strong> de nosotros</a>
+          </li>
+          <li class="btn btn-sm btn-primary text-white mx-2 w-50 text-nowrap mb-2 mb-lg-0">
+            <a class="h6 fw-normal p-1 m-0 nav-link text-white" aria-current="page" href="#explora">
+              <strong>Explora</strong> juegos</a>
+          </li>
+          <li class="btn btn-sm btn-primary text-white mx-2 w-50 text-nowrap mb-2 mb-lg-0">
+            <a class="h6 fw-normal p-1 m-0 nav-link text-white" aria-current="page" href="#compatibilidad">
+              Compatibilidad</a>
+          </li>
+          <li class="btn btn-sm btn-primary text-white mx-2 w-50 text-nowrap mb-2 mb-lg-0">
+            <a class="h6 fw-normal p-1 m-0 nav-link text-white" aria-current="page" href="#contacto">
+              Contacto</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </header>
+
+  <!-- Body -->
+  <div class="container-fluid backgroundimg w-100 min-vh-100 d-flex flex-column justify-content-center">
+    <p class="display-1 text-center text-white">VideoGames Landscape</p>
+    <p class="text-center display-6 text-white">lleva tu experiencia gaming al siguiente nivel</p>
+    <div class="container-fluid d-flex justify-content-center">
+      <button type="button" class="btn btn-outline-light m-2" style="min-width: 162px;"><a
+          class="h6 fw-normal p-1 m-0 nav-link text-white" href="#acerca">Acerca de nosotros</a></button>
+      <button type="button" class="btn btn-outline-light m-2" style="min-width: 162px;"><a
+          class="h6 fw-normal p-1 m-0 nav-link text-white" href="#explora">Explora juegos</a></button>
+      <button type="button" class="btn btn-outline-light m-2" style="min-width: 162px;"><a
+          class="h6 fw-normal p-1 m-0 nav-link text-white" href="#compatibilidad">Compatibilidad</a></button>
+    </div>
+  </div>
+
+  <div class="container-fluid background-rest marginback">
+
+    <div class="container-fluid d-flex row ps-5 pb-5 m-0 mb-1" id="acerca">
+      <div class="container-fluid col-8">
+        <p class="display-4 text-white">Acerca de nosotros</p>
+        <p class="text-white">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
+          dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+          Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
+          pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
+          venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
+      </div>
+      <div class="container-fluid col-4 d-flex justify-content-center align-items-center">
+        <img src="./assets/img/logo2.png" class="img-fluid" alt="logo">
+      </div>
+    </div>
+
+    <div class="container-fluid d-flex row justify-content-center pb-5 m-0" id="explora">
+      <p class="display-4 text-white m-5 text-center">Explora juegos</p>
+      <div id="carouselExampleCaptions" class="carousel slide" style="max-width: 75vw;" data-bs-ride="carousel">
+        <div class="carousel-indicators">
+          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
+            aria-current="true" aria-label="Slide 1"></button>
+          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
+            aria-label="Slide 2"></button>
+          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
+            aria-label="Slide 3"></button>
+        </div>
+        <div class="carousel-inner">
+          <div class="carousel-item active">
+            <img src="./assets/img/botw.jpg" class="d-block w-100" alt="...">
+            <div class="carousel-caption d-none d-md-block">
+              <h5>The Legend Of Zelda: Breath of The Wild</h5>
+              <p>Some representative placeholder content for the first slide.</p>
+            </div>
+          </div>
+          <div class="carousel-item">
+            <img src="./assets/img/arcane.jpg" class="d-block w-100" alt="...">
+            <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50">
+              <h5>League of Legends: Arcane</h5>
+              <p>Some representative placeholder content for the second slide.</p>
             </div>
+          </div>
+          <div class="carousel-item">
+            <img src="./assets/img/skyrim.jpg" class="d-block w-100" alt="...">
+            <div class="carousel-caption d-none d-md-block">
+              <h5>Skyrim: The Legend of The Dragon</h5>
+              <p>Some representative placeholder content for the third slide.</p>
+            </div>
+          </div>
+        </div>
+        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
+          data-bs-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Previous</span>
+        </button>
+        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
+          data-bs-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Next</span>
+        </button>
+      </div>
+    </div>
 
+    <div class="container-fluid d-flex row justify-content-center pb-5 m-0" id="compatibilidad">
+      <p class="display-4 text-white m-5 text-center">Compatibilidad</p>
+
+      <div class="card text-white bg-transparent mb-3 mx-2" style="width: 18rem;">
+        <img src="./assets/img/ps5.png" class="card-img-top" alt="...">
+        <div class="card-body">
+          <h5 class="card-title">PS5</h5>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
+            content.</p>
+          <a href="#" class="btn btn-primary">Check here</a>
+        </div>
+      </div>
+      <div class="card text-white bg-transparent mb-3 mx-2" style="width: 18rem;">
+        <img src="./assets/img/nintendo_switch_logo_positivo.jpg" class="card-img-top switchlogo" height="262px"
+          alt="...">
+        <div class="card-body">
+          <h5 class="card-title">Switch</h5>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
+            content.</p>
+          <a href="#" class="btn btn-primary">Check here</a>
         </div>
+      </div>
+      <div class="card text-white bg-transparent mb-3 mx-2" style="width: 18rem;">
+        <img src="./assets/img/xbox-series-s-1.jpg" class="card-img-top" alt="...">
+        <div class="card-body">
+          <h5 class="card-title">XBOX series X</h5>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
+            content.</p>
+          <a href="#" class="btn btn-primary">Check here</a>
+        </div>
+      </div>
+
+    </div>
+  </div>
 
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+    crossorigin="anonymous"></script>
+</body>
 
-    </body>
 </html>