dsn1675-assignment-1's Introduction
dsn1675-assignment-1's People
Contributors
Watchers
dsn1675-assignment-1's Issues
url help
Hey @thomasjbradley,
I submitted my assignment 2 this afternoon, left to go to work, and when I got home I went to go and check it in the browser and the url doesn't work. I put nearly 4 days of work into the first assignment. I'm worried it didn't work and I'm going to get zero after all that effort. I've never had this problem before and I don't understand what's wrong. Do you know why I'm getting a 404 Error?
Thank you,
Ashley
Images bigger than my screen.
Hey @thomasjbradley,
Thank you for the help with the three problems, the video was perfectly easy. One last problem, I sized all my images to 1200px wide, but for some reason no matter what percentage or margin I put they extended past the margins of all the other things on my website. Any guess why? (I supplied my entire html so you can see what's happening in the browser.) Thank you so much for taking the time to help me with this stuff.
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<link href="css/main.css" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Cinzel:700|Open+Sans:300' rel='stylesheet' type='text/css'>
<title>Museum of Antiquities</title>
</head>
<body>
<header>
<img class="logo" src="images/logo.svg" alt="Museum logo.">
<h1>Museum of Antiquities</h1>
<a class="button" href="">BUY</a>
<nav>
<ol>
<li class="seven-wonders"><a href="#seven-wonders">Seven Wonders</a></li>
<li><a href="#buy-tickets">Buy Tickets</a></li>
<li><a href="#now-playing">Now Playing</a></li>
<li><a href="#this-week">This Week</a></li>
</ol>
</nav>
</header>
<main>
<div class="banner-1">
<strong>The Seven Wonders <br> of the Ancient World</strong>
<p>Remarkable constructions of classical antiquity <br> almost completely lost in time.</p>
</div>
<img class="wonders" src="images/wonders.jpg" alt="The Seven Wonders of the Ancient World.">
<h2 id="seven-wonders">The Seven Wonders</h2>
<img class="wonders-info" src="images/giza.png" alt="The Great Pyramid of Giza">
<h3>Great Pyramid of Giza</h3>
<dl>
<dt>Date of construction:</dt> <dd>2584–2561 BC</dd>
<dt>Builders:</dt> <dd>Egyptians</dd>
<dt>Location:</dt> <dd>Giza Necropolis, Egypt</dd>
</dl>
<a class="learn-more" href="">Learn more about Giza</a>
<img class="wonders-info" src="images/babylon.jpg" alt="The Hanging Gardens of Bablyon">
<h3>Hanging Gardens of Babylon</h3>
<dl>
<dt>Date of construction:</dt> <dd>Circa 600 BC</dd>
<dt>Builders:</dt> <dd>Babylonians</dd>
<dt>Location:</dt> <dd>Nineveh, Iraq</dd>
</dl>
<a class="learn-more" href="">Learn more about the Hanging Gardens</a>
<img class="wonders-info" src="images/artemis.jpg" alt="The Temple of Artemis">
<h3>Temple of Artemis</h3>
<dl>
<dt>Date of construction:</dt> <dd>Circa 550 BC</dd>
<dt>Builders:</dt> <dd>Greeks</dd>
<dt>Location:</dt> <dd>Selçuk, Turkey</dd>
</dl>
<a class="learn-more" href="">Learn more about the Temple</a>
<img class="wonders-info" src="images/zeus.jpg" alt="The Statue of Zeus at Olympia">
<h3>Statue of Zeus at Olympia</h3>
<dl>
<dt>Date of construction:</dt> <dd>435 BC</dd>
<dt>Builders:</dt> <dd>Greeks</dd>
<dt>Location:</dt> <dd>Olympia, Greece</dd>
</dl>
<a class="learn-more" href="">Learn more about the Statue</a>
<img class="wonders-info" src="images/halicarnassus.jpg" alt="The Mausoleum at Halicarnassus">
<h3>Mausoleum at Halicarnassus</h3>
<dl>
<dt>Date of construction:</dt> <dd>351 BC</dd>
<dt>Builders:</dt> <dd>Persians</dd>
<dt>Location:</dt> <dd>Bodrum, Turkey</dd>
</dl>
<a class="learn-more" href="">Learn more about the Mausoleum</a>
<img class="wonders-info" src="images/rhodes.jpg" alt="The Colossus of Rhodes">
<h3>Colossus of Rhodes</h3>
<dl>
<dt>Date of construction:</dt> <dd>292–280 BC</dd>
<dt>Builders:</dt> <dd>Greeks</dd>
<dt>Location:</dt> <dd>Rhodes, Greece</dd>
</dl>
<a class="learn-more" href="">Learn more about Colossus</a>
<img class="wonders-info" src="images/alexandria.jpg" alt="The Lighthouse of Alexandria">
<h3>Lighthouse of Alexandria</h3>
<dl>
<dt>Date of construction:</dt> <dd>Circa 280 BC</dd>
<dt>Builders:</dt> <dd>Ptolemaic Egyptians</dd>
<dt>Location:</dt> <dd>Alexandria, Egypt</dd>
</dl>
<a class="learn-more-bottom" href="">Learn more about the Lighthouse</a>
<div class="buy">
<h2 id="buy-tickets" class="buy-h2">Buy tickets</h2>
<p>Come explore the ancient wonders with our amazing teleportation technology that jumps you around the world.</p>
<a class="left" href="">$15 for adults</a>
<a class="right" href="">$5 for kids</a>
<h2 class="buy-h2">Become a member</h2>
<p>Is one visit not enough? Join our yearly program for unlimited access.</p>
<a class="left" href="">$99 for adults</a>
<a class="right" href="">$39 for kids</a>
</div>
<h2 id="now-playing" class="playing-now">Now playing on the large screen</h2>
<div class="banner-2">
<strong>Atlantis: Why we’re so mysterious</strong>
<p>From allegory to fiction to mystery</p>
<a href="">See show times</a>
</div>
<img class="atlantis" src="images/atlantis.jpg" alt="Image of Atlantis.">
<h2 id="this-week" class="week-h2">This week at the museum</h2>
<h3>Saturday & Sunday</h3>
<ul class="week">
<li>Atlantis city tours</li>
<li>Underwater explorer: see outside the bubble</li>
</ul>
<h3>Monday</h3>
<ul class="week">
<li>Try this out: have fun building your own ancient wonder</li>
<li>Amazing architecture: explore the science of how the pyramids were built</li>
</ul>
<h3>Tuesday</h3>
<ul class="week">
<li>Awesome art: witness art in action as a marble sculpture is born</li>
<li>Gold rush: learn about the metal and why it was so coveted</li>
</ul>
<h3>Wednesday</h3>
<ul class="week">
<li>Try this out: wear clothes that the ancients wore</li>
<li>Gardenology: learn to plant and maintain amazing gardens</li>
</ul>
<h3>Thursday</h3>
<ul class="week">
<li>Amazing architecture: explore the science of buildings</li>
<li>Gardenology: the science behind trees and the environment</li>
</ul>
<h3>Friday</h3>
<ul class="week">
<li>Atlantis city tours</li>
<li>Awesome art: witness a full mosaic floor under construction</li>
</ul>
</main>
<footer>
<aside>© Museum of Antiquities</aside>
<address>[email protected]</address>
<p>1 888 000 1618</p>
<div class="hours-directions">
<a href="">Hours</a>
<a href="">Directions</a>
</div>
<p>1618 Plato Blvd.</p>
<p>Atlantis, Atlantis, Atlantic Ocean</p>
<ul>
<li><a href="">Exhibits</a></li>
<li><a href="">Collections</a></li>
<li><a href="">Donors & sponsors</a></li>
<li><a href="">Teacher information</a></li>
<li><a href="">Birthday rentals</a></li>
</ul>
</footer>
</body>
</html>
h2 {
font-family: 'Cinzel', serif;
font-size: 1.5em;
color: #231601;
text-align: center;
margin-top: 1em;
margin-bottom: 0;
}
.wonders-info {
width: 100%;
margin-left: 1em;
margin-right: 1em;
margin-top: 2em;
clear: both;
}
h3 {
font-family: 'Cinzel', serif;
font-size: 0.8em;
margin-left: 1em;
text-transform: uppercase;
color: #9e6100;
margin-bottom: 0em;
margin-top: 0.5em;
}
.learn-more, .learn-more-bottom {
font-size: 0.7em;
text-decoration: none;
color: white;
margin-left: 1em;
margin-top: 1em;
background-color: #413f0c;
padding: 0.5em;
opacity: 0.5;
float: left;
clear: both;
}
.learn-more-bottom {
margin-bottom: 3em;
}
.learn-more:hover {
color: white;
background-color: #413f0c;
opacity: 10;
}
dt, dd {
font-size: 0.8em;
margin-top: 0;
display: inline;
}
dt {
margin-left: 1em;
color: #413f0c;
float: left;
clear: left;
}
dd {
margin-left: 0.5em;
float: left;
}
dl{
margin-top: 0;
margin-bottom: 0.5em;
}
Need help with a few problems I can't figure out.
Hey @thomasjbradley!
If it will take too long to answer these, let me know and I will try and catch you while on campus. Otherwise, I have 3 problems before I can hand this in. I have so far validated the html and css. CSS is validated.
1 The html validation says my link to the google fonts is invalid for using an illegal character. I have no idea what that means (see my html below).
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<link href="css/main.css" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Cinzel:700|Open+Sans:300' rel='stylesheet' type='text/css'>
<title>Museum of Antiquities</title>
</head>
<body>
2 I can't figure out why I can get a background behind my first 2 price buttons, but not behind the next 2 price buttons under the Buy Tickets heading (see my html and css below).
<div class="buy">
<h2 id="buy-tickets" class="buy-h2">Buy tickets</h2>
<p>Come explore the ancient wonders with our amazing teleportation technology that jumps you around the world.</p>
<a class="left" href="">$15 for adults</a>
<a class="right" href="">$5 for kids</a>
<h2 class="buy-h2">Become a member</h2>
<p>Is one visit not enough? Join our yearly program for unlimited access.</p>
<a class="left" href="">$99 for adults</a>
<a class="right" href="">$39 for kids</a>
</div>
.buy-h2 {
padding: 0.5em;
padding-top: 1em;
padding-bottom: 0;
margin-top: 1.5em;
color: white;
text-align: center;
}
.buy {
text-align: center;
background-color: #231601;
opacity: 0.8;
}
.buy p {
margin: 0;
padding: 0.5em;
color: #9e6100;
font-size: 0.8em;
text-align: center;
}
.buy a {
font-family: 'Cinzel', serif;
text-decoration: none;
color: white;
background-color: #413f0c;
padding: 0.5em;
}
.left {
float: left;
margin-left: 1em;
margin-top: 1em;
margin-bottom: 2em;
}
.right {
float: right;
margin-right: 1em;
margin-top: 1em;
margin-bottom: 2em;
}
.buy a:hover {
color: white;
background-color: #9e6100;
}
3 I can't figure out how to place <dd>s next to <dt>s and then have each <dt>—<dd> pair show one after the other, as a list (see my html and css below). Every solution I have found on the web seems unnecessarily complicated.
<h3>Great Pyramid of Giza</h3>
<dl>
<dt>Date of construction:</dt> <dd>2584–2561 BC</dd>
<dt>Builders:</dt> <dd>Egyptians</dd>
<dt>Location:</dt> <dd>Giza Necropolis, Egypt</dd>
</dl>
<a class="learn-more" href="">Learn more about Giza</a>
dt, dd {
font-size: 0.8em;
margin-top: 0;
display: inline;
}
dt {
margin-left: 1em;
color: #413f0c;
}
dd {
margin-left: 0.5em;
}
dl{
margin-top: 0;
margin-bottom: 0.5em;
}
I've been stuck on these problems for a while now and figured it was time to look for some help. Below you'll find my entire html for reference.
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<link href="css/main.css" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Cinzel:700|Open+Sans:300' rel='stylesheet' type='text/css'>
<title>Museum of Antiquities</title>
</head>
<body>
<header>
<img class="logo" src="images/logo.svg" alt="Museum logo.">
<h1>Museum of Antiquities</h1>
<a class="button" href="">BUY</a>
<nav>
<ol>
<li class="seven-wonders"><a href="#seven-wonders">Seven Wonders</a></li>
<li><a href="#buy-tickets">Buy Tickets</a></li>
<li><a href="#now-playing">Now Playing</a></li>
<li><a href="#this-week">This Week</a></li>
</ol>
</nav>
</header>
<main>
<div class="banner-1">
<strong>The Seven Wonders <br> of the Ancient World</strong>
<p>Remarkable constructions of classical antiquity <br> almost completely lost in time.</p>
</div>
<img class="wonders" src="images/wonders.jpg" alt="The Seven Wonders of the Ancient World.">
<h2 id="seven-wonders">The Seven Wonders</h2>
<img class="wonders-info" src="images/giza.png" alt="The Great Pyramid of Giza">
<h3>Great Pyramid of Giza</h3>
<dl>
<dt>Date of construction:</dt> <dd>2584–2561 BC</dd>
<dt>Builders:</dt> <dd>Egyptians</dd>
<dt>Location:</dt> <dd>Giza Necropolis, Egypt</dd>
</dl>
<a class="learn-more" href="">Learn more about Giza</a>
<img class="wonders-info" src="images/babylon.jpg" alt="The Hanging Gardens of Bablyon">
<h3>Hanging Gardens of Babylon</h3>
<dl>
<dt>Date of construction:</dt> <dd>Circa 600 BC</dd>
<dt>Builders:</dt> <dd>Babylonians</dd>
<dt>Location:</dt> <dd>Nineveh, Iraq</dd>
</dl>
<a class="learn-more" href="">Learn more about the Hanging Gardens</a>
<img class="wonders-info" src="images/artemis.jpg" alt="The Temple of Artemis">
<h3>Temple of Artemis</h3>
<dl>
<dt>Date of construction:</dt> <dd>Circa 550 BC</dd>
<dt>Builders:</dt> <dd>Greeks</dd>
<dt>Location:</dt> <dd>Selçuk, Turkey</dd>
</dl>
<a class="learn-more" href="">Learn more about the Temple</a>
<img class="wonders-info" src="images/zeus.jpg" alt="The Statue of Zeus at Olympia">
<h3>Statue of Zeus at Olympia</h3>
<dl>
<dt>Date of construction:</dt> <dd>435 BC</dd>
<dt>Builders:</dt> <dd>Greeks</dd>
<dt>Location:</dt> <dd>Olympia, Greece</dd>
</dl>
<a class="learn-more" href="">Learn more about the Statue</a>
<img class="wonders-info" src="images/halicarnassus.jpg" alt="The Mausoleum at Halicarnassus">
<h3>Mausoleum at Halicarnassus</h3>
<dl>
<dt>Date of construction:</dt> <dd>351 BC</dd>
<dt>Builders:</dt> <dd>Persians</dd>
<dt>Location:</dt> <dd>Bodrum, Turkey</dd>
</dl>
<a class="learn-more" href="">Learn more about the Mausoleum</a>
<img class="wonders-info" src="images/rhodes.jpg" alt="The Colossus of Rhodes">
<h3>Colossus of Rhodes</h3>
<dl>
<dt>Date of construction:</dt> <dd>292–280 BC</dd>
<dt>Builders:</dt> <dd>Greeks</dd>
<dt>Location:</dt> <dd>Rhodes, Greece</dd>
</dl>
<a class="learn-more" href="">Learn more about Colossus</a>
<img class="wonders-info" src="images/alexandria.jpg" alt="The Lighthouse of Alexandria">
<h3>Lighthouse of Alexandria</h3>
<dl>
<dt>Date of construction:</dt> <dd>Circa 280 BC</dd>
<dt>Builders:</dt> <dd>Ptolemaic Egyptians</dd>
<dt>Location:</dt> <dd>Alexandria, Egypt</dd>
</dl>
<a class="learn-more" href="">Learn more about the Lighthouse</a>
<div class="buy">
<h2 id="buy-tickets" class="buy-h2">Buy tickets</h2>
<p>Come explore the ancient wonders with our amazing teleportation technology that jumps you around the world.</p>
<a class="left" href="">$15 for adults</a>
<a class="right" href="">$5 for kids</a>
<h2 class="buy-h2">Become a member</h2>
<p>Is one visit not enough? Join our yearly program for unlimited access.</p>
<a class="left" href="">$99 for adults</a>
<a class="right" href="">$39 for kids</a>
</div>
<h2 id="now-playing" class="playing-now">Now playing on the large screen</h2>
<div class="banner-2">
<strong>Atlantis: Why we’re so mysterious</strong>
<p>From allegory to fiction to mystery</p>
<a href="">See show times</a>
</div>
<img class="atlantis" src="images/atlantis.jpg" alt="Image of Atlantis.">
<h2 id="this-week" class="week-h2">This week at the museum</h2>
<h3>Saturday & Sunday</h3>
<ul class="week">
<li>Atlantis city tours</li>
<li>Underwater explorer: see outside the bubble</li>
</ul>
<h3>Monday</h3>
<ul class="week">
<li>Try this out: have fun building your own ancient wonder</li>
<li>Amazing architecture: explore the science of how the pyramids were built</li>
</ul>
<h3>Tuesday</h3>
<ul class="week">
<li>Awesome art: witness art in action as a marble sculpture is born</li>
<li>Gold rush: learn about the metal and why it was so coveted</li>
</ul>
<h3>Wednesday</h3>
<ul class="week">
<li>Try this out: wear clothes that the ancients wore</li>
<li>Gardenology: learn to plant and maintain amazing gardens</li>
</ul>
<h3>Thursday</h3>
<ul class="week">
<li>Amazing architecture: explore the science of buildings</li>
<li>Gardenology: the science behind trees and the environment</li>
</ul>
<h3>Friday</h3>
<ul class="week">
<li>Atlantis city tours</li>
<li>Awesome art: witness a full mosaic floor under construction</li>
</ul>
</main>
<footer>
<aside>© Museum of Antiquities</aside>
<address>[email protected]</address>
<p>1 888 000 1618</p>
<div class="hours-directions">
<a href="">Hours</a>
<a href="">Directions</a>
</div>
<p>1618 Plato Blvd.</p>
<p>Atlantis, Atlantis, Atlantic Ocean</p>
<ul>
<li><a href="">Exhibits</a></li>
<li><a href="">Collections</a></li>
<li><a href="">Donors & sponsors</a></li>
<li><a href="">Teacher information</a></li>
<li><a href="">Birthday rentals</a></li>
</ul>
</footer>
</body>
</html>
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.