ZuoTi.Pro
Question

Week 3: Assignment <nav> and pseudo-classes for links Submit Assignment Due Sunday by 11:59pm Points 100 Submitting a text entry box This assignment you will upload to Coton. You will submit only your URLs to Canvas. Use the rubric as a checklist to make sure you complete everything. DO NOT copy and paste code from any source including templates, websites or examples in this class. Create your navigation as an unordered list using <nav>, ul> and li>. Style all four pseudo-classes for the links in your stylesheet. Use selector order or a class or ID to apply the link styles only to links in your <nav> Create the remainder of your pages with the nav in them and link them to one another. (You dont need the full page content in each page, just the navigation that links to all other pages.) Make sure that all your links are working to all other pages, from all your pages Upload your pages to Coton and submit the URL of your homepage here in Canvas.

Using Basic HTML CSS for a webpage content does not matter.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Below is the solution:

index.html:

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Tourism</title>

    <link rel="stylesheet" href="css/style.css" type="text/css">

</head>

<body>

    <div class="container">

        <div class="fullwidth">

            <div class="header">

                <div class="logo"><img src="image/logo.png" alt="logo1" style="width:70px; height:70px;"></div>

                <div class="login"><a href="#">Login/Register</a></div>

                <nav>

                        <ul>

                            <li><a href="index.html">Home</a></li>

                            <li><a href="about.html">About Us</a></li>

                            <li><a href="carrier.html">Carrier</a></li>

                            <li><a href="services.html">Services</a></li>

                            <li><a href="contact.html">Contact Us</a></li>

                        </ul>

                        <nav>

                <div></div>

            </div>

            <div class="slider">

                <img src="image/tourism.jpeg" alt="img1">

            </div>

            <div class="full_page">

                <div class="about">

                    <aside>

                        <h1>Number of List</h1>

                        <ul>

                            <li>Hatha, Vinyasa, and Restorative Yoga Classes</li>

                            <li>Drop-lins welcome</li>

                            <li>Mats, blocks, and blankets provided</li>

                            <li>Relax in our Serenity Lounge before or after your class</li>

                            <li>Guided hiking tours of the redwoods</li>

                        </ul>

                        <h1>Order list</h1>

                        <ol>

                            <li>Hatha, Vinyasa, and Restorative Yoga Classes</li>

                            <li>Drop-lins welcome</li>

                            <li>Mats, blocks, and blankets provided</li>

                            <li>Relax in our Serenity Lounge before or after your class</li>

                            <li>Guided hiking tours of the redwoods</li>

                        </ol>

                    </aside>

                </div>

                <div style="clear:both;"></div>

            </div>

            <div class="footer">

                <div class="links">

                    <ul>

                        <li><a href="#">Name</a></li>

                        <li><a href="#">Course Number</a></li>

                        <li><a href="#">Course Title</a></li>

                        <li><a href="#">Semester</a></li>

                    </ul>

                </div>

                <div class="address">

                    <h2>Address...</h2>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                </div>

                <div class="socials"><img src="image/social.png" alt="social1"></div>

            </div>

        </div>

</body>

</html>

about.html:

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Tourism</title>

    <link rel="stylesheet" href="css/style.css" type="text/css">

</head>

<body>

    <div class="container">

        <div class="fullwidth">

            <div class="header">

                <div class="logo"><img src="image/logo.png" alt="logo1" style="width:70px; height:70px;"></div>

                <div class="login"><a href="#">Login/Register</a></div>

                <nav>

                    <ul>

                        <li><a href="index.html">Home</a></li>

                        <li><a href="about.html">About Us</a></li>

                        <li><a href="carrier.html">Carrier</a></li>

                        <li><a href="services.html">Services</a></li>

                        <li><a href="contact.html">Contact Us</a></li>

                    </ul>

                    <nav>

                        <div></div>

            </div>

            <div class="slider">

                <img src="image/tourism.jpeg" alt="img1">

            </div>

            <div class="full_page">

                <div class="about">

                    <h1>About Us..</h1><br><br>

                </div>

                <div style="clear:both;"></div>

            </div>

            <div class="footer">

                <div class="links">

                    <ul>

                        <li><a href="#">Name</a></li>

                        <li><a href="#">Course Number</a></li>

                        <li><a href="#">Course Title</a></li>

                        <li><a href="#">Semester</a></li>

                    </ul>

                </div>

                <div class="address">

                    <h2>Address...</h2>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                </div>

                <div class="socials"><img src="image/social.png" alt="social1"></div>

            </div>

        </div>

</body>

</html>

carrier.html:

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Tourism</title>

    <link rel="stylesheet" href="css/style.css" type="text/css">

</head>

<body>

    <div class="container">

        <div class="fullwidth">

            <div class="header">

                <div class="logo"><img src="image/logo.png" alt="logo1" style="width:70px; height:70px;"></div>

                <div class="login"><a href="#">Login/Register</a></div>

                <nav>

                        <ul>

                            <li><a href="index.html">Home</a></li>

                            <li><a href="about.html">About Us</a></li>

                            <li><a href="carrier.html">Carrier</a></li>

                            <li><a href="services.html">Services</a></li>

                            <li><a href="contact.html">Contact Us</a></li>

                        </ul>

                        <nav>

                <div></div>

            </div>

            <div class="slider">

                <img src="image/tourism.jpeg" alt="img1">

            </div>

            <div class="full_page">

                <div class="about">

                    <h1>Carrier</h1><br><br>

                </div>

                <div style="clear:both;"></div>

            </div>

            <div class="footer">

                <div class="links">

                    <ul>

                        <li><a href="#">Name</a></li>

                        <li><a href="#">Course Number</a></li>

                        <li><a href="#">Course Title</a></li>

                        <li><a href="#">Semester</a></li>

                    </ul>

                </div>

                <div class="address">

                    <h2>Address...</h2>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                </div>

                <div class="socials"><img src="image/social.png" alt="social1"></div>

            </div>

        </div>

</body>

</html>

services.html:

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Tourism</title>

    <link rel="stylesheet" href="css/style.css" type="text/css">

</head>

<body>

    <div class="container">

        <div class="fullwidth">

            <div class="header">

                <div class="logo"><img src="image/logo.png" alt="logo1" style="width:70px; height:70px;"></div>

                <div class="login"><a href="#">Login/Register</a></div>

                <nav>

                        <ul>

                            <li><a href="index.html">Home</a></li>

                            <li><a href="about.html">About Us</a></li>

                            <li><a href="carrier.html">Carrier</a></li>

                            <li><a href="services.html">Services</a></li>

                            <li><a href="contact.html">Contact Us</a></li>

                        </ul>

                        <nav>

                <div></div>

            </div>

            <div class="slider">

                <img src="image/tourism.jpeg" alt="img1">

            </div>

            <div class="full_page">

                <div class="about">

                    <h1>Services</h1><br><br>

                </div>

                <div style="clear:both;"></div>

            </div>

            <div class="footer">

                <div class="links">

                    <ul>

                        <li><a href="#">Name</a></li>

                        <li><a href="#">Course Number</a></li>

                        <li><a href="#">Course Title</a></li>

                        <li><a href="#">Semester</a></li>

                    </ul>

                </div>

                <div class="address">

                    <h2>Address...</h2>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                </div>

                <div class="socials"><img src="image/social.png" alt="social1"></div>

            </div>

        </div>

</body>

</html>

contact.html:

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Tourism</title>

    <link rel="stylesheet" href="css/style.css" type="text/css">

</head>

<body>

    <div class="container">

        <div class="fullwidth">

            <div class="header">

                <div class="logo"><img src="image/logo.png" alt="logo1" style="width:70px; height:70px;"></div>

                <div class="login"><a href="#">Login/Register</a></div>

                <nav>

                        <ul>

                            <li><a href="index.html">Home</a></li>

                            <li><a href="about.html">About Us</a></li>

                            <li><a href="carrier.html">Carrier</a></li>

                            <li><a href="services.html">Services</a></li>

                            <li><a href="contact.html">Contact Us</a></li>

                        </ul>

                        <nav>

                <div></div>

            </div>

            <div class="slider">

                <img src="image/tourism.jpeg" alt="img1">

            </div>

            <div class="full_page">

                <div class="about">

                    <h1>Contact</h1><br><br>

                </div>

                <div style="clear:both;"></div>

            </div>

            <div class="footer">

                <div class="links">

                    <ul>

                        <li><a href="#">Name</a></li>

                        <li><a href="#">Course Number</a></li>

                        <li><a href="#">Course Title</a></li>

                        <li><a href="#">Semester</a></li>

                    </ul>

                </div>

                <div class="address">

                    <h2>Address...</h2>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                </div>

                <div class="socials"><img src="image/social.png" alt="social1"></div>

            </div>

        </div>

</body>

</html>

styles.html:

@charset "utf-8";

/* CSS Document */

html{

    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;

    color:#333;}

body{

    background:#ccc;

    margin:0;}

.container{

    width:1000px;

    margin:0 auto;

    background:#fff;}

.container .fullwidth{

    width:95%;

    margin:0 auto !important;}

.header{

    width:100%;

    height:60px;

    background-color:#333;

    border-bottom:1px solid #c7c7c7;}

    

.logo{

    float:left;

    width:40px;

    height:40px;

    margin:10px;}

.login{

    color:#fff;

    float:right;

    width:120px;

    height:30px;

    margin:10px;}

.login a{

    text-decoration: none;

    color: white;

}

/* Navigation Menu */

nav{

    clear: both;

float: right;

height: 40px;}

nav ul{

color: #fff;

float: left;

margin: 0 0 0 10px;

overflow: hidden;

width: 100%;}

nav ul li{

    float:left;

    overflow:hidden;

    margin:0 0 0 10px;}

nav ul li a{

    color: #000;

display: block;

float: left;

font-size: 12px;

    margin-top:10px;

/* padding: 10px 80px;*/

text-decoration: none}

    

nav ul li a:hover{

    background-color:#028C82;

    color:#fff;}

    

/* end Navigation menu */   

.slider img{

    width:100%;

    height:350px;}

.full_page{

    width:100%;}

    

    

.about{

    width:70%;

    height:auto;

    float:left;}

.page{

    width:100%;}

    

.footer{

    width:100%;

    background-color:#C5C2C2;}

    

.footer .links{

    width:20%;}

    

.footer .links ul{

    float:left;

    list-style-type:none;}

    

.footer .links ul li a{

    text-decoration:none;

    font-size:12px;

    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;

    color:#626161;}

    

.footer .links ul li a:hover{

    color:#16A2B3;}

    

.footer .address{

    padding:20px;

    margin-left:22%;

    width:45%;}

.footer .address h2{

    font-size:16px;

    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;}

    

.footer .address p{

    font-size:12px;

    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;}

    

.footer .socials{  

     margin-top:-50px;

     margin-left:70%;}

    

.footer .socials img{

     height:35px;

     width:200px;}

output:

Login/Register Home About Us Carrier Services Contact Us Number of List . Hatha, Vinyasa, and Restorative Yoga Classes . Drop

NOTE:

CREATE A FOLDER OF THE PROJECT "PROJECT01"

INSIDE PROJECT01 FOLDER CREATE THE "CSS" AND "IMAGE" FOLDER

THE STRUCTURE OF THE FOLDER IS BELOW:

-PROJECT01
    -CSS
        STYLES.CSS
    -IMAGES
        LOGO.PNG
        TOURISM.JPEG
    INDEX.HTML
    ABOUT.HTML
    CARRIER.HTML
    SERVICES.HTML
    CONTACT.HTML

      

CREATE 5 HTML PAGE, NAME HE FIVE PAGE TO

INDEX.HTML

ABOUT.HTML

CARRIER.HTML

SERVICES.HTML

CONTACT.HTML

SAVE EACH OF THE FILE GIVEN THE BELOW CODE OF THE EACH OF THE FILE

CREATE STYLES.CSS FILE THE CODE OF THE STYLES.CSS IS GIVEN

0 0
Add a comment
Know the answer?
Add Answer to:
Using Basic HTML CSS for a webpage content does not matter. Week 3: Assignment <nav> and...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Creating the Home and Template Pages Overview In this assignment, you will start building your Web...

    Creating the Home and Template Pages Overview In this assignment, you will start building your Web site for your fictional organization by creating a homepage using HTML5 and some of the key elements that define a Web page. You are required to use either a simple text editor to write your code, or an enhanced text editor such as Brackets. Note: Microsoft Word is not a good tool for developing code because it is a document processor and not a...

  • Code for the movies page: <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />...

    Code for the movies page: <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Daniel's Movie Page</title> </head> <body> <a href="hobbies.html">Hobbies</a> <h1>Movies and Actors</h1> <ol> <li class="ol-list1">Gravity</li> <li>Avenger</li> <li>Marshal</li> <li>Interstellar</li> <li>Dark Knight</li> <li>Superman</li> </ol> <ul> <li class="ul-list1">Robet Downey jr.</li> <li>Sharuk Khan</li> <li>Ranbir Kapoor</li> <li>Sidhhart Malhotra</li> <li>Angela Joli</li> <li>Leonardo DiCaprio/li> </ul> <h2>Favorite Movie</h2> <p> <b>Gravity:</b> The movie portrayed what happens to an astronaut if he/she is pushed away from spaceship.It was terrifying how much...

  • Create a website on a topic of your choosing. Site should include the following: Design: Site...

    Create a website on a topic of your choosing. Site should include the following: Design: Site Map (Task 7) Page-layout for each page (Task 8) Homepage . . o Title o Navigation Links o Footer o Minimum of 1 graphic 4 additional pages that are linked to home page o o o Navigation Links (link back to homepage) Minimum of 1 graphic per page Footer (matching homepage) CSS should be used for formatting visual aspects of site. Use either external...

  • Assignment Details You will create a website for handling Recipes, including recipe ingredients. In this assignment you will construct the basic layout, design, and preliminary navigation. Additio...

    Assignment Details You will create a website for handling Recipes, including recipe ingredients. In this assignment you will construct the basic layout, design, and preliminary navigation. Additionally, you will develop the initial brand for your recipe site. Create views for the following pages: 3 marks (1) Home The main page of the Recipe Site 3 marks 2) Recipelist Page to display the collection of Recipes 3 marks -(3) AddRecipe Page to add a new Recipe 3 marks -(4) ViewRecipe- Page...

  • the is my HTML and CSS code. I didn't attach the image or the CSS file...

    the is my HTML and CSS code. I didn't attach the image or the CSS file because of the space limit. two things I wanted to incorporate on this page are to make "MY TOP 3 MUSIC GENRES" blink using javascript and to make the video links autoplay using javascript both should be using javascript requirement: our professor told us not to use <div> or alert. thank you for your help <!DOCTYPE html> <!-- I used w3school for the formatting...

  • Different answer beside the existing one Create a web site (set of web pages) for a...

    Different answer beside the existing one Create a web site (set of web pages) for a zoo. The following requirements must be met: 1. The home page must have an image map with 2 hot spots. One of the hot spots must be a circle shape; the other must be a polygon shape. The example output home page image map has 4 hot spots (3 circles and 1 polygon). Your image map must be based on a real zoo map....

  • Design an original, professional web site following the specifications listed below. This web sit...

    Design an original, professional web site following the specifications listed below. This web site will be for a business you plan to set up for yourself or for someone else. The following is a detailed list of the requirements for your web site. READ them carefully. Instructions - Web Site Requirements for the web site: General: You will thoroughly test all your pages in more than one browser. All links MUST work. All graphics must show on the page. All...

  • For milestone #1, we will start the CARIT site with three static HTML pages and a...

    For milestone #1, we will start the CARIT site with three static HTML pages and a CSS file. Create a dedicated folder for this project. This folder should contain all related files in this project. The future milestones are cumulative and built directly on top of your prior work. Function/content requirements: A home page named “index.html”, which include these contents at least: Description of the center. You may reference the example sites. Latest news: use list tags; make up some...

  • I cant complete this assignment, I have tried several ways shown in the tutorial but cant...

    I cant complete this assignment, I have tried several ways shown in the tutorial but cant seem to get it to validate, can anyone help? This is a basic JavaScript tutorial and will not validate with Jquery. Monroe Public Library Denise Kruschev manages the website for the Monroe Public Library in Monroe, Ohio. One of her responsibilities is to add content and links to the site that will be of interest to the library’s patrons. Denise has asked you to...

  • I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

    I need help writting a Javascript function that does the following its for a HTML/CSS Shopping Cart Page CODE This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT