Look at the following illustrated output for an HTML and a css given below
<!DOCTYPE html>
<head>
<title>TABLE with STYLE SHEET</title>
<meta charset="utf-8" />
<meta name="description" content="Godaddy Webpage original" />
<link rel = "stylesheet" href="GoDaddy_assignment_1.css">
<body>
<img src= "GoDaddy.png"/>
<p>Welcome to:<strong>webhamster.com</strong></br>
This web page is parked<strong>Free</strong>courtesy of
<a class="aclass1" href ="https://www.godaddy.com">GoDaddy.com</a></p>
<h1>Want to buy<span class ="span2">webmaster.com ?</span></h1>
<div class ="div1">
<a class ="aclass2" href="https://www.godaddy.com">Learn How</a>
</div>
</hr>
<button>Search Ads</button>
</body>
</html>
“
QUESTION continued Given the corresponding css file
.aclass1{color:purple;}
.span2{color:green;
font-size: 20px;}
.div1{
position:fixed;
border-radius:5px;
left: 350px;
top:155px;
width: 75px;
height:25px;
background-color:green;}
.aclass2{color:white;}
button{
position:fixed;
top:325px;
left:400px;}
CHANGE THE CSS and/OR HTML as follows:
- Modify the css and html to create a new div element with a solid border and which encloses the paragraph the h1 element, and the rounded (green) div element , and also places a border around the Paragraph elements.Center the text in the paragraph.
- Add a link element to the html and place it in the div element as indicated below. And move the
Button to its indicated position
Homework Answers
Below is the HTML and CSS code and also screenshot of the page with required alignment.
This works as expected in chrome and IE.
godaddy.html
<title>TABLE with STYLE SHEET</title>
<meta charset="utf-8" />
<meta name="description" content="Godaddy Webpage original" />
<link rel = "stylesheet" href="GoDaddy_assignment_1.css">
<body class="bclass1">
<p class="pclass1">Welcome to:<strong>webhamster.com</strong></br>
This web page is parked <strong>Free </strong>courtesy of
<a class="aclass1" href ="https://www.godaddy.com">GoDaddy.com</a></p>
<h1>Want to buy<span class ="span2">webmaster.com ?</span></h1>
<div class ="div1">
<a class ="aclass2" href="https://www.godaddy.com">Learn How</a>
</div>
</hr>
<a class="aclass1" href ="https://www.godaddy.com">GoDaddy.com</a>
</body>
</html>
GoDaddy_assignment_1.css
.bclass1{border-style: solid; border-width: 5px; border-color:
green; padding: 15px 0; width: 700px; padding-left: 50px;
padding-right: 50px;}
.pclass1{ border-style: solid; border-width: 5px; border-color: red; padding: 5px 0; width: 200px; text-align: center; padding-left: 25px; padding-right: 25px;}
.aclass1{color:purple;}
.span2{color:green;
font-size: 20px;}
.div1{
position:fixed;
border-radius:5px;
left: 400px;
top:150px;
width: 75px;
height:25px;
background-color:green;}
.aclass2{color:white;}
button{position:fixed; top:325px; left:400px;}
Add Answer to:
Look at the following illustrated output for an HTML and
a css given below
<!DOCTYPE html>...
HTML and css using notepad++ WHen you run the code, you will see a horizontal menue...
HTML and css using notepad++ WHen you run the code, you will see a horizontal menue with several options. I want a small horizontal line between each option. I also want that done using div inside a div. Thank you <!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;...
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...
I cant seem to get the CSS at the bottom of this HTML to work. <!doctype...
I cant seem to get the CSS at the bottom of this HTML to work. <!doctype html> <html lang="en"> <head> <!--Madison McCuiston--> <meta charset="utf-8"> <title>Amelie Boulangerie</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header>Amelie Boulangerie</header> <!-- change this to header tag --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="pastries.html">Pastries</a></li> <li><a href="events.html">Events</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <H2>Experience the Difference</H2> <p><span class="bakery">Amelie Boulangerie</span> is the master of flavor combinations.The jewel-colored macarons come in the most tempting of flavors. Experience the difference...
HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids...
HTML/CSS/ Bootstrap grids to create image
I am attemted to recreate a photo using bootstrap grids and have
come across a snag. I need this:
To look more like this....
It does not really need to be perfect as far as scaling, at this
point I just want the yellow box in the corner with borders like
the pic. Also the original pic has white borders that we are
ignoring.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags...
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>...
I'm having trouble to link the .js file to the html so changes for the html...
I'm having trouble to link the .js file to the html so changes for the html to be made in the .js file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>:JavaScript, HTML and jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- this is so I don't have to give you a separate CSS file --> <style> .hidden {display: none;} .menu { width: 100px;} </style> </head> <body> <div class="container"> <h1>Assignment 2: JavaScript, HTML and jQuery</h1> <p>To complete this...
How do i make my html show 10 results per page, and how do i make...
How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...
Look at the HTML code below then list the line numbers of just those HTML tags...
Look at the HTML code below then list the line numbers of just those HTML tags that are required to create a web page: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="MyStyle.css"> </head> <body> <nav> <a href="GroceryHome.html">Home</a> | <a href="Products.html">Products</a> | <a href="AboutUs.html">About Us</a> | <a href="Contact.html">Contact</a> </nav> <header> <h1> My Contact Page</h1> </header> <article> Thank you for your interest in our grocery store. We offer delivery or call-ahead pickup services. Please provide your contact information, and indicate your family's food...
Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html>...
Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="./bootstrap/js/bootstrap.js"></script> <meta charset="UTF-8"> <title>Perry Gerry Mobile Cellular</title> </head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm"> <h5 class="my-0 mr-md-auto font-weight-normal">Perry Gerry Mobile Cellular</h5> <nav class="my-2 my-md-0 mr-md-3"> <a class="p-2 text-dark" href="index.html">Home</a> <a class="p-2 text-dark" href="about.html">About Us</a> <a class="p-2 text-dark" href="products.html">Products</a> <a class="p-2 text-dark"...
5. (HTML) Given the following HTML document: <html> <head> <title>HTML</title> </head> <body> <h1>Learn HTML</h1> <a href...
5. (HTML) Given the following HTML document: <html> <head> <title>HTML</title> </head> <body> <h1>Learn HTML</h1> <a href = "https://www.w3schools.com/html/default.asp">HTML5 Tutorial</a> </body> </html> a. [3] Sketch approximately how it will be displayed in a web browser. b. [2] What is the protocol, hostname, top-level domain name, and name of the HTML5 Tutorial page being linked to here?
HTML/CSS/ Bootstrap grids to create image
I am attemted to recreate a photo using bootstrap grids and have
come across a snag. I need this:
To look more like this....
It does not really need to be perfect as far as scaling, at this
point I just want the yellow box in the corner with borders like
the pic. Also the original pic has white borders that we are
ignoring.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags...
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>...
5. (HTML) Given the following HTML document: <html> <head> <title>HTML</title> </head> <body> <h1>Learn HTML</h1> <a href = "https://www.w3schools.com/html/default.asp">HTML5 Tutorial</a> </body> </html> a. [3] Sketch approximately how it will be displayed in a web browser. b. [2] What is the protocol, hostname, top-level domain name, and name of the HTML5 Tutorial page being linked to here?
Most questions answered within 3 hours.
-
A signal transduction pathway includes the steps listed
below.
1. An inactive signal transduction molecule is...
asked 25 seconds ago -
Peabody, Inc., sells fireworks. The company’s marketing director
developed the following cost of goods sold budget...
asked 1 minute ago -
1. The correlation coefficient determined for two variables has
a value of 0.89. Describe, in words,...
asked 6 minutes ago -
The following data relate to direct materials costs for
November:
Actual costs
4,700 pounds at $5.35...
asked 4 minutes ago -
Kyle, a 95.0 kg football player, leaps straight up into the air
(with no horizontal velocity)...
asked 28 minutes ago -
Which of the following is a measure of profitability?
A.
Quick (acid-test) ratio
B.
Net sales...
asked 31 minutes ago -
Find the total pressure exerted by 2 grams of ethane and 3 grams
of CO2 contained...
asked 32 minutes ago -
A fireman standing on a 5.2 m high ladder operates a water hose
with a round...
asked 29 minutes ago -
A cream formulation is studied for accelerated stability study.
Creaming was observed when formulation was tested...
asked 32 minutes ago -
A 1,150 lumen light bulb is placed 37 cm in front of a mirrored
wall, whose...
asked 42 minutes ago -
Given that z is a standard normal random variable, compute the
following probabilities (to 4 decimals)....
asked 48 minutes ago -
You begin preparation of the calibration curve to measure
absorbance vs concentration of FeSCN2+. To do...
asked 1 hour ago