HTML/CSS: Need help in creating a sidebar header canvas for the love and hate buttons. Below are the codes and attached is image of how the sidebar header canvas must look like. Make sure to involve the correct code with the output: index.html: Document Summer School Summer School Info Mainpage summerschool.html: Document Mainpage Love Hate Summer School Info Mainpage style.css: h1{ text-align: center; color:#5e2943; /* Text-Color */ font-size: xx-large; border-style: dotted; } ul{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #550913; } li{ float: left; } li a{ display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover{ background-color: #afe6e9; } body{ margin: 0; padding: 0; } .container{ text-align: center; margin-top: 360px; } body{ display: grid; place-items: center; min-height: 100vh; margin: 0; } .button{ --button-offset: 0.48em; --bg: 178, 60%, 48%; float: left; background-color: rgb(0, 143, 232); border: 0; border-radius: 0.2em; padding: 0.1em; margin-left:-1200px; font-size: 2rem; font-weight: 300; text-transform: uppercase; box-shadow: 0 8px 0 0 hsla(180, 13%, 12%, 0.5); cursor: pointer; } .button:active, .button:focus-visible{ transform: translateY(16px); box-shadow: none; }

Enhanced Discovering Computers 2017 (Shelly Cashman Series) (MindTap Course List)

1st Edition

ISBN:9781305657458

Author:Misty E. Vermaat, Susan L. Sebok, Steven M. Freund, Mark Frydenberg, Jennifer T. Campbell

Publisher:Misty E. Vermaat, Susan L. Sebok, Steven M. Freund, Mark Frydenberg, Jennifer T. Campbell

Chapter2: Connecting And Communicating Online: The Internet, Websites, And Media

Section: Chapter Questions

Problem 5TF

See similar textbooks

Related questions

Question

HTML/CSS: Need help in creating a sidebar header canvas for the love and hate buttons. Below are the codes and attached is image of how the sidebar header canvas must look like. Make sure to involve the correct code with the output:

index.html:

<head>

<title>Document</title>

</head>

<body>

<h1>Summer School</h1>

<ulclass="content home">

<li><a href="/index.html" >Summer School Info</a></li>

<li><a href="/summerschool.html">Mainpage</a></li>

</ul>

</body>

</html>

summerschool.html:

<head>

<title>Document</title>

</head>

<body>

<h1>Mainpage</h1>

<li><a href="/index.html" >Summer School Info</a></li>

<li><a href="/summerschool.html">Mainpage</a></li>

</ul>

</body>

</html>

style.css:

h1{

text-align: center;

color:#5e2943;

/* Text-Color */

font-size: xx-large;

border-style: dotted;

}

ul{

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #550913;

}

li{

float: left;

}

li a{

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover{

background-color: #afe6e9;

}

body{

margin: 0;

padding: 0;

}

.container{

text-align: center;

margin-top: 360px;

}

body{

display: grid;

place-items: center;

min-height: 100vh;

margin: 0;

}

.button{

--button-offset: 0.48em;

--bg: 178, 60%, 48%;

float: left;

background-color: rgb(0, 143, 232);

border: 0;

border-radius: 0.2em;

padding: 0.1em;

margin-left:-1200px;

font-size: 2rem;

font-weight: 300;

text-transform: uppercase;

box-shadow: 0 8px 0 0 hsla(180, 13%, 12%, 0.5);

cursor: pointer;

}

.button:active,

.button:focus-visible{

transform: translateY(16px);

box-shadow: none;

}

LOVE
HATE
Mainpage
Summer School Info Mainpage

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 5 steps with 6 images

SEE SOLUTION Check out a sample Q&A here

Follow-up Questions

Read through expert solutions to related follow-up questions below.

Follow-up Question

This is not right. You are not supposed to copy the code given. The buttons are supposed to be in the sidebar canvas. Make sure to show the correct code with the screenshot of the output.

Solution

by Bartleby Expert

SEE SOLUTION

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

Similar questions