Reto Frontend Milena Castro

css/styles.css

@@ -0,0 +1,247 @@
+/***********************************************************/
+/***************          Variables          ***************/
+/***********************************************************/
+:root{
+    --blue-color: #1A46E5;
+    --green-color: #43D8C9;
+    --yellow-color: #FFBD11;
+    --pink-color: #FF89BB;
+    --white-color:#FFFFFF;
+    --black-color: #000000;
+}
+
+.body{
+    font-family: 'Poppins', sans-serif;
+    height: 100vh;
+    width: 100%;
+}
+
+.circle-left-small{
+    background: var(--blue-color);
+    border-radius: 100%;
+    height: 90px;
+    left: 162px;
+    position: absolute;
+    top: 16px;
+    width: 90px;
+}
+
+.circle-left-big{
+    /* position: absolute; */
+    background:var(--blue-color);
+    border-radius: 100%;
+    height: 180px;
+    margin-left: -48px;
+    margin-top: 25px;
+    width: 180px;
+}
+
+.circle-right-big{
+    background: var(--blue-color);
+    border-radius: 100%;
+    height: 250px;
+    margin-left: 1004px;
+    /* position: absolute; */
+    margin-top: -380px;
+    width: 250px;
+}
+
+.circle-right-small{
+    background: var(--blue-color);
+    border-radius: 100%;
+    height: 49px;
+    margin-left: 95%;
+    position: absolute;
+    width: 49px;
+}
+
+h1{
+    font-family: 'Poppins', sans-serif;
+    font-size: 60px;
+    font-style: normal;
+    font-weight: bold;
+    margin-left: 536px;
+}
+
+.cards-players{
+    display: flex;
+    justify-content: space-evenly;
+}
+
+h2{
+    color: var(--white-color);
+    font-family: 'Poppins', sans-serif;
+    font-size: 36px;
+    font-style: normal;
+    font-weight: bold;
+    line-height: 54px;
+    /* margin: 20px 0 20px 0; */
+    text-align: center;
+}
+
+h5{
+    color: var(--white-color);
+    margin: 0 0 0 100px;
+    font-family: 'Poppins', sans-serif;
+    font-size: 25px;
+    font-weight: bold;
+    line-height: 45px;
+    /* identical to box height */
+}
+
+.card-player1{
+    /* position: absolute; */
+    background: var(--green-color);
+    border: 3px solid var(--black-color);
+    border-radius: 20px;
+    /* box-sizing: border-box; */
+    height: 500px;
+    width: 370px;
+}
+
+.percent-player1, .percent-player2{
+    /* background: var(--blue-color); */
+    /* border: 2px solid var(--black-color); */
+    border-radius: 30px;
+    height: 40px;
+    margin-left: 35px;
+    width: 200px;
+}
+
+.percent-player1::-webkit-progress-bar, .percent-player2::-webkit-progress-bar{
+    background: var(--blue-color);
+    border-radius: 30px;
+}
+
+.percent-player1::-webkit-progress-value, .percent-player2::-webkit-progress-value{
+    background: var(--pink-color);
+    border-radius: 30px;
+}
+
+.container-img-player1{
+    background-color: var(--white-color);
+    border: 2px solid var(--black-color);
+    border-radius: 20px;
+    margin-left: 30px;
+    margin-top: 70px;
+    width: 300px;
+}
+
+.img-player1{
+    height: 170px;
+    margin-left: 50px;
+    transform: matrix(-1, 0, 0, 1, 0, 0);
+    width: 200px;
+}
+
+.button-player{
+    color: var(--white-color);
+    font-family: 'Poppins', sans-serif;
+    font-size: 20px;
+    font-weight: bold;
+    position: absolute;
+    width: 80px;
+    height: 80px;
+    background: var(--blue-color);
+    border: 3px solid var(--black-color);
+    border-radius: 100px;
+    margin-top: -20px;
+    margin-left: 20px;
+}
+
+.card-player2{
+    background: var(--yellow-color);
+    border: 3px solid var(--black-color);
+    border-radius: 20px;
+    height: 500px;
+    width: 370px;
+}
+
+
+
+.container-img-player2{
+    background-color: var(--white-color);
+    border: 2px solid var(--black-color);
+    border-radius: 20px;
+    margin-left: 30px;
+    margin-top: 70px;
+    width: 300px;
+}
+
+.img-player2{
+    height: 170px;
+    margin-left: 50px;
+    width: 200px;
+}
+
+/***********************************************************/
+/***************              Modal          ***************/
+/***********************************************************/
+.container-modal{
+    /* border: 1px solid var(--black-color); */
+    align-items: center;
+    display: flex;
+    height: 100vh;
+    justify-content: center;
+    width: 100%;
+}
+
+.jake-profile{
+    border-radius: 20px;
+    width: 350px;
+}
+
+.container-elements{
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    margin-left: 50px;
+}
+
+.winner{
+    color: var(--black-color);
+    font-family: 'Poppins', sans-serif;
+    font-size: 30px;
+    font-weight: bold;
+    width: 220px;
+}
+
+.player-winner{
+    color: var(--black-color);
+    font-family: 'Poppins', sans-serif;
+    font-size: 25px;
+    font-style: normal;
+    font-weight: bold;
+    width: 100px;
+}
+
+.btn-play-again{
+    /* position: absolute; */
+    background: var(--blue-color);
+    border: 3px solid var(--black-color);
+    border-radius: 40px;
+    box-sizing: border-box;
+    color: var(--white-color);
+    font-family: 'Poppins', sans-serif;
+    font-size: 30px;
+    font-weight: bold;
+    height: 70px;
+    margin-top: 20px;
+    width: 200px;
+}
+
+
+/***********************************************************/
+/***************            Footer           ***************/
+/***********************************************************/
+.footer{
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    width:100%;
+    margin-top: 50px;
+}
+
+.networks{
+    margin-right: 20px;
+}

index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="css/styles.css">
+        <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
+        <title>Platzi Game</title>
+    </head>
+    <body>
+        <div class="circle-left-small"></div>
+        <div class="circle-left-big"></div>
+
+        <div class="circle-right-big"></div>
+        <div class="circle-right-small"></div>
+        <section>
+            <h1>Platzi Game</h1>
+        </section>
+
+        <section class="cards-players">
+            <div class="card-player1">
+                <h2>Player 1</h2>
+                <div class="container-element-player1">
+                    <h5>50%</h5>
+                    <progress class="percent-player1" value="50" max="100"></progress>
+                    <a href="modal.html"><button class="button-player">Play</button></a>
+                </div>
+                <div class="container-img-player1">
+                    <img class="img-player1" src="images/player1.png" alt="Jugador 1">
+                </div>
+            </div>
+            <div class="card-player2">
+                <h2>Player 2</h2>
+                <div class="container-element-player2">
+                    <h5>20%</h5>
+                    <progress class="percent-player2" value="20" max="100"></progress>
+                    <a href="modal.html"><button class="button-player">Play</button></a>
+                </div>
+                <div class="container-img-player2">
+                    <img class="img-player2" src="images/player2.png" alt="Jugador 2">
+                </div>
+            </div>
+        </section>
+
+        <footer class="footer">
+            <p><b>Made by @Milena28-dev</b></p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <a class="networks" href="https://twitter.com/MilenaC33528101" class="social-link twitter"><img src="https://img.icons8.com/android/24/000000/twitter.png"/></a>
+
+            <a class="networks" href="https://www.instagram.com/mile.castro.7/?hl=es-la" class="social-link instagram"><img src="https://img.icons8.com/material/24/000000/instagram-new.png"/></a>
+
+            <a class="networks" href="https://github.com/Milena28-dev" class="social-link github"><img src="https://img.icons8.com/material-outlined/24/000000/github.png"/></a>
+
+            <a class="networks" href="https://www.linkedin.com/in/sandra-milena-castro-correa-712788124/" class="social-link linkedIn"><img src="https://img.icons8.com/android/24/000000/linkedin.png"/></a>
+        </footer>
+    </body>
+</html>

modal.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/styles.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="container-modal">
+        <div class="container-img">
+            <img class="jake-profile" src="images/jake.png" alt="Perfil">
+        </div>
+        <div class="container-elements">
+            <span class="winner">The winner is:</span>
+            <span class="player-winner">Player 1</span>
+            <button class="btn-play-again">Play Again</button>
+        </div>
+    </div>
+</body>
+</html>