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

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

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

Step 1: Changes made in Code

1. In index.html, we have added two buttons :

<button class="button">Love</button>

<button class="button">Hate</button>

2. In index.html, we have changed <ulclass="content home"> to <ul class="content home">

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