-
Notifications
You must be signed in to change notification settings - Fork 354
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #366 from esmelinantonio/main
Pull request actividades Semana 2
- Loading branch information
Showing
8 changed files
with
247 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| <!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="styles.css" /> | ||
| <title>My Portfolio</title> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <header> | ||
| <h1>Hi,👋 My name is Esmelin Vivanco</h1> | ||
| </header> | ||
|
|
||
| <section id="about-me"> | ||
| <h2>I'm Software Engineer</h2> | ||
| <p> | ||
| I enjoy learning not only about the process of how things are done, | ||
| but also the reasoning behind them. I particularly enjoy web | ||
| development because it allows me to create solutions to real-world | ||
| problems. | ||
| </p> | ||
| <ul> | ||
| <li>🌍 I'm based in Cartagena de Indias, Colombia</li> | ||
| <li> | ||
| ✉️ You can contact me at | ||
| <a href="mailto:[email protected]">[email protected]</a> | ||
| </li> | ||
| <li>🧠 I'm learning React and Next</li> | ||
| </ul> | ||
| </section> | ||
|
|
||
| <section id="projects"> | ||
| <h2>Projects</h2> | ||
| <div class="cards"> | ||
| <article class="card"> | ||
| <h2>Name of the Project</h2> | ||
| <p> | ||
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, | ||
| quod vitae laboriosam hic totam voluptates repellat sed laborum | ||
| </p> | ||
| </article> | ||
| <article class="card"> | ||
| <h2>Name of the Project</h2> | ||
| <p> | ||
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, | ||
| quod vitae laboriosam hic totam voluptates repellat sed laborum | ||
| </p> | ||
| </article> | ||
| <article class="card"> | ||
| <h2>Name of the Project</h2> | ||
| <p> | ||
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, | ||
| quod vitae laboriosam hic totam voluptates repellat sed laborum | ||
| </p> | ||
| </article> | ||
| </div> | ||
| </section> | ||
|
|
||
| <h2>Skills</h2> | ||
| <img | ||
| src="./icons/javascript-icon.svg" | ||
| alt="javascript-icon" | ||
| width="36" | ||
| height="36" | ||
| /> | ||
| <img src="./icons/git-icon.svg" alt="git-icon" width="36" height="36" /> | ||
| <img | ||
| src="./icons/boopstrap-icon.svg" | ||
| alt="boopstrap-icon" | ||
| width="36" | ||
| height="36" | ||
| /> | ||
| <img src="./icons/node-icon.svg" alt="node-icon" width="36" height="36" /> | ||
|
|
||
| <h2>Socials</h2> | ||
| <img | ||
| src="./icons/git-social-icon.svg" | ||
| alt="git-social-icon" | ||
| width="36" | ||
| height="36" | ||
| /> | ||
|
|
||
| <section id="contact-me"> | ||
| <h2>Contact me</h2> | ||
| <form method="post"> | ||
| <div class="form-group"> | ||
| <label for="name">Nombre</label> | ||
| <input | ||
| id="name" | ||
| type="text" | ||
| placeholder="Nombre" | ||
| name="name" | ||
| required | ||
| /> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="email">Email</label> | ||
| <input | ||
| id="email" | ||
| type="email" | ||
| placeholder="Email" | ||
| name="email" | ||
| required | ||
| /> | ||
| </div> | ||
| <button id="submit" type="submit">Enviar</button> | ||
| </form> | ||
| </section> | ||
| </main> | ||
| </body> | ||
| <script type="text/javascript"> | ||
| $(document).ready(function () { | ||
| $("form").submit(function (e) { | ||
| e.preventDefault(); | ||
| }); | ||
| }); | ||
| </script> | ||
| </html> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| @import "https://fonts.googleapis.com/css?family=Roboto:300,400,500"; | ||
|
|
||
| html { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| * { | ||
| box-sizing: inherit; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0 auto; | ||
| max-width: 37.5em; | ||
| line-height: 1.5; | ||
| /* padding: 1rem 1rem; */ | ||
| background-color: #fefefe; | ||
| color: #555; | ||
| font-family: "Roboto", "Helvetica", "Arial", sans-serif; | ||
| } | ||
|
|
||
| header { | ||
| line-height: 1.2; | ||
| /* padding: 10vw 2em; */ | ||
| /* text-align: center; */ | ||
| gap: 2px; | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| header h1:hover { | ||
|
|
||
| color: #1A5D1A; | ||
| } | ||
|
|
||
| h1 { | ||
| display: block; | ||
| margin-top: 1rem; | ||
| margin-bottom: 1rem; | ||
| padding-top: 1rem; | ||
| /* white-space: nowrap; */ | ||
| /* border-right: 4px solid; */ | ||
| /* width: 28ch; */ | ||
| /* animation: typing 2s steps(12), blink .5s infinite step-end alternate; | ||
| overflow: hidden; */ | ||
| color: #333; | ||
|
|
||
| } | ||
| /* | ||
| @keyframes typing { | ||
| from { width: 0 } | ||
| } | ||
| @keyframes blink { | ||
| 20% { border-color: transparent;} | ||
| } */ | ||
|
|
||
| h2 { | ||
| margin-top: 1rem; | ||
| padding-top: 1rem; | ||
| } | ||
|
|
||
| h2, | ||
| strong { | ||
| color: #333; | ||
| } | ||
|
|
||
| .cards { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .card { | ||
| border: 1px solid #ddd; | ||
| border-radius: 8px; | ||
| padding: 20px; | ||
| margin: 0 10px; | ||
| } | ||
|
|
||
| .card h2 { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| .card p { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .form-group { | ||
| margin: 20px 0; | ||
| } | ||
|
|
||
| label, | ||
| input[type="text"], | ||
| input[type="email"] { | ||
| width: 100%; | ||
| height: 40px; | ||
| margin-top: -10px; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| label { | ||
| text-transform: uppercase; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| button { | ||
| padding: 16px 40px; | ||
| text-transform: uppercase; | ||
| font-weight: bold; | ||
| background: #FBD85D; | ||
| border: 1px solid #FAE392; | ||
| color: #333; | ||
| border-radius: 8px; | ||
| box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| button:hover { | ||
| background: #F1C93B; | ||
| } | ||
|
|
||
| button:active { | ||
| background: #ca8a04; | ||
| box-shadow: none; | ||
| } |