Answered: HTML/CSS: Below is the code and I need…

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: Below is the code and I need help in making sure the toggle switch along with the title at the top of the button to be aligned in the middle. Make sure to show the correct code and the screenshot of the output.

Code:

.toggle-switch {

position: relative;

display: inline-block;

width: 60px;

height: 34px;

}

.toggle-switch .switch-track {

background-color: var(--mode-btn-bg);

border-radius: 34px;

display: block;

height: 100%;

width: 100%;

position: absolute;

transition: background-color 0.3s;

}

.toggle-switch .switch-thumb {

background-color: var(--p-text);

border-radius: 50%;

width: 26px;

height: 26px;

position: absolute;

top: 4px;

left: 4px;

transition: transform 0.3s, background-color 0.3s;

}

input[type="checkbox"]:checked+.toggle-switch .switch-track {

margin: auto;

background-color: var(--mode-btn-bg)

}

input[type="checkbox"]:checked+.toggle-switch .switch-thumb {

transform: translateX(26px);

}

.toggle-switch+p::before {

content: "Draw mode";

}

input[type="checkbox"]:checked+.toggle-switch+p::before {

content: "Proof mode";

}

#ProofButtons {

display: none;

}

#DrawButtons {

display: block;

}

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 3 steps with 1 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

Where is the screenshot of the output? The code I gave you was style.css. Here is the code again to take a look at and make sure to provide a screenshot of the output.

style.css

.toggle-switch {

position: relative;

display: inline-block;

width: 60px;

height: 34px;

}

.toggle-switch .switch-track {

background-color: var(--mode-btn-bg);

border-radius: 34px;

display: block;

height: 100%;

width: 100%;

position: absolute;

transition: background-color 0.3s;

}

.toggle-switch .switch-thumb {

background-color: var(--p-text);

border-radius: 50%;

width: 26px;

height: 26px;

position: absolute;

top: 4px;

left: 4px;

transition: transform 0.3s, background-color 0.3s;

}

input[type="checkbox"]:checked+.toggle-switch .switch-track {

margin: auto;

background-color: var(--mode-btn-bg)

}

input[type="checkbox"]:checked+.toggle-switch .switch-thumb {

transform: translateX(26px);

}

.toggle-switch+p::before {

content: "Draw mode";

}

input[type="checkbox"]:checked+.toggle-switch+p::before {

content: "Proof mode";

}

#ProofButtons {

display: none;

}

#DrawButtons {

display: block;

}

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