I am working on this code which I am adapting from https://codepen.io/dandiws/pen/qqyeed
But when I try to include a hyperlink inside the accordion it is seen even when the accordion its closed.
How can i make the links not to be visible when the accordion is closed?
Do you know how to fix?
translucent hyperlinks
<html>
<head>
<style>
body {
background-color:#d3d0c9;
font-family:'Arial';
padding:2em 6em;
}
h1{
color:#fff;
text-align:center;
}
/*--------Accordion-------*/
.acc-kontainer {
width: 100%;
margin: auto;
}
.acc-kontainer .acc-body {
width: 98%;
width: calc(100% - 20px);
margin: 0 auto;
height: 0;
color: rgba(0, 0, 0, 0);;
background-color: rgba(42, 41, 92, 0.9);
line-height: 28px;
padding: 0 20px;
box-sizing: border-box;
transition: 0.5s;
}
.acc-kontainer label {
cursor: pointer;
background-color: rgba(101, 103, 106, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: block;
padding: 15px;
width: 100%;
color: #fff;
font-weight: 400;
box-sizing: border-box;
z-index: 100;
}
.acc-kontainer input{
display: none;
}
.acc-kontainer label:before {
font-family: 'FontAwesome';
content: '\f067';
font-weight: bolder;
float: right;
}
.acc-kontainer input:checked+label {
background-color: rgba(255, 255, 255, 0.15);
}
.acc-kontainer input:checked+label:before {
font-family: 'FontAwesome';
content: '\f00d';
transition: 0.5s;
}
.acc-kontainer input:checked~.acc-body {
height: auto;
color: #fff;
font-size: 16px;
padding: 20px;
transition: 0.5s;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<h1><img src="file:///Macintosh HD/Users/Matias/Desktop/banner.jpg" width="950" height="260" alt=""/></h1>
<p> </p>
<div class="acc-kontainer">
<div>
<input type="radio" name="acc" id="acc1" checked>
<label for="acc1">REGISTER to your SESSIONS</label>
<div class="acc-body">
Link for registering to session Register <br>
</div>
</div>
<div>
<input type="radio" name="acc" id="acc2">
<label for="acc2">COMPLETE your PRE-WORK</label>
<div class="acc-body">
Pre work links link
</div>
</div>
<div>
<input type="radio" name="acc" id="acc3">
<label for="acc3"> TECH CHECK & TROUBLESHOOTING</label>
<div class="acc-body">
Please follow this link to download Mursion software
Download this file which guides you how to install ...
</div>
</div>
<div>
<input type="radio" name="acc" id="acc4">
<label for="acc4">CONTINOUS LEARNING TOOLKIT</label>
<div class="acc-body">
Links
bada di
badad da
</div>
</div>
</div>
</body>
</html>
Try adding this for links
.acc-kontainer input:checked~.acc-body a {
color: blue; /* whatever link color you want */
}
.acc-kontainer input:not(:checked)~.acc-body a {
color: rgba(0, 0, 0, 0); /* font color set to transparent like other content in .acc-body */
}
Related
I am developing a form which has certain error message when there is an error in the form. My problem is when ever the error message is displayed my form inputs are displayed as i wanted. This is the image which shows the display i want (this is with the error display property being commented out. It was display:none)
But when the display property(display:none) is active the input fields tend to shift their position like this
What should i change in the code to make sure that my text input fields should look somehow like this.
How do i achieve this.
My code is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="/styles/style.css">
<title>Frontend Mentor | Intro component with sign up form</title>
</head>
<body>
<section class="container">
<header>
<h1>Learn to code by watching others</h1>
</header>
<article class="first-para">
<p class="main-paragraph"> See how experienced developers solve <span class="second-line">problems in real-time.
Watching</span>
<span class="third-line">scripted tutorials is great, but</span> understanding how developers think is
<span class="invaluable">invaluable.</span></p>
</article>
<section class="try-box">
<p><span class="try">Try it free 7 days</span> then <br /> $20/mo. thereafter</p>
</section>
<form class="claim-form" action="/">
<input type="text" placeholder="First Name" id="first-name">
<img class='error-img' src="/images/icon-error.svg" alt="error">
<div class="err err-first">First Name cannot be empty</div>
<input type="text" placeholder="Last Name" id="last-name">
<img class='error-img' src="/images/icon-error.svg" alt="error">
<div class="err err-last">Last Name cannot be empty</div>
<input type="email" placeholder="Email Address" id="email">
<img class='error-img' src="/images/icon-error.svg" alt="error">
<div class="err err-email">Looks like this is not an email</div>
<input type="password" placeholder="Password" id="password">
<img class='error-img' src="/images/icon-error.svg" alt="error">
<div class="err err-pass">Password cannot be empty</div>
<button class="claim-btn">CLAIM YOUR FREE TRIAL</button>
<p class="agree">By clicking the button, you are agreeing to our <span class="terms">Terms and
Services</span></p>
</form>
</section>
</body>
<script src="script.js"></script>
</html>
CSS:
#import url('css-reset.css');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap');
:root {
--color-red: hsl(0, 100%, 74%);
--color-green: hsl(154, 59%, 51%);
--color-blue: hsl(248, 32%, 49%);
--color-dark-blue: hsl(249, 10%, 26%);
--color-grayish-blue: hsl(246, 25%, 77%);
--color-white: hsl(0, 0%, 100%);
--font-weight-four: 400;
--font-weight-five: 500;
--font-weight-six: 600;
--font-weight-seven: 700;
}
body {
font-family: 'Poppins',
sans-serif;
background: url('/images/bg-intro-mobile.png') var(--color-red);
}
.container {
max-width: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 70px;
}
header h1 {
color: var(--color-white);
font-weight: var(--font-weight-six);
font-size: 1.7em;
padding: 50px 50px 20px 50px;
margin-left: 50px;
line-height: 1.2;
}
.first-para {
max-width: 17rem;
}
.main-paragraph {
color: var(--color-white);
font-weight: var(--font-weight-four);
font-size: 0.85em;
margin-bottom: 50px;
line-height: 2;
}
.second-line {
margin-left: 13px;
}
.third-line {
margin-left: 20px;
}
.invaluable {
margin-left: 92px;
}
.try-box {
width: 270px;
height: 65px;
background-color: var(--color-blue);
border-radius: 10px;
color: var(--color-white);
text-align: center;
padding: 15px;
font-size: 0.8em;
margin-bottom: 20px;
box-shadow: 0px 4px 5px 1px rgba(0, 0, 0, 0.29);
}
.try-box p:not(.try) {
font-weight: var(--font-weight-four);
}
.try {
font-weight: var(--font-weight-six);
}
.claim-form {
width: 270px;
background-color: var(--color-white);
height: 450px;
border-radius: 10px;
box-shadow: 0px 4px 5px 1px rgba(0, 0, 0, 0.29);
margin-bottom: 30px;
}
#first-name,
#last-name,
#email,
#password {
width: 240px;
padding: 7px;
margin: 13px 0 0px 15px;
}
.error-img {
/* display: none; */
position: relative;
left: 220px;
bottom: 24px;
height: 16px;
width: 16px;
}
.err {
/* display: none; */
color: var(--color-red);
font-style: italic;
font-size: 0.7em;
margin-left: 90px;
margin-top: -10px;
}
.err::placeholder {
color: var(--color-dark-blue);
/* opacity for firefox */
opacity: 70%;
font-size: 0.8em;
font-weight: var(--font-weight-seven);
}
.claim-btn {
width: 240px;
margin: 13px 0 13px 15px;
padding: 12px;
color: var(--color-white);
border-radius: 5px;
border: 1px;
background-color: var(--color-green);
font-size: 0.8em;
font-weight: var(--font-weight-four);
box-shadow: 0px 4px 5px 1px rgba(0, 0, 0, 0.29);
cursor: pointer;
}
.claim-btn:active {
opacity: 50%;
}
.agree {
font-size: 0.6em;
color: var(--color-grayish-blue);
margin-left: 35px;
}
.terms {
color: var(--color-red);
font-weight: var(--font-weight-six);
margin-left: 65px;
cursor: pointer;
}
Thank you.
Instead of display: none;, which removes elements from the document, you can use visibility: hidden. Setting the visibility hides the element without changing the layout of a document. Another option that would work similarly, would be opacity: 0.
Both of these options are fine for sighted users, but you should also set aria-hidden to true when they are not visible to avoid the errors being read by screen readers.
body {
font: 100%/1.414 "Open Sans", "Roboto", arial, sans-serif;
background: #e9e9e9;
}
a,
[type=submit] {
transition: all 0.25s ease-in;
}
.signup__container {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
transform: translateY(-50%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 50rem;
height: 30rem;
border-radius: 0.1875rem;
box-shadow: 0px 0.1875rem 0.4375rem rgba(0, 0, 0, 0.25);
}
.signup__overlay {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fafafa;
}
.container__child {
width: 100%;
height: 100%;
color: #fff;
}
.signup__thumbnail {
position:relative;
padding: 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.thumbnail__logo,
.thumbnail__content,
.thumbnail__links {
position: relative;
z-index: 2;
}
.thumbnail__logo {
align-self: flex-start;
}
.logo__shape {
fill: #fff;
}
.logo__text {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
vertical-align: bottom;
}
.thumbnail__content {
align-self:flex-end;
}
h1,
h2 {
font-weight: 300;
color: black;
}
.heading--primary {
font-size: 1rem;
}
.heading--secondary {
font-size: 1rem;
}
.thumbnail__links {
align-self: flex-end;
width: 100%;
}
.thumbnail__links a {
font-size: 1rem;
color: #fff;
}
.thumbnail__links a:focus, .thumbnail__links a:hover {
color: rgba(255, 255, 255, 0.5);
}
.signup__form {
padding: 2.5rem;
background: #fafafa;
}
label {
font-size: 0.85rem;
text-transform: uppercase;
color: #ccc;
}
.form-control {
background-color: transparent;
border-top: 111;
border-right:111;
border-left: 111;
border-radius: 2;
left: 222%;
}
.form-control:focus {
border-color: #111;
}
[type=text] {
color: #111;
}
[type=password] {
color: #111;
}
.btn--form {
padding: 0.5rem 2.5rem;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
color: #fff;
background: #111;
border-radius: 2.1875rem;
}
.btn--form:focus, .btn--form:hover {
background: #323232;
}
.vr {
width: 2px;
height: 90%;
background-color:#000;
border: .0625rem solid #ccc;
position:absolute;
top:0;
bottom:0;
left:300px;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sunrise-Spa</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700,300'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="signup__container">
<div class="container__child signup__thumbnail">
<div class="thumbnail__logo">
<h1 class="logo__text">Enterprise Registration</h1>
</div>
<div class="thumbnail__content text-center">
<h1 class="heading--primary">Need Help.</h1>
<h2 class="heading--secondary">callfor 22222222 for assistance</h2>
</div>
<div class="signup__overlay"></div>
</div>
<div class="vr"> </div>
<div class="container__child signup__form">
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" id="username" placeholder="" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" placeholder="" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" placeholder="********" required />
</div>
<div class="form-group">
<label for="passwordRepeat">Repeat Password</label>
<input class="form-control" type="password" name="passwordRepeat" id="passwordRepeat" placeholder="********" required />
</div>
<div class="m-t-lg">
<ul class="list-inline">
<li>
<input class="btn btn--form" type="submit" value="PROCEED" />
</li>
</ul>
</div>
</form>
</div>
</div>
<!-- partial -->
</body>
</html>
I have divided the Signup form into two parts, left part is for displaying some content and right side is for displaying Signup form elements like Username, email, password and repeat password.
Now i want to move the signup form elements to little bit left. and at the same time need to display the horizontal line in between two sides.
Tried Creating all but having issue with(CSS PART) moving the signup form elements to little bit left. and at the same time need to display the horizontal line in between two sides.
you can use these code
body {
font: 100%/1.414 "Open Sans", "Roboto", arial, sans-serif;
background: #e9e9e9;
}
a,
[type=submit] {
transition: all 0.25s ease-in;
}
.signup__container {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
transform: translateY(-50%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 50rem;
height: 30rem;
border-radius: 0.1875rem;
box-shadow: 0px 0.1875rem 0.4375rem rgba(0, 0, 0, 0.25);
}
.signup__overlay {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fafafa;
}
.container__child {
width: 100%;
height: 100%;
color: #fff;
}
.signup__thumbnail {
position:relative;
padding: 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.thumbnail__logo,
.thumbnail__content,
.thumbnail__links {
position: relative;
z-index: 2;
}
.thumbnail__logo {
align-self: flex-start;
}
.logo__shape {
fill: #fff;
}
.logo__text {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
vertical-align: bottom;
}
.thumbnail__content {
align-self:flex-end;
}
h1,
h2 {
font-weight: 300;
color: black;
}
.heading--primary {
font-size: 1rem;
}
.heading--secondary {
font-size: 1rem;
}
.thumbnail__links {
align-self: flex-end;
width: 100%;
}
.thumbnail__links a {
font-size: 1rem;
color: #fff;
}
.thumbnail__links a:focus, .thumbnail__links a:hover {
color: rgba(255, 255, 255, 0.5);
}
.signup__form {
padding: 2.5rem 2rem 2.5rem 3rem;
background: #fafafa;
}
label {
font-size: 0.85rem;
text-transform: uppercase;
color: #ccc;
}
.form-control {
background-color: transparent;
border-top: 111;
border-right:111;
border-left: 111;
border-radius: 2;
left: 222%;
}
.form-control:focus {
border-color: #111;
}
[type=text] {
color: #111;
}
[type=password] {
color: #111;
}
.btn--form {
padding: 0.5rem 2.5rem;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
color: #fff;
background: #111;
border-radius: 2.1875rem;
}
.btn--form:focus, .btn--form:hover {
background: #323232;
}
.vr {
width: 2px;
height: 100%;
background-color: #000;
border: .0625rem solid #ccc;
position: absolute;
top: 0;
bottom: 0;
left: calc(50% - 2px);
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sunrise-Spa</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700,300'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="signup__container">
<div class="container__child signup__thumbnail">
<div class="thumbnail__logo">
<h1 class="logo__text">Enterprise Registration</h1>
</div>
<div class="thumbnail__content text-center">
<h1 class="heading--primary">Need Help.</h1>
<h2 class="heading--secondary">callfor 22222222 for assistance</h2>
</div>
<div class="signup__overlay"></div>
</div>
<div class="vr"> </div>
<div class="container__child signup__form">
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" id="username" placeholder="" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" placeholder="" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" placeholder="********" required />
</div>
<div class="form-group">
<label for="passwordRepeat">Repeat Password</label>
<input class="form-control" type="password" name="passwordRepeat" id="passwordRepeat" placeholder="********" required />
</div>
<div class="m-t-lg">
<ul class="list-inline">
<li>
<input class="btn btn--form" type="submit" value="PROCEED" />
</li>
</ul>
</div>
</form>
</div>
</div>
<!-- partial -->
</body>
</html>
I just started with HTML and CSS a couple days ago and I'm stuck on this problem where the image margin won't change if in the :checked field. The one out of it works and it works if it modifies .Labels margins.
There was more code but it told me I couldn't post it because my post would be mostly code.
I don't know what I'm messing up here. Any help would be appreciated.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
background: rgb(58, 58, 58);
font-family: 'Times New Roman', Times, serif;
}
h2,
h3,
ul,
li {
color: #888;
}
.Title {
color: #888;
text-align: center;
font-size: 50px;
list-style-type: none;
}
a {
color: rgb(37, 194, 186);
}
p {
background: rgb(88, 88, 88);
color: rgb(196, 196, 196);
border-radius: 10px;
margin-left: 50%;
margin: 0px 11%;
padding: 10px;
}
nav ul li {
display: inline-block;
list-style-type: none;
background: rgb(34, 34, 34);
border-radius: 12px;
padding: 5px 20px;
margin: 0px 0px 0px 2px;
transition: all .3s ease 0s;
}
nav ul li:hover {
background: rgb(14, 36, 60);
}
nav ul {
float: right;
margin: 0px 30px 0px 0px;
}
header h1 {
display: inline-block;
margin: 0px 30px;
}
.TopNav {
background: rgb(45, 150, 141);
margin: 0;
padding: 15px 15px 10px 15px;
}
.BirdPicture {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1%;
margin-bottom: 1%;
}
body section h2 li {
list-style-type: none;
}
header nav h1 {
font-size: 28px;
}
.Slides {
display: flex;
margin-top: 1%;
}
.AllImages {
width: 300%;
display: flex;
}
.button:hover {
transform: scale(1.1);
}
a {
text-decoration: none;
}
.transparent {
background-color: transparent;
}
img {
border-radius: 10px;
}
.Boxes input {
display: none;
}
.Boxes {
display: flex;
justify-content: center;
margin: -3% 0px 0px 0px;
}
.Label:hover {
background: aquamarine;
}
.Label {
height: 20px;
width: 20px;
border: 3px solid #40D3Dc;
border-radius: 10px;
margin: 8px 20px;
display: inline-block;
transition: .3s;
}
.Slides {
/*running*/
margin-left: 5%;
}
#rad1:checked~.Slides {
/* not working */
margin-left: 0%;
}
#rad2:checked~.Slides {
margin-left: -20%;
}
#rad3:checked~.Slides {
margin-left: -40%;
}
<!DOCTYPE html>
<html>
<head>
<title>Curious Things</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="functions.js"></script>
</head>
<header>
<nav class="TopNav">
<h1><span style="color:rgb(44, 44, 44);">Wild World of Birds!</span></h1>
<ul>
<li class="button">
Home
</li>
<li class="button">
About
</li>
<li class="button">
Contact
</li>
<li class="button">
Help
</li>
<li class="button">
Info
</li>
</ul>
<script>
function highlight() {
document.header.nav.ul.li.style.background = blue;
}
</script>
</nav>
<div class="AllImages">
<div class="Slides">
<img class="MainImage" src="https://wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Background-11.jpg" width="1280" height="800">
<img class="MainImage" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallup.net%2Fwp-content%2Fuploads%2F2019%2F05%2F10%2F338365-mountains-landscapes-nature-lone-tree-natural-scenery-pure-blue.jpg&f=1&nofb=1" width="1280" height="800">
<img class="MainImage" src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pixelstalk.net%2Fwp-content%2Fuploads%2F2016%2F10%2FHd-desktop-free-nature-wallpaper-download.jpg&f=1&nofb=1" width="1280" height="800">
</div>
</div>
<div class="Boxes">
<input type="radio" name="imageSlider" id="radio1" class="box1">
<input type="radio" name="imageSlider" id="radio2" class="box2">
<input type="radio" name="imageSlider" id="radio3" class="box3">
<label for="radio1" class="Label" id="rad1"></label>
<label for="radio2" class="Label" id="rad2"></label>
<label for="radio3" class="Label" id="rad3"></label>
</div>
</header>
<body>
<section>
<h3>
<br>
<li class="Title">The Kingfisher</li>
<img class="BirdPicture" src="https://static01.nyt.com/images/2020/04/03/science/03TB-KINGFISHER1/03TB-KINGFISHER1-mediumSquareAt3X.jpg" width="900" height="900">
<p class="Birds">
<span style="color:paleturquoise;">Kingfishers</span> or <span style="color:paleturquoise;">Alcedinidae</span> are a family of small to medium-sized, brightly colored birds in the order Coraciiformes. They have a cosmopolitan distribution, with
most species found in the tropical regions of Africa, Asia, and Oceania. The family contains <span style="color:rgb(55, 216, 208)">144 species</span> and is divided into <span style="color:rgb(118, 228, 136)">three subfamalies</span> and
<span
style="color:rgb(60, 212, 167)">19 genera</span>. All kingfishers have large heads, long, sharp, pointed bills, short legs, and stubby tails. Most species have bright plumage with only small differences between the sexes. Most species are tropical in distribution, and a slight
majority are found only in forests. They consume a wide range of prey usually caught by swooping down from a perch. While kingfishers are usually thought to live near rivers and eat fish, many species live away from water and eat small invertebrates.
Like other members of their order, they nest in cavities, usually tunnels dug into the natural or artificial banks in the ground. Some kingfishers nest in arboreal termite nests. A few species, principally insular forms, are threatened with
<span style="color:rgb(233, 109, 93)">extinction</span>. In Britain, the word "kingfisher" normally refers to <span style="color:rgb(112, 221, 179)">the common kingfisher</span>.
</p>
</h3>
</section>
</body>
</html>
I'm trying to make a sliding sidebar without javascript, but I have a problem with an adjacent sibling selector which is not working.
This is my code:
.sidebar {
position: fixed;
top: 100px;
right: 0px;
z-index: 0;
width: 120px;
height: 100px;
padding: 30px;
background-color: rgba(255, 255, 255, 0.00);
border-bottom: solid 1px #181918;
border-left: solid 1px #181918;
}
.sidebar ul li {
font-family: 'Zona Pro';
font-size: 18px;
margin-bottom: 16px;
-webkit-font-smoothing: antialiased;
color: rgba(24, 25, 24, 0.78);
cursor: pointer;
}
#sidebarToggler {
display: none;
}
#sidebartoggler + .sidebar {
top: 500px;
}
<div class="pageWrap">
<input type="checkbox" id="sidebarToggler" />
<div class="sidebar">
<ul>
<li>Settings</li>
<li>Log out</li>
</ul>
</div>
<div class="userNameDiv">
<label for="sidebarToggler">
Fale1994
</label>
</div>
<div class="pageContent">
#RenderBody()
</div>
</div>
Everything is working OK except the last line of CSS... I tried everything and have no more ideas.
When clicked on label, the checkbox changes checked/unchecked, and then CSS should set a sidebar attribute 'top' to 500px if checked. I also tried this with background-color, but it is also not working.
2 things you are missing:
the :checked from ckeckbox
and you have #sidebartoggler but CSS is case sensitive, so use #sidebarToggler
Snippet
.sidebar {
position: fixed;
top: 100px;
right: 0px;
z-index: 0;
width: 120px;
height: 100px;
padding: 30px;
background-color: rgba(255, 255, 255, 0.00);
border-bottom: solid 1px #181918;
border-left: solid 1px #181918;
}
.sidebar ul li {
font-family: 'Zona Pro';
font-size: 18px;
margin-bottom: 16px;
-webkit-font-smoothing: antialiased;
color: rgba(24, 25, 24, 0.78);
cursor: pointer;
}
#sidebarToggler {
display: none;
}
#sidebarToggler:checked + .sidebar {
top: 500px;
}
<div class="pageWrap">
<input type="checkbox" id="sidebarToggler" />
<div class="sidebar">
<ul>
<li>Settings</li>
<li>Log out</li>
</ul>
</div>
<div class="userNameDiv">
<label for="sidebarToggler">
Fale1994
</label>
</div>
<div class="pageContent">
#RenderBody()
</div>
</div>
#sidebartoggler:checked + .sidebar
You forgot the :checked.
The Quiz is perfectly showing in firefox and Chrome, just Safari seems to have some issues. It instantly shows the last test instead of the first like chrome and firefox are doing. What am I doing wrong. (I am using Safari Version 8.0.2 (10600.2.5)).
body {
font-size: 100%;
background: white;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300; }
input[type=radio],
input[type=checkbox] {
font-size: 0.8em;
position: relative;
display: inline-block;
vertical-align: middle;
border: 0.1em solid #bbbbbb;
background: none;
padding: 0.2em;
margin: 0 0.2em;
font-family: Consolas, "Courier New", monospace;
width: 1em;
height: 1em;
box-sizing: border-box;
-webkit-appearance: none; }
input[type=radio]:focus,
input[type=checkbox]:focus {
outline: 0;
border-color: #335599; }
input[type=radio] {
border-radius: 100%;
background-clip: content-box; }
input[type=radio]:checked {
background-color: #44aacc; }
h1 {
font-size: 2em;
margin: 1em auto;
text-align: center; }
.test {
position: absolute;
top: 25%;
bottom: 25%;
right: 25%;
left: 25%;
background: white; }
.test a {
display: block;
text-align: center;
padding: 0.5em 1em;
border-radius: 3px;
text-decoration: none;
background: #666666;
color: white; }
.test a:hover {
background: #4d4d4d; }
.test .question {
font-size: 1.3em;
margin: 0.5em 0;
border-bottom: 2px dashed #666666; }
.test .answer {
display: inline-block;
padding: 0.5em 1em;
cursor: pointer;
border-bottom: 4px solid white; }
.test .answer:hover {
border-color: #bbbbbb; }
.test .test {
transform: translate3d(150%, 0, 0);
transition: transform 100ms;
top: 0;
bottom: 0;
right: 0;
left: 0; }
.test .false:checked + .answer {
border-color: #dd4411; }
.test .true:checked ~ .test {
transform: translate3d(0, 0, 0); }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="quiz_test.css" type="text/css">
<meta>
<title>test</title>
</head>
<body>
<h1>A simple Quiz in pure CSS</h1>
<div class="test">
<h3 class="question">1 + 2 = ?</h3>
<input type="radio" name="1" id="1-1" class="false"> <label for="1-1" class="answer">12</label><br>
<input type="radio" name="1" id="1-2" class="true"> <label for="1-2" class="answer">3</label>
<div class="test">
<h3 class="question">red - green, orange - blue, yellow - ?</h3>
<input type="radio" name="2" id="2-1" class="false"> <label for="2-1" class="answer">magenta</label><br>
<input type="radio" name="2" id="2-2" class="true"> <label for="2-2" class="answer">purple</label><br>
<input type="radio" name="2" id="2-3" class="false"> <label for="2-3" class="answer">cyan</label>
<div class="test">
<h3 class="question">name the fish!</h3>
<input type="radio" name="3" id="3-1" class="true"> <label for="3-1" class="answer">shark</label><br>
<input type="radio" name="3" id="3-2" class="false"> <label for="3-2" class="answer">dolphin</label><br>
<input type="radio" name="3" id="3-3" class="false"> <label for="3-3" class="answer">whale</label><br>
<input type="radio" name="3" id="3-4" class="false"> <label for="3-4" class="answer">all of the above</label>
<div class="test">
<h1>YOU WIN!!!</h1>
play again
</div>
</div>
</div>
</div>
</body>
</html>
The Problem is that webkit doesnt understand the transition and transform attributes without vendor prefixes. Copy every line of transition and transform and replace the duplicate with -webkit-transision and -webkit- transform.
body {
font-size: 100%;
background: white;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300; }
input[type=radio],
input[type=checkbox] {
font-size: 0.8em;
position: relative;
display: inline-block;
vertical-align: middle;
border: 0.1em solid #bbbbbb;
background: none;
padding: 0.2em;
margin: 0 0.2em;
font-family: Consolas, "Courier New", monospace;
width: 1em;
height: 1em;
box-sizing: border-box;
-webkit-appearance: none; }
input[type=radio]:focus,
input[type=checkbox]:focus {
outline: 0;
border-color: #335599; }
input[type=radio] {
border-radius: 100%;
background-clip: content-box; }
input[type=radio]:checked {
background-color: #44aacc; }
h1 {
font-size: 2em;
margin: 1em auto;
text-align: center; }
.test {
position: absolute;
top: 25%;
bottom: 25%;
right: 25%;
left: 25%;
background: white; }
.test a {
display: block;
text-align: center;
padding: 0.5em 1em;
border-radius: 3px;
text-decoration: none;
background: #666666;
color: white; }
.test a:hover {
background: #4d4d4d; }
.test .question {
font-size: 1.3em;
margin: 0.5em 0;
border-bottom: 2px dashed #666666; }
.test .answer {
display: inline-block;
padding: 0.5em 1em;
cursor: pointer;
border-bottom: 4px solid white; }
.test .answer:hover {
border-color: #bbbbbb; }
.test .test {
transform: translate3d(150%, 0, 0);
transition: transform 100ms;
-webkit-transform: translate3d(150%, 0, 0);
-webkit-transition: transform 100ms;
top: 0;
bottom: 0;
right: 0;
left: 0; }
.test .false:checked + .answer {
border-color: #dd4411; }
.test .true:checked ~ .test {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="quiz_test.css" type="text/css">
<meta>
<title>test</title>
</head>
<body>
<h1>A simple Quiz in pure CSS</h1>
<div class="test">
<h3 class="question">1 + 2 = ?</h3>
<input type="radio" name="1" id="1-1" class="false"> <label for="1-1" class="answer">12</label><br>
<input type="radio" name="1" id="1-2" class="true"> <label for="1-2" class="answer">3</label>
<div class="test">
<h3 class="question">red - green, orange - blue, yellow - ?</h3>
<input type="radio" name="2" id="2-1" class="false"> <label for="2-1" class="answer">magenta</label><br>
<input type="radio" name="2" id="2-2" class="true"> <label for="2-2" class="answer">purple</label><br>
<input type="radio" name="2" id="2-3" class="false"> <label for="2-3" class="answer">cyan</label>
<div class="test">
<h3 class="question">name the fish!</h3>
<input type="radio" name="3" id="3-1" class="true"> <label for="3-1" class="answer">shark</label><br>
<input type="radio" name="3" id="3-2" class="false"> <label for="3-2" class="answer">dolphin</label><br>
<input type="radio" name="3" id="3-3" class="false"> <label for="3-3" class="answer">whale</label><br>
<input type="radio" name="3" id="3-4" class="false"> <label for="3-4" class="answer">all of the above</label>
<div class="test">
<h1>YOU WIN!!!</h1>
play again
</div>
</div>
</div>
</div>
</body>
</html>
P.S. The snippet above doesn't run correctly in the preview box because some of stackoverflows css is interfering. It does however run correctly in the full page preview.