-
-
Save codecademydev/93e93e317934124714d607e58f608369 to your computer and use it in GitHub Desktop.
Codecademy export
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> | |
<head> | |
<link rel="stylesheet" href="style.css"> | |
</head> | |
<body> | |
<nav> | |
<header> | |
<h1>New York City</h1> | |
</header> | |
<ul> | |
<li><a href="#blog">Blog</a></li> | |
<li><a href="#media">Media</a></li> | |
<li><a href="#about">About</a></li> | |
</ul> | |
<main> | |
<section id="blog"> | |
<article> | |
<p>New York City is made up of five boroughs which include Queens, Manhattan, Brooklyn, the Bronx, and Staten Island. The city is the home of approximately 8 million people. In 1876, France gifted the City of New York what is known as the Statue of Liberty, which is currently located on Ellis Island commonly visited by tourists. However, it took 10 years to assemble and therefore wasn’t unveiled until 1886. Another tourist destination is Times Square. Times Square is commonly known for the big buildings, Broadway shows, and bright neon signs. This famous location was named after The New York Times after the Times moved to that location. Prior to that, it was named Longacre Square. New York City is also known for its bridges that connect the boroughs and allow ease of transportation.</p> | |
</article> | |
</section> | |
</main> | |
<figure> | |
<img src="https://codecademy-content.s3.amazonaws.com/courses/Semantic+HTML/statue-of-liberty.jpeg"/> | |
<figcaption>This is the Statue of Liberty, a popular tourist attraction located on Ellis Island.</figcaption> | |
</figure> | |
<aside> | |
<p>New York City is very popular for the variety of great food it has. Some of the top food items in NYC include:</p> | |
<ol> | |
<li>Pizza</li> | |
<li>Bageks</li> | |
<li>Burgers and Sandwiches</li> | |
<li>Ramen</li> | |
<li>Tacos</li> | |
<li>Pasta</li> | |
<li>Desserts</li> | |
</ol> | |
</aside> | |
</nav> | |
</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
body { | |
background: #e6e6e6; | |
} | |
nav ul { | |
list-style-type: none; | |
margin: 0; | |
padding: 0; | |
overflow: hidden; | |
background-color: #010e80; | |
display: table; | |
width: 100%; | |
} | |
nav li { | |
display: table-cell | |
} | |
li a { | |
display: block; | |
color: white; | |
text-align: center; | |
padding: 30px 30px; | |
text-decoration: none; | |
} | |
li a:hover { | |
background-color: #111; | |
} | |
h2 a { | |
padding: 33px 25px; | |
color: white; | |
text-decoration: none; | |
} | |
h2 a:hover { | |
background-color: #111; | |
} | |
figcaption{ | |
text-align:left; | |
margin: 50px; | |
} | |
header { | |
margin-left: 14px; | |
} | |
article { | |
text-align: left; | |
margin: 15px; | |
max-width: 80%; | |
font-size: 25px; | |
line-height: 32px; | |
} | |
img { | |
width: 400px; | |
height: 300px; | |
position:relative; | |
right:28px; | |
} | |
aside { | |
left: 10px; | |
border: 1px solid black; | |
padding: 15px; | |
max-width: 80%; | |
position: relative; | |
border-color: #010e80; | |
border-width: 5px; | |
font-size: 18px; | |
} | |
footer { | |
position: relative; | |
width: 100%; | |
bottom: -100px; | |
background-color: #010e80; | |
} | |
footer p { | |
color: white; | |
text-decoration: none; | |
padding: 10px; | |
text-align: center; | |
width: 100%; | |
box-sizing: border-box; | |
} | |
footer a { | |
color: white; | |
text-decoration: none; | |
text-align: center; | |
width: 100%; | |
} | |
video { | |
display: block; | |
width: 420px; | |
height: 250px; | |
padding:15px; | |
} | |
audio { | |
padding: 15px; | |
width: 98%; | |
box-sizing: border-box; | |
} | |
embed { | |
width: 400px; | |
height: 458px; | |
padding:15px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment