Second screen

882836ab · Evelin Perez · f0d6f3a7 · 882836ab · 882836ab · 882836ab
Commit 882836ab authored Jul 10, 2025 by Evelin Perez
Show whitespace changes
Inline Side-by-side

Showing with 162 additions and 18 deletions

css/Untitled-1.html css/Untitled-1.html +102 -0

css/styles.css css/styles.css +45 -10

index.html index.html +15 -8

No files found.
--- a/css/Untitled-1.html
+++ b/css/Untitled-1.html
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Beefi Internet Zone - Pantalla 2</title>
+    <style>
+        /* Estilos generales */
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 0;
+        }
+
+        .phone {
+            width: 300px;
+            height: 600px;
+            background-color: #000;
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+
+        .phone-header {
+            background-color: #000;
+            color: #fff;
+            text-align: center;
+            padding: 10px 0;
+        }
+
+        .logo {
+            font-size: 24px;
+            color: #ffcc00;
+            text-transform: uppercase;
+            font-weight: bold;
+        }
+
+        .subtitle {
+            font-size: 14px;
+            color: #ccc;
+            text-transform: uppercase;
+        }
+
+        .video-container {
+            text-align: center;
+            border: 2px solid #fff;
+            padding: 10px;
+            margin: 20px 0;
+        }
+
+        .video-container img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        .countdown {
+            font-size: 24px;
+            color: #fff;
+            background-color: #000;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            line-height: 50px;
+            text-align: center;
+            margin-top: 10px;
+        }
+
+        .footer {
+            background-color: #ffcc00;
+            color: #000;
+            text-align: center;
+            padding: 10px 0;
+            font-size: 12px;
+        }
+
+        .footer a {
+            color: #000;
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="phone">
+        <div class="phone-header">
+            <span class="logo">beefi</span>
+            <span class="subtitle">internet zone</span>
+        </div>
+        <div class="video-container">
+            <p style="color: #fff; margin-bottom: 10px;">Al finalizar el video disfrutarás de tu conexión</p>
+            <img src=" https://via.placeholder.com/250x200?text=Video+Preview" alt="Video Preview">
+            <div class="countdown">04</div>
+        </div>
+        <div class="footer">
+            Al conectarte aceptas Términos y Condiciones.<br>
+            Políticas de Privacidad y Políticas de Buen Uso de BeefiTelecom.
+        </div>
+    </div>
+
+</body>
+</html>
\ No newline at end of file
--- a/css/styles.css
+++ b/css/styles.css
@@ -23,15 +23,15 @@ body {
 }

 #first-screen {
-display: block;
+    display: none;
 }

 #second-screen {
-display: none;
+    display: block;
 }

 #third-screen {
-display: none;
+    display: none;
 }

 /*Estilos de primera pantalla*/
@@ -75,7 +75,7 @@ display: none;
    width: 50%;
 }

-.main-link a{
+.main-link a {
    color: white;
    text-decoration: none;
    font-size: 25px;
@@ -118,6 +118,42 @@ display: none;
    transform: translateY(-100px);
 }

+/*Estilos de segunda pantalla*/
+
+.third-block {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50vh;
+}
+
+.fourth-block {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50vh;
+}
+
+.second-logo-container {
+    display: flex;
+    width: 180px;
+    height: 90px;
+    padding: 10px 0;
+    border: 1px solid var(--primary-color);
+}
+
+.video-container {
+    max-width: 100%;
+    height: 50vh;
+    color: white;
+    letter-spacing: 2px;
+    text-align: center;
+    border: 4px solid var(--text-color);
+    border-radius: 10px;
+    padding: 10px;
+    margin: 20px 0;
+}
+
 .footer {
    width: 100%;
    height: 10vh;
@@ -128,4 +164,3 @@ display: none;
    align-items: center;
    text-align: center;
 }
\ No newline at end of file
-
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/styles.css">
    <link rel="stylesheet" href="/css/normalize.css">
-    <title>Ualabi|BeeTelecom</title>
+    <title>Ualabi | BeeTelecom</title>
 </head>

 <body>
@@ -55,14 +55,21 @@
        </section>

        <section id="second-screen" class="section-container">
-            <div class="main-logo-container">
+            <div class="third-block">
+                <div class="content-block-container">
+                    <div class="second-logo-container">
                        <img src="#">
                    </div>
+                </div>
+            </div>
+            </div>
+            <div class="fourth-block">
                <div class="video-container">
                    <p>Al finalizar el video disfrutarás de tu conexión</p>
                    <img src="#">
                    <div class="countdown">04</div>
                </div>
+            </div>
        </section>

        <section id="third-screen" class="section-container">