Last active
April 22, 2022 14:57
-
-
Save Padawan-Mntn/48bac27fca30f6ad8866409e5b28b54a to your computer and use it in GitHub Desktop.
SheCodes Basics final project - Html CSS
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Marie Geai + Maps </title> | |
| <link rel="icon" type="image/x-icon" href="favicon.png"> | |
| <!--This code is my final project for the SheCodes Basic class, introducing the ropes of html and css.--> | |
| <!--It is the first draft of a portfolio page for my mapping work.--> | |
| <style> | |
| h1 { | |
| display: block; | |
| text-align: center; | |
| font-family: 'Segoe UI'; | |
| font-size: 28px; | |
| font-weight: lighter; | |
| line-height: normal; | |
| letter-spacing: 0.02em; | |
| color: black; | |
| margin: 20px auto; | |
| padding: 10px; | |
| padding-top: 40px; | |
| max-width: 1000px; | |
| } | |
| h2 { | |
| display: block; | |
| text-align: center; | |
| font-family: 'Segoe UI'; | |
| font-size: 20px; | |
| font-weight: lighter; | |
| line-height: normal; | |
| letter-spacing: 0.02em; | |
| color: black; | |
| margin: 0 auto; | |
| padding: 10px 20px; | |
| } | |
| p { | |
| display: block; | |
| text-align: center; | |
| font-family: 'Segoe UI'; | |
| font-size: 20px; | |
| font-weight: lighter; | |
| line-height: normal; | |
| letter-spacing: 0.02em; | |
| color: black; | |
| margin: 5px auto; | |
| padding:40px; | |
| max-width: 1000px; | |
| } | |
| button { | |
| display: block; | |
| text-transform: uppercase; | |
| font-family: 'Segoe UI'; | |
| font-size: 14px; | |
| font-weight: normal; | |
| line-height: 1.4; | |
| letter-spacing: 3px; | |
| border: 2px solid #333; | |
| border-radius: 10px; | |
| } | |
| .btn { | |
| background-color:#333b50; | |
| color: white; | |
| margin: 100px auto; | |
| padding: 25px; | |
| } | |
| .btn:hover { | |
| background-color: white; | |
| opacity: 0.8; | |
| color: #333b50; | |
| transition: all 200ms ease-in-out; | |
| cursor: pointer; | |
| } | |
| img { | |
| display: block; | |
| margin: 5px auto; | |
| padding-top: 20px; | |
| padding-bottom: 20px; | |
| } | |
| a { | |
| color: white; | |
| text-decoration: none; | |
| } | |
| .header { | |
| font-family: 'Courier'; | |
| font-size: 28px; | |
| font-weight: bolder; | |
| text-transform: uppercase; | |
| line-height: 1em; | |
| letter-spacing: 0.098em; | |
| color: black; | |
| background-color: white; | |
| margin: 20px auto; | |
| padding: 30px; | |
| } | |
| .me { | |
| font-family: 'Trebuchet MS'; | |
| font-style: normal; | |
| letter-spacing: 0.08em; | |
| padding: 25px; | |
| padding-left: 90px; | |
| opacity: 0.9; | |
| } | |
| .home { | |
| font-family: 'Segoe UI'; | |
| font-size: 22px; | |
| font-weight: normal; | |
| color:#999; | |
| letter-spacing: 0.02em; | |
| } | |
| .link { | |
| font-family: 'Segoe UI'; | |
| font-size: 15px; | |
| font-weight: 400; | |
| font-style: normal; | |
| color:#999; | |
| } | |
| .contact-container{ | |
| margin:90px auto; | |
| padding:50px; | |
| max-width: 1000px; | |
| border-radius: 10px; | |
| background-image: linear-gradient(to top, #303a52 0%, #33647e 100%); | |
| } | |
| .contact-text{ | |
| display: block; | |
| font-size: 18px; | |
| font-family: 'Segoe UI'; | |
| font-weight: lighter; | |
| line-height: normal; | |
| letter-spacing: 0.02em; | |
| text-align: center; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="header"> | |
| <span class="me">Marie Geai + Maps</span> | |
| <span class="home">Home</strong></span> | |
| <span class="link">Maps</span> | |
| <span class="link">Skills</span> | |
| </div> | |
| </header> | |
| <img src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/027/871/original/USGS.JPG?1645614962" alt="Cryosphere satellite imagery by the USGS" /> | |
| <p> | |
| Hi, I'm Marie! I am a cartographer. I have been creating maps and analyzing spatial data for 10 years. | |
| <br> | |
| I am working with satellite images, DEM, geophysical surveys data and much more. | |
| <br> | |
| I specialize in 3D terrain mapping for natural hazards assessment. | |
| <br> | |
| <br> | |
| This page is step two after printing "Hello world", which brought me the greatest sense of achievement since learning how to ride a bike. | |
| <br> | |
| </p> | |
| <img src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/027/872/original/NASA.JPG?1645614977g" alt="Coastal and marine satellite imagery by NASA" /> | |
| <h1>Gain insights and boost your storytelling with maps!</h1> | |
| <h2> Geospatial data is data with location information. | |
| <br> | |
| <br> Leveraging the power of "where" can supercharge your data analysis. | |
| <br> | |
| <br> Cartographers analyze and visualize geospatial data | |
| <br>to evaluate location-related suitability, interpret patterns, increase efficiency and much more, | |
| <br>bringing new perspectives to your insight and decision-making. | |
| <br> | |
| <br> <small>Maps and imagery are also super pretty, which doesn't hurt.</small> | |
| </h2> | |
| <div class="contact-container"> | |
| <span class="contact-text"> | |
| If you would like to know more, you can reach me anytime via email! | |
| <br> I look forward to hearing from you. | |
| <br/> | |
| <br/> | |
| <a href="mailto:geai@ualberta.ca">geai@ualberta.ca</a> | |
| <br/> | |
| <a href="https://www.linkedin.com/in/mariegeai/" target="_blank"</a> | |
| <img src="https://static.wixstatic.com/media/7528824071724d12a3e6c31eee0b40d4.png/v1/fill/w_38,h_38,al_c,q_85,usm_0.66_1.00_0.01/7528824071724d12a3e6c31eee0b40d4.webp" width="30px" height="30px"> | |
| </div> | |
| </a> | |
| </span> | |
| </div> | |
| <button class="btn">Register to our mailing list</button> | |
| <p><small><em>Imagery sources: USGS and NASA. Personal portfolio under construction. <strong>Stay tuned!</strong></em></small> </p> | |
| <hr> | |
| <script> | |
| document.querySelector('.btn').addEventListener('click', function() | |
| { | |
| let mail = prompt('Please enter your email adress'); | |
| if (mail.length) { | |
| alert('Welcome to the inner circle!')} | |
| else { | |
| alert('Woops! Please enter your adress again')} | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment