Created
February 3, 2019 02:12
-
-
Save ferolo3000/26a023b2b57eebb88de984337d7bacde to your computer and use it in GitHub Desktop.
Portfolio_FRO
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
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <body class="w3-light-grey"> | |
| <!-- Page Container --> | |
| <div class="w3-content w3-margin-top" style="max-width:1400px;"> | |
| <!-- The Grid --> | |
| <div class="w3-row-padding"> | |
| <!-- Left Column --> | |
| <div class="w3-third"> | |
| <div class="w3-white w3-text-grey w3-card-4"> | |
| <div class="w3-display-container"> | |
| <img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/4_avatar-512.png" alt="Avatar"> | |
| <div class="w3-display-bottom w3-container w3-text-black"> | |
| <h2 id="about">Hello, I am Fernanda</h2> | |
| <h3 style="text-align:left; color: grey">Web // Mobile Developer</h3> | |
| </div> | |
| </div> | |
| <div class="w3-container"> | |
| <hr> | |
| <p class="w3-large"><b><i class="fa fa-code fa-fw w3-margin-right" style="color:#cc3333"></i>Skills</b></p> | |
| <p>JavaScript</p> | |
| <div class="w3-dark-grey w3-round-xlarge w3-small"> | |
| <div class="w3-container w3-center w3-round-xlarge" style="width:80%; background-color:#cc3333">80%</div> | |
| </div> | |
| <p>Java</p> | |
| <div class="w3-dark-grey w3-round-xlarge w3-small"> | |
| <div class="w3-container w3-center w3-round-xlarge" style="width:60%; background-color:#cc3333"> | |
| <div class="w3-center w3-text-white">60%</div> | |
| </div> | |
| </div> | |
| <p>Python</p> | |
| <div class="w3-dark-grey w3-round-xlarge w3-small"> | |
| <div class="w3-container w3-center w3-round-xlarge" style="width:80%; background-color:#cc3333">80%</div> | |
| </div> | |
| <p>HTML</p> | |
| <div class="w3-dark-grey w3-round-xlarge w3-small"> | |
| <div class="w3-container w3-center w3-round-xlarge" style="width:90%; background-color:#cc3333">90%</div> | |
| </div> | |
| <p>CSS</p> | |
| <div class="w3-dark-grey w3-round-xlarge w3-small"> | |
| <div class="w3-container w3-center w3-round-xlarge" style="width:90%; background-color:#cc3333">90%</div> | |
| </div> | |
| <p>Android Studio</p> | |
| <div class="w3-dark-grey w3-round-xlarge w3-small"> | |
| <div class="w3-container w3-center w3-round-xlarge" style="width:80%; background-color:#cc3333">80%</div> | |
| </div> | |
| <br> | |
| </div> | |
| </div><br> | |
| <!-- End Left Column --> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="w3-twothird"> | |
| <!-- About --> | |
| <div class="w3-container w3-card w3-white w3-margin-bottom"> | |
| <h2 class="w3-text-grey w3-padding-16"><i class="fa fa-info fa-fw w3-margin-right w3-xxlarge" style="color:#cc3333"></i></i>About</h2> | |
| <p>I'm an enthusiastic web/mobile developer that enjoy being challenged and engaging with projects that require me to work outside my comfort and knowledge set in order to challenge my skills and learn in the process. I have a background in Business and experience in Data Analysis.</p> | |
| </div> | |
| <div class="w3-container w3-card w3-white"> | |
| <h2 class="w3-text-grey w3-padding-16"><i class="fa fa-briefcase fa-fw w3-margin-right w3-xxlarge" style="color:#cc3333"></i>Portfolio</h2> | |
| <div class="responsive"> | |
| <div class="gallery"> | |
| <a target="_blank" href="img_5terre.jpg"> | |
| <img src="https://oceanwp.org/wp-content/uploads/2017/07/portfolio-image.png" alt="Cinque Terre" width="600" height="400"> | |
| </a> | |
| <div class="desc">Add a description of the image here</div> | |
| </div> | |
| </div> | |
| <div class="responsive"> | |
| <div class="gallery"> | |
| <a target="_blank" href="img_forest.jpg"> | |
| <img src="https://oceanwp.org/wp-content/uploads/2017/07/portfolio-image.png" alt="Forest" width="600" height="400"> | |
| </a> | |
| <div class="desc">Add a description of the image here</div> | |
| </div> | |
| </div> | |
| <div class="responsive"> | |
| <div class="gallery"> | |
| <a target="_blank" href="img_forest.jpg"> | |
| <img src="https://oceanwp.org/wp-content/uploads/2017/07/portfolio-image.png" alt="Forest" width="600" height="400"> | |
| </a> | |
| <div class="desc">Add a description of the image here</div> | |
| </div> | |
| </div> | |
| <div class="responsive"> | |
| <div class="gallery"> | |
| <a target="_blank" href="img_forest.jpg"> | |
| <img src="https://oceanwp.org/wp-content/uploads/2017/07/portfolio-image.png" alt="Forest" width="600" height="400"> | |
| </a> | |
| <div class="desc">Add a description of the image here</div> | |
| </div> | |
| </div> | |
| <div class="responsive"> | |
| <div class="gallery"> | |
| <a target="_blank" href="img_forest.jpg"> | |
| <img src="https://oceanwp.org/wp-content/uploads/2017/07/portfolio-image.png" alt="Forest" width="600" height="400"> | |
| </a> | |
| <div class="desc">Add a description of the image here</div> | |
| </div> | |
| </div> | |
| <div class="responsive"> | |
| <div class="gallery"> | |
| <a target="_blank" href="img_forest.jpg"> | |
| <img src="https://oceanwp.org/wp-content/uploads/2017/07/portfolio-image.png" alt="Forest" width="600" height="400"> | |
| </a> | |
| <div class="desc">Add a description of the image here</div> | |
| </div> | |
| </div> | |
| <div class="responsive"> | |
| <div class="gallery"> | |
| <a target="_blank" href="img_lights.jpg"> | |
| <img src="https://oceanwp.org/wp-content/uploads/2017/07/portfolio-image.png" alt="Northern Lights" width="600" height="400"> | |
| </a> | |
| <div class="desc">Add a description of the image here</div> | |
| </div> | |
| </div> | |
| <div class="responsive"> | |
| <div class="gallery"> | |
| <a target="_blank" href="img_mountains.jpg"> | |
| <img src="https://oceanwp.org/wp-content/uploads/2017/07/portfolio-image.png" alt="Mountains" width="600" height="400"> | |
| </a> | |
| <div class="desc">Add a description of the image here</div> | |
| </div> | |
| </div> | |
| <!-- End Right Column --> | |
| </div> | |
| <!-- End Grid --> | |
| </div> | |
| <!-- End Page Container --> | |
| </div> | |
| <footer class="footer"> | |
| <h3 style="color: white">Contact me</h3> | |
| <h4>fro@mikroconsultancy.com</h4> | |
| <div class="text-center contact-social-icons"> | |
| <h3 style="color: white">Or get in touch:</h3> | |
| <ul class="centered"><a target='_blank' href="https://www.linkedin.com/in/fernandaromerolo/"><li> | |
| <i class="fa fa-linkedin-square" style='font-size:36px'></i></li></a> | |
| <a target='_blank' href="https://github.com/ferolo3000"><li> | |
| <i class="fa fa-github" style='font-size:36px'></i></li></a> | |
| <a target='_blank' href="https://freecodecamp.com/ferolo3000"><li style='font-size:36px'>(<i class="fa fa-fire" style='font-size:36px'></i>)</li></a> | |
| <a target='_blank' href="https://twitter.com/ferolo3000"><li><i class="fa fa-twitter" style='font-size:36px'></i></li></a> | |
| </body> | |
| </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
| html,body,h1,h2,h3,h4,h5,h6,footer {font-family: sans-serif} | |
| #about{ | |
| display: inline-block; | |
| overflow: hidden; | |
| letter-spacing: 2px; | |
| animation: typing 5s steps(20, end), blink .75s step-end infinite; | |
| white-space: nowrap; | |
| font-size: 30px; | |
| font-weight: 600; | |
| border-right: 4px solid orange; | |
| box-sizing: border-box; | |
| } | |
| @keyframes typing { | |
| from { | |
| width: 0% | |
| } | |
| to { | |
| width: 50% | |
| } | |
| } | |
| @keyframes blink { | |
| from, to { | |
| border-color: transparent | |
| } | |
| 50% { | |
| border-color: red; | |
| } | |
| } | |
| img { | |
| width: 70%; | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| div.gallery { | |
| border: 1px solid #ccc; | |
| box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); | |
| margin-bottom: 30px; | |
| } | |
| div.gallery:hover { | |
| background-color: #ff5050; | |
| color: white; | |
| } | |
| div.gallery img { | |
| width: 100%; | |
| height: auto; | |
| } | |
| div.desc { | |
| padding: 15px; | |
| text-align: center; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .responsive { | |
| padding: 0 6px; | |
| float: left; | |
| width: 24.99999%; | |
| } | |
| @media only screen and (max-width: 700px) { | |
| .responsive { | |
| width: 49.99999%; | |
| margin: 6px 0; | |
| } | |
| } | |
| @media only screen and (max-width: 500px) { | |
| .responsive { | |
| width: 100%; | |
| } | |
| } | |
| .clearfix:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .contact-social-icons ul a li { | |
| display: inline-block; | |
| padding: 1%; } | |
| .footer { | |
| color: #ff4242; | |
| padding: 20px; | |
| text-align: center; | |
| background: #595959; | |
| } |
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
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> | |
| <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment