Red Pill or Blue Pill But Only CSS

Developer
Alexander Hadik
Size
3,455 Kb
Views
30,360
  1. Red Pill or Blue Pill But Only CSS Previews
  2. Red Pill or Blue Pill But Only CSS HTML Codes
  3. Red Pill or Blue Pill But Only CSS CSS Codes

How do I make an red pill or blue pill but only css?

You might have to choose between the red pill or the blue pill, but you don't have to choose between CSS and JS. Only CSS here.. What is a red pill or blue pill but only css? How do you make a red pill or blue pill but only css? This script and codes were developed by Alexander Hadik on 16 September 2022, Friday.

Red Pill or Blue Pill But Only CSS Previews
IQ Test

Red Pill or Blue Pill But Only CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Red Pill or Blue Pill But Only CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="table">	<input type="radio" id="blue" name="type" class="table__check table__check--blue" checked>	<input type="radio" id="red" name="type" class="table__check table__check--red">	<div class="table__selector"> <label for="blue" class="selector__button selector__button--blue">Blue Pill</label>	<label for="red" class="selector__button selector__button--red">Red Pill</label>	</div>	<div class="table__info">	<p class="info__text info__text--blue">You take the blue pill, the story ends. You wake up in your bed and believe whatever you want to believe.</p> <p class="info__text info__text--red">You take the red pill, you stay in Wonderland, and I show you how deep the rabbit hole goes.</p>	</div>	<h3 class="table__title">Pill Data</h3>	<div class="table__row--header table__row">	<div class="table__block table__block--one-fourth">Days in Wonderland</div>	<div class="table__block table__block--one-fourth">Year</div>	<div class="table__block table__block--one-fourth">Anxiety Level</div>	<div class="table__block table__block--one-fourth">Quality of Food</div>	</div>	<div class="table__row table__row--data">	<div class="table__block table__block--one-fourth table__block--data"><span class="block__content block__content--blue">Lifetime</span><span class="block__content block__content--red">0</span></div>	<div class="table__block table__block--one-fourth table__block--data"><span class="block__content block__content--blue">1999</span><span class="block__content block__content--red">2199</span></div>	<div class="table__block table__block--one-fourth table__block--data"><span class="block__content block__content--blue">Stress Free</span><span class="block__content block__content--red">> 8000</span></div>	<div class="table__block table__block--one-fourth table__block--data"><span class="block__content block__content--blue">Standard to Great</span><span class="block__content block__content--red">Terrible</span></div>	</div>
</section>
</body>
</html>

Red Pill or Blue Pill But Only CSS - Script Codes CSS Codes

body { background-color: #EFF2F4; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: middle; -ms-flex-align: middle; align-items: middle;
}
.separator { width: 80%; height: 1px; background-color: lightgrey;
}
.selector__button { width: 50%; text-align: center;
}
.selector__button:first-of-type { border-right: 1px solid black;
}
.info__text { display: none; font-size: 14px;
}
.info__text a { text-decoration: none; color: #2d8ed8;
}
.block__content { display: none;
}
.table { width: 100%; font-family: sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0; padding: 0; font-size: 14px; line-height: 2em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 36px; margin-bottom: 36px;
}
.table__title { width: 700px;
}
.table__check { display: none;
}
.table__check--blue:checked ~ .table__selector > .selector__button--blue, .table__check--red:checked ~ .table__selector > .selector__button--red { font-weight: 700; color: white; background-color: #CC4452;
}
.table__check--blue:checked ~ .table__info > .info__text--blue, .table__check--red:checked ~ .table__info > .info__text--red { display: inline;
}
.table__check--blue:checked ~ .table__row > .table__block > .block__content--blue, .table__check--red:checked ~ .table__row > .table__block > .block__content--red { display: inline;
}
.table__selector { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 300px; border: 1px solid black; border-radius: 5px;
}
.table__info { width: 700px; height: 1em; padding-top: 12px; padding-bottom: 12px;
}
.table__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 700px; background-color: white;
}
.table__row--header { background-color: #CC4452; color: white; font-weight: 700;
}
.table__row--data { border-bottom: 1px solid lightgrey;
}
.table__block { text-align: center; padding-left: 12px; padding-right: 12px;
}
.table__block--one-fourth { -ms-flex-preferred-size: 25%; flex-basis: 25%;
}
.table__block--data { border-right: 1px solid lightgrey;
}
.table__block--data:first-of-type { border-left: 1px solid lightgrey;
}
.table__block--align-right { text-align: right;
}
Red Pill or Blue Pill But Only CSS - Script Codes
Red Pill or Blue Pill But Only CSS - Script Codes
Home Page Home
Developer Alexander Hadik
Username ahadik
Uploaded September 16, 2022
Rating 3
Size 3,455 Kb
Views 30,360
Do you need developer help for Red Pill or Blue Pill But Only CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alexander Hadik (ahadik) Script Codes
Name
Loader
Pricing Cards V3
Transcriptic Typography
IOPS Selector
Ops Implementation
Basil Tree
Pricing View with Map
Transcriptic Node Graph
Transcriptic Pricing Cards
Submit Card
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!