<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/1c2c2462bf.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="accordion-menu">
<ul>
<li>
<input type="checkbox" checked>
<i class="arrow"></i>
<h2><i class="fas fa-code"></i>Languages Used</h2>
<p>This UI was written in HTML and CSS.
</p>
</li>
<li>
<input type="checkbox" checked>
<i class="arrow"></i>
<h2><i class="fas fa-question"></i>How it Works</h2>
<p>Using the sibling and checked selectors, we can determine
the styling of sibling elements based on the checked state
of the checkbox input element.
</p>
</li>
<li>
<input type="checkbox" checked>
<i class="arrow"></i>
<h2><i class="fas fa-laugh"></i>Points of Interest</h2>
<p>By making the open state default for when :checked isn't
detected, we can make this system accessable for browsers
that don't recognize :checked.
</p>
</li>
</ul>
</div>
</body>
</html>body {
width: 100%;
height: 100%;
margin:0;
perspective: 900;
overflow-y: scroll;
background-color: #f6483b;
font-family: "Titillium Web", sans-serif;
color: rgba(48, 69, 92, 0.8);
}
.accordion-menu {
display: inline-block;
position: relative;
left: 50%;
margin: 150px 0;
transform: translate(-50%, 0);
max-width: 300px;
padding: 10px 20px 20px;
border-radius: 5px;
}
h2 {
font-size: 18px;
line-height: 34px;
font-weight: 500;
letter-spacing: 1px;
display: block;
margin: 0;
cursor: pointer;
color: #6c6c6a;
}
p {
color: rgba(48, 69, 92, 0.8);
font-size: 15px;
line-height: 26px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
max-height: 800px;
opacity: 1;
transform: translate(0, 0);
margin-top: 14px;
z-index: 2;
}
ul {
list-style: none;
perspective: 900;
padding: 0 20px 10px;
margin: 0;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(255, 255, 255, 0.19);
}
ul li {
position: relative;
padding: 0;
margin: 0;
padding-bottom: 4px;
padding-top: 18px;
border-top: 1px dotted #dce7eb;
}
ul li:nth-child(1){ border:none; }
ul li:nth-of-type(1) { animation-delay: 0.5s; }
ul li:nth-of-type(2) { animation-delay: 0.75s; }
ul li:nth-of-type(3) { animation-delay: 1.0s; }
ul li:last-of-type { padding-bottom: 0; }
ul li .arrow {
position: absolute;
transform: translate(-6px, 0);
margin-top: 16px;
right: 0;
}
ul li .fas{
color:#f6483b;
font-size: 15px;
margin-right: 10px;
}
ul li .arrow:before, ul li .arrow:after {
content: "";
position: absolute;
background-color: #f6483b;
width: 3px;
height: 9px;
}
ul li .arrow:before {
transform: translate(-2px, 0) rotate(45deg);
}
ul li .arrow:after {
transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
}
ul li input[type=checkbox]:checked ~ p {
margin-top: 0;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
}
ul li input[type=checkbox]:checked ~ .arrow:before {
transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=checkbox]:checked ~ .arrow:after {
transform: translate(-2px, 0) rotate(-45deg);
}
.transition, p, ul li .arrow:before, ul li .arrow:after {
transition: all 0.25s ease-in-out;
}
.flipIn, h1, ul li {
animation: flipdown 0.5s ease both;
}
.no-select, h2 {
tap-highlight-color: transparent;
touch-callout: none;
user-select: none;
}
@keyframes flipdown {
0% {
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
}
5% { opacity: 1; }
80% { transform: rotateX(8deg); }
83% { transform: rotateX(6deg); }
92% { transform: rotateX(-3deg); }
100% {
transform-origin: top center;
transform: rotateX(0deg);
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.