ZuoTi.Pro
Question

Apply the following styles:

Set the width of the body element to 1000 pixels.

Set the width of the navigation element to 100%.

Adjust the css and html to have your navigation list display horizontally (think floats and widths).

Center the navigation element by setting the margin to auto.

Clear the float for the section element.

Set the width of all articles to 75%.

Add a class to the articles that contains your favorite websites.

Set the width of that class to 400px.

Adjust the css and html for your favorite meals to display like this image:


Favorite Meals Pizza 7 Layer Dip Quesadilla Cheesy Eeggplant

Here are the link to my webpages:

https://web.njit.edu/~rem33/cpt330/hw2_home.html

https://web.njit.edu/~rem33/cpt330/hw2_meals.html

https://web.njit.edu/~rem33/cpt330/hw2_websites.html

Here is my css code:

@charset "utf-8";

html {  

   background-color: white;

   }

body   {

   background-color: white;

   font-family: Verdana, Geneva, sans-serif;

   }

/*

   main- rgb(19,97,243), secondary- #f52020, accent- #2DBD2D

*/

ul {

   background-color: rgb(19,97,243);

   line-height: 2.5em;

}

ul li {

   list-style: none;

   padding-left: 0;

   list-style-image: url('espn.png');

   }

li a {

   color: rgb(255,255,255);

   }

li a hover {

       color: rgb(45,189,45);

   }

h1 {

   text-align: center;

   background-color: rgb(245,32,32);

   font-size: 3em;

   }

h2 {

   background-color: rgb(45,189,45);

   color: rgba(255,255,255,0.7);

   font-weight: normal;

   padding-left: 10px;

   letter-spacing: 0.7em;

   }

h3 {

   background-color: rgb(19,97,243);

   color: rgb(255,255,255);

   font-weight: bold;

   word-spacing: 2em;

   padding-left: 10px;

   }

#footer {

   position: fixed;

   left: 0;

   bottom: 0;

   height: 50px;

   width:100%;

   background-color: rgb(245,32,32);

   color: rgb(45,189,45);

   font-weight:bold;

   text-transform: lowercase;

   text-align: center;

   font-family: 'serif';

   }

Thank you !!!


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

Homework Answers

Answer #1

PLZZZZZZZZZZZZZZ RATE THUMBSUP PLZZZZZZZZZZZZZZZZZ

ANSWER:

CODE:

home.html

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<title>Tomasz:My First Web Page</title>

<meta http-equiv="Content-Type" content="text/html;charset=windows-1252">

<!--My First Web Page

Author: Tomasz

Date: 02/20/2018 -->

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

</head>

<body>

<div class="wrapper row1">

<header id="header" class="clear">

<div id="hgroup">

<h1><a href="#">CPT 330-Tomasz Cichon &#0169</a></h1>

</div>

<nav>

<ul>

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

<li><a href="meals1.html">Meals</a></li>

<li class="last"><a href="website1.html">Website</a></li>   

</ul>

</nav>

</header>

</div>

<!-- content -->

<div class="wrapper row2">

<div id="container" class="clear">

<!-- Slider -->

<section id="slider"><img src="index.jpg" alt = "Bayern fans" width="800px" height ="400px"></section>

<!-- main content -->

<div id="homepage">

<!-- Services -->

<section id="intro" class="last clear">

<article>

<h2>About Me</h2>

<a href="bigger image.jpg"><img src="index.jpg" alt="Tomasz Cichon" width="200px" height="200px"> </a>

<p> I'm always interested in learning something new. My primary interests are <i>CAD, programming HTML, and automotive engineering</i>. I'm also interested in working in the ET field once I graduate NJIT. </p>

<p>My hobbies include: <b> fishing, boxing, soccer, and swimming. </b> I took up boxing about two years ago, and have really enjoyed it every since. Playing each sport esentially helps me out in all the other sports I play. I can't wait to go fishing once it gets warmer! </p>

<p> As far as my future career goes, <u>I'd love to work as an engineer simply anywhere</u>. I'd be happier than working at the place I'm working now, which isn't too bad, but a tower climber isn't what I want to be doing for a longer period of time. In the past, I've worked as a CNC programmer! </p>

</article>

</section>

<!-- / Introduction -->

</div>

<!-- / content body -->

</div>

</div>

<!-- Footer -->

<!-- Copyright -->

<div class="wrapper row4">

<footer id="copyright" class="clear">

<p>Tomasz Cichon &#9830;</p>

<p>Email:<a href="Timmycichon6m">"[email protected]"</a> &#9830;</p>

<p>02/03/2018 &#9830;</p>

<p>CPT 330 SECTION 452 &#9830;</p>

  

</footer>

</div>

</body>

</html>

meals.html

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<title>Tomasz:My First Web Page</title>

<meta http-equiv="Content-Type" content="text/html;charset=windows-1252">

<!--My First Web Page

Author: Tomasz

Date: 02/20/2018 -->

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

</head>

<body>

<div class="wrapper row1">

<header id="header" class="clear">

<div id="hgroup">

<h1><a href="#">CPT 330-Tomasz Cichon &#0169</a></h1>

</div>

<nav>

<ul>

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

<li><a href="meals1.html">Meals</a></li>

<li class="last"><a href="website1.html">Website</a></li>   

</ul>

</nav>

</header>

</div>

<!-- content -->

<div class="wrapper row2">

<div id="container" class="clear">

<!-- Slider -->

<section id="slider"><img src="index.jpg" alt = "Bayern fans" width="800px" height ="400px"></section>

<!-- main content -->

<div id="homepage">

<!-- Services -->

<section id="intro" class="last clear">

<article>

<h2>Favorite Meals</h2>

<h3>Pierogi</h3>

<a href="http://allrecipes.com/recipe/109914/pierogi-polish-dumplings/"><img src="Pierogi.jpg" alt="Pierogi" width="200px" height="200px"></a>

<h3> Rack of Lamb</h3>

<a href="https://www.bhg.com/recipe/lamb/rack-of-lamb/"><img src="rack.jpg" alt="Rack of Lamb" width="200px" height="200px"></a>

<h3>Steak</h3>

<a href="http://allrecipes.com/recipes/475/meat-and-poultry/beef/steaks/"><img src="steaks.jpg" alt="Steak" width="200px" height="200px"></a>

<h3>Penne Vodka</h3>

<a href="https://www.tasteofhome.com/recipes/penne-alla-vodka"><img src="vodka.jpg" alt="penne Vodka" width="200px" height="200px"></a>

</article>

</section>

<!-- / Introduction -->

</div>

<!-- / content body -->

</div>

</div>

<!-- Footer -->

<!-- Copyright -->

<div class="wrapper row4">

<footer id="copyright" class="clear">

<p>Tomasz Cichon &#9830;</p>

<p>Email:<a href="Timmycichon6m">"[email protected]"</a> &#9830;</p>

<p>02/03/2018 &#9830;</p>

<p>CPT 330 SECTION 452 &#9830;</p>

  

</footer>

</div>

</body>

</html>

website.html

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<title>Tomasz:My First Web Page</title>

<meta http-equiv="Content-Type" content="text/html;charset=windows-1252">

<!--My First Web Page

Author: Tomasz

Date: 02/20/2018 -->

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

</head>

<body>

<div class="wrapper row1">

<header id="header" class="clear">

<div id="hgroup">

<h1><a href="#">CPT 330-Tomasz Cichon &#0169</a></h1>

</div>

<nav>

<ul>

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

<li><a href="meals1.html">Meals</a></li>

<li class="last"><a href="website1.html">Website</a></li>   

</ul>

</nav>

</header>

</div>

<!-- content -->

<div class="wrapper row2">

<div id="container" class="clear">

<!-- Slider -->

<section id="slider"><img src="index.jpg" alt = "Bayern fans" width="800px" height ="400px"></section>

<!-- main content -->

<div id="homepage">

<!-- Services -->

<section id="intro" class="last clear">

<article>

<h2>Favorite Websites</h2>

</article>

<article>

<a href="https://www.facebook.com/"><h2>Facebook</h2></a>

<ul>

<li>easy to use</li>

<li>connect with friends</li>

<li>chat with friends </li>

<li>time waster</li>

<li>primary social media</li>

</ul>

</article>

<article>

<a href="https://www.soccer.com/"><h2>Eurosport</h2></a>

<ul>

<li>soccer news</li>

<li>good gear</li>

<li>affordable gear</li>

<li>new releases</li>

<li>easy to use</li>

</ul></article>

<article>

<a href="http://www.espn.com/boxing/" ><h2>ESPN Boxing</h2></a>

<ul>

<li>live updates</li>

<li>news</li>

<li>videos</li>

<li>highlights</li>

<li>good navigation</li>

</ul>

</article>

<article>

<a href="http://www.njfishing.com/"><h2>NJ Fishing</h2></a>

<ul>

<li>good resources</li>

<li>new info</li>

<li>news</li>

<li>instructorials</li>

<li>updates on fishing conditions in NJ</li>

</ul>

</article>

</section>

<!-- / Introduction -->

</div>

<!-- / content body -->

</div>

</div>

<!-- Footer -->

<!-- Copyright -->

<div class="wrapper row4">

<footer id="copyright" class="clear">

<p>Tomasz Cichon &#9830;</p>

<p>Email:<a href="Timmycichon6m">"[email protected]"</a> &#9830;</p>

<p>02/03/2018 &#9830;</p>

<p>CPT 330 SECTION 452 &#9830;</p>

  

</footer>

</div>

</body>

</html>

style.css

html{overflow-y:scroll;} /* Forces a scrollbar when the viewport is larger than the websites content - CSS3 */

body{margin:0; padding:0; font-size:13px; font-family: "sans-serif";color:#919191; background-color: #ffffff;}

.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
.clear{display:block; clear:both;}
html[xmlns] .clear{display:block;}
* html .clear{height:1%;}

a{outline:none; text-decoration:none;}

code{font-weight:normal; font-style:normal; font-family:Georgia, "Times New Roman", Times, serif;}

.fl_left{float:left;}
.fl_right{float:right;}

img{margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgholder, .imgl, .imgr{padding:4px; border:1px solid #D6D6D6; text-align:center;}
.imgl{float:left; margin:0 15px 15px 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right;}

/*----------------------------------------------HTML 5 Overrides-------------------------------------*/

address, article, aside, figcaption, figure, footer, header, nav, section{display:block; margin:0; padding:0;}

q{display:block; padding:0 10px 8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
q:before{content:'“ '; font-size:26px;}
q:after{content:' „'; font-size:26px; line-height:0;}

/* ----------------------------------------------Wrapper-------------------------------------*/

div.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left;}

.row1, .row1 a{color:#C0BAB6; background-color:#333333;}
.row2{color:#979797; background-color:#FFFFFF;}
.row2 a{color:#FF9900; background-color:#FFFFFF;}
.row3{color:#989898; background-color:#333333;}
.row3 a{color:#FF9900; background-color:#333333;}
.row4, .row4 a{color:#919191; background-color:#232323;}

/*----------------------------------------------Generalise-------------------------------------*/

#header, #container, #footer, #copyright{display:block; width:960px; margin:0 auto;}

nav ul{margin:0; padding:0; list-style:none;}

h1, h2{margin:0; padding:0; font-size:32px; font-weight:normal; font-style:italic; line-height:normal;}

address{font-style:normal;}

blockquote, q{display:block; padding:8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
blockquote:before, q:before{content:'“ '; font-size:26px;}
blockquote:after, q:after{content:' „'; font-size:26px; line-height:0;}

form, fieldset, legend{margin:0; padding:0; border:none;}
legend{display:none;}
input, textarea, select{font-size:12px; font-family:Georgia,"Times New Roman",Times,serif;}

.one_quarter, .two_quarter, .three_quarter, .four_quarter{display:block; float:left; margin:0 20px 0 0;}
.one_quarter{width:225px;}
.two_quarter{width:470px;}
.three_quarter{width:715px;}
.four_quarter{width:960px; float:none; margin-right:0; clear:both;}

.one_third, .two_third, .three_third{display:block; float:left; margin:0 30px 0 0;}
.one_third{width:300px;}
.two_third{width:630px;}
.three_third{width:960px; float:none; margin-right:0; clear:both;}

.lastbox{margin-right:0;}

/*----------------------------------------------Header-------------------------------------*/

#header{padding:20px 0;}

#header #hgroup{float:left; margin:0 0 20px 0;}
#header #hgroup h1, #header #hgroup h2{font-weight:normal; font-style:normal; text-transform:none;}
#header #hgroup h1{font-size:36px;}
#header #hgroup h2{font-size:13px;}

#header nav{display:block; float:right; margin:10px 0 0 0; padding:20px 0; color:#C0BAB6; background-color:#232323;}
#header nav ul{padding:0 20px;}
#header nav li{display:inline; margin-right:25px; text-transform:uppercase;}
#header nav li.last{margin-right:0;}
#header nav li a{color:#C0BAB6; background-color:#232323;}
#header nav li a:hover{color:#FF9900; background-color:#232323;}

/*----------------------------------------------Content Area-------------------------------------*/

#container{padding:30px 0;}
#container section{display:block; width:100%; margin:0 0 30px 0; padding:0;}
#container .last{margin:0;}
#container .more{text-align:right;}

/* ------Slider-----*/

#container #slider{}

/* ------Main Content-----*/

#container #homepage{display:block; width:100%; line-height:1.8em;}

#container #homepage #services{}
#container #homepage #services article{}
#container #homepage #services article figure{}
#container #homepage #services article figure img{margin:0 0 15px 0; padding:4px; border:1px solid #D6D6D6;}
#container #homepage #services article figure figcaption{}
#container #homepage #services article figure h2{font-size:14px; font-weight:bold;}
#container #homepage #services article figure footer{}

#container #homepage #intro{}
#container #homepage #intro article{}
#container #homepage #intro article figure{}
#container #homepage #intro article figure img{float:right; margin:0 0 10px 0; padding:4px; border:1px solid #D6D6D6;}
#container #homepage #intro article figure figcaption{float:left; width:810px;}
#container #homepage #intro article figure h2{}
#container #homepage #intro article figure footer{}

/*----------------------------------------------Footer-------------------------------------*/

#footer{padding:30px 0; font-size:12px; line-height:1.4em;}

#footer section h2.title{margin:0 0 25px 0; padding:0; color:#FFFFFF; background-color:#333333; font-size:12px; font-weight:bold; text-transform:uppercase;}

#footer section nav li{margin:0 0 5px 0; padding:0 0 5px 0; border-bottom:1px solid #555555;}
#footer section nav li.last{margin:0;}

/*----------------------------------------------Copyright-------------------------------------*/

#copyright{padding:20px 0;}
#copyright p{margin:0; padding: 0;}
.facts-header {
padding: 30px;
float: left;
width: 150px;
}
.fact-summary {
padding: 25px 15px 10px 5px;
padding-bottom: 10px;
float: left;
width: 290px;
padding-bottom: 500px;
margin-bottom: -490px;
}
.fact {
color: #fff;
padding: 25px 43px 30px 7px;
padding-bottom: 30px;
background: url('/public/images/layout/fast-facts-bg.png') no-repeat right top #BF5700;
height: 100%;
float: left;
width: 245px;
padding-bottom: 500px;
margin-bottom: -490px;
}
.fact-title {
font-size: 2.75em;
text-align: center;
font-weight: bold;
}
.fact-subheading {
line-height: 1.3;
text-align: center;
font-weight: bold;
}
.facts-main {
margin: 0 0 30px 0;
display: block;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.3);
overflow: hidden;
}
ul.list-block-grid {
margin: 0 0 1.25em 0 !important;
list-style: inside;
}
.block-grid {
display: block;
overflow: hidden;
padding: 0;
}
.block-grid.three-up > li:nth-child(3n+1) {
clear: both;
}
.block-grid.three-up > li {
width: 33.33333%;
padding: 0 12px 12px;
}
ul.list-block-grid > li {
display: list-item !important;
padding: 0 12px 0 0 !important;
}

RATE THUMBSUP PLZZZZZZZZZZZZZZZZZZ

0 0
Add a comment
Know the answer?
Add Answer to:
Apply the following styles: Set the width of the body element to 1000 pixels. Set the...
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

  • Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /*...

    Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /* Date:           Today's Date --> September 22, 2019 /* Description:   Lab Number --> Lab04 /*doctype css*/ @import url(fonts/chuckfive.css); @import url(fonts/merriweather.css); body    { background-color: rgb(199,201,191);        } div { border: 1px solid black;        padding: 100px 100px 100px 100px;        background-color: gray; } nav { text-align: center;    color: rgb( 7,20,138); } header, footer   { background-color: rgb(199,201,199);        color:...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

  • How do I get my HTML and CSS to look similar to this mockup? HTML: <!DOCTYPE...

    How do I get my HTML and CSS to look similar to this mockup? HTML: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>nitro site</title>     <link href="css/main.css" rel="stylesheet"/> </head> <body>     <header class="header">     <section class="navlist">         <img class="logo" src="assets/logobeans.png"/>         <h2 class="headertitle">nitro</h2>     <nav>         <ul>             <li><a href="index.html" target="_parent">About</a></li>             <li><a href="/html/menu.html" target="_blank">Menu</a></li>             <li><a href="/html/menu.html">Shop Now</a></li>         </ul>     </nav>     </section>     <section class="headerContainer">         <h1 class="heading">Nitro Coffee</h1>         <p class="productDesc">Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species.</p>...

  • Can you please assist me with this HTML? Below is what I have but it isn't...

    Can you please assist me with this HTML? Below is what I have but it isn't working. Filename: jpf_sudoku.css /* Table Styles */ table.spuzzle { border-collapse: collapse; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; width: 90%; } table.spuzzle td { border: 5px outset gray; width: 33.3%; } table.spuzzle th { font color: gray; padding-right: 10px; padding-bottom: 10px; } /* Inner Table Styles */ table.subTable { border-collapse: collapse; width: 100%; } table.subTable td { box-shadow: 0px 0px 15px inset; border:...

  • Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to...

    Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to have my text in the body, white. All text and the picture centered but how do I have margins on the left and right side?. I have a figcaption and I dont know have to place it under the picture but I am having a hard time. Can you help me? Thank you! HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"...

  • You will use your text editor to create a table and apply table styles. First, you...

    You will use your text editor to create a table and apply table styles. First, you insert a table element. Next, you add a table caption, table rows, table headers, and table data. Then, you create style rules to format the table. Work with the apply08.html file and the applystyles08.css file. You will also use professional web development practices to indent, space, comment, and validate your code. 3. In the apply08.html file, add a table element within the main element....

  • HTML css When i refresh the page, the picture doesnt move at all for #i1 i...

    HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...

  • Let 𝑉 be the vector space of symmetric 2×2 matrices and 𝑊 be the subspace 𝑊=span{[4−5−50],[−2−5−51]}. a. Find a nonzero element 𝑋 in 𝑊.

     Let 𝑉V be the vector space of symmetric 2×22×2 matrices and 𝑊W be the subspace𝑊=span{[4−5−50],[−2−5−51]}.a. Find a nonzero element 𝑋X in 𝑊W.

  • Please edit and add all the code needed to make the images side by side and to put the buttons in...

    Please edit and add all the code needed to make the images side by side and to put the buttons in the middle of the images. Thank you index.html <!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"> <title>Untitled Document</title> <!-- Bootstrap -->    <link href="css/bootstrap-4.0.0.css" rel="stylesheet">    <link href="style.css" rel="stylesheet" type="text/css">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header>    <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Lakeside Resort Spot</a>        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">...

  • finished the web page ********************************************************* .js // I've added a span with the id "count" which...

    finished the web page ********************************************************* .js // I've added a span with the id "count" which you can use to modify // the number of clicks on the page // you can do this by getting the value; incrementing it and then // modifying the value of the span function changeColor(){     const colors = ['red', 'green', 'blue', 'cyan', 'yellow', 'black', 'silver', 'tan'];     // Choose a random float from [0, 1) the multiply by length to get random index     // Math.floor()...

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