Apply the following styles: Set the width of the body element to 1000 pixels. Se
ID: 3716795 • Letter: A
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:
The colors will obviously be your chosen colors to match your website. You can use floats, positioning, or the grid system to adjust the layout. Up to you. If you use the grid system, you will receive 3+ extra credit points if done correctly.
Here are the link to my webpages:
https://web.njit.edu/~tsc22/cpt330/HW2/hw2_home.html
https://web.njit.edu/~tsc22/cpt330/HW2/hw2_meals.html
https://web.njit.edu/~tsc22/cpt330/HW2/hw2_websites.html
Here is my css code:
/*
Declaring the variables for the color as per the requirement
--main-color: main color
--secondary-color:secondary color
--accent-color:accent color
these names will be used throughout the document as is
*/
:root{
--main-color:rgb(19, 97, 243);
--secondary-color:#006666;
--accent-color:#CC0000;
}
/*
styling body element
font-family gives the font styling.
background-color: white
*/
body{
font-family: "sans-serif";
background-color: #ffffff;/*White color hex code*/
}
/*
styling for unordered list and its list items
*/
ul{
background-color: var(--main-color);
line-height: 2.5em;
}
ul li{
list-style-type:none;
padding-left:0;
list-style-image: url('boxing glove.png');
}
li a{
color: #ffffff;
}
/*
hyperlink styling on hovering
li a:hover{
color: var(--accent-color);
}
heading levell 1 styling
*/
h1{
text-align: center;
background-color: var(--secondary-color);
font-size: 3em;
}
/*
heading level 2 styling
*/
h2{
background-color: var(--accent-color);
color: rgba(255, 255, 255, 0.7);
font-weight: normal;
padding-left: 10px;
letter-spacing: 0.7em;
}
/*
heading level 3 styling
*/
h3{
background-color: var(--main-color);
color:#fff;
font-weight: bold;
word-spacing: 2em;
padding-left: 10px;
}
/*
styling footer element
*/
#footer{
position:fixed;
left:0;
bottom:0;
height: 50px;
width: 100%;
background-color: var(--secondary-color);
color:var(--accent-color);
font-weight: bold;
text-transform: lowercase;
text-align: center;
font-family: 'Book Antiqua';
}
Explanation / Answer
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 ©</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 ♦</p>
<p>Email:<a href="Timmycichon6m">"Tsc22@njit.edu"</a> ♦</p>
<p>02/03/2018 ♦</p>
<p>CPT 330 SECTION 452 ♦</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 ©</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 ♦</p>
<p>Email:<a href="Timmycichon6m">"Tsc22@njit.edu"</a> ♦</p>
<p>02/03/2018 ♦</p>
<p>CPT 330 SECTION 452 ♦</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 ©</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 ♦</p>
<p>Email:<a href="Timmycichon6m">"Tsc22@njit.edu"</a> ♦</p>
<p>02/03/2018 ♦</p>
<p>CPT 330 SECTION 452 ♦</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;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.