Develop Reference

space issue in html/css

I have the following short and concise code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 20px;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1070px;
margin-left: auto;
margin-right: auto;
width: 80%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>
I want the corner of the blog card to be perfectly aligned under the corner of the iframe. The first corner of the blog card should be right under the first corner of the iframe.
Expected Output
How would I modify the css to have it output as the above picture? Adding margin-left: auto on square does not work. Any suggestions?

Make both parent div of the iframe and div having class .square of the same width to achieve this
.container1,.resume-item {
display: flex;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1,.resume-item {
display: flex;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-right: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1000px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>

How to delay something thats just a possibility

So i'm making a website, and i have a sort of a slider menu from top, and when i hover over a button everything appears, but when i hover out it doesn't disappear. In my js code i had to delay the disappearance with setTimeout() because there's a small gap between the button and the menu. So if someone would know how to make it disappear while keeping the timer thing so it doesn't disappear when going from button to the menu i'd be insanely grateful. Thanks in advance. Here's the code:
var timeout;
function mouseOver(){
document.getElementById('menu-roll').style.display = 'block';
timeout = setTimeout(function(){document.getElementById('menu-roll').style.display = 'none';}, 3000);
}
function mouseOut(){
clearTimeout(timeout);
}
:root{
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper{
height: 100vh;
width: 100%;
}
#navbar{
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover{
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper{
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup{
0%{
top: 150px;
}
100%{
top: 0;
}
}
#menu-wrapper{
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img{
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video{
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll{
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll{
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a{
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
#h1-menu-tandoor{
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#h1-menu-restaurace{
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#information-section{
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction{
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1{
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3{
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p{
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider{
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos{
position: relative;
z-index: 6;
height: 10px;
}
.first-photo{
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info{
height: 407px;
}
#services-photo{
top: 50px;
}
#media screen and (max-width: 700px){
.first-photo{
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction{
width: 60%;
margin: 0 auto;
}
#divider{
margin-bottom: 10px;
}
#services-info{
height: 800px;
}
#services-photo{
top: 470px;
position: relative;
}
}
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>

I'm not sure that I understand everything but take a look at this code.
var timeout;
function mouseOver() {
document.getElementById('menu-roll').style.display = 'block';
clearTimeout(timeout);
}
function mouseOut() {
timeout = setTimeout(function() {
document.getElementById('menu-roll').style.display = 'none';
}, 1000);
}
:root {
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper {
height: 100vh;
width: 100%;
}
#navbar {
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover {
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper {
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup {
0% {
top: 150px;
}
100% {
top: 0;
}
}
#menu-wrapper {
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img {
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video {
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll {
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll {
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a {
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
}
#h1-menu-tandoor {
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#h1-menu-restaurace {
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#information-section {
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction {
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1 {
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3 {
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p {
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider {
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos {
position: relative;
z-index: 6;
height: 10px;
}
.first-photo {
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info {
height: 407px;
}
#services-photo {
top: 50px;
}
#media screen and (max-width: 700px) {
.first-photo {
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction {
width: 60%;
margin: 0 auto;
}
#divider {
margin-bottom: 10px;
}
#services-info {
height: 800px;
}
#services-photo {
top: 470px;
position: relative;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/index.css">
<link rel="shortcut icon" href="styles/favicon.ico.png" />
<title>Tandoor</title>
</head>
<body>
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
</body>
</html>

CSS background position center

How can I put the following image in the center of the page? I tried background-position = center but it appears at the top bottom. Help!
$(document).ready(function(){
$('.question-out').hide();
$('.plus-drop-down').hide();
$('i.fa-bars').on('click', function(){
$('.side-menu').css({
'transform': 'translateX(0px)',
'box-shadow': '5px 5px 5px #ddd'
});
});
$('.plus').on('click', function(){
$(this).toggleClass('active');
$('.plus-drop-down').toggle().css({
'animation': 'hello .3s'
});
$('.join').toggle();
});
$('i.fa-th').on('click', function(){
$(this).toggleClass('active');
});
$('.account').on('click', function(){
$(this).toggleClass('active');
});
$('.question-mark').on('click', function(){
$(this).toggleClass('active');
$('.question-out').toggle().css({
'animation': 'pop .3s'
});
});
$('.username').html(
'Gan Yi Ming'
).css({
'color': '#d6d6d6',
'font-size': '12px'
});
$('.email').html(
'ganyiming0609810#gmail.com'
).css({
'color': '#d6d6d6',
'font-size': '12px'
});
});
$(document).mouseup(function (e) {
const container = $(".side-menu");
const ae = $('.plus');
const re = $('.question-mark');
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) {
$('.side-menu').css({
'transform': 'translateX(-300px)',
'box-shadow': 'none'
});
}
if (!re.is(e.target)
&& re.has(e.target).length === 0){
$('.question-out').hide();
$('.question-mark').removeClass('active');
}
if (!ae.is(e.target)
&& ae.has(e.target).length === 0){
$('.plus-drop-down').hide();
$('.plus').removeClass('active');
}
});
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
font-family: sans-serif;
color: black;
transition: .3s;
}
body{
background-image: url('background.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 30%;
}
.nav_bar{
border-bottom: 1px solid #dddddd;
display: flex;
justify-content: space-between;
line-height: 65px;
position: fixed;
width: 100%;
}
.nav_bar *{
display: flex;
align-items: center;
}
i.fa-bars{
font-size: 20px;
color: #535353;
padding: 10px;
border-radius: 50%;
margin: 0 0px 0 15px;
}
i.fa-bars:hover{
background-color: #f8f8f8;
}
.fa-bars.active{
background-color: #d6d6d6dd;
}
.fa-bars.active:hover{
background-color: #d6d6d6dd;
}
.google-icon{
cursor: default;
transform: translateY(1px) translateX(4px);
}
.classroom{
font-size: 22px;
cursor: text;
color: #353535;
}
.plus{
width: 20px;
padding: 10px;
border-radius: 50%;
margin: 0 10px 0 0;
}
.plus:hover ~ .join{
visibility: visible;
position: absolute;
animation: hello;
}
.plus.active{
background-color: #d6d6d6dd;
}
.plus.active:hover{
background-color: #d6d6d6dd;
}
.plus-drop-down{
background-color: #fff;
position: absolute;
display: inline-block;
border-radius: 3px;
line-height: 30px;
top: 55px;
box-shadow: 0 0 3px 1px rgb(204, 204, 204);
right: 130px;
padding: 5px 0;
}
.plus-drop-down li{
padding: 0 30px 0 15px;
font-size: 15px;
color: #353535;
}
.plus-drop-down li:hover{
background-color: #ddd;
}
.join{
background-color: black;
opacity: 0.7;
color: white;
font-size: 10px;
position: absolute;
border-radius: 3px;
padding: 0 10px;
visibility: hidden;
top: 55px;
height: 30px;
transition: ease-in-out;
transition-delay: .3s;
right: 80px;
}
.th{
color: #4b4b4b;
border-radius: 50%;
padding: 10px;
font-size: 20px;
margin: 0 10px 0 0;
}
.app{
background-color: black;
opacity: 0.6;
color: white;
position: absolute;
border-radius: 2px;
top: 60px;
right: 50px;
border-radius: 3px;
font-size: 12px;
height: 20px;
padding: 0 5px;
visibility: hidden;
transition-delay: .4s;
}
.fa-th:hover ~ .app{
visibility: visible;
}
.account-menu{
position: absolute;
color: rgb(214, 214, 214);
background-color: black;
opacity: 0.6;
top: 60px;
display: block;
right: 20px;
height: 60px;
line-height: 20px;
border-radius: 3px;
padding: 5px 5px;
visibility: hidden;
transition-delay: .3s;
}
.account-menu p{
display: block;
}
.account:hover ~ .account-menu{
visibility: visible;
}
.account-menu .show-acc{
color: white;
font-size: 14px;
}
.fa-th.active{
background-color: #d6d6d6dd;
}
.fa-th.active:hover{
background-color: #d6d6d6dd;
}
.account{
width: 35px;
border-radius: 50%;
padding: 5px;
margin: 0 15px 0 0;
}
.account.active{
background-color: #d6d6d6dd;
}
.account.active:hover{
background-color: #d6d6d6dd;
}
.account:hover, .th:hover, .plus:hover{
background-color: rgb(243, 243, 243);
}
.side-menu{
display: flex;
position: fixed;
transform: translateX(-300px);
}
.side-menu *{
color: #4e4e4e;
}
.main-menu{
min-width: 300px;
background-color: #fff;
height: 100vh;
top: 0;
}
.up{
display: flex;
cursor: pointer;
}
.one{
padding: 18px 18px 20px 10px;
margin: 10px 5px 0 0;
background-color: #dcf2ff;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
}
.fa-home{
font-size: 20px;
margin: 0 0 0 10px;
}
.one li a p{
font-size: 14px;
font-weight: bold;
margin: 0 0 0 20px;
}
.two{
padding: 18px 18px 20px 10px;
margin: 0px 5px 10px 0;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
transition: none;
}
.two:hover{
background-color: #f7f7f7;
}
.fa-calendar{
font-size: 20px;
margin: 0 0 0 12px;
}
.two li a p{
font-size: 14px;
font-weight: bold;
margin: 0 0 0 23px;
}
.three{
padding: 18px 18px 20px 10px;
margin: 5px 5px 10px 0;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
transition: none;
}
.three:hover{
background-color: #f7f7f7;
}
.fa-cog{
font-size: 20px;
margin: 0 0 0 10px;
}
.three li a p{
font-size: 14px;
font-weight: bold;
margin: 0 0 0 23px;
}
.top-two{
border-bottom: 1px solid #ddd;
}
.question-mark{
width: 20px;
position: fixed;
bottom: 0;
margin: 0 0 20px 20px;
border-radius: 50%;
padding: 10px;
}
.question-mark:hover{
background-color: rgb(238, 238, 238);
}
.question-mark.active{
background-color: rgb(216, 216, 216);
}
.question-out{
background-color: #fff;
position: absolute;
bottom: 60px;
margin: 0 0 0 20px;
border-radius: 5px;
min-width: 250px;
box-shadow: 0 0 3px 1px rgb(204, 204, 204);
}
.question-out li:nth-child(1){
margin: 10px 0 0 0;
}
.question-out li:nth-child(4){
margin: 0 0 10px 0;
}
.question-out li{
padding: 7px 0 7px 10px;
font-size: 15px;
}
.question-out li:hover{
background-color: #dddddd;
}
#keyframes hello{
0%{
scale: 0;
transform: translateY(-30px);
}
100%{
scale: 10;
transform: translateY(0px);
}
}
#keyframes pop{
0%{
transform: translateY(30px);
}
100%{
transform: translateY(0px);
}
}
#media screen and (max-width: 480px){
#nine-dot, .account{
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Classes</title>
<link rel="icon" href="classroom.png">
<link rel="stylesheet" href="/Coding/Google Classroom/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/5c25faca78.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="nav_bar">
<div class="left">
<ul>
<li>
<a href="#">
<i class="fas fa-bars"></i>
</a>
</li>
<li>
<a href="#">
<svg class="google-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 92" width="90" height="25">
<path fill="#EA4335" d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
<path fill="#FBBC05" d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
<path fill="#4285F4" d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z"/>
<path fill="#34A853" d="M225 3v65h-9.5V3h9.5z"/>
<path fill="#EA4335" d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z"/>
<path fill="#4285F4" d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z"/>
</svg>
</a>
</li>
<li><p class="classroom">Classroom</p></li>
</ul>
</div>
<div class="right">
<ul>
<li><a href="#">
<img class="plus" src="plus.png" alt="">
<p class="join">Create or join a class</p>
<ul class="plus-drop-down">
<li>Join class</li>
<li>Create class</li>
</ul>
</a>
</li>
<li>
<a href="#">
<i id="nine-dot" class="fas fa-th th"></i>
<p class="app">Google apps</p>
</a>
</li>
<li>
<a href="#">
<img class="account" src="account.png" alt="">
<div class="account-menu">
<p class="show-acc">Google Account</p>
<p class="username"></p>
<p class="email"></p>
</div>
</a>
</li>
</ul>
</div>
</nav>
</header>
<aside id="menu" class="side-menu">
<div class="main-menu">
<div class="top-two">
<div>
<ul class="up one">
<li>
<i class="fas fa-home"></i>
</li>
<li><a href="#">
<p>Classes</p></a>
</li>
</ul>
</div>
<div>
<ul class="up two">
<li>
<a href="#">
<i class="far fa-calendar"></i>
</a>
</li>
<li>
<a href="#">
<p>Calendar</p>
</a>
</li>
</ul>
</div>
</div>
<div>
<ul class="up three">
<li>
<a href="#">
<i class="fas fa-cog"></i>
</a>
</li>
<li>
<a href="#">
<p>Settings</p>
</a>
</li>
</ul>
</div>
</div>
<div>
<img class="question-mark" src="Question.png" alt="">
<ul class="question-out">
<li>What's New</li>
<li>Report issue or request feature</li>
<li>Help Center</li>
<li>Help Community</li>
</ul>
</div>
</aside>
<script src="/Coding/Google Classroom/script.js"></script>
</body>
</html>
enter image description here

You are very close. Try adding background-attachment: fixed; to your body css and you should get what you want.
You can read about background-attachment if you want more information here : https://www.w3schools.com/cssref/pr_background-attachment.asp

I can't understand your code at all but I was having a problem centering some text in showModalDialog in Google App Script and none of the CSS center and middle etc combinations were working until I finally stumbled on using a parent / child set. Maybe it will work for you.
<style>
#parent {
display:table;
font-family:Georgia, Cambria, serif;
font-size: 100%;
height: 100%;
margin: auto;
padding: 0;
position: fixed;
text-align:center;
width: 100%;
}
#child {
display: table-cell;
padding: 55px 55px;
vertical-align: middle;
}

Swiper coverflow blank when in Div container

Let me prefix that I'm not very skilled nor know many good practices, I'm learning by doing as projects come about.
I'm using Swiper for a game list slider, but when its put inside another Div it just disappears. I can position and size it correctly outside the Div, but I can't make it responsive that way and its very unorganized.
Below is the section, with the schedule to be on the left and the game slider to be on the right. When outside of the Games Div it will show, but when inside the Div it entirely disappears.
<!-- Start of schedule container -->
<div id="info-wrapper">
<section id="info">
<div id="schedule" class="container">
<div class="row">
<div class="col">
<h1 id="title"> Stream Schedule</h1>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Mondays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Tuesdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Wednesdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Thursdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Fridays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
</div>
<!-- Container for game list -->
<div id="games" class="container">
<h1 id="title"> What I've been playing </h1>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</section>
Full CSS below for main stylesheet. All other styles for Swiper can be found at http://idangero.us/swiper/
body, html {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
color: #fff;
font-size: 100%;
line-height: 1.25em;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: inherit;
}
.clear:after, .clear:before, .container:after, .container:before {
content: "";
display: table;
}
.clear:after, .container:after {
clear: both;
}
.clear, .container {
zoom: 1;
}
#header ul #nav li a:hover, .accent, .btn:hover {
background: #rgba(62, 24, 82, 1);
color: #fff;
}
.forum {
padding: 3px 8px 4px 8px !important;
}
.btn:hover {
border-color: #6246a3;
}
.container {
padding: 0 3%;
}
#header {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 40px 35px;
}
#header #displayname {
margin: 0;
padding: 0;
font-size: 137%;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
.label {
font-family: Arial, sans-serif;
font-size: 54%;
letter-spacing: 1px;
padding: 0 8px;
border-radius: 1em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
white-space: nowrap;
vertical-align: middle;
font-weight: 700;
margin-top: -4px;
display: inline-block;
}
#header ul#nav {
margin: 2px 0 0;
padding: 0;
}
#header ul#nav li {
display: inline-block;
list-style: none;
font-size: 120%;
}
#header ul#nav li a {
padding: 3px 8px;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
transition: background .3s ease;
outline: none;
}
#content {
box-sizing: border-box;
padding: 132px 0;
width: 100%;
height: 100%;
display: table;
text-align: center;
background: rgba(0, 0, 0, .7);
}
#content .container {
display: table-cell;
vertical-align: middle;
}
.avatar {
border-radius: 50%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-bottom: 25px;
width: 145px;
height: 145px;
}
.name {
color: #eee;
font-size: 104%;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 0 7px;
line-height: 1.5em;
}
.status {
font-size: 220%;
line-height: 1.3em;
font-weight: 300;
letter-spacing: 0;
margin: 0 0 20px;
}
.btn {
padding: 15px 24px;
border: 1px solid #FFF;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
font-size: 100%;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
white-space: nowrap;
vertical-align: middle;
display: inline-block;
transition: background ease .3s;
}
.live {
background: rgba(62, 24, 82, 1);
border: none;
-webkit-animation: pulse 2s infinite;
-moz-animation: pulse 2s infinite;
-o-animation: pulse 2s infinite;
animation: pulse 2s infinite;
}
.label .live-status {
font-size: 20px;
line-height: 19px;
vertical-align: middle;
margin-right: 3px;
}
#footer {
position: absolute;
z-index: 100;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 14px 30px;
}
#footer p {
font-size: 80%;
color: #FFF;
font-weight: 600;
opacity: .4;
transition: opacity ease .3s;
line-height: 1em;
}
#footer p:hover {
opacity: .8;
}
#footer .left {
float: left;
}
#footer .right {
float: right;
}
#media (min-width: 801px) {
#header #displayname {
float: left;
}
#header ul#nav {
float: right;
}
#header ul#nav li {
margin-left: 21px;
}
}
#media (max-width: 800px) {
#header {
padding: 24px 20px 20px;
}
#header #displayname {
text-align: center;
}
#header ul#nav {
margin: 20px auto 0;
text-align: center;
}
#header ul#nav li {
margin: 0 4px 12px;
}
}
#media (max-width: 750px) {
.name {
font-size: 100%;
}
.status {
font-size: 200%;
}
.btn {
width: 80%;
}
.avatar {
width: 120px;
height: 120px;
}
#footer p {
font-size: 60%;
padding: 0px 0px;
}
.accent, .btn:hover, #header ul#nav li a:hover {
background: #330066;
}
.btn:hover {
border-color: #330066;
}
.live {
background: #330066;
border: none;
}
#-webkit-keyframes pulse {
from {
opacity: 1.0;
-webkit-box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
-webkit-box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
-webkit-box-shadow: 0 0 15px #330066;
}
}
#-moz-keyframes pulse {
from {
opacity: 1.0;
-moz-box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
-moz-box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
-moz-box-shadow: 0 0 15px #330066;
}
}
#-o-keyframes pulse {
from {
opacity: 1.0;
-o-box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
-o-box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
-o-box-shadow: 0 0 15px #330066;
}
}
#keyframes pulse {
from {
opacity: 1.0;
box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
box-shadow: 0 0 15px #330066;
}
}
}
#content {
background: rgba(0, 0, 0, .8)
}
#live {
background: url("http://www.tokkoro.com/picsup/2860789-batman-the-dark-knight-joker-messenjahmatt___movie-wallpapers.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
}
#info-wrapper {
background: url("../img/cell.jpg") no-repeat center center;
}
#info {
height: 60vh;
width: 100%;
padding: 0;
margin: 0;
background-color: rgba(39, 0, 59, .8);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#schedule {
background-color: rgba(0, 0, 0, .4);
display: inline-flex;
flex-direction: column;
width: 30vh;
height: auto;
float: left;
}
#dates {
font-size: 80%;
}
#dates .p {
font-size: 100%;
}
/* Games Section Wrapper */
.swiper-container {
width: 50%;
height: 50%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
#title {
color: #fff;
font-size: 150%;
font-weight: 600;
letter-spacing: 2px;
}
.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
/* Pulse Animations Min */
#-webkit-keyframes pulse {
from {
opacity: 1;
-webkit-box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
-webkit-box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
-webkit-box-shadow: 0 0 12px #6246a3;
}
}
#-moz-keyframes pulse {
from {
opacity: 1;
-moz-box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
-moz-box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
-moz-box-shadow: 0 0 12px #6246a3;
}
}
#-o-keyframes pulse {
from {
opacity: 1;
-o-box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
-o-box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
-o-box-shadow: 0 0 12px #6246a3;
}
}
#keyframes pulse {
from {
opacity: 1;
box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
box-shadow: 0 0 12px #6246a3;
}
}
/* Querying additional screen sizes. */
#media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
Please let me know if I'm lacking any more information here and I'll update! Scratching my head with this, so thank you in advance for any help!

Add CSS:
#games{
height: 100%;
}

Space between dots and animate from top to bottom

I have created a box where I have text, vertical dotted lines and icon below.
I am trying to create like the following image
This is what I have created, in my code, the dotted lines very close to each other because I have used border, but not sure what other way to create dots, and animation I am looking is, dots appear one by one.
.lets-experience {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 25px;
max-width: 150px;
text-align: center;
color: #fff;
font-family: 'Gotham-Book';
font-size: 14px;
background:#404040;
}
.lets-experience > p {
margin: 5px 0;
}
.lets-experience > .dots {
width: 1px;
height: 50px;
margin: 0 auto 0 auto;
border-right: 1px dotted #fff;
}
.experience-arrow {
width: 2em;
height: 2em;
transform: rotate(90deg);
margin: -10px -2px 0 0;
}
.experience-arrow > path {
fill: #fff;
}
<div class="lets-experience">
<p>Lets Experience</p>
<div class="dots"> </div>
<svg class="experience-arrow" viewBox="0 0 20 20">
<path fill="none" d="M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c-0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z"></path>
</svg>
</div>

You can use svg to create the line and use height animation
.lets-experience {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 25px;
max-width: 150px;
text-align: center;
color: #fff;
font-family: 'Gotham-Book';
font-size: 14px;
background:#404040;
}
.lets-experience > p {
margin: 5px 0;
}
.lets-experience > .dots {
width: 10px;
height: 50px;
margin: 0 auto 0 auto;
/*border-right: 1px dotted #fff;*/
}
.dots svg{
animation: heightAnim 1s linear infinite;
}
#keyframes heightAnim {
from {
height: 0px;
}
to {
height: 45px;
}
}
.experience-arrow {
width: 2em;
height: 2em;
transform: rotate(90deg);
margin: -10px -2px 0 0;
}
.experience-arrow > path {
fill: #fff;
}
<div class="lets-experience">
<p>Lets Experience</p>
<div class="dots">
<svg width="10px" height="45px">
<line x1="5" x2="5" y1="5" y2="45" stroke="#FFF" stroke-width="5" stroke-linecap="round" stroke-dasharray="1, 10"/>
</svg>
</div>
<svg class="experience-arrow" viewBox="0 0 20 20">
<path fill="none" d="M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c-0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z"></path>
</svg>
</div>

Simple animation with pure CSS
.container {
position: relative;
}
.arrow {
font-size: 5em;
position: absolute;
}
.anim {
height: 5px;
background-color: white;
position: absolute;
width: 100%;
animation: blink 1s linear alternate infinite;
}
#keyframes blink {
from {
height: 0px;
}
to {
height: 55px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="arrow">⇣</div>
<div class="anim"></div>
</div>

You can use background-image instead of border, change the image-size to control the size of each picture and use repeat-y to make it look dotted
background-image: linear-gradient(to bottom, #333 90%, rgba(255, 255, 255, 0) 20%);
background-position: top;
background-size: 1px 10px;
background-repeat: repeat-y;
background-color: #ffffff;
to animate it simply use css
#keyframes animatedBackground {
from { background-position: 0% 0%; }
to { background-position: 0% 100%; }
}
to call the animation use animation: animatedBackground 20s linear infinite;
.lets-experience {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 25px;
max-width: 150px;
text-align: center;
color: #fff;
font-family: 'Gotham-Book';
font-size: 14px;
background:#404040;
}
.lets-experience > p {
margin: 5px 0;
}
.lets-experience > .dots {
width: 1px;
height: 50px;
margin: 0 auto 0 auto;
//border-right: 1px dotted #fff;
background-image: linear-gradient(to bottom, #333 90%, rgba(255, 255, 255, 0) 20%);
background-position: top;
background-size: 1px 10px;
background-repeat: repeat-y;
background-color: #ffffff;
animation: animatedBackground 20s linear infinite;
}
.experience-arrow {
width: 2em;
height: 2em;
transform: rotate(90deg);
margin: -10px -2px 0 0;
}
.experience-arrow > path {
fill: #fff;
}
#keyframes animatedBackground {
from { background-position: 0% 0%; }
to { background-position: 0% 100%; }
}
<div class="lets-experience">
<p>Lets Experience</p>
<div class="dots"> </div>
<svg class="experience-arrow" viewBox="0 0 20 20">
<path fill="none" d="M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c-0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z"></path>
</svg>
</div>

Maybe you will try with this:
.dots:before {
content: '';
width: 10px;
margin-left: -5px;
position: absolute;
background: #404040;
height: 0%;
}
And animate height from 0% to 100% with CSS transition or JS;
I hope this help.

I hope this is what you are looking for. I've just changed size of dots in border-right. But you have to change the margin of text from border. Because due to changing of size the text becomes nearer to dots.
.lets-experience > .dots {
width: 1px;
height: 50px;
margin: 0 auto 0 auto;
border-right: 3px dotted #fff;
}