Created
January 20, 2020 19:11
-
-
Save matthieua/a2c5e76658e4c49d7eae3c8f02830d02 to your computer and use it in GitHub Desktop.
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="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
<title>Document</title> | |
<style> | |
.box { | |
background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%); | |
padding: 20px; | |
max-width: 400px; | |
margin: 0 auto; | |
} | |
h1 { | |
text-align: center; | |
} | |
h2 { | |
text-align: center; | |
} | |
img { | |
margin: 0 auto; | |
display: block; | |
border-radius: 5px; | |
} | |
p { | |
font-size: 16px; | |
line-height: 1.5; | |
} | |
button { | |
display: block; | |
background: rgba(0, 0, 0, 0.9); | |
border-radius: 10px; | |
border: none; | |
margin: 20px auto; | |
width: 100%; | |
color: white; | |
padding: 20px; | |
font-size: 24px; | |
cursor: pointer; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="box"> | |
<h1> | |
Lisbon | |
</h1> | |
<h2> | |
Capital of Portugal | |
</h2> | |
<img | |
src="https://i.insider.com/5a0b634b7c86cc3d038b47f0?width=2500&format=jpeg&auto=webp" | |
width="300" | |
/> | |
<p> | |
Lisbon is Portugal’s hilly, coastal capital city. From imposing São | |
Jorge Castle, the view encompasses the old city’s pastel-colored | |
buildings, Tagus Estuary and Ponte 25 de Abril suspension bridge. | |
Nearby, the National Azulejo Museum displays 5 centuries of decorative | |
ceramic tiles. Just outside Lisbon is a string of Atlantic beaches, from | |
Cascais to Estoril. | |
</p> | |
<a href="https://en.wikipedia.org/wiki/Lisbon"> | |
Read more on Wikipedia | |
</a> | |
<button> | |
Go to Lisbon | |
</button> | |
</div> | |
<script> | |
function subscribeToNewsletter() { | |
let firstName = prompt("What is your name?"); | |
let email = prompt("What is your email address?"); | |
alert( | |
`Thank you ${firstName}, we'll be in touch! We can't wait to show you Lisbon!` | |
); | |
} | |
let button = document.querySelector("button"); | |
button.addEventListener("click", subscribeToNewsletter); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment