I have tried my best to solve the issue but it's not working. I want to make a gradient border on my website for a slideshow (similar to the one on this video). I used (:before) pseudo selector here is my HTML code:
* {
color: white;
margin: 0px 0px;
padding: 0px 0px;
box-sizing: border-box;
}
body {
background-color: #060c21;
}
/* NavBar Starts */
#mainnav {
display: flex;
justify-content: center;
padding: 15px;
background-color: black;
width: 98%;
position: static;
}
.items>a {
font-family: "Roboto Slab", serif;
text-decoration: none;
}
.items {
margin: 0 5vw 0 5vw;
padding: 1vw;
width: fit-content;
font-size: 1.3rem;
}
.items>a:hover {
color: rgb(0, 255, 242);
}
/* NavBar Ends */
/* Content Starts */
.slide-box {
position: relative;
border: 2px solid red;
height: 75vh;
width: 95%;
margin: 2% auto;
}
.slide-box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: white;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#531&display=swap" rel="stylesheet" />
<!-- font-family: 'Roboto Slab', serif; -->
<link rel="stylesheet" href="Vaishnavi.css" />
</head>
<body>
<nav>
<div id="mainnav">
<div class="items">
Home
</div>
<div class="items">
About US
</div>
<div class="items">
Creations
</div>
<div class="items">
Help
</div>
</div>
</nav>
<div class="slide-box">
<h1>This is glowing box</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
</p>
</div>
</body>
</html>
Please tell me the mistake I am making and why my z-index is not working correctly. In my view, I have written the code correctly.
Is this something that you are looking for?
You can see that I recreated the example based on this video that you have provided.
* {
color: white;
margin: 0px 0px;
padding: 0px 0px;
box-sizing: border-box;
}
body {
background-color: #060c21;
}
/* NavBar Starts */
#mainnav {
display: flex;
justify-content: center;
padding: 15px;
background-color: black;
width: 98%;
position: static;
}
.items>a {
font-family: "Roboto Slab", serif;
text-decoration: none;
}
.items {
margin: 0 5vw 0 5vw;
padding: 1vw;
width: fit-content;
font-size: 1.3rem;
}
.items>a:hover {
color: rgb(0, 255, 242);
}
/* NavBar Ends */
/* Content Starts */
.slide-box {
position: relative;
margin: 2% auto;
height: 75vh;
width: 95%;
background: linear-gradient(0deg, #000, #262626);
}
.slide-box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: animate 20s linear infinite;
}
#keyframes animate {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#531&display=swap" rel="stylesheet" />
<!-- font-family: 'Roboto Slab', serif; -->
<link rel="stylesheet" href="Vaishnavi.css" />
</head>
<body>
<nav>
<div id="mainnav">
<div class="items">
Home
</div>
<div class="items">
About US
</div>
<div class="items">
Creations
</div>
<div class="items">
Help
</div>
</div>
</nav>
<div class="slide-box">
<h1>This is glowing box</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
</p>
</div>
</body>
</html>
What you were missing in your code to see the text was the line below:
.slide-box {
background: linear-gradient(0deg, #000, #262626);
}
The z-index worked just fine but because your background color was white and also the text color was white, you could not see the text.
Here is the code how you can achieve gradient border(code is copied from css-tricks). For more please visit here
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #222;
}
.module-border-wrap {
max-width: 250px;
padding: 1rem;
position: relative;
background: linear-gradient(to right, red, purple);
padding: 3px;
}
.module {
background: #222;
color: white;
padding: 2rem;
}
<div class="module-border-wrap">
<div class="module">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
</div>
</div>
Related
I am new at HTML and want to know how to fix the position of my elements in a window because every time I try to minimize the window everything becomes messy. I am about to make a website and this is my first try so bear with errors. Here's my code:
body,
html {
background-color: #cc9966;
max-height: 100%;
max-width: 100%;
}
.Container {
width: 100%;
min-width: 700px;
margin: auto;
position: relative;
}
.title {
font-family: Lucida handwriting;
font-size: 4rem;
text-align: center;
color: white;
text-shadow: 1rem 1rem 5rem black;
}
header .choice a {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
margin-left: 3rem;
cursor: pointer;
border-radius: 1rem;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=content-width, initial-scale=1.0">
<title> WEBSITE OF LB21 </title>
<link rel="stylesheet" href="LB21.css">
</head>
<body>
<div class="Container">
<div class=title>
<h2> LUSCIOUS BITES </h2>
</div>
<center>
<p class="choice">
HOME
SPECIALITY
POPULAR
GALLERY
REVIEW
ORDER
</p>
</center>
</header>
<section class="home" id="home">
<div class="content">
<h3>food made with love</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas accusamus tempore temporibus rem amet laudantium animi optio voluptatum. Natus obcaecati unde porro nostrum ipsam itaque impedit incidunt rem quisquam eos!</p>
order now
</div>
<div class="image">
<img src="images/home-img.png" alt="">
</div>
</section>
</div>
</body>
The image below shows the issues I'm having:
body,
html {
background-color: #cc9966;
max-height: 100%;
max-width: 100%;
}
.Container {
width: 100%;
min-width: 700px;
max-height: 1000px;
margin: auto;
position: relative;
}
.title {
font-family: Lucida handwriting;
font-size:calc(34px + 2.2vw);
text-align: center;
color: white;
text-shadow: 1rem 1rem 5rem black;
}
header {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
margin-left: 3rem;
cursor: pointer;
border-radius: 1rem;
position: relative;
}.choice {
display: flex;
justify-content: space-evenly;
max-width: 900px
}
.choice a {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
cursor: pointer;
border-radius: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=content-width, initial-scale=1.0">
<title> WEBSITE OF LB21 </title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Container">
<div class=title>
<h2> LUSCIOUS BITES </h2>
</div>
<center>
<p class="choice">
HOME
SPECIALITY
POPULAR
GALLERY
REVIEW
ORDER
</p>
</center>
<section class="home" id="home">
<div class="content">
<h3>food made with love</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas accusamus tempore temporibus rem amet laudantium animi optio voluptatum. Natus obcaecati unde porro nostrum ipsam itaque impedit incidunt rem quisquam eos!</p>
order now
</div>
<div class="image">
<img src="images/home-img.png" alt="">
</div>
</section>
</div>
</body>
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 1 year ago.
I made a design where I want to show text section after hover on info icon. But It is not working after hover on info icon. Please help me. I could not able to find my problem in this code. But most probably I think the problem is in the hover section. But I could not able to fix it. Please help me to fix this problem.
*{
margin: 0;
padding: 0;
}
.hover1 {
height: 500px;
width: 700px;
background: #00a8ff;
margin: 10px auto;
position: relative;
}
.icon-info{
position: absolute;
top: 150px;
left: 500px;
background: white;
padding: 5px 11px;
border-radius: 50%;
}
.text{
height: 200px;
width: 360px;
background: white;
position: relative;
top: 150px;
left: 130px;
padding: 20px;
border-radius: 13px;
display: inline-block;
visibility: hidden;
opacity: 0;
}
.text h3{
font-size: 30px;
margin: 20px 5px;
}
.text p{
font-size: 18px;
}
/* hover */
.icon-info:hover .text{
visibility: visible;
opacity: 1;
transition: .5s;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hover effect</title>
<link rel="stylesheet" href="./hover.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
<div class="hover1">
<i class="fas fa-info icon-info"></i>
<div class="text">
<h3>This is Tittle</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur dolores quis enim facilis doloribus iste hic dolore cumque rerum, in earum omnis obcaecati blanditiis nostrum ab. Tempora officia voluptatibus ex!</p>
</div>
</div>
</body>
</html>
Just add a + in hover style as follow:
*{
margin: 0;
padding: 0;
}
.hover1 {
height: 500px;
width: 700px;
background: #00a8ff;
margin: 10px auto;
position: relative;
}
.icon-info{
position: absolute;
top: 150px;
left: 500px;
background: white;
padding: 5px 11px;
border-radius: 50%;
z-index:1;
}
.text{
height: 200px;
width: 360px;
background: white;
position: relative;
top: 150px;
left: 130px;
padding: 20px;
border-radius: 13px;
display: inline-block;
visibility: hidden;
opacity: 0;
}
.text h3{
font-size: 30px;
margin: 20px 5px;
}
.text p{
font-size: 18px;
}
/* hover */
.icon-info:hover + .text{
visibility: visible;
opacity: 1;
transition: .5s;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hover effect</title>
<link rel="stylesheet" href="./hover.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
<div class="hover1">
<i class="fas fa-info icon-info"></i>
<div class="text">
<h3>This is Tittle</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur dolores quis enim facilis doloribus iste hic dolore cumque rerum, in earum omnis obcaecati blanditiis nostrum ab. Tempora officia voluptatibus ex!</p>
</div>
</div>
</body>
</html>
I used CSS instead of Fontawesome to generate the arrows. I think it makes more sense than loading a separate icon library. However I have trouble positioning those CSS arrow to the center, when it points upwards it looks great, I think it's in the center or at least near to the center, but when it points downwards it looks like the arrow moved towards the bottom.
I would be grateful for any suggestion
"use strict";
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container > .panel + .panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header > h4 {
margin: 0;
}
.panel-header > h4 > a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
position: absolute;
top: 22px;
right: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
First question?
</h4>
<div class="arrow"><div class="arrow-up"></div></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
Second question?
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
</div> <!-- .panel-container -->
</div> <!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
</html>
With the current setup you have, the best solution would be to either -
Change the top value in the animation class. You will also want to change the animate value to all so that it also animates the change in the top value without jumping.
.arrow {
...
transition: all 0.15s linear;
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
top: 18px;
}
You could also change the transform-origin to 100% center, however this causes the animation to spin in a weird way.
You could also look into using built-in HTML arrows and rotating them if you do not want to load a font library or an SVG icon. It may behave more how you are expecting - https://www.toptal.com/designers/htmlarrows/
First of all you can avoid using position: absolute for this type of problem where display: flex do the trick:
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container>.panel+.panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
display: flex; /* <- Use flexbox */
justify-content: space-between;
align-items: center;
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header>h4 {
margin: 0;
}
.panel-header>h4>a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
/* Don't need position absolute anymore */
margin: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {}
.panel.open .arrow {
margin-top: -5px; /* <- Remove arrow heigth (5px) to stay at the same level */
transform: rotate(-315deg);
transform-origin: center center;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
First question?
</h4>
<div class="arrow">
<div class="arrow-up"></div>
</div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi blanditiis corporis dicta, dolor dolores enim facilis fuga itaque iure iusto molestiae mollitia natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div>
<!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
Second question?
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi blanditiis corporis dicta, dolor dolores enim facilis fuga itaque iure iusto molestiae mollitia natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div>
<!-- .panel -->
</div>
<!-- .panel-container -->
</div>
<!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
</html>
Try changing your top property of the .arrow class to top: 50% so that it isn't hardcoded.
Then, add to your transform property translate(0, -50%).
Use the top propriety in CSS.
This will set the top position of the arrow when rotating it.
Here is your code:
"use strict";
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container > .panel + .panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header > h4 {
margin: 0;
}
.panel-header > h4 > a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
position: absolute;
top: 22px;
right: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
top: 15px; //Do it!
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
First question?
</h4>
<div class="arrow"><div class="arrow-up"></div></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
Second question?
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
</div> <!-- .panel-container -->
</div> <!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
A living demo: https://codepen.io/marchmello/pen/mdedGra
You need to use the position: absolute and top position on your .panel.open .arrow css like this :
"use strict";
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container > .panel + .panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header > h4 {
margin: 0;
}
.panel-header > h4 > a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
position: absolute;
top: 22px;
right: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
position: absolute;
top: 30%;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
First question?
</h4>
<div class="arrow"><div class="arrow-up"></div></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
Second question?
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
</div> <!-- .panel-container -->
</div> <!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
</html>
Link to project
I've have finally managed to get the header layout I want but one thing I can't get done and that is the alignment of the text (h2 and h3) in the left sidebar. I have tried to do it with a fixed proportie but it get side-effects and I think it has something to do with the rotated text.
The main title should be in left bottom, on one line and the date should be on the right of the main title also on one line. Those combined must align at center of the side-main text aligned to the left.
Edit: Link to layout
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header {
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav {
position: fixed;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, .2);
}
.side-main {
display: flex;
flex-direction: column;
height: calc(100vh - 60px);
margin-top: 60px;
width: 70px;
border-right: 1px rgba(255, 255, 255, .2) solid;
}
.agenda-text {
width: 100%;
color: #FFF;
transform: rotate(-90deg);
text-transform: uppercase;
}
.header-main {
display: flex;
height: calc(100vh - 60px);
margin-top: 60px;
}
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>
Many thanks in advance!
Hope you can help me out.
Regards,
Jason
This doesn't look super polished as a whole yet, but I believe it does solve your issue with the rotation of the side-main.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main-wrapper">
<div class="side-main">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>
Css:
*{
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header{
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav{
position: fixed;
width: 100%;
height: 60px;
background: rgba(255,255,255,.2);
}
.side-main-wrapper {
transform: rotate(-90deg);
margin-top: 60px;
}
.side-main{
display: flex;
flex-direction: column;
height: 70px;
width: calc(100vh - 60px);
border-bottom: 1px rgba(255,255,255,.2) solid;
}
.agenda-text{
color: #FFF;
text-transform: uppercase;
}
.header-main{
height: calc(100vh - 60px);
margin-top: 60px;
}
Rather than rotating the entries of the flex column, I wrapped the side-main in a side-main-wrapper and rotated that. Then I just treated the side-main as a regular flex column, and it started behaving.
I added flex: 1; and some margin-left to .agenda-text and then opened up the .side-main width a bit. Hope this is something like what you are looking for, but just guessing since you didn't specify
Edit: Looks wack in preview and fullscreen... but works in the actual edit jsfiddle screen... maybe this is not a good answer
Edit Took out flex: 1 and margin-left. I've made it look how you described, but with an issue. I think a big step forward is adding a container around the .agenda-texts and then rotate that instead of the text. The problem with my approach is that the flex positioning is based on the width of the sidebar, before everything gets turned sideways. So with a left bar width like 300px it works but with a smaller width like you are looking for probably not. Can't imagine making this fully responsive without doing the whole thing over
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header {
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav {
position: fixed;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, .2);
}
.side-main {
height: calc(100vh - 60px);
margin-top: 60px;
width: 300px;
border-right: 1px rgba(255, 255, 255, .2) solid;
}
.side-main-title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
transform: rotate(-90deg);
}
.agenda-text {
color: #FFF;
text-transform: uppercase;
}
.header-main {
display: flex;
height: calc(100vh - 60px);
margin-top: 60px;
}
<!DOCTYPE html>
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main">
<div class="side-main-title">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>
I've been making this website for school and I thought i'd figure out how parallax scrolling works. So i've started with the simpelest tutorial to be precise this one. After doing this I placed my navigation bar in. I remember this worked fine at the time but after working allot on the responsiveness I didn't check back and now I can't click on the links anymore.
This is my html:
<div id="group2" class="parallax_group">
<!-- <div class="parallax_layer parallax_layer-back">
background
</div> -->
<div class="parallax_layer parallax_layer-base">
<div id="nav" class="nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Over ons</li>
<li>Wat leveren wij?</li>
<li>Contact</li>
<li>Demo</li>
</ul>
</div>
<div class="section group">
<div class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam id nam, necessitatibus at odit nobis vitae, dolor sequi sunt doloremque minima, debitis. Sed debitis possimus esse soluta mollitia est culpa.</p>
</div>
<div id="middle" class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui autem impedit, a, error accusantium soluta molestias quidem quo totam beatae eligendi sint, modi voluptatem nemo fugiat recusandae ullam consequatur nihil?</p>
</div>
<div class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptatibus, quaerat nostrum ullam distinctio praesentium! Nemo eveniet provident id, tenetur cumque natus, quas porro possimus maiores, minus amet laboriosam ea?</p>
</div>
</div>
</div>
</div>
And this is my css:
* {
padding: 0;
margin: 0;
}
body {
text-align: center;
}
h1{
display: inline-block;
font-family: 'Raleway', sans-serif;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
p{
display: inline-block;
font-family: 'Raleway', sans-serif;
color: black;
}
header {
z-index: 5;
line-height: 100vh;
}
header .parallax_layer-back {
background: url(sample.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#group2 {
z-index: 3;
}
#group2 .parallax_layer-base {
background-color: #dbdbdb;
}
.parallax {
perspective: 300px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax_layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax_layer-base {
transform: translateZ(0px);
z-index: 4;
}
.parallax_layer-back {
transform: translateZ(-300px) scale(2);
z-index: 3;
height: 150vh;
}
.parallax_layer-deep{
transform: translateZ(-600px) scale(3);
z-index: 2;
background-color: #dbdbdb;
}
.parallax_group {
position: relative;
height: 100vh;
transform-style: preserve-3d;
/*transform: translate3d(700px, 0, -800px) rotateY(30deg);*/
}
/*Columns*/
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
#middle{
border-top: 0px;
border-bottom: 0px;
border-right: 1px;
border-left: 1px;
border-style: solid;
}
/*navigation*/
.nav {
position: sticky;
top: 0px;
height: 100px;
width: 100%;
z-index: 30;
font-family: 'Raleway', sans-serif;
font-size: 20px;
background-color: #dbdbdb;
}
.nav ul {
list-style-type: none;
margin-left: 0;
padding-top: 40px;
font-size: 25px;
font-family: 'Raleway', sans-serif;
line-height: 0;
z-index: 30;
}
.nav li {
display: inline-block;
margin-left: 15px;
padding-bottom: 25px;
z-index: 30;
}
a:link {
color: #2F649B;
font-family: inherit;
}
a:visited {
color: #2F649B;
}
a:hover {
color: #6D92B9;
text-decoration: none;
}
a:active {
color: #26507C;
text-decoration: none;
}
footer {
position: sticky;
bottom: 0px;
height: 100px !important;
line-height: 100px;
width: 100%;
}
I know it's allot of code but I have no idea what it could be so i went and gone ahead and gave you everything.
edit: The other html parallax group:
<!DOCTYPE html>
<html>
<head>
<title>Squirel WebDesign</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="handheld.css" media="screen and (max-device-width: 480px), screen and (max-width: 480px)">
</head>
<body>
<div class="parallax">
<header class="parallax_group">
<div class="parallax_layer parallax_layer-base">
<h1>i'm a bloody big header preferably with a squirel</h1>
</div>
<div class="parallax_layer parallax_layer-back">
</div>
<div class="parallax_layer parallax_layer-deep">
</div>
</header>