Using brackets. The primary web page uses a 2 column wireframe with fixed nav panel on...

Question

Question

Using brackets. The primary web page uses a 2 column wireframe with fixed nav panel on...

Using brackets.

The primary web page uses a 2 column wireframe with fixed nav panel on the left. (Use float, width, and an appropriate margin setting on the main to get this effect.)

Include at least 2 working links in the nav that go to other pages using the same design. (These pages may be very limited in their main content, but should also contain the same nav and the same wireframe.)

The links of the nav use pseudo-class styles to change the styling depending on the link’s state: not yet visited, visited, or hovered over.

The pseudo-classes should at a minimum configure the text color and background color for the links.

Use a wrapper to hold the content and specify both a min-width and a max-width for this container so that it creates a good display at any width within the range.

The body, wrapper, and the various containers within the wrapper should use varying background colors chosen from your color scheme.

The main should use margin-left to ensure it doesn’t wrap under the nav section. It must also include the photo on which your color scheme is based floated to the right.

This photo should contain a caption underneath it. Use the figure and figcaption elements to accomplish this.

Engineering Computer-Science

0 0

Add a comment Transcribed image text

Answer 1

Answer #1

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale = 1">
        <title>Two Column webpage</title>
        <link rel="stylesheet" href="style.css">
</head>
<body>
        <header id="header" class="">
                <h1>This is <span>header<span></h1>
        </header><!-- /header -->
        <div class="container">
                
                <div class="nav">
                        <nav>
        <a href="index.html" >Home</a>
                                <a href="service.html" >Serivce</a>
                                <a href="contact.html" >contact</a>
                                
                        </nav>
                </div>
                <div class="wrapper">
                        <h2>Heading</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <figure>
                        <img src="Store.jpg" >
                        <figcaption>Shoe store</figcaption>
                        
                </figure>
                
                </div>
        </div>
</body>
</html>

style.css

body{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: monospace,sans-serif;
        font-size: 14px;
}
header{
        background-color: #262525;
        width:100%;
        height: 50px;
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        position: fixed;
}
header h1{
        margin-top: 0;
        font-family: monospace,'sans-serif';
        font-weight: 900;

}
header h1 span{
        color: #0B70CF;
}
.nav{
        max-width: 300px;
        min-width: 80px;
        width: 20%;
        height: 100vh;
        float: left;
        background-color: #4A4949;
        position: fixed;
        margin-top: 50px;

}

nav a{
        display: block;
        text-decoration: none;
        color: #fff;
        font-family: monospace,'sans-serif';
        font-size: 15px;
        width: 100%;
        padding: 10px;
        margin-top: 10px;
        transition: 0.5s ease-out;
        transition-property: background;
        box-sizing: border-box;

        
}
a:hover{
        background: #0A97FA;
}
a:visited{
        color: #F81F1F;
}
a:active{
        background: #FFFFFF;
}
.wrapper{
        max-width: 11000px;
        min-width: 150px;
        width: 80%;
        float: right;
        height: 100vh;
        background-color: #eee;
        margin-top: 50px;


}
.wrapper p ,h2{
        margin: 10px;



}
figure{
        float: right;
        padding: 10px;
        background: #fff;
        text-align: center;
}
img{
        width: 100px;
        height: 100px;
}

Output

You can create About.html and other file in same formate .

0 0

Add a comment

Using brackets. The primary web page uses a 2 column wireframe with fixed nav panel on...

Homework Answers

Post as a guest

Earn Coins

Not the answer you're looking for?

Similar Questions

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial,...

Need Online Homework Help?

Active Questions