Last active
December 27, 2020 21:07
-
-
Save christhoph/af1a11e29ec289aae2d49f14125e714b to your computer and use it in GitHub Desktop.
Practice class Asignation and Destructuring
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <link rel="stylesheet" href="css/styles.css" /> | |
| <title>Asignation and Destructuring</title> | |
| </head> | |
| <body> | |
| <main class="profile"> | |
| <div class="wrapper"> | |
| <div class="profile-content" id="user"></div> | |
| </div> | |
| </main> | |
| <script src="js/main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const user = { | |
| name: "Ash", | |
| lastName: "Ketchum", | |
| avatar: "./images/ash.jpg", | |
| bio: | |
| "Tengo 10 años y mi sueño es convertime en maestro pokemon. Actualmente viajo con Pikachu y Go.", | |
| city: "Pueblo Paleta", | |
| social: [150, 160, 130, 255], | |
| }; | |
| const User = ({ name, lastName, avatar, bio, city, social }) => { | |
| const fullname = `${name} ${lastName}`; | |
| const socialValues = social.map((value) => `<p>${value}</p>`).join(""); | |
| return ` | |
| <div class="user"> | |
| <img src="${avatar}" alt="${fullname}" width="140" height="140" /> | |
| <div class="details"> | |
| <p>${fullname}</p> | |
| </div> | |
| <p class="city"><em>${city}</em></p> | |
| <div class="social"> | |
| ${socialValues} | |
| </div> | |
| <div class="bio"> | |
| <p>${bio}</p> | |
| </div> | |
| </div> | |
| `; | |
| }; | |
| window.user.innerHTML = User(user); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 0; | |
| font-family: system-ui, Helvetica, sans-serif; | |
| background-color: white; | |
| text-align: center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| background: #f8f9fd; | |
| } | |
| .wrapper { | |
| max-width: 1020px; | |
| margin: auto; | |
| } | |
| h1 { | |
| font-size: 110px; | |
| line-height: 100px; | |
| } | |
| .button { | |
| color: white; | |
| background: #3f69ff; | |
| border: none; | |
| font-size: 1em; | |
| padding: 0.7em 2em; | |
| border-radius: 0.5em; | |
| font-weight: bold; | |
| cursor: pointer; | |
| } | |
| .profile { | |
| flex: 1; | |
| } | |
| .profile-content { | |
| height: 700px; | |
| background: url("../images/user.png") center top no-repeat; | |
| background-size: contain; | |
| max-width: 350px; | |
| margin: 1em auto; | |
| border-radius: 1em; | |
| box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); | |
| } | |
| .user { | |
| padding-top: 30px; | |
| } | |
| img { | |
| border-radius: 50%; | |
| } | |
| .details { | |
| background: white; | |
| padding: 1px; | |
| font-size: 1.2em; | |
| } | |
| .social { | |
| padding: 1em 0; | |
| font-weight: bold; | |
| background: #f8f9fd; | |
| display: flex; | |
| justify-content: space-evenly; | |
| } | |
| .bio { | |
| display: flex; | |
| background: white; | |
| } | |
| .city { | |
| background: white; | |
| margin: 0; | |
| padding: 1em; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment