Skip to content

Answers #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Vidic15 wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Answers #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e595e47
Added xd and readme
Noroff-Education Nov 12, 2020
3a63381
Merge branch 'main' into answers
Noroff-Education Nov 12, 2020
8e0803f
Merge branch 'main' into answers
Noroff-Education Nov 12, 2020
f5f5804
Added answer and video
Noroff-Education Nov 12, 2020
fab61d0
Remove iframe
Noroff-Education Nov 12, 2020
9efdf20
Update README.md
Noroff-Education Nov 20, 2020
94a1c9b
Update README.md
Noroff-Education Nov 20, 2020
1415a40
Finished with pictures and pages
Vidic15 Oct 17, 2022
fd02d5e
added css
Vidic15 Oct 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# HTML and CSS - Module 1

## Lesson Task 1 Question
## Task 1

In our lesson tasks we're going to be building a website for a company called 'Guitar Kings'. It is a four page website showcasing their guitars. You can find a prototype of the website in this repository.

Expand All @@ -10,4 +10,8 @@ In this lesson task we are going to be building the HTML for the home page. You

You only need to build the home page for now, and you don't need to style it at all. The focus in this lesson task is on writing semantic, neat HTML.

By the end of the lesson task, your home page should look like this: ![Home Page](html-css_task1-1_result.PNG)
### Video

This video shows you how to complete the lesson task 1.1. Only watch it after attempting the lesson task by yourself.

[View on Vimeo](https://player.vimeo.com/video/478422931)
Binary file renamed GuitarKings.xd → assets/GuitarKings.xd
View file
Open in desktop
Binary file not shown.
28 changes: 28 additions & 0 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!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">
<meta name="description" content="Contact Guitar Kings for amazing products you'll love"/>
<title>Guitar Kings | Contact</title>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<header>
<a href="index.html">Guitar Kings</a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="guitars.html">Guitars</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Contact</h1>
</main>
<footer>Copyright &copy;</footer>
</body>
</html>

20 changes: 20 additions & 0 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
header {
background-color: #202020;
}

header a {
color: #fff;
}

.cta {
background-color: #bb0000;
color: #fff
}

.reviews {
background-color: #e8e8e8;
}

.featured-products {
background-color: #fbfbfb
}
84 changes: 84 additions & 0 deletions guitars.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!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">
<meta name="description" content="List of guitars available from Guitar Kings"/>
<title>Guitar Kings | Guitars</title>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<header>
<a href="index.html">Guitar Kings</a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="guitars.html">Guitars</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Guitars</h1>
<section>
<div>
<img src="images/product.jpg" alt="Adirondack Red"/>
<h3>Adirondack Red</h3>
<p>$500</p>
<a href="products/adirondack-red.html">View</a>
</div>
<div>
<img src="images/product.jpg" alt="Adirondack Red"/>
<h3>Adirondack Red</h3>
<p>$500</p>
<a href="products/adirondack-red.html">View</a>
</div>
<div>
<img src="images/product.jpg" alt="Adirondack Red"/>
<h3>Adirondack Red</h3>
<p>$500</p>
<a href="products/adirondack-red.html">View</a>
</div>
<div>
<img src="images/product.jpg" alt="Adirondack Red"/>
<h3>Adirondack Red</h3>
<p>$500</p>
<a href="products/adirondack-red.html">View</a>
</div>
<div>
<img src="images/product.jpg" alt="Adirondack Red"/>
<h3>Adirondack Red</h3>
<p>$500</p>
<a href="products/adirondack-red.html">View</a>
</div>
<div>
<img src="images/product.jpg" alt="Adirondack Red"/>
<h3>Adirondack Red</h3>
<p>$500</p>
<a href="products/adirondack-red.html">View</a>
</div>
<div>
<img src="images/product.jpg" alt="Adirondack Red"/>
<h3>Adirondack Red</h3>
<p>$500</p>
<a href="products/adirondack-red.html">View</a>
</div>
<div>
<img src="images/product.jpg" alt="Adirondack Red"/>
<h3>Adirondack Red</h3>
<p>$500</p>
<a href="products/adirondack-red.html">View</a>
</div>
<div>
<img src="images/product.jpg" alt="Adirondack Red"/>
<h3>Adirondack Red</h3>
<p>$500</p>
<a href="products/adirondack-red.html">View</a>
</div>

</section>
</main>
<footer>Copyright &copy;</footer>
</body>
</html>
82 changes: 82 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!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">
<meta name="description" content="Get real authentic, hand-crafted guitars from Guitar Kings"/>
<title>Guitar Kings | Home</title>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<header>
<section></section>
<a href="index.html">Guitar Kings</a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="guitars.html">Guitars</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Authentic Handmade Guitars</h1>
<a href="guitars.html" class="cta">View Guitars</a>
</section>
<section>
<div>
<h2>Our Guitars Are:</h2>
<ul>
<li>Made with real Pennsylvanian wood</li>
<li>Crafted by a family-run business</li>
<li>Built to last a lifetime</li>
<li>Beautiful unique sound</li>
<li>Options for all music lovers</li>
</ul>
</div>
<img src="images/home-info.jpg" alt="Hand strumming guitar" />
</section>
<section class="reviews">
<h2>Reviews</h2>
<div>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis dictum elit. In hac habitasse platea dictumst"-Bob Willis</p>
<img src="images/review-bio.jpg" alt="Profile picture of Bob Willis" />
</div>
<div>
<p>"Maecenas interdum, erat nec pulvinar euismod, eros erat ornare mauris, commodo vestibulum odio nunc id urna. Sed volutpat consequat dolor, nec sollicitudin elit eleifend vitae" - Sally Oldfield</p>
<img src="images/review-bio2.jpg" alt="Profile picture of Sally Oldfield" />
</div>
</section>
<section class="featured">
<h2>View Our Guitars</h2>
<div class="featured-products">
<img src="#" alt="Adirondack Red"/>
<h3>Adirondack Red</h3>
<p>$500</p>
<a href="products/adirondack-red.html">View</a>
</div>
<div class="featured-products">
<img src="#" alt="Adirondack Red"/>
<h3>Adirondack Red</h3>
<p>$500</p>
<a href="products/adirondack-red.html">On sale</a>
</div>
<div class="featured-products">
<img src="#" alt="Adirondack Red"/>
<h3>Adirondack Red</h3>
<p>$500</p>
<a href="products/adirondack-red.html">View</a>
</div>
<div class="featured-products">
<img src="#" alt="Adirondack Red"/>
<h3>Adirondack Red</h3>
<p>$500</p>
<a href="products/adirondack-red.html">View</a>
</div>
</section>
</main>
<footer>Copyright &copy;</footer>
</body>
</html>
42 changes: 42 additions & 0 deletions products/adirondack-red.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!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">
<meta name="description" content="View our most popular guitar - the Adirondack Red"/>
<title>Guitar Kings | Adirondack Red</title>
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body>
<header>
<a href="../index.html">Guitar Kings</a>
<nav>
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../guitars.html">Guitars</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<img src="../images/product.jpg" alt="Adirondack Red">
<div>
<img src="../images/product-specific.jpg" alt="Playing the Adirondack Red"/>
<img src="../images/product-specific.jpg" alt="Playing the Adirondack Red"/>
<img src="../images/product-specific.jpg" alt="Playing the Adirondack Red"/>
<img src="../images/product-specific.jpg" alt="Playing the Adirondack Red"/>
</div>
</section>
<section>
<h1>Adirondack Red</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam eius quas maxime aliquid sunt debitis ea, deserunt harum quae deleniti! Harum dolores tempora quasi suscipit nemo impedit, rerum aliquid illum.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni possimus laboriosam sequi sed aperiam, sint neque enim accusamus facilis delectus inventore eligendi! Pariatur autem placeat maiores odit expedita numquam totam!</p>
<p>$500</p>
<a href="../contact.html">Contact Us</a>
</section>
</main>
<footer>Copyright &copy;</footer>
</body>
</html>