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; }

COMPREHENSIVE MICROSOFT OFFICE 365 EXCE

1st Edition

ISBN:9780357392676

Author:FREUND, Steven

Publisher:FREUND, Steven

Chapter11: User Interfaces, Visual Basic For Applications (vba), And Collaboration Features

Section: Chapter Questions

Problem 1EYW

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.