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

Question

Question

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" href="styles.css">

}

p.ex1 {
margin: 35px;
}

.content {
   font-size: 17px;
   text-align: center;
}

footer {
background-color: dimgrey;
padding: 10px;
text-align: center;
color: #DDD7D7;

}
</style>
</head>
<header>
   <div class="content"></div>
       <a href="home.html">
       <img src="vmoto.gif" alt="vmoto" width="1380" height="200" >
   </a>
</header>
<body>

<nav>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="mbike.html">Mountain Bike</a></li>
<li><a href="roadbike.html">Road Bike</a></li>
<li><a href="bmx.html">BMX</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>

<figure>
<img src="bicycle-bike-daylight-100582 (1).jpg" alt="mountain_bike_front"
   class="center">
   <a href="mbike.html"></a>
   <figcaption>Thats right kids, we are now selling THE IronHorse bike. Ain't she a beaut!</figcaption>
   </figure>

<section>
<h1>Bike text</h1>
<p class="ex1">Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</section>
<center>
<p class="ex1">Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p class="ex1">Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p class="ex1">Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</center>

<footer>
<p>Contact Us!

123 Main St.

Anywhere, NC 99999* |

Phone: (919) 123-4567 Fax: (917) 123-8901 |

Twitter and Facebook</p>
</footer>

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}

</script>

</body>
</html>

CSS:

nav {
text-align:center;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin: auto;

}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #791519;
}

.search {
display:none;

}
.search-toogle-button
{
padding:14px;
color:white;
display:block;
}
#search-togle {
display:none;
}
#search-togle:checked ~ .search {
display:block;
}nav {
text-align:center;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin: auto;

}

.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 300px;
height: 300px;
}

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "index.html" is created, which contains following code.

Note :Images are used for demonstration purpose only, make changes as per requirement.

index.html :

<!DOCTYPE html>

<html>

<head>

</head>

</a>

</header>

<body>

<nav>

<ul>

<li><a href="mbike.html">Mountain Bike</a></li>

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

</ul>

</nav>

<figcaption>Thats right kids, we are now selling THE IronHorse bike. Ain't she a beaut!</figcaption>

</figure>

<p class="ex1">Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et

eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae

nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

</section>