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>

How to add icon in the button tag?

I have on button which is used to play a song.
In that button, I use a unicode icon for control playing the audio track and it's working fine but the main issue is it's not displaying as per my required ICON (https://www.w3schools.com/icons/tryit.asp?icon=fas_fa-guitar&unicon=f7a6)
I want to show that icon at the right side top corner of the page without effecting my remaining page mainly cards,This is my output
.
please help me to acheive this thing
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<title>Special-Wishes </title>
<script>
</script>
</head>
<body>
// thi is the audio code
<audio autoplay id="player">
<source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
<div>
<button id="music" onclick="document.getElementById('player').play()"></button>
</div>
<!-- <img id="i1" src="https://i.pinimg.com/originals/a1/4d/f2/a14df22726e1964e347dc13b182457e5.gif" alt="alternatetext"> -->
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2 id="initial">Me</h2>
<h3>Card One</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2><span class="heart-icon" style='font-size:180px;'>♥</span></h2>
<h3>Card Two</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>AK</h2>
<h3>Card Three</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
</div>
</body>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons {
margin-left: -40%;
}
#music {
font-size: 50px;
}
* {
margin: o;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
/* background:#c7c744; */
}
#my_audio {
margin-top: -40%;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ebf5fc;
}
.container {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card {
position: relative;
width: 320px;
height: 440px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
border-radius: 15px;
margin: 30px;
}
.container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box {
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #b95ce4, #4f29cd);
}
.container .card .box .content {
padding: 20px;
text-align: center;
}
.container .card .box .content h2 {
position: absolute;
top: -10px;
right: 30px;
font-size: 8em;
color: rgba(0, 0, 0, 0.02);
transition: 0.5s;
pointer-events: none;
}
.container .card:hover .box .content h2 {
color: rgba(0, 0, 0, 0.05);
}
.container .card .box .content h3 {
font-size: 1.8em;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card .box .content p {
font-size: 1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card:hover .box .content h3,
.container .card:hover .box.content p {
color: #fff;
}
.container .card .box .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top: 15px;
border-radius: 20px;
color: #fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.container .card:hover .box .content a {
background: #ff568f;
}
#i1 {
width: 100%;
height: 50px;
}
h1 {
text-align: center;
font-size: 65px;
font-style: italic;
}
</style>
</html>

Just do what they do on the page you linked to
You do need an element with the FAS classes - you can give the button that class
Note the CSS to place the button
Also your HTML is invalid. You have too many body tags
#music { position: absolute; top: 10px; right:50px}
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
<button id="music" onclick="document.getElementById('player').play()" class='fas'></button>

You mentioned w3example using font-awsome icons to display the icons
You given Example: https://www.w3schools.com/icons/tryit.asp?icon=fas_fa-guitar&unicon=f7a6
Related Font Awsome Icon: https://fontawesome.com/v5.15/icons/guitar
So icon is not display into frontend without calling fontawsome library
I made changes
1st Add font awsome library in to head
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
2nd Add fas class to button
<button id="music" onclick="document.getElementById('player').play()"></button>
Changed to
<button id="music" onclick="document.getElementById('player').play()" class='fas'></button>
Please check the following Working code sinppet
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<title>Special-Wishes </title>
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
</head>
<body>
// thi is the audio code
<audio autoplay id="player">
<source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
<div>
<button id="music" onclick="document.getElementById('player').play()" class='fas'>

</button>
</div>
<!-- <img id="i1" src="https://i.pinimg.com/originals/a1/4d/f2/a14df22726e1964e347dc13b182457e5.gif" alt="alternatetext"> -->
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2 id="initial">Me</h2>
<h3>Card One</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2><span class="heart-icon" style='font-size:180px;'>♥</span></h2>
<h3>Card Two</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>AK</h2>
<h3>Card Three</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
</div>
</body>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons {
margin-left: -40%;
}
#music {
font-size: 50px;
}
* {
margin: o;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
/* background:#c7c744; */
}
#my_audio {
margin-top: -40%;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ebf5fc;
}
.container {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card {
position: relative;
width: 320px;
height: 440px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
border-radius: 15px;
margin: 30px;
}
.container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box {
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #b95ce4, #4f29cd);
}
.container .card .box .content {
padding: 20px;
text-align: center;
}
.container .card .box .content h2 {
position: absolute;
top: -10px;
right: 30px;
font-size: 8em;
color: rgba(0, 0, 0, 0.02);
transition: 0.5s;
pointer-events: none;
}
.container .card:hover .box .content h2 {
color: rgba(0, 0, 0, 0.05);
}
.container .card .box .content h3 {
font-size: 1.8em;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card .box .content p {
font-size: 1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card:hover .box .content h3,
.container .card:hover .box.content p {
color: #fff;
}
.container .card .box .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top: 15px;
border-radius: 20px;
color: #fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.container .card:hover .box .content a {
background: #ff568f;
}
#i1 {
width: 100%;
height: 50px;
}
h1 {
text-align: center;
font-size: 65px;
font-style: italic;
}
</style>
</html>

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.

Changing color of text depending on the background

On my website I have one sticky navbar and 3 separated sections. I would like to change the color of the text in the nav depending on the background. So when background is black then the text in the nav will be white. I think it will be possible in JS, but I saw some only CSS solutions, which didn't worked well for me. Is it somehow possible to do it? :/
html,
body {
width: 100%;
}
h1 {
font-size: 60pt !important;
font-family: 'Cinzel Decorative', cursive !important;
margin-left: 20px;
}
p {
font-size: 13pt !important;
font-family: 'Cinzel', serif;
}
a {
text-decoration: none !important;
color: #ccc !important;
}
/* Logo */
.logo {
height: 202px;
}
/* NavBar */
nav {
font-size: 18pt;
font-family: 'Cinzel', serif;
}
.nav_text:hover {
border-bottom: 2px solid white;
margin-bottom: -2px;
}
.nav-link {
margin: 0 20px 0 20px;
padding: 0 !important;
color: #fff !important;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
float: right;
}
.container {
z-index: 2000 !important;
max-width: 144.45px !important;
margin-right: 20px !important;
}
nav ul {
display: block;
position: relative;
list-style: none;
padding-top: 14px !important;
}
.fixed-nav {
position: absolute;
top: 230px;
right: -20px;
left: 0;
z-index: 1030;
}
.sticky-nav {
position: absolute;
top: 0;
z-index: 1020;
right: 0;
left: 50px;
}
/* Sections */
section {
color: white;
height: 100.2vh;
min-height: 900px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
.first_section {
margin-top: -254px;
padding-top: 254px;
}
.header-positon {
padding-top: 40%;
}
.replic-positon {
padding-top: 30%;
}
.unic-positon {
padding-top: 5%;
}
.section_text {
padding: 20px;
margin-top: -30px;
}
.red {
background: rgba(232, 0, 40, 0.3);
}
.green {
background: rgba(32, 62, 85, 0.3);
}
.purple {
background: rgba(43, 0, 81, 0.3);
}
#media only screen and (min-width: 440px) {
/* styles for browsers larger than 440px;
*/
.header-positon {
padding-top: 10%;
}
}
#media only screen and (min-width: 555px) {
/* styles for browsers larger than 555px;
*/
.container {
max-width: 429.642px !important;
}
nav ul {
display: block;
position: relative;
}
.sticky-nav {
position: fixed;
top: 0;
z-index: 1020;
}
.fixed-nav {
position: -webkit-sticky;
position: sticky;
top: 98px;
left: 0;
right: 0;
}
.dropdown {
display: block;
}
}
#media only screen and (min-width: 768px) {
/* default iPad screens */
h1 {
margin-left: 0;
}
}
#media only screen and (min-width: 945px) {
/* styles for browsers larger than 555px;
*/
.login-item {
display: none;
}
.container {
max-width: 681.217px !important;
}
.nav-link {
float: none;
}
nav ul {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: static;
}
.fixed-nav {
top: 57px;
left: 0;
}
}
#media only screen and (min-width: 1325px) {
/* styles for browsers larger than 1325px;
*/
.logo {
margin-left: auto;
margin-right: auto;
}
.container {
max-width: 661.217px !important;
margin-right: auto !important;
}
.contact-item {
margin-right: 0 !important;
}
.sticky-nav {
position: -webkit-sticky;
position: sticky;
left: 0;
}
.fixed-nav {
position: fixed;
top: 0;
left: 0;
}
}
#media only screen and (min-width: 1440px) {
/* styles for browsers larger than 1440px;
*/
h1 {
font-size: 90pt !important;
}
.nav-link {
margin: 0 32px 0 32px;
}
.container {
max-width: 751.217px !important;
}
.section_text {
margin-top: -43px;
}
}
#media only screen and (min-width: 1900px) {
/* for sumo sized (mac) screens */
h1 {
font-size: 120pt !important;
}
.nav-link {
margin: 0 63px 0 63px;
}
.container {
max-width: 1005.22px !important;
}
.section_text {
margin-top: -55px;
}
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<title>Test</title>
</head>
<body>
<main class="container-fluid p-0 m-0">
<img class="logo d-block pt-0 mt-0 pb-0 mb-0" src="http://brandmark.io/logo-rank/random/pepsi.png" alt="Logo" />
<nav class="container sticky-nav p-0">
<ul class="m-0 pl-0" id="navbar">
<li class="nav-item">
<a class="nav-link ml-0" href="#Home"><span class="nav_text">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Replic"><span class="nav_text">Repliky</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Unique"><span class="nav_text">Unikáty</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Installation"><span class="nav_text">Instalace</span></a>
</li>
<li class="nav-item">
<a class="nav-link contact-item" href="#Contacts"><span class="nav_text">Kontakt</span></a>
</li>
<li class="nav-item login-item">
<a class="nav-link" href="#Login"><span class="nav_text">Login</span></a>
</li>
</ul>
</nav>
<section class="first_section" style="background-image: url('https://picsum.photos/1920/1080/?random'); ">
<div class="row header-positon no-gutters">
<div class="col-xs-12 col-md-4 offset-md-1" data-aos="fade-right">
<h1>Us</h1>
<p class="section_text green">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p>
</div>
</div>
</section>
<section style="background-image: url('https://picsum.photos/1920/1080/?random'); ">
<div class="row replic-positon no-gutters" data-aos="fade-left">
<div class="col-xs-12 col-md-4 offset-md-7">
<h1>Replic</h1>
<p class="section_text red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p>
</div>
</div>
</section>
<section style="background-image: url('https://picsum.photos/1920/1080/?random'); ">
<div class="row unique-positon no-gutters" data-aos="fade-up">
<div class="col-xs-12 col-md-4 offset-md-1">
<h1>Unique</h1>
<p class="section_text purple">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p>
</div>
</div>
</section>
</main>
</body>
</html>

My suggestion would be to use some scroll top method by tracking the scroll location. Use this data to change the color of the text whenever the window reaches a certain scroll position.
Here is a simple example from w3schools
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onscroll2
Hope this helped!