ZuoTi.Pro
Question

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: rgb(255,255,255);
       }
fieldset{ background-color: rgb(250,250,250);
       }
#wrapper{width:1080px;
           margin-left: auto;
           margin-right: auto;
       }
      
header {
       text-align: center;
       color: rgb(7,20,138);
}
h3   {   text-align: center;
       color: rgb(7,20,138);
  
}

p   {
       text-align: center;
       color: rgb(7,20,138);
}
ul { list-style-type: none;
   margin: 0;
   padding: 0;
   display: inline;
   border: 1px rgb(17,17,18);
   overflow: auto;
   background-color: rgb(160,171,246);
}
li   {
   text-align: center;
   border-right: 1px rgb(17,17,18);
   border-left: 1px rgb(17,17,18);
   border-top: 1px rgb(17,17,18);
   border-bottom: 1px rgb(17,17,18);
   display: inline;
}
li a{ display: inline;
   color: black;
   text-align: center;
   }
li a:hover { background-color: rgb(255,255,255)
}

header,
footer   {background-color: rgba(199,201,191);
       border: 1px solid rgb(255,255,255);
       border-radius: 15px 15px 15px 15px;
       box-shadow: 0px 3px rgb(0,0,0);
       padding: 40px 30px 40px 30px;
       color: rgb(7,20,138);
       text-shadow: 1px 1px 2px rgb(127,127,127);
       }
footer { border-radius: 10px 10px 10px 10px;
           padding: 20px;
           text-align: center;
       }
      
h1
h2, h3   { color: blue;}
       { font-size: 1.3em;
       font-family: 'merriweather', Arial, Serif;
       font-weight: bold;
       }
h4       { font-size: 1.1em;}
p       {background-color: rgb(39,11,142,0.94);
           font: 2em;
           padding: 10px;
           box-shadow: 1px 1px 3px rgb(127,127,127);
       }

body {
background-color: lighten($grey, 10%);
font-size: 100%;
@include lato-reg;
}
div, textarea, input {
@include box-sizing(border-box);
}
.container {
max-width: 510px;
min-width: 324px;
margin: 50px auto 0px;
background-color: $white;
border: 1px solid lighten($grey, 1%);
border-bottom: 3px solid $grey;
}
.row {
width: 100%;
margin: 0 0 1em 0;
padding: 0 2.5em;
&.header {
padding: 1.5em 2.5em;
border-bottom: 1px solid $grey;
background: url(https://images2.imgbox.com/a5/2e/m3lRbCCA_o.jpg) left -80px;
color: $white;
}
&.body {
padding: .5em 2.5em 1em;
}
}
.pull-right {
float: right;
}
h1 {
@include lato-book;
display: inline-block;
font-weight: 100;
font-size: pxtoem(45, 16);
border-bottom: 1px solid hsla(100%, 100%, 100%, 0.3);
margin: 0 0 0.1em 0;
padding: 0 0 0.4em 0;
}
h3 {
@include lato-reg;
font-size: pxtoem(20, 16);
margin: 1em 0 0.4em 0;
}
.btn {
font-size: pxtoem(17, 16);
display: inline-block;
padding: 0.74em 1.5em;
margin: 1.5em 0 0;
color: $white;
border-width: 0 0 0 0;
border-bottom: 5px solid;
text-transform: uppercase;
@include btn(darken($grey, 10%));
@include lato-book;
&.btn-submit {
@include btn($blue);
}
}

form {
max-width: 100%;
display: block;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
margin: 0 0 0.25em 0;
clear: both;
display: inline-block;
width: 100%;
&:last-child {
margin: 0;
}
p {
margin: 0;
padding: 0;
float: left;
&.right {
float: right;
}
}   
.divider {
margin: 0.5em 0 0.5em 0;
border: 0;
height: 1px;
width: 100%;
display: block;
background-color: $blue;
background-image: linear-gradient(to right, $pink, $blue);
}
.req {
color: $pink;
}
}
}
label {
display: block;
margin: 0 0 0.5em 0;
color: $blue;
font-size: pxtoem(16, 16);
}
input {
margin: 0 0 0.5em 0;
border: 1px solid $grey;
padding: 6px 10px;
color: $dark_grey;
font-size: pxtoem(16, 16);
}
textarea {
border: 1px solid $grey;
padding: 6px 10px;
width: 100%;
color: $dark_grey;
}
small {
color: $blue;
margin: 0 0 0 0.5em;
}
}

// Media Queries

@media only screen and (max-width:480px) {
.pull-right {
float: none;
}
input {
width: 100%;
}
label {
width: 100%;
display: inline-block;
float: left;
clear: both;
}
li, p {
width: 100%;
}
input.btn {
margin: 1.5em 0 0.5em;
}
h1 {
font-size: pxtoem(36, 16);
}
h3 {
font-size: pxtoem(18, 16)
}
li small {
display: none;
}
}

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

Homework Answers

Answer #1

Dear student/professional,

Please find your answer/solution to your problem.

As I saw your previous code as well. It is fine and I have modified the code as well.

<!doctype html> <!-- Author: Natasha Strange -->
<html lang="en"> <!-- Date Written: October 21, 2019 -->
<head> <!-- Description: E and J Strange Contracting, LLC -->
<title>E and J Strange Contracting,LLC</title>   
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="General contractors, contractors, bathroom remodel, kitchen remodel, home improvement, picture gallery">
<link rel="stylesheet" href="project.css">
<style type="text/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: rgb(255,255,255);
}
fieldset{ background-color: rgb(250,250,250);
}
#wrapper{width:1080px;
margin-left: auto;
margin-right: auto;
}
  
header {
text-align: center;
color: rgb(7,20,138);
}
h3 { text-align: center;
color: rgb(7,20,138);
  
}

p {
text-align: center;
color: rgb(7,20,138);
}
ul { list-style-type: none;
margin: 0;
padding: 0;
display: inline;
border: 1px rgb(17,17,18);
overflow: auto;
background-color: rgb(160,171,246);
}
li {
text-align: center;
border-right: 1px rgb(17,17,18);
border-left: 1px rgb(17,17,18);
border-top: 1px rgb(17,17,18);
border-bottom: 1px rgb(17,17,18);
display: inline;
}
li a{ display: inline;
color: black;
text-align: center;
}
li a:hover { background-color: rgb(255,255,255)
}

header,
footer {background-color: rgba(199,201,191);
border: 1px solid rgb(255,255,255);
border-radius: 15px 15px 15px 15px;
box-shadow: 0px 3px rgb(0,0,0);
padding: 40px 30px 40px 30px;
color: rgb(7,20,138);
text-shadow: 1px 1px 2px rgb(127,127,127);
}
footer { border-radius: 10px 10px 10px 10px;
padding: 20px;
text-align: center;
}
  
h1
h2, h3 { color: blue;}
{ font-size: 1.3em;
font-family: 'merriweather', Arial, Serif;
font-weight: bold;
}
h4 { font-size: 1.1em;}
p {background-color: rgb(39,11,142,0.94);
font: 2em;
padding: 10px;
box-shadow: 1px 1px 3px rgb(127,127,127);
}

body {
background-color: lighten($grey, 10%);
font-size: 100%;
@include lato-reg;
}
div, textarea, input {
@include box-sizing(border-box);
}
.container {
max-width: 510px;
min-width: 324px;
margin: 50px auto 0px;
background-color: $white;
border: 1px solid lighten($grey, 1%);
border-bottom: 3px solid $grey;
}
.row {
width: 100%;
margin: 0 0 1em 0;
padding: 0 2.5em;
&.header {
padding: 1.5em 2.5em;
border-bottom: 1px solid $grey;
background: url(https://images2.imgbox.com/a5/2e/m3lRbCCA_o.jpg) left -80px;
color: $white;
}
&.body {
padding: .5em 2.5em 1em;
}
}
.pull-right {
float: right;
}
h1 {
@include lato-book;
display: inline-block;
font-weight: 100;
font-size: pxtoem(45, 16);
border-bottom: 1px solid hsla(100%, 100%, 100%, 0.3);
margin: 0 0 0.1em 0;
padding: 0 0 0.4em 0;
}
h3 {
@include lato-reg;
font-size: pxtoem(20, 16);
margin: 1em 0 0.4em 0;
}
.btn {
font-size: pxtoem(17, 16);
display: inline-block;
padding: 0.74em 1.5em;
margin: 1.5em 0 0;
color: $white;
border-width: 0 0 0 0;
border-bottom: 5px solid;
text-transform: uppercase;
@include btn(darken($grey, 10%));
@include lato-book;
&.btn-submit {
@include btn($blue);
}
}

form {
max-width: 100%;
display: block;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
margin: 0 0 0.25em 0;
clear: both;
display: inline-block;
width: 100%;
&:last-child {
margin: 0;
}
p {
margin: 0;
padding: 0;
float: left;
&.right {
float: right;
}
}   
.divider {
margin: 0.5em 0 0.5em 0;
border: 0;
height: 1px;
width: 100%;
display: block;
background-color: $blue;
background-image: linear-gradient(to right, $pink, $blue);
}
.req {
color: $pink;
}
}
}
label {
display: block;
margin: 0 0 0.5em 0;
color: $blue;
font-size: pxtoem(16, 16);
}
input {
margin: 0 0 0.5em 0;
border: 1px solid $grey;
padding: 6px 10px;
color: $dark_grey;
font-size: pxtoem(16, 16);
}
textarea {
border: 1px solid $grey;
padding: 6px 10px;
width: 100%;
color: $dark_grey;
}
small {
color: $blue;
margin: 0 0 0 0.5em;
}
}

// Media Queries

@media only screen and (max-width:480px) {
.pull-right {
float: none;
}
input {
width: 100%;
}
label {
width: 100%;
display: inline-block;
float: left;
clear: both;
}
li, p {
width: 100%;
}
input.btn {
margin: 1.5em 0 0.5em;
}
h1 {
font-size: pxtoem(36, 16);
}
h3 {
font-size: pxtoem(18, 16)
}
li small {
display: none;
}
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h1>E and J Strange Contracting, LLC</h1>
</header>
<nav>
<ul class="nav nav-bar">
<li class="btn-primary"><a href="index.html">Home</a></li>
<li><a href="services.html" class="btn-info">Services</a></li>
<li><a href="AboutUs.html" class="btn-dark">About Us</a></li>
<li><a href="Gallery.html" class="btn-light">Gallery</a></li>
<li><a href="ContactUs.html" class="btn-default">Contact Us</a></li>
</ul>
</nav>
<h3> We're No Stranger To Your Home Inside and Out!</h3>
<p><strong> Front Porch Add-on</strong></p>
<img src="/images/FrontPorchAddOn.jpg" width="300" height= "500">
</p>

<footer>&copy; <span id="copyright">2019</span>. E and J Strange Contracting, LLC.
<ul>
<li>E and J Strange Contracting, LLC</li>
<li>0000 W Corn Rd</li>
<li>Dale, IN 47334</li>
<li>(765)000-0000</li>
</ul>
  
</footer>
</div><!-- wrapper -->
</body>
</html>

Thanks,

Mo Abjal

Chegg expert

0 0
Add a comment
Know the answer?
Add Answer to:
Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /*...
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

  • 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...

  • Apply the following styles: Set the width of the body element to 1000 pixels. Set the...

    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...

  • 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:...

  • 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>...

  • Find % between two z scores

    About % of the area under the curve of the standard normal distribution is between z=−1.4z=-1.4 and z=1.4z=1.4 (or within 1.4 standard deviations of the mean).

  • 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...

  • Joints

    For the structure shown, determine the horizontal and vertical components of force that pin B� exerts on the structure and that pin D� exerts on the structure.Let the force and lengths be F=800lb�=800��, L1=2.5ft�1=2.5��, L2=1.2ft�2=1.2��, L3=2.5ft�3=2.5��, L4=2.1ft�4=2.1�� and L5=3.6ft�5=3.6��.Note that the orange ring at E is not a support. It is an element that forms part of the rigid body ECD. Only one force acts at point E, force F�.The horizontal component of force at pin B� (Bx��) is  lb...

  • 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.

  • 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()...

  • 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"...

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