We Keep Coding

How to move elements using CSS

I want to move the blue icon with the question mark to the bottom of the box right above the paragraph while also moving the gray icon to the top right of the paragraph without messing up my text.
I tried making multiple flex containers but nothing seems to be working.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap');
html,
body {
height: 100%;
}
body {
font-family: Roboto, sans-serif;
margin: 0;
background: #aaa;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.modal {
background: white;
width: 480px;
border-radius: 10px;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .2);
}
.icon {
color: royalblue;
font-size: 26px;
font-weight: 700;
background: lavender;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.close-button {
background: #eee;
border-radius: 50%;
color: #888;
font-weight: 400;
font-size: 16px;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
button {
padding: 8px 16px;
border-radius: 8px;
}
button.continue {
background: royalblue;
border: 1px solid royalblue;
color: white;
}
button.cancel {
background: white;
border: 1px solid #ddd;
color: royalblue;
}
/* SOLUTION: */
.modal {
display: flex;
gap: 16px;
padding: 16px;
flex-direction: column;
}
.icon {
/* this keeps the icon from getting smashed by the text */
display: flex;
flex-shrink: 0;
}
.ic {
display: flex;
align-items: flex-sart;
}
.header {
display: flex;
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.text {
margin-bottom: 16px;
}
<div class="modal">
<div class="ic">
<div class="icon">!</div>
</div>
<div class="container">
<div class="header">Are you sure you want to do that?</div>
<div class="close-button">✖</div>
</div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<div class="button">
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div>
</div>

in css add this :
.close-button {
background: #eee;
border-radius: 50%;
color: #888;
font-weight: 400;
font-size: 16px;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 7px;
margin-left:5px;
}
.icon {
color: royalblue;
font-size: 26px;
font-weight: 700;
background: lavender;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
}
in html
<div class="modal">
<div class="ic">
<div class="icon">!</div>
<div class="header">Are you sure you want to do that?
</div>
<div class="close-button">✖</div>
</div>
<div class="container">
</div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<div class="button">
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div>
</div>
<link rel="stylesheet" href="style.css">

put the element in the container that you want it to show up in its corner or edge.
then make the parent container position: relative; and your element position: absolute; then control their position using top, right, left, and bottom. here is the code.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap');
html,
body {
height: 100%;
}
body {
font-family: Roboto, sans-serif;
margin: 0;
background: #aaa;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.modal {
background: white;
width: 480px;
border-radius: 10px;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .2);
position: relative;
}
.icon {
color: royalblue;
font-size: 26px;
font-weight: 700;
background: lavender;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.close-button {
background: #eee;
border-radius: 50%;
color: #888;
font-weight: 400;
font-size: 16px;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
margin: 5px;
cursor: pointer;
}
button {
padding: 8px 16px;
border-radius: 8px;
}
button.continue {
background: royalblue;
border: 1px solid royalblue;
color: white;
}
button.cancel {
background: white;
border: 1px solid #ddd;
color: royalblue;
}
/* SOLUTION: */
.modal {
display: flex;
gap: 16px;
padding: 16px;
flex-direction: column;
}
.icon {
/* this keeps the icon from getting smashed by the text */
display: flex;
flex-shrink: 0;
}
.ic {
display: flex;
align-items: flex-sart;
}
.header {
display: flex;
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.text {
margin-bottom: 16px;
}
<div class="modal">
<div class="ic">
</div>
<div class="container">
<div class="header">Are you sure you want to do that?</div>
</div>
<div class="close-button">✖</div>
<div class="text"><div class="icon">!</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<div class="button">
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div>
</div>

How can I display only one section at a time while scrolling vertically on a page?

I am trying to create an effect on a blog page in which the blog posts are displayed as cards, and whenever one scrolls vertically on the page, a card will fade into view and then fade out when the next card is displayed. Something similar to a carousel/image slider but where only one card is visible at the time. At the same time I want the background image to be fixed. A mix between parallax and carousel.
I have tried to set the cards' container to allow overflow-y so that the cards are scrollable, but I do not want the scrollbar to appear either. Honestly, I have looked everywhere for a similar example, but none are close to what I am trying to achieve.
I have found other examples where I can create a parallax effect, but the thing is I only have one background image. I am not sure if I need to use JavaScript as well to try to implement this design. The closest I have come to is ScrollOut, but I do not know how to make only one card visible at the time.
CodePen
<header>
<div class="logo">
</div>
<div class="title" id='title'>
<h1 data-scroll>One Star Thoughts</h1>
</div>
<nav>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>Home</li>
</ul>
</nav>
</header>
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<section class="section__posts">
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
</section>

If I understand what you're going for, you could use position: sticky along with an IntersectionObserver to create fade-in/fade-out effects.
A basic implementation of a position: sticky layout could be something like this:
<div class="section__posts--card">
<!-- **** add inner wrapper **** -->
<div class="inner-el">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
</div>
.section__posts {
width: 100vw;
height: 100vh;
position: relative;
}
.section__posts--card {
height: 200vh; // how far the user should scroll before content changes
}
.inner-el {
top: 200px; // how far from the top of the viewport the content should sit
height: auto;
position: sticky;
width: 75vw;
max-width: 50rem;
margin: auto;
}
This is a pretty good 'tutorial' on how to add IntersectionObserver with position: sticky: https://developers.google.com/web/updates/2017/09/sticky-headers

Thanks to organicon's insight about IntersectionObserver I was able to come up with a solution that created the effect exactly as I wanted.
I made the background fixed and turned off overflow for the body.
I wrapped the cards in a container, and turned on the overflow-y BUT I hid the scrollbar using: scrollbar-width: none; -ms-overflow-style:none;
Wrote a script using IntersectionObserver that will track when a card comes into view. When the card appears a CSS animation is applied that fades the card in.
const callback = (entries) => {
entries.forEach(
(entry) => {
if (entry.isIntersecting) {
console.log("the element is intersecting");
entry.target.style.animation = entry.target.dataset.fade;
entry.target.style.opacity = 1;
} else {
entry.target.style.animation = "none";
entry.target.style.opacity = 0;
}
}
);
}
let observer = new IntersectionObserver(callback);
const fadeItems = document.querySelectorAll('.animate');
fadeItems.forEach(item => {
console.log("adding " + fadeItems.length + " cards to the observer");
observer.observe(item)
});
:root {
--ff-primary: 'Source Sans Pro', sans-serif;
--ff-secondary: 'Source Code Pro', monospace;
--fw-reg: 300;
--fw-bold: 900;
--clr-light: #fff;
--clr-dark: #303030;
--clr-grey: lightgrey;
--clr-accent: #16e0bd;
--clr-danger: tomato;
--fs-h1: 3rem;
--fs-h2: 2.25rem;
--fs-h3: 1.25rem;
--fs-body: 1rem;
--bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25), 0.125em 0.125em 0.25em rgba(0, 0, 0, .15);
}
#media (min-width: 900px) {
:root {
--fs-h1: 4.5rem;
--fs-h2: 3.75rem;
--fs-h3: 1.5rem;
--fs-body: 1.125rem;
}
}
html,
body {
margin: 0;
height: 100%;
width: 100%;
}
body {
font-family: var(--ff-primary);
font-size: var(--fs-body);
line-height: 1.6;
box-sizing: border-box;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
background-repeat: no-repeat;
overflow: hidden;
}
img {
display: block;
max-width: 100%;
}
strong {
font-weight: var(--fw-bold)
}
:focus {
outline: 3px solid var(--clr-accent);
outline-offset: 3px;
}
/* wrapper */
.wrapper {
height: 100%;
width: 100%;
}
/* header */
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: sticky;
top: 0;
width: 100%;
}
nav {
width: 50%;
background-color: transparent;
border: 2px solid;
border-color: var(--clr-light);
border-radius: 2em;
display: flex;
z-index: 10;
}
/*Styling Links*/
.nav-links {
color: var(--clr-light);
display: flex;
list-style: none;
width: 88vw;
padding: 0 0.7vw;
justify-content: space-evenly;
align-items: center;
text-transform: uppercase;
}
.nav-links li a {
text-decoration: none;
margin: 0 0.7vw;
}
.nav-links li a:hover {
color: #61DAFB;
}
.nav-links li {
position: relative;
}
.nav-links li a::before {
content: "";
display: block;
height: 3px;
width: 0%;
background-color: #61DAFB;
position: absolute;
transition: all ease-in-out 250ms;
margin: 0 0 0 10%;
}
.nav-links li a:hover::before {
width: 80%;
}
.login-button {
color: var(--clr-light);
padding: 0.6rem 0.8rem;
margin-left: 2vw;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
color: var(--clr-dark);
background-color: #000;
transition: all ease-in-out 350ms;
}
* site title */
.title h1 {
margin: 1em auto;
text-align: center;
color: transparent;
}
#supports(-webkit-text-stroke: 2px var(--clr-light)) {
.title h1 {
color: transparent;
-webkit-text-stroke: 2px var(--clr-light);
text-shadow: none;
}
}
/* section posts */
.posts {
width: 100vw;
height: 100vh;
position: relative;
overflow-y: scroll;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* Internet Explorer 10+ */
}
.posts::-webkit-scrollbar {
width: 0;
height: 0;
}
.post__card {
height: 50vh;
width: 40rem;
padding: 2rem;
margin: 15rem auto;
background: var(--clr-light);
border-radius: 8px;
opacity: 0;
}
.post__card:first-child {
margin-top: 1rem;
}
.post__card:last-child {
margin-bottom: 22rem;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.blog-image {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 10px;
}
.blog-title {
margin-bottom: 1rem;
}
p:last-child {
margin-bottom: -6px;
}
.blog-overview {
margin: 10px 0 20px;
line-height: 30px;
}
.section__posts--card--button {
margin: 0 10px;
}
.btn.dark {
background: var(--clr-dark);
color: var(--clr-light);
}
.btn.grey {
background: var(--clr-grey);
color: var(--clr-dark);
}
.btn.danger {
background: var(--clr-danger);
color: var(--clr-dark);
}
#media (max-width: 600x) {
.posts {
padding: 2.4rem;
}
.section__posts--card {
padding: 2.4rem;
}
}
<div class="wrapper">
<div class='stars'></div>
<div class="stars2"></div>
<div class='stars3'></div>
<header>
<div class="title" id='title'>
<h1>One Star Thoughts</h1>
</div>
<nav>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>Home</li>
<li><a class="login-button" href="#">Login</a></li>
</ul>
</nav>
</header>
<div class="posts">
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
</div>
</div>

CSS Works on custom Tag but not on DIV?

I am trying to create a faq section for my webpage.
At first I used custom tags (Not registered just used custom names) and it worked fine but later I thought this could impact SEO so I moved from custom tag to vanilla div.
The custom tag version was working fine but as soon as I moved to div the CSS started behaving weirdly.
This is the code I am using and the FAQ.css and the script that adds and removes the CSS :
* {
padding: 0;
margin: 0;
}
body {
gap: 10px;
display: grid;
padding: 20px;
justify-content: center;
background-color: rgb(185, 206, 185);
}
#faq {
display: grid;
text-align: center;
padding: 20px 30px;
justify-content: center;
background-color: white;
}
faqItem {
display: grid;
overflow: hidden;
text-align: left;
background-color: rgb(194, 204, 204);
}
faqItem::after {
display: grid;
content: "";
padding-top: 10px;
border-bottom: 2px solid rgb(63, 60, 63);
}
faqItem h1 {
display: grid;
min-width: 95%;
font-size: 24px;
padding: 5px 10px 0 10px;
cursor: pointer;
}
faqItem h1::before {
display: grid;
content: "+";
width: fit-content;
margin-bottom: -30px;
justify-self: right;
transition: transform 0.2s ease;
}
faqItem p {
visibility: hidden;
max-width: 70ch;
max-height: 0;
font-size: 14px;
line-height: 18px;
padding: 5px 10px;
color: #3b3b3b;
transition: max-height 0.2s ease-in-out, visibility 0.15s ease;
}
/* Classes for Div */
.faqItem {
display: grid;
overflow: hidden;
text-align: left;
background-color: rgb(194, 204, 204);
}
.faqItem::after {
display: grid;
content: "";
padding-top: 10px;
border-bottom: 2px solid rgb(63, 60, 63);
}
.faqItem h1 {
display: grid;
min-width: 95%;
font-size: 24px;
padding: 5px 10px 0 10px;
cursor: pointer;
}
.faqItem h1::before {
display: grid;
content: "+";
width: fit-content;
margin-bottom: -30px;
justify-self: right;
transition: transform 0.2s ease;
}
.faqItem p {
visibility: hidden;
max-width: 70ch;
max-height: 0;
font-size: 14px;
line-height: 18px;
padding: 5px 10px;
color: #3b3b3b;
transition: max-height 0.2s ease-in-out, visibility 0.15s ease;
}
/* Common Class */
.changeIcon::before {
content: "-";
transform: rotate(180deg);
transition: content;
}
.showContent {
overflow: hidden;
max-height: 300px;
visibility: visible;
transition: max-height 0.5s ease-in;
}
<link rel="stylesheet" href="faq.css">
<body>
<!-- Custom Tag -->
<article id="faq">
<header>
<h1>FAQs</h1>
</header>
<faqItem>
<h1>Some My title</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam nulla atque, mollitia ducimus sit ut
pariatur non ex vel asperiores voluptatibus eos est optio sequi nihil porro voluptates, repudiandae
quam!
</p>
</faqItem>
</article>
<!-- Vanilla Div -->
<article id="faq">
<header>
<h1>FAQs</h1>
</header>
<div class="faqItem">
<h1>Some My title</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam nulla atque, mollitia ducimus sit ut
pariatur non ex vel asperiores voluptatibus eos est optio sequi nihil porro voluptates, repudiandae
quam!
</p>
</div>
</article>
</body>
<script>
// Function that will expand and shrink the faqItem
function updateFAQItemState(elem) {
elem.classList.contains("changeIcon")
? elem.classList.remove("changeIcon")
: elem.classList.add("changeIcon");
elem.nextElementSibling.classList.contains("showContent")
? elem.nextElementSibling.classList.remove("showContent")
: elem.nextElementSibling.classList.add("showContent");
}
// Using Custom Tags (Not registered)
let customFaqItems = [...document.getElementsByTagName("faqItem")];
customFaqItems.forEach(element => {
let h1 = element.getElementsByTagName("h1")[0];
h1.onclick = function (ele) {
updateFAQItemState(ele.target);
}
});
// using DIV
let divfaqItem = [...document.getElementsByClassName("faqItem")];
divfaqItem.forEach(element => {
let h1 = element.getElementsByTagName("h1")[0];
h1.onclick = function (ele) {
updateFAQItemState(ele.target);
}
})
</script>
JSFiddle link: https://jsfiddle.net/fk6xbezw/1/
Question One :
Why the CSS is not working as expected?
Question Second :
Does using custom tag hurts SEO? (Registered or Unregistered if applicable)

Your CSS definitions in
.faqItem p {
}
have precedence over those in
.showContent {
}
which negates almost all of the effects inside the .showContent { .. } block. You could change .showContent { to .faqItem p.showContent { for example to circumvent that.
Why ?
In your old situation, while using a <faqItem> element, these 2 blocks of CSS contained the relevant code:
faqItem p {
...
visibility: hidden;
...
}
.showContent {
...
visibility: visible;
...
}
When you switched from using <faqItem> to <div class="faqItem"> you changed
faqItem p {
...
}
to:
.faqItem p {
...
}
which is totally the right thing to do, and in most cases works out just fine, however the devil lies in the details as they say.
The statement faqItem p is a combination of two element-selectors; as in "for any p element located under a faqItem element ...".
The statement .faqItem p however, is one class-selector and one element-selector, and using a class-selector gives that block of CSS a higher level of specificity.
often enough, that won't matter much; but in your case you are trying to overrule the visibility-property (and others) inside here, with a visibility-property in .showContent.
Since .showContent consists of a single class-selector (which is pretty specific), it used to beat out those weak faqItem p-element-selectors.
However, since your new .faqItem p uses a class-selector plus an element-selector, it is more specific than .showContent which is only a class-selector by itself.
So, the fix ?
/* Changing: */
.showContent { ... }
/* To: */
.faqItem .showContent { ... }
/* Or: */
.faqItem p.showContent { ... }
Changes the specificity of the .showContent so it again outweighs the .faqItem p.
You can read up more about specificity (and other rules of precedence) on many places, such as here.
There are alternate ways of accomplishing the same result. Some have been recommended in other comments now, but i feel fairly confident to claim those methods are less appropriate. It's worth knowing the rules of precedence and structuring your CSS to that affect.
Those other methods are similar to not understanding the rules of precedence for mathematical operators, and recommending people should write (5*5) + (6*6) at all times.

You can simplify the Javascript a little by using a delegated event listener bound to the .faqItem div elements but trigger the necessary accordion type code only when the event is actually registered upon the H1 element.
By negating the css content within .faqItem p ( ie: .faqItem p:not(.showContent) ) it seems to behave as expected?!
document.querySelectorAll('.faqItem').forEach(div=>{
div.addEventListener('click',(e)=>{
if( e.target.tagName=='H1' ){
let el=e.target;
el.classList.toggle( 'changeIcon' );
el.nextElementSibling.classList.toggle( 'showContent' )
}
})
})
* {
padding: 0;
margin: 0;
}
body {
gap: 10px;
display: grid;
padding: 20px;
justify-content: center;
background-color: rgb(185, 206, 185);
}
.faq { /* ID attributes must be unique in the DOM !! */
display: grid;
text-align: center;
padding: 20px 30px;
justify-content: center;
background-color: white;
}
/* Classes for Div */
.faqItem {
display: grid;
overflow: hidden;
text-align: left;
background-color: rgb(194, 204, 204);
}
.faqItem::after {
display: grid;
content: "";
padding-top: 10px;
border-bottom: 2px solid rgb(63, 60, 63);
}
.faqItem h1 {
display: grid;
min-width: 95%;
font-size: 24px;
padding: 5px 10px 0 10px;
cursor: pointer;
}
.faqItem h1::before {
display: grid;
content: "+";
width: fit-content;
margin-bottom: -30px;
justify-self: right;
transition: transform 0.2s ease;
}
.faqItem p:not(.showContent) {
visibility: hidden;
max-width: 70ch;
max-height: 0;
font-size: 14px;
line-height: 18px;
padding: 5px 10px;
color: #3b3b3b;
transition: max-height 0.2s ease-in-out, visibility 0.15s ease;
}
/* Common Class */
.changeIcon::before {
content: "-";
transform: rotate(180deg);
transition: content;
}
.showContent {
overflow: hidden;
max-height: 300px;
visibility: visible;
transition: max-height 0.5s ease-in;
}
<article class="faq">
<header>
<h1>FAQs</h1>
</header>
<div class="faqItem">
<h1>Some My title #1</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam nulla atque, mollitia ducimus sit ut
pariatur non ex vel asperiores voluptatibus eos est optio sequi nihil porro voluptates, repudiandae
quam!
</p>
</div>
</article>
<article class="faq">
<header>
<h1>FAQs</h1>
</header>
<div class="faqItem">
<h1>Some My title #2</h1>
<p>
vel asperiores voluptatibus eos est optio sequi consectetur adipisicing elit. Nam nulla atque, mollitia ducimus sit ut
pariatur non ex.
</p>
</div>
</article>

Scroll button behavior

The button scrolls past the content I want to be shown.
I want the "About Us" section to be showed to the display of user (100vh), but it just scrolls past that.
Here's the code:
function smoothScroll(target, duration) {
var target = document.querySelector(target);
var targetPosition = target.getBoundingClientRect().top;
var startPosition = window.pageYOffset;
var distance = targetPosition - startPosition;
var startTime = null;
function animation(currentTime) {
if (startTime === null) startTime = currentTime;
var timeElapsed = currentTime - startTime;
var run = ease(timeElapsed, startPosition, distance, duration);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) return (c / 2) * t * t + b;
t--;
return (-c / 2) * (t * (t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}
var btn = document.querySelector(".btn");
btn.addEventListener("click", function () {
smoothScroll(".text-slider", 600);
});
.hero {
display: flex;
width: 90%;
margin: auto;
height: 100vh;
min-height: 100vh;
align-items: center;
text-align: center;
background-image: url(/img/pexels-tranmautritam-326501.jpg);
background-size: cover;
background-attachment: fixed;
justify-content: center;
}
.introduction {
flex: 1;
height: 30%;
}
.welcometxt h1 {
font-size: 17px;
color: white;
font-weight: 100;
letter-spacing: 12px;
}
.intro-text h1 {
font-size: 44px;
font-weight: 700;
color: white;
/* background: linear-gradient(to left, rgb(184, 184, 184), #ffffff); */
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
.intro-text p {
font-size: 18px;
margin-top: 5px;
color: white;
}
.cta {
padding: 50px 0px 0px 0px;
}
.btn {
background-color: white;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: black;
border: none;
border-radius: 40px;
transition: all 0.6s ease;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
}
.btn:hover {
background-color: black;
color: white;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
}
.text-slider {
width: 70%;
height: 90vh;
margin: 100px auto;
position: relative;
text-align: center;
align-items: center;
}
.carousel {
height: 70vh;
overflow: hidden;
}
.slider {
height: 100%;
display: flex;
width: 400%;
transition: all 0.3s;
}
.slider p {
width: 70%;
font-size: 17px;
}
.slider section {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.controls .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.controls .arrow i {
font-size: 60px;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.nextpage-arrow i{
font-size: 60px;
cursor: pointer;
}
<section class="hero">
<div class="introduction">
<div class="welcometxt">
<h1>
WELLCOME
</h1>
</div>
<div class="intro-text">
<h1>Optimal Solution for Your Product</h1>
<p>
Ensuring optimal solution for your
Quality Management.
</p>
</div>
<div class="cta">
<button class="btn">Click for more</button>
</div>
</div>
</section>
<div class="text-slider" id="text-slider">
<h1>About Us</h1>
<div class="carousel">
<div class="slider">
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, fugiat.</p>
</section>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, commodi?</p>
</section>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, velit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, aperiam.</p>
</section>
</div>
<div class="controls">
<span class="arrow left">
<i class="material-icons">
keyboard_arrow_left
</i>
</span>
<span class="arrow right">
<i class="material-icons">
keyboard_arrow_right
</i>
</span>
</div>
</div>
<div class="nextpage-arrow">
<span class="text-slider-btn">
<i class="material-icons">
keyboard_arrow_down
</i>
</span>
</div>
</div>
As shown in the picture, it goes past "About Us" h1.
I want the page to stop at "About Us", and not go past it.
If you need more code, or more explanation please comment and I'll try my best!
Thank you in advance.
UPDATE (GIF):

That code that you use for smooth scroll is unnecessary. You should better use Element.scrollIntoView()
Element.scrollIntoView()
The Element interface's scrollIntoView() method scrolls the element's
parent container such that the element on which scrollIntoView() is
called is visible to the user. MDN - Element.scrollIntoView()
Use the following code should you want to scroll to About Us section when you click on Click for more button.
// 'Click for more' button
const button = document.querySelector("#more-info")
button.onclick = () => {
document.querySelector("#text-slider")
.scrollIntoView({block: "start", behavior: "smooth"})
}
const button = document.querySelector("#more-info")
button.onclick = () => {
document.querySelector("#text-slider")
.scrollIntoView({block: "start", behavior: "smooth"})
}
.hero {
display: flex;
width: 90%;
margin: auto;
height: 100vh;
min-height: 100vh;
align-items: center;
text-align: center;
background: #000;
background-image: url(/img/pexels-tranmautritam-326501.jpg);
background-size: cover;
background-attachment: fixed;
justify-content: center;
}
.introduction {
flex: 1;
height: 30%;
}
.welcometxt h1 {
font-size: 17px;
color: white;
font-weight: 100;
letter-spacing: 12px;
}
.intro-text h1 {
font-size: 44px;
font-weight: 700;
color: white;
/* background: linear-gradient(to left, rgb(184, 184, 184), #ffffff); */
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
.intro-text p {
font-size: 18px;
margin-top: 5px;
color: white;
}
.cta {
padding: 50px 0px 0px 0px;
}
.btn {
background-color: white;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: black;
border: none;
border-radius: 40px;
transition: all 0.6s ease;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
}
.btn:hover {
background-color: black;
color: white;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
}
.text-slider {
width: 70%;
height: 90vh;
margin: 100px auto;
position: relative;
text-align: center;
align-items: center;
}
.carousel {
height: 70vh;
overflow: hidden;
}
.slider {
height: 100%;
display: flex;
width: 400%;
transition: all 0.3s;
}
.slider p {
width: 70%;
font-size: 17px;
}
.slider section {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.controls .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.controls .arrow i {
font-size: 60px;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.nextpage-arrow i {
font-size: 60px;
cursor: pointer;
}
<section class="hero">
<div class="introduction">
<div class="welcometxt">
<h1>
WELLCOME
</h1>
</div>
<div class="intro-text">
<h1>Optimal Solution for Your Product</h1>
<p>
Ensuring optimal solution for your Quality Management.
</p>
</div>
<div class="cta">
<button class="btn" id="more-info">Click for more</button>
</div>
</div>
</section>
<div class="text-slider" id="text-slider">
<h1>About Us</h1>
<div class="carousel">
<div class="slider">
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, fugiat.</p>
</section>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, commodi?</p>
</section>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, velit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, aperiam.</p>
</section>
</div>
<div class="controls">
<span class="arrow left">
<i class="material-icons">
keyboard_arrow_left
</i>
</span>
<span class="arrow right">
<i class="material-icons">
keyboard_arrow_right
</i>
</span>
</div>
</div>
<div class="nextpage-arrow">
<span class="text-slider-btn">
<i class="material-icons">
keyboard_arrow_down
</i>
</span>
</div>
</div>
Recommend you to add background: #000; as fallback for background-image since sometimes image might not be loaded.

Carousel in bootstrap

Im pretty new at this guyz... I try to make a custom bootstrap change the slides automatically. I follow the documentation here https://getbootstrap.com/docs/4.3/components/carousel/ but i cant find what im doing wrong. The slides turn by hand just find but i cant make them change on interval
https://codepen.io/Ale3andr0s/pen/ExYPWgQ#=
Ι followed the documentation as i should. I imported bootstrap.js and jquery.js but the slides still dont change on automatic interval. I also used
$('.carousel').carousel({
interval: 10
});
and
$(document).ready(function() {
$('.carousel').carousel({
interval: 10
})
});
HTML:
<div class="slider carousel slide" data-ride="carousel">
<input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav active"/>
<input type="radio" name="slider" title="slide2" class="slider__nav"/>
<input type="radio" name="slider" title="slide3" class="slider__nav"/>
<input type="radio" name="slider" title="slide4" class="slider__nav"/>
<div class="slider__inner data-interval=100">
<div class="slider__contents active"><i class="slider__image fa fa-codepen"></i>
<h2 class="slider__caption">codepen</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-newspaper-o"></i>
<h2 class="slider__caption">newspaper-o</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-television"></i>
<h2 class="slider__caption">television</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-diamond"></i>
<h2 class="slider__caption">diamond</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
</div>
</div>
CSS:
#import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
#import url(https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css);
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
color: #444;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
line-height: 1.5;
}
.slider {
height: 100%;
position: relative;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__nav {
width: 12px;
height: 12px;
margin: 2rem 12px;
border-radius: 50%;
z-index: 10;
outline: 6px solid #ccc;
outline-offset: -6px;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slider__nav:checked {
-webkit-animation: check 0.4s linear forwards;
animation: check 0.4s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
left: 0%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
left: -100%;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
left: -200%;
}
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
left: -300%;
}
.slider__inner {
position: absolute;
top: 0;
left: 0;
width: 400%;
height: 100%;
-webkit-transition: left 0.4s;
transition: left 0.4s;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.slider__contents {
height: 100%;
padding: 2rem;
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__image {
font-size: 2.7rem;
color: #2196F3;
}
.slider__caption {
font-weight: 500;
margin: 2rem 0 1rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.slider__txt {
color: #999;
margin-bottom: 3rem;
max-width: 300px;
}
#-webkit-keyframes check {
50% {
outline-color: #333;
box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
100% {
outline-color: #333;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}
#keyframes check {
50% {
outline-color: #333;
box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
100% {
outline-color: #333;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}
JS:
$('.carousel').carousel({
interval: 10
});
$(document).ready(function() {
$('.carousel').carousel({
interval: 10
})
});
The carousel should turn slides automatically but it doesnt.

the attribute name is data-interval
and remeber that the unit of time is Millisecond
<div class="carousel-item active" data-interval="10000">