How do I get this css to work with my html?

How do I get this css to work with my html? - html

I’m following a tutorial that uses html, css and JavaScript to create a portfolio however none of the css rules are working. When I inspect the page it shows all the css crossed out with warning signs next to them. What can I do?
/*==================== GOOGLE FONTS =======================*/
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap");
/*==================== VARIABLES CSS =======================*/
:root {
--header-height: 3 rem;
/*=========== Colors ============*/
/* change fovorite color */
--hue-color: 142; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/
/* HSL color made */
--first-color: hsl(var(--hue-color), 69%, 61%);
--first-color-second: hsl(var(--hue-color), 69%, 61%);
--first-color-alt: hsl(var(--hue-color), 57%, 53%);
--first-color-lighter: hsl(var(--hue-color), 92%, 85%);
--title-color: hsl(var(--hue-color), 8%, 15%);
--text-color: hsl(var(--hue-color), 8%, 45%);
--text-color-light: hsl(var(--hue-color), 8%, 65%);
--input-color: hsl(var(--hue-color), 70%, 96%);
--body-color: hsl(var(--hue-color), 60%, 99%);
--container-color: #fff;
/*============= Font and typography ===============*/
--body-font: 'Poppins', sans-serif;
/* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
--big-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
/*============ Font Weight ==============*/
--font-medium: 500;
--font-semi-bold: 600;
/*======== Margenes Bottom =============*/
/* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
--mb-0-25: .25rem;
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
--mb-3: 3rem;
/*============ Z index =============*/
--z-tooltip: 10;
--z-fixed: 100;
--z-model: 1000;
/* font size for large devices */
#media screen and {min-width: 968px {
:root {
--big-font-size: 3rem;
--h1-font-size: 2.25rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*============== Variables Dark theme ================*/
/*=============== Button Dark/Light ===================*/
/*========================= BASE ========================*/
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
html{
scroll-behavior: smooth;
}
body{
margin: 0 0 var(--header-height) 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h1,h2,h3,h4{
color: var(--title-color);
font-weight: var(--font-semi-bold);
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
}
/*================ REUSABLE CSS CLASSES ================*/
.section{
padding: 2rem 0 4rem;
}
.section__title{
font-size: var(--h1-font-size);
}
.section__subtitle{
display: block;
font-size:var(--small-font-size);
margin-bottom: var(--mb-3);
}
.section__title,
.section__subtitle{
text-align: center;
}
/*========================= LAYOUT =======================*/
.container{
max-width: 768px;
margin-left: var(--mb-1-5)
margin-right: var(--mb-1-5)
}
.grid{
display: grid;
gap: 1.5rem;
}
.header{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--body-color);
}
/*========================== NAV =========================*/
.nav{
max-width: 968;
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo,
.nav__toggle{
color: var(--title-color);
font-weight: var(--font-medium);
}
.nav__logo:hover{
color: var(--first-color);
}
.nav__toggle{
font-size: 1.1rem;
cursor: pointer;
}
.nav__toggle:hover;
color: var(--first-color);
#media screen and (max-width: 767px){
.nav__menu{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: (--body-color);
padding: 2rem 1.5rem 4rem;
box-shadow: 0 -1px 4px rgba(0,0,0,.15);
}
}
/* show menu */
/* Active Link */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!/--============= UNICONS =================-->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
<!/--============= SWIPER CSS ==============-->
<link rel="stylesheet" href="" />
<!/--================= CSS ======================-->
<link rel="stylesheet" href="myportfolio.css">
<title>Responsive Portfolio Website</title>
</head>
<body>
<!/--================== HEADER ======================-->
<header class="header" id="header">
<nav class="nav container">
Randy
<div class="nav__menu" id="nav-menu"></div>
<ul class="nav__list grid">
<li class="nav__item">
<a href="#Home" class="nav__link">
<i class="uil uil-estate"></i> Home
</a>
</li>
<li class="nav__item">
<a href="#About" class="nav__link">
<i class="uil uil-user"></i> About
</a>
</li>
<li class="nav__item">
<a href="#Skills" class="nav__link">
<i class="uil uil-file-alt"></i> Skills
</a>
</li>
<li class="nav__item">
<a href="#Services" class="nav__link">
<i class="uil uil-briefcase"></i> Services
</a>
</li>
<li class="nav__item">
<a href="#Portfolio" class="nav__link">
<i class="uil uil-scenery"></i> Portfolio
</a>
</li>
<li class="nav__item">
<a href="#Contact" class="nav__link">
<i class="uil uil-message"></i> Contact Me
</a>
</li>
</ul>
<i class="uil uil-times nav__close" id="nav-close"></i>
</div>
<div.nav="nav__btns">
<div class="nav__toggle" id="nav-toggle"></div>
<i class="uil uil-apps"></i>
</nav>
</header>
<!/--=================== MAIN ========================-->
<main class="main">...</main>
<!/--=================== FOOTER ======================-->
<!/--=================== SCROLL TOP ====================-->
<!/--==================== SWIPER JS ====================-->
<script src=""></script>
<!/--==================== MAIN JS ======================-->
<script src=""></script>
</body>
</html>
Here is the tutorial:
https://youtu.be/27JtRAI3QO8
inspected page
enter image description here
enter image description here

your css file had some issues
/*==================== GOOGLE FONTS =======================*/
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap");
/*==================== VARIABLES CSS =======================*/
:root {
--header-height: 3 rem;
/*=========== Colors ============*/
/* change fovorite color */
--hue-color: 142; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/
/* HSL color made */
--first-color: hsl(var(--hue-color), 69%, 61%);
--first-color-second: hsl(var(--hue-color), 69%, 61%);
--first-color-alt: hsl(var(--hue-color), 57%, 53%);
--first-color-lighter: hsl(var(--hue-color), 92%, 85%);
--title-color: hsl(var(--hue-color), 8%, 15%);
--text-color: hsl(var(--hue-color), 8%, 45%);
--text-color-light: hsl(var(--hue-color), 8%, 65%);
--input-color: hsl(var(--hue-color), 70%, 96%);
--body-color: hsl(var(--hue-color), 60%, 99%);
--container-color: #fff;
/*============= Font and typography ===============*/
--body-font: 'Poppins', sans-serif;
/* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
--big-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
/*============ Font Weight ==============*/
--font-medium: 500;
--font-semi-bold: 600;
/*======== Margenes Bottom =============*/
/* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
--mb-0-25: .25rem;
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
--mb-3: 3rem;
/*============ Z index =============*/
--z-tooltip: 10;
--z-fixed: 100;
--z-model: 1000;
}
/* font size for large devices */
#media screen and (min-width: 968px) {
:root {
--big-font-size: 3rem;
--h1-font-size: 2.25rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*============== Variables Dark theme ================*/
/*=============== Button Dark/Light ===================*/
/*========================= BASE ========================*/
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
html{
scroll-behavior: smooth;
}
body{
margin: 0 0 var(--header-height) 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h1,h2,h3,h4{
color: var(--title-color);
font-weight: var(--font-semi-bold);
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
}
/*================ REUSABLE CSS CLASSES ================*/
.section{
padding: 2rem 0 4rem;
}
.section__title{
font-size: var(--h1-font-size);
}
.section__subtitle{
display: block;
font-size:var(--small-font-size);
margin-bottom: var(--mb-3);
}
.section__title,
.section__subtitle{
text-align: center;
}
/*========================= LAYOUT =======================*/
.container{
max-width: 768px;
margin-left: var(--mb-1-5);
margin-right: var(--mb-1-5);
}
.grid{
display: grid;
gap: 1.5rem;
}
.header{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--body-color);
}
/*========================== NAV =========================*/
.nav{
max-width: 968;
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo,
.nav__toggle{
color: var(--title-color);
font-weight: var(--font-medium);
}
.nav__logo:hover{
color: var(--first-color);
}
.nav__toggle{
font-size: 1.1rem;
cursor: pointer;
}
.nav__toggle:hover;
color: var(--first-color);
#media screen and (max-width: 767px){
.nav__menu{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: (--body-color);
padding: 2rem 1.5rem 4rem;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
}
}
/* show menu */
/* Active Link */
<header class="header" id="header">
<nav class="nav container">
Randy
<div class="nav__menu" id="nav-menu"></div>
<ul class="nav__list grid">
<li class="nav__item">
<a href="#Home" class="nav__link">
<i class="uil uil-estate"></i> Home
</a>
</li>
<li class="nav__item">
<a href="#About" class="nav__link">
<i class="uil uil-user"></i> About
</a>
</li>
<li class="nav__item">
<a href="#Skills" class="nav__link">
<i class="uil uil-file-alt"></i> Skills
</a>
</li>
<li class="nav__item">
<a href="#Services" class="nav__link">
<i class="uil uil-briefcase"></i> Services
</a>
</li>
<li class="nav__item">
<a href="#Portfolio" class="nav__link">
<i class="uil uil-scenery"></i> Portfolio
</a>
</li>
<li class="nav__item">
<a href="#Contact" class="nav__link">
<i class="uil uil-message"></i> Contact Me
</a>
</li>
</ul>
<i class="uil uil-times nav__close" id="nav-close"></i>
</div>
<div.nav="nav__btns">
<div class="nav__toggle" id="nav-toggle"></div>
<i class="uil uil-apps"></i>
</nav>
</header>

Class names can not start with two hyphens. So, remove one hyphen from them.
There are a couple of predefined rules that should be followed while choosing the class name or selectors.
All CSS syntax is case-insensitive with in the range of [a-z] and [A-Z].
CSS classes, element name and IDs can contain only the characters [a-zA-Z0-9] , hyphen (-) and the underscore (_).
selectors cannot start with a digit, two hyphens, or a hyphen followed by a digit.
selectors can have # and . along with \
From tutorial schools

Related

CSS bottom, top, right, left element not working

Everyone, I face a problem, please first look image, then check my code, i am shohel in image. I want to scroll down with icon add or move in my image right side and same social media icon in my image left side as like Ansell Klee image. and when i right bottom increase but not any happened in my browser, not working, why this happened? I don't understand Advanced love and thanks.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap');
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3.5rem;
/*========== Colors ==========*/
--first-hue: 250;
--sat:66%;
--lig:75%;
--second-hue:219;
--first-color: hsl(var(--first-hue),var(--sat),var(--lig));
--first-color-alt : hsl(var(--first-hue),var(--sat),71%);
--titel-color: hsl(var(--second-hue),15%,95%);
--text-color: hsl(var(--second-hue),8%,75%);
--text-color-light: hsl(var(--second-hue),4%,55%);
--body-color:hsl(var(--second-hue),48%,8%);
--container-color:hsl(var(--second-hue), 32%,12%);
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif ;
--biggest-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-bold: 700;
/*========== Margenes Bottom ==========*/
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
--mb-3: 3rem;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
#media screen and (min-width: 968px) {
:root {
--biggest-font-size: 2.5rem;
--h1-font-size: 2.25rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/* Base */
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
html{
scroll-behavior: smooth;
}
body,button,input,textarea{
font-family: var(--body-font);
font-size: var(--normal-font-size);
}
body{
background-color: var(--body-color);
color: var(--text-color);
}
h1,h2,h3{
color: var(--titel-color);
font-weight: var(--font-medium);
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
button{
cursor: pointer;
border: none;
outline: none;
}
img{
max-width: 100%;
height: auto;
}
.container{
max-width: 968px;
margin-left: 1rem;
margin-right: 1rem;
}
.grid{
display: grid;
gap: 1.25rem;
}
.main{
overflow: hidden;
}
.section{
padding: 4.5rem 0 1rem;
}
.section__title,
.section__subtitle{
text-align: center;
}
.section__title{
font-size: var(--h2-font-size);
color: var(--first-color);
margin-bottom: 2rem;
}
.section__subtitle{
display: block;
font-size:var(--smaller-font-size) ;
color: var(--text-color-light);
}
/* header and nav */
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color:var(--body-color);
z-index: var(--z-fixed);
}
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo{
color: var(--first-color);
font-weight: var(--font-medium);
transition: .4s;
}
.nav__logo:hover{
color: var(--first-color-alt);
}
.nav__menu{
position: fixed;
bottom: 1rem;
background: hsla(var(--second-hue),32%,16%,.8);
width: 90%;
border-radius: 4rem;
padding: 1rem 2.25rem;
backdrop-filter: blur(10px);
}
.nav__list{
display:flex ;
justify-content: space-between;
align-items: center;
}
.nav__link{
color: var(--text-color);
font-size: 1.25rem;
padding: .4rem;
display: flex;
border-radius: 5rem;
}
/* acrive-link */
.active-link{
background: linear-gradient(180deg,hsla(var(--first-hue),var(--sat),var(--lig),1), hsla(var(--first-hue),var(--sat),var(--lig),.2)
);
box-shadow: 0 0 16px hsla(var(--first-hue),var(--sat),var(--lig),.4);
}
/* home */
.home__container{
position: relative;
row-gap: 4.5rem;
padding-top: 2rem;
}
.home__data{
text-align: center;
}
.home__greeting,
.home__education{
font-size: var(--small-font-size);
font-weight: var(--font-medium);
}
.home__greeting{
display: block;
color: var(--titel-color);
margin-bottom: .25rem;
}
.home__education{
color: var(--text-color);
margin-bottom: 2.5rem;
}
.home__name{
font-size: var(--biggest-font-size);
}
.home__img{
width:160px;
}
.home__handel{
justify-self: center;
width: 190px;
height: 244px;
background: linear-gradient(180deg,
hsla(Var(--first-hue), var(--sat), var(--lig),1),
hsla(Var(--first-hue), var(--sat), var(--lig), .2)
);
border-radius: 10rem 10rem 1rem 1rem;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
}
.home__buttons{
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
}
.home__social,
.home-scroll
{
position:absolute ;
}
.home__social{
bottom: 9rem;
left: 0;
display: grid;
row-gap: .5rem;
}
.home__social-link{
width: max-content ;
background-color: var(--container-color);
color: var(--text-color);
padding: .25rem;
border-radius: .25rem;
display: flex;
font-size: 1rem;
transition: .4s;
}
.home__social-link:hover{
background-color: var(-first-color);
color:#fff;
}
.home__social::after{
content: '';
width: 32px;
height: 2px;
background-color: var(--first-color);
transform: rotate(90deg) translate(16px,3px);
}
.home__scroll{
color: var(--first-color);
right: -1.5rem;
bottom: 4rem;
display: grid;
row-gap: 2.25rem;
justify-items: center;
}
.home__scroll-icon{
font-size: 1.25rem;
}
.home__scroll-name{
font-size: var(--smaller-font-size);
transform: rotate(-90deg);
}
.button{
display: inline-block;
background-color: var(--first-color);
color: var(--body-color);
padding: .75rem 1rem;
border-radius: .5rem;
font-weight: var(--font-medium);
transition: .4s;
}
.button:hover{
background-color:var(--first-color-alt);
color: var(--body-color);
}
.button-ghost{
background-color: transparent;
border: 2px solid var(--first-color);
color: var(--first-color);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive shohel Portfolio Website </title>
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
<script src="./script.js" defer></script>
</head>
<body>
<header class="header" id="header">
<nav class="nav container">
Shohel
<div class="nav__menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link active-link">
<i class='bx bx-home-alt'></i>
</a>
</li>
<li class="nav__item">
<a href="#about" class="nav__link">
<i class='bx bx-user' ></i>
</a>
</li>
<li class="nav__item">
<a href="#skills" class="nav__link">
<i class='bx bx-book' ></i>
</a>
</li>
<li class="nav__item">
<a href="#work" class="nav__link">
<i class='bx bx-briefcase-alt-2' ></i>
</a>
</li>
<li class="nav__item">
<a href="#contact" class="nav__link">
<i class='bx bx-message-square-detail' ></i>
</a>
</li>
</ul>
</div>
<!-- theme change button -->
<i class='bx bx-moon change-theme' id="theme-button" ></i>
</nav>
</header>
<!-- Main -->
<main class="main">
<!--Home -->
<section class="home section" id="home">
<div class="home__container container grid">
<div class="home__data">
<span class="home__greeting">Hellow, I'm</span>
<h1 class="home__name">Shohel</h1>
<h3 class="home__education">Frontend Developer</h3>
<div class="home__buttons">
Download CV
About Me
</div>
</div>
<div class="home__handel">
<img src="./img/IMG_20220127_145041_1-02-removebg-preview.png" alt="" class="home__img">
</div>
<div class="home__social">
<a href="" class="home__social-link">
<i class='bx bxl-linkedin-square' ></i>
</a>
<a href="" class="home__social-link">
<i class='bx bxl-github' ></i>
</a>
<a href="" class="home__social-link">
<i class='bx bxl-dribbble' ></i>
</a>
</div>
<a href="" class="home__scroll">
<i class='bx bx-mouse home__scroll-icon' ></i>
<span class="home__scroll-name">Scroll Down</span>
</a>
</div>
</section>
</main>
</body>
</html>

add a property as position:absolute to the same class
.home__scroll{color: var(--first-color);
right: -1.5rem;
bottom: 11rem;
display: grid;
row-gap: 2.25rem;
justify-items: center;
position: absolute;}

You need to add property position: absolute; OR position: fixed; according to your requirement before adding top:; OR right:; OR bottom:; OR left:;
This is because these properties only work with positioned elements other than position: static;

Bottom border on button disappears on hover

For some reason, the bottom border on my button disappears on hover, and I have no idea why. It works perfectly locally, but when I check my site live it disappears.
Here is my Codepen https://codepen.io/ecanada138/pen/ExXRXoW, which is the exact code on my repo.
Here is the site https://8thvisionmedia.netlify.app/, where you can see the problem but it does not show up on CodePen or locally
#font-face {
font-family: cocogoose-regular;
src: url('../fonts/Cocogoose-Classic-Medium-trial.ttf');
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
}
.navbar-nav a {
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0px;
padding: 0px 10px 0px 10px;
border-right: 1px solid rgb(255, 255, 255);
height: 20px;
}
.vimeo-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
/* pointer-events: none; */
overflow: hidden;
}
.vimeo-wrapper iframe {
width: 100vw;
height: 56.25vw;
/* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh;
/* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* z-index: -1; */
}
.phone-nav {
display: none;
}
.navbar-nav {
display: flex;
flex-direction: column;
margin-top: 1rem;
color: rgb(255, 255, 255);
font-size: 1rem;
}
.navbar-toggler:focus {
text-decoration: none;
outline: 0;
box-shadow: 0 0 0 0.1rem;
border: 1px solid rgb(255, 255, 255);
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-toggler:focus {
box-shadow: none;
}
.desktop-nav-container {
flex-direction: row;
justify-content: center;
}
/* .nav-link-desktop::after{
content: ' |';
} */
#media screen and (max-width: 992px) {
.phone-nav {
display: block;
}
}
.home-container {
height: 100vh;
z-index: 1000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
}
.home-row {
padding: 0 10rem 0 10rem;
z-index: 1000;
}
.home-text {
text-align: center;
font-size: 1.2rem;
letter-spacing: 3px;
}
.home-col {
width: 100%;
}
.col-logo {
position: absolute;
left: 2rem;
bottom: 1rem;
margin-bottom: 0.5rem;
padding: 0;
}
.row-copyright {
position: absolute;
right: 2rem;
bottom: 1rem;
font-family: 'Montserrat', sans-serif;
}
.vision-media-logo {
width: 3rem;
}
a {
color: rgb(255, 255, 255) !important;
font-size: 14px;
}
.fa {
font-size: 2rem;
}
ul {
text-align: center;
}
#media screen and (min-width: 1399px) {
.home-row {
padding: 0 20rem 0 20rem;
}
}
#media screen and (min-width: 1800px) {
.home-row {
padding: 0 35rem 0 35rem;
}
}
#media screen and (min-width: 2200px) {
.home-row {
padding: 0 50rem 0 50rem;
}
}
#media screen and (max-width: 767px) {
.navbar-nav {
margin-right: 0;
}
.home-row {
padding: 0 3rem 0 3rem;
}
}
#media screen and (max-width: 575px) {
.home-row {
padding: 0 1rem 0 1rem;
margin-top: -8rem;
}
.home-text {
font-size: 1rem;
}
.vision-media-logo {
width: 2rem;
}
.col-logo {
position: absolute;
left: 1rem;
bottom: 1rem;
}
.row-copyright {
position: absolute;
right: 1rem;
bottom: 0rem;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
}
}
/* .myIcon {
margin-left: 3rem;
margin-right: 3rem;
}
.hide {
visibility: hidden;
font-size: 1rem;
margin-top: 10px;
opacity: 0;
text-transform: uppercase;
text-align: center;
transition: 0.8s;
}
.myIcon:hover .hide {
visibility: visible;
opacity: 1;
}
.myIcon {
z-index: 1000;
}
*/
#media screen and (max-width: 576px) {
.vimeo-wrapper {
background-image: url('../images/home-screen-bg.jpg');
background-position: center;
background-size: cover;
}
.vimeo-wrapper iframe {
display: none;
}
.phone-container {
position: relative;
}
}
#media screen and (max-width: 515px) {
.fa-col {
display: flex;
flex-direction: row;
}
}
#media screen and (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
.desktop-nav-container {
display: none !important;
}
}
.col-copyright {
margin-bottom: 1rem;
}
#media screen and (max-width: 992px) {
.navbar-nav a {
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0px;
padding: 0.5rem 1rem;
border: none;
height: 100%;
font-size: 1rem;
}
}
.create-button {
background-color: rgba(255, 255, 255, 0);
color: rgb(255, 255, 255);
outline: 0;
border: 1px solid rgb(255, 255, 255) !important;
border-bottom: 1px solid rgb(255, 255, 255) !important;
font-family: 'cocogoose-regular';
letter-spacing: 2px;
margin: auto;
padding: 1rem 2rem;
text-align: center;
text-decoration: none;
transition: 0.5s ease;
}
.create-button a {
text-decoration: none;
}
.create-button:hover {
background-color: rgba(255, 255, 255, 0.3);
/* color: rgb(255, 255, 255); */
/* outline: 0; */
/* border: 1px solid rgb(255, 255, 255); */
/* font-family: 'cocogoose-regular'; */
/* letter-spacing: 2px; */
/* width: 100%; */
/* padding: 1rem 2rem; */
transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/5826f42d14.js" crossorigin="anonymous"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400&display=swap" rel="stylesheet" />
<!-- CSS SHEETS -->
<link rel="stylesheet" href="css/index.css" />
<title>8th Vision Media | Real Estate Video and Photo Production</title>
<link rel="shortcut icon" type="image/png" href="./images/8-vision-logo-favicon.ico" />
</head>
<body>
<!--------------------------------------- NAV BAR --------------------------------------------------->
<div class="phone-container">
<nav class="navbar navbar-expand-xxxxxxl phone-nav">
<div class="container-fluid">
<button class="navbar-toggler custom-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column align-items-end" id="navbarNav">
<ul class="navbar-nav flex-column">
<!-- <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="./gallery.html">Video Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./core-values.html">Core Values </a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact.html">Get In Touch</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="./our-people.html">Our People</a>
</li> -->
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://www.instagram.com/8thvisionmedia/">Our Work</a
>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg desktop-nav">
<div class="container-fluid">
<div
class="collapse navbar-collapse desktop-nav-container"
id="navbarNavAltMarkup"
>
<div class="navbar-nav">
<a
class="nav-link nav-link-desktop"
aria-current="page"
href="./contact.html"
>Get In Touch</a
>
<a class="nav-link nav-link-desktop" href="./core-values.html"
>Core Values
</a>
<a class="nav-link nav-link-desktop" href="./gallery.html">Video Gallery</a
>
<a
style="border-right: none; text-decoration: none"
target="_blank"
href="https://www.instagram.com/8thvisionmedia/"
>Our Work</a
>
</div>
</div>
</div>
</nav>
<div class="vimeo-wrapper">
<iframe
src="https://player.vimeo.com/video/570788340?background=1&autoplay=1&loop=1&byline=0&title=0"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
<div>
<div class="container-fluid home-container">
<div class="row home-row">
<div class="col home-col">
<!-- <p class="home-text">
We create powerful visual content for brands that help drive
sales, growth and engagement.
</p> -->
<button
onClick="window.open('https://www.8thvisionmedia.com/contact');"
class="create-button"
>
<a
href="./contact.html
"
>CREATE WITH US
</a>
</button>
</div>
</div>
<!-- <div class="row fa-row text-center">
<div class="col fa-col">
<span>
<a
href="https://www.instagram.com/8thvisionmedia/"
target="_blank"
><i class="myIcon fab fa-instagram fa-2x"
><p class="hide">What We Do</p></i
></a
></span
><span
><a href="mailto:create#8thvisionmedia.com"
><i class="myIcon far fa-envelope fa-2x"
><p class="hide">Take Your Next Step</p></i
></a
>
</span>
</div>
</div> -->
<div class="row row-logo">
<div class="col col-logo">
<img class="vision-media-logo" src="./images/8th-vision-logo.png" />
</div>
</div>
<div class="row row-copyright">
<div class="col col-copyright">
<a>© 2021 8th Vision Media</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

remove transform: scale(1.1);
it worked

It worked fine on firefox. But I saw the issue on edge. and solved it by adding padding to .home-col class.
add the following and it should work fine:
.home-col {
padding: 10px;
}

I dont know exactly the reason, but changing "scale" value will solve the problem :
transform: scale(1.2); for example

footer cannot go underneath sidebar

hi uh how do I put the footer underneath my side nav, it works for my header but I don't know how to do it for the actual footer.
also sorry uh another question, how do I make it so the wording on like a smaller screen shows? because the side nav goes to the bottom of the page but the words don't show

Right now your footer is contained within your main tag:
<main>
<section>
<article>
<h1> Homepage </h1>
<p> ......................... </p>
</article>
</section>
<div class="footer">
<footer>
<p>Copyright © 2021 My Portfolio</p>
</div>
</main>
Your main tag doesn't take the whole width of the page, which is why the footer is smaller than your header.
Putting your footer outside of the main tag will fix your issue
<main>
<section>
<article>
<h1> Homepage </h1>
<p> ......................... </p>
</article>
</section>
</main>
<div class="footer">
<footer>
<p>Copyright © 2021 My Portfolio</p>
</div>

You are missing a few matching tags so please always be weary of that, you can do the following if this is what you are referring to:
You can create a new nav-item element:
<li class="nav-item">
Copyright © 2021 My Portfolio
</li>
:root {
font-size: 17px;
font-family: 'Open Sans';
--text-primary: black;
--text-secondary: white;
--bg-primary: white;
--bg-secondary: #4F3466FF;
--transition-speed: 600ms;
}
body {
color: black;
background-color: white;
margin: 0;
padding: 0;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: black;
}
body::-webkit-scrollbar-thumb {
background: #93385FFF;
}
main {
margin-left: 5rem;
padding: 1rem;
}
.navbar {
position: fixed;
background-color: #93385FFF;
transition: width 600ms ease;
overflow: scroll;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 10;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.nav-item {
width: 100%;
}
.nav-item:last-child {
margin-top: auto;
}
.nav-link {
display: flex;
align-items: center;
height: 5rem;
color: var(--text-primary);
text-decoration: black;
transition: var(--transition-speed);
}
.nav-link:hover {
filter: grayscale(0%) opacity(1);
background: var(--bg-secondary);
color: var(--text-secondary);
}
.link-text {
display: none;
margin-left: 1rem;
}
.nav-link svg {
width: 50rem;
min-width: 2rem;
margin: 0 1.5rem;
}
.navbar:hover .logo svg {
transform: rotate(-180deg);
}
#media only screen and (max-width: 600px) {
.navbar {
bottom: 0;
width: 100vw;
height: 5rem;
}
.logo {
display: none;
}
.navbar-nav {
flex-direction: row;
}
.nav-link {
justify-content: center;
}
main {
margin: 100;
}
}
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 5rem;
height: 100vh;
}
.navbar:hover {
width: 20rem;
}
.navbar:hover .link-text {
display: inline;
}
.navbar:hover .logo svg
{
margin-left: 20rem;
}
.navbar:hover .logo-text
{
left: 0px;
}
}
.logo {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1rem;
text-align: center;
color: var(--text-secondary);
background: var(--bg-secondary);
font-size: 1.5rem;
letter-spacing: 0.3ch;
width: 100%;
}
.logo svg {
transform: rotate(0deg);
transition: var(--transition-speed);
}
.logo-text
{
display: inline;
position: absolute;
left: -999px;
transition: var(--transition-speed);
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
.header {
padding: 10px;
text-align: center;
background: #4F3466FF;
color: white;
font-size: 30px;
}
a {
color: #9F6B99FF;
}
a:visited {
color: #636;
}
a:hover, a:active, a:focus {
color: black;
}
.footer {
text-align: center;
background-color: #4F3466FF;
color: white;
size: 15px
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="theme.js"></script>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet" />
</head>
<div class="header">
<h3> Level 2 Website Development Page </h3>
<img src=http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg>
</div>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Digital Portfolio</span>
<svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="angle-double-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x">
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a href="home.html" class="active">
<span class="link-text">Home</span>
</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link">
<span class="link-text">About Me & CV & Hobbies</span>
</a>
</li>
<li class="nav-item">
<a href="units.html" class="nav-link">
<span class="link-text">Units</span>
</a>
</li>
<li class="nav-item">
<a href="unit1.html" class="nav-link">
<span class="link-text">Unit 1: The Online World</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 2: Technology Systems</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 3 & 13: Website Development & Software Development</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 9: Spreadsheet Development</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 10: Database Development</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 12: Software Development</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Contact Me</span>
</a>
</li>
<li class="nav-item">
Copyright © 2021 My Portfolio
</li>
</ul>
</nav>
<article>
<main>
<section>
<article>
<h1> Homepage </h1>
<p> ......................... </p>
</article>
</section>
<div class="footer">
</div>
</main>
</article>
</body>

Am unable to get what you are asking. Is this what you expecting ?
*, *:before, *:after {
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #fff;
color: #444;
}
h1, p {
margin: 0 0 1em 0;
}
.wrapper {
max-width: 940px;
margin: 0 20px;
display: grid;
grid-gap: 10px;
}
#media screen and (min-width: 500px) {
/* no grid support? */
.sidebar {
float: left;
width: 19.1489%;
}
.content {
float: right;
width: 79.7872%;
}
.wrapper {
margin: 0 auto;
grid-template-columns: 1fr 3fr;
}
.header, .footer {
grid-column: 1 / -1;
/* needed for the floated layout */
clear: both;
}
}
.wrapper > * {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
/* needed for the floated layout*/
margin-bottom: 10px;
}
/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
#supports (display: grid) {
.wrapper > * {
width: auto;
margin: 0;
}
}
<div class="wrapper">
<header class="header">My header</header>
<aside class="sidebar">Sidebar</aside>
<article class="content">
<h1>2 column, header and footer</h1>
<p>This example uses line-based positioning, to position the header and footer, stretching them across the grid.</p>
</article>
<footer class="footer">My footer</footer>
</div>

making a left sidebar right compatible

I am trying to convert a left sidebar to be compatible on the right.
I tried a few things but nothing worked for me.
basically, I need a right-to-left direction, because all my site is from right-to-left.
anyone can help me? here is my code (to be honest it is not really mine):
Thank you very much
/*===== GOOGLE FONTS =====*/
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap");
/*===== VARIABLES CSS =====*/
:root{
--header-height: 3rem;
--nav-width: 68px;
/*===== Colors =====*/
--first-color: #4723D9;
--first-color-light: #AFA5D9;
--white-color: #F7F6FB;
/*===== Font and typography =====*/
--body-font: 'Nunito', sans-serif;
--normal-font-size: 1rem;
/*===== z index =====*/
--z-fixed: 100;
}
/*===== BASE =====*/
*,::before,::after{
box-sizing: border-box;
}
body{
position: relative;
margin: var(--header-height) 0 0 0;
padding: 0 1rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s;
}
a{
text-decoration: none;
}
/*===== HEADER =====*/
.header{
width: 100%;
height: var(--header-height);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--white-color);
z-index: var(--z-fixed);
transition: .5s;
}
.header__toggle{
color: var(--first-color);
font-size: 1.5rem;
cursor: pointer;
}
.header__img{
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden;
}
.header__img img{
width: 40px;
}
/*===== NAV =====*/
.l-navbar{
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--first-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-fixed);
}
.nav{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav__logo, .nav__link{
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem;
}
.nav__logo{
margin-bottom: 2rem;
}
.nav__logo-icon{
font-size: 1.25rem;
color: var(--white-color);
}
.nav__logo-name{
color: var(--white-color);
font-weight: 700;
}
.nav__link{
position: relative;
color: var(--first-color-light);
margin-bottom: 1.5rem;
transition: .3s;
}
.nav__link:hover{
color: var(--white-color);
}
.nav__icon{
font-size: 1.25rem;
}
/*Show navbar movil*/
.show{
left: 0;
}
/*Add padding body movil*/
.body-pd{
padding-left: calc(var(--nav-width) + 1rem);
}
/*Active links*/
.active{
color: var(--white-color);
}
.active::before{
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--white-color);
}
/* ===== MEDIA QUERIES=====*/
#media screen and (min-width: 768px){
body{
margin: calc(var(--header-height) + 1rem) 0 0 0;
padding-left: calc(var(--nav-width) + 2rem);
}
.header{
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 calc(var(--nav-width) + 2rem);
}
.header__img{
width: 40px;
height: 40px;
}
.header__img img{
width: 45px;
}
.l-navbar{
left: 0;
padding: 1rem 1rem 0 0;
}
/*Show navbar desktop*/
.show{
width: calc(var(--nav-width) + 156px);
}
/*Add padding body desktop*/
.body-pd{
padding-left: calc(var(--nav-width) + 188px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ===== BOX ICONS ===== -->
<link href='https://cdn.jsdelivr.net/npm/boxicons#2.0.5/css/boxicons.min.css' rel='stylesheet'>
<!-- ===== CSS ===== -->
<link rel="stylesheet" href="assets/css/styles.css">
<title>Sidebar menu responsive</title>
</head>
<body id="body-pd">
<header class="header" id="header">
<div class="header__toggle">
<i class='bx bx-menu' id="header-toggle"></i>
</div>
<div class="header__img">
<img src="assets/img/perfil.jpg" alt="">
</div>
</header>
<div class="l-navbar" id="nav-bar">
<nav class="nav">
<div>
<a href="#" class="nav__logo">
<i class='bx bx-layer nav__logo-icon'></i>
<span class="nav__logo-name">Bedimcode</span>
</a>
<div class="nav__list">
<a href="#" class="nav__link active">
<i class='bx bx-grid-alt nav__icon'></i>
<span class="nav__name">Dashboard</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-user nav__icon'></i>
<span class="nav__name">Users</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-message-square-detail nav__icon'></i>
<span class="nav__name">Messages</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-bookmark nav__icon'></i>
<span class="nav__name">Favorites</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-folder nav__icon'></i>
<span class="nav__name">Data</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-bar-chart-alt-2 nav__icon'></i>
<span class="nav__name">Analytics</span>
</a>
</div>
</div>
<a href="#" class="nav__link">
<i class='bx bx-log-out nav__icon'></i>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>
<h1>Components</h1>
<!--===== MAIN JS =====-->
<script>
/*===== SHOW NAVBAR =====*/
const showNavbar = (toggleId, navId, bodyId, headerId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if (toggle && nav && bodypd && headerpd) {
toggle.addEventListener('click', () => {
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav__link')
function colorLink() {
if (linkColor) {
linkColor.forEach(l => l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l => l.addEventListener('click', colorLink))
</script>
</body>
</html>
Thank you

Smooth Scrolling in CSS

I am trying to get scroll-behavior to work on this site. I have put the scroll-container, put ids, fixed css, but it is just not working. Any ideas as to why smooth-scrolling is NOT working on this?
What I need is the navbar area smooth scroll to the appropriate areas on the page. So Menu to Menu, Deals to Deals, About to About etc...I can't figure out why the smooth scrolling isn't working. Any ideas? Thanks!
/* Main Body Styles */
body {
margin: 0;
width: 100%;
height: auto;
box-sizing: border-box;
text-align: center;
background-color: #f9f9f9;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238b8b8b' fill-opacity='0.07' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
font-family: var(--main-font);
}
a {
cursor: pointer;
outline: none;
text-decoration: none;
}
hr {
border: 0;
height: 1px;
margin: 0 0 1.5em 0;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
.hr2 {
margin: 0 auto;
width: 50%;
}
.scroll-box {
scroll-behavior: smooth;
overflow-y: scroll;
}
:root {
--main-box-shadow:-5px 6px 59px -4px rgba(77,77,77,1);
--main-color: #d30404;
--main-text-shadow: 0px 3px 6px rgba(150, 150, 150, 1);
--fancy-font: 'Rock Salt', cursive;
--main-font: 'Raleway', sans-serif;
}
/* Header */
.header-image {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/header.jpg');
background-size:cover;
background-position: center;
background-attachment: fixed;
width: 100%;
height: 40em;
}
.header-wrapper {
padding-top: 1.5em;
}
.header-logo {
margin: 0;
padding-bottom: 1.25em;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 5em;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
letter-spacing: .115em;
}
.menu-btn {
border: none;
border-radius: 2em;
padding: 1em 3.25em;
background: #d30404;
color: #efefef;
box-shadow: 0px 30px 95px -15px rgba(0,0,0,.5);
font-size: 1.15em;
}
/* Hours of Operation */
.hours-wrapper {
background-color: red;
}
.hours-header {
margin: 0;
}
.hours-list {
list-style: none;
padding: 0;
}
/* Navbar */
.nav {
margin: 0;
}
.menu-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/menu.jpg');
}
.deals-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/dough.jpg');
}
.about-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg');
}
.contact-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/oven.jpg');
}
.box-logo {
margin: 0;
padding: 1.5em;
color: white;
font-size: 2em;
font-family: 'Rock Salt', cursive;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
}
.box {
box-shadow: inset -1px 1px 43px -9px rgba(0,0,0,1);
background-position: center;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 10em;
}
/* Menu */
.menu-title {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 4em;
margin: 0;
padding: 1em 0 .25em 0;
text-shadow: var(--main-text-shadow);
}
.menu-gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.menu-item {
margin: 2em 0;
}
.menu-pic {
width: auto;
height: 15em;
margin: .5em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
.pic2,
.pic6 {
width: 95%;
}
.menu-heading {
font-family: 'Raleway', sans-serif;
font-weight: bolder;
font-size: 1.5em;
}
/* Deals */
.deal-wrapper {
padding: 1.5em 0;
}
.deals {
margin: 0;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3em;
text-shadow: var(--main-text-shadow);
}
.deal-img {
width: auto;
height: 15em;
margin: 1em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
/* About */
.about {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3.5em;
margin: 0;
text-shadow: var(--main-text-shadow);
}
.store-pic {
margin: 2em 0;
width: 100%;
height: auto;
box-shadow: -1px 3px 17px -4px rgba(150,150,150,0.8);
}
.about-par {
font-family: 'Raleway', sans-serif;
font-size: 1.115em;
line-height: 180%;
padding: 1.35em 0;
margin: 0 auto;
max-width: 33ch;
}
/* Reviews */
.review-wrapper {
padding-top: 2em;
}
.review {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-family: 'Nunito', sans-serif;
font-style: italic;
max-width: 32ch;
margin: 0 auto;
}
.fa-yelp {
color: #d32323;
}
.fa-facebook-f {
color: #3b5998;
}
/* Footer */
.footer-wrapper {
background-color: #d30404;
box-shadow: inset 0px 1px 52px -10px rgba(0, 0, 0, .115);
width: 100%;
height: 5em;
display: flex;
justify-content: center;
}
.footer-social {
display: flex;
justify-content: space-around;
padding: .75em 0;
}
.social {
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
.footer-cred {
font-size: .75em;
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dinos Pizza</title>
<link rel="stylesheet" href="/Users/rogerjorns/Desktop/DinosMain/assets/index.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway|Rock+Salt|Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<!-- Header -->
<header class="header-image">
<div class="header-wrapper">
<h1 class="header-logo">Dino's Pizza</h1>
</div>
Check our Menu
</header>
<!-- Hours of Operation -->
<div class="hours-wrapper">
<h2 class="hours-header">Hours of Operation</h2>
<ul class="hours-list">
<li class="hours">** Closed Mondays **</li>
<li class="hours">Tues - Thurs: 11am - 8pm</li>
<li class="hours">Fri - Sat: 11am - 9pm</li>
<li class="hours">Sun: 2pm - 8pm</li>
</ul>
</div>
<!-- Navbar -->
<div class="nav">
<div href="#menu" class="menu-box box">
<h2 class="box-logo">Menu</h2>
</div>
<div href="#deals" class="deals-box box">
<h2 class="box-logo">Deals</h2>
</div>
<div href="#about" class="about-box box">
<h2 class="box-logo">About Us</h2>
</div>
<div href="#contact" class="contact-box box">
<h2 class="box-logo">Contact</h2>
</div>
</div>
<scroll-container>
<!-- Menu -->
<div class="menu-wrapper">
<h1 id="menu" class="menu-title title scrolling-box">Menu</h1>
<hr>
<div class="menu-gallery">
<div class="menu-item">
<img class="menu-pic pic1" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/allmeat.jpg" alt="">
<h3 class="menu-heading">All-Meat</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic2" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/hawaiian.jpg" alt="">
<h3 class="menu-heading">Hawaiian</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic3" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/veggie.jpg" alt="">
<h3 class="menu-heading">Veggie</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic4" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/onetopping.jpg" alt="">
<h3 class="menu-heading">One Topping</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic5" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/twotopping.jpg" alt="">
<h3 class="menu-heading">Two Topping</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic6" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/cheesybread.jpg" alt="">
<h3 class="menu-heading">Cheesy Bread</h3>
<p class="menu-price">$11.95</p>
</div>
</div>
</div>
<hr>
<!-- Deals -->
<div class="deal-wrapper">
<scroll-page><h2 id="deals" class="deals scrolling-box">Deals</h2></scroll-page>
<hr class="hr2">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal.jpg" alt="">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal2.jpg" alt="">
</div>
<!-- About Us -->
<hr>
<div class="about-wrapper">
<h2 id="about" class="about scrolling-box">About Us</h2>
<hr class="hr2">
<img class="store-pic" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg" alt="">
<hr class="hr2">
<p class="about-par">With aspirations to go into the restaurant business for many years,
our dream became a reality in May 2014 when we opened the doors to Dino's Pizza in the great city of Blue Mound, TX.
With a passion to serve up the best-tasting pizza and wings in town, made from quality ingredients,
we look forward to having you as a guest at our restaurant or delivering straight to your door.</p>
<br>
<p class="about-par">At Dino's Pizza we pride ourselves in serving our customers with the utmost professionalism, friendliness, integrity and cleanliness.
We make our pizza dough fresh from scratch daily.
Dino's is committed to serving delicious, hot home-made tasting pizzas and savory wings day in and day out.</p>
<br>
<p class="about-par">Dino's Pizza is family-owned and operated.
Our freshly made dough, homemade sauce, and real shredded cheese make a difference you will definitely taste!
And our appetizing, flavorful chicken wingsand dessert options are second to none!</p>
<p class="about-par">Don't just take our word for it...check out what our loyal customers have to say
on Yelp, then order and be prepared to taste
and experience awesomeness for yourself! The Dino's Way!</p>
</div>
<hr class="hr2">
<!-- Reviews -->
<div class="review-wrapper">
<h3 class="review">"I've never had anything less than an outstanding meal from Dino's."</h3>
<p> - Brittani <i class="fab fa-yelp"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"Pizza was some of the best I've ever eaten! We will definitely be ordering again."</h3>
<p> - Michelle <i class="fab fa-yelp"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"This is by far the Best pizza near me. I haven't bought pizza from anywhere else since..."</h3>
<p> - Kevin <i class="fab fa-facebook-f"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I couldn't stop eating the pizza. There's something in the crust they use that is impossible to describe other than heavenly."</h3>
<p> - Matthew <i class="fab fa-yelp"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I've yet to find the perfect pizza place until now and you guys nail it every time!"</h3>
<p> - J.C. <i class="fab fa-yelp"></i></p>
<div class="review-wrapper">
<h3 class="review">"The staff is super friendly and the pizza is awesome!! This is by far the best pizza I've had in Texas!!!"</h3>
<p> - Benjamin <i class="fab fa-facebook-f"></i></p>
</div>
<!-- Contact -->
<div class="footer-wrapper">
<footer>
<div class="footer-social">
<i class="fab fa-yelp social"></i>
<i class="fab fa-facebook-f social"></i>
<i class="fab fa-twitter social"></i>
</div>
<div class="footer-cred">
<p>Created by</p>
</div>
</footer>
</div>
</scroll-container>
</body>
</html>

You just need to add scroll-behavior: smooth; to your html style.
See the below Snippet:
/* Main Body Styles */
body {
margin: 0;
width: 100%;
height: auto;
box-sizing: border-box;
text-align: center;
background-color: #f9f9f9;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238b8b8b' fill-opacity='0.07' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
font-family: var(--main-font);
}
html{
scroll-behavior: smooth;
}
a {
cursor: pointer;
outline: none;
text-decoration: none;
}
hr {
border: 0;
height: 1px;
margin: 0 0 1.5em 0;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
.hr2 {
margin: 0 auto;
width: 50%;
}
.scroll-box {
scroll-behavior: smooth;
overflow-y: scroll;
}
:root {
--main-box-shadow:-5px 6px 59px -4px rgba(77,77,77,1);
--main-color: #d30404;
--main-text-shadow: 0px 3px 6px rgba(150, 150, 150, 1);
--fancy-font: 'Rock Salt', cursive;
--main-font: 'Raleway', sans-serif;
}
/* Header */
.header-image {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/header.jpg');
background-size:cover;
background-position: center;
background-attachment: fixed;
width: 100%;
height: 40em;
}
.header-wrapper {
padding-top: 1.5em;
}
.header-logo {
margin: 0;
padding-bottom: 1.25em;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 5em;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
letter-spacing: .115em;
}
.menu-btn {
border: none;
border-radius: 2em;
padding: 1em 3.25em;
background: #d30404;
color: #efefef;
box-shadow: 0px 30px 95px -15px rgba(0,0,0,.5);
font-size: 1.15em;
}
/* Hours of Operation */
.hours-wrapper {
background-color: red;
}
.hours-header {
margin: 0;
}
.hours-list {
list-style: none;
padding: 0;
}
/* Navbar */
.nav {
margin: 0;
}
.menu-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/menu.jpg');
}
.deals-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/dough.jpg');
}
.about-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg');
}
.contact-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/oven.jpg');
}
.box-logo {
margin: 0;
padding: 1.5em;
color: white;
font-size: 2em;
font-family: 'Rock Salt', cursive;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
}
.box {
box-shadow: inset -1px 1px 43px -9px rgba(0,0,0,1);
background-position: center;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 10em;
}
/* Menu */
.menu-title {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 4em;
margin: 0;
padding: 1em 0 .25em 0;
text-shadow: var(--main-text-shadow);
}
.menu-gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.menu-item {
margin: 2em 0;
}
.menu-pic {
width: auto;
height: 15em;
margin: .5em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
.pic2,
.pic6 {
width: 95%;
}
.menu-heading {
font-family: 'Raleway', sans-serif;
font-weight: bolder;
font-size: 1.5em;
}
/* Deals */
.deal-wrapper {
padding: 1.5em 0;
}
.deals {
margin: 0;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3em;
text-shadow: var(--main-text-shadow);
}
.deal-img {
width: auto;
height: 15em;
margin: 1em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
/* About */
.about {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3.5em;
margin: 0;
text-shadow: var(--main-text-shadow);
}
.store-pic {
margin: 2em 0;
width: 100%;
height: auto;
box-shadow: -1px 3px 17px -4px rgba(150,150,150,0.8);
}
.about-par {
font-family: 'Raleway', sans-serif;
font-size: 1.115em;
line-height: 180%;
padding: 1.35em 0;
margin: 0 auto;
max-width: 33ch;
}
/* Reviews */
.review-wrapper {
padding-top: 2em;
}
.review {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-family: 'Nunito', sans-serif;
font-style: italic;
max-width: 32ch;
margin: 0 auto;
}
.fa-yelp {
color: #d32323;
}
.fa-facebook-f {
color: #3b5998;
}
/* Footer */
.footer-wrapper {
background-color: #d30404;
box-shadow: inset 0px 1px 52px -10px rgba(0, 0, 0, .115);
width: 100%;
height: 5em;
display: flex;
justify-content: center;
}
.footer-social {
display: flex;
justify-content: space-around;
padding: .75em 0;
}
.social {
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
.footer-cred {
font-size: .75em;
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dinos Pizza</title>
<link rel="stylesheet" href="/Users/rogerjorns/Desktop/DinosMain/assets/index.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway|Rock+Salt|Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<!-- Header -->
<header class="header-image">
<div class="header-wrapper">
<h1 class="header-logo">Dino's Pizza</h1>
</div>
Check our Menu
</header>
<!-- Hours of Operation -->
<div class="hours-wrapper">
<h2 class="hours-header">Hours of Operation</h2>
<ul class="hours-list">
<li class="hours">** Closed Mondays **</li>
<li class="hours">Tues - Thurs: 11am - 8pm</li>
<li class="hours">Fri - Sat: 11am - 9pm</li>
<li class="hours">Sun: 2pm - 8pm</li>
</ul>
</div>
<!-- Navbar -->
<div class="nav">
<div href="#menu" class="menu-box box">
<h2 class="box-logo">Menu</h2>
</div>
<div href="#deals" class="deals-box box">
<h2 class="box-logo">Deals</h2>
</div>
<div href="#about" class="about-box box">
<h2 class="box-logo">About Us</h2>
</div>
<div href="#contact" class="contact-box box">
<h2 class="box-logo">Contact</h2>
</div>
</div>
<scroll-container>
<!-- Menu -->
<div class="menu-wrapper">
<h1 id="menu" class="menu-title title scrolling-box">Menu</h1>
<hr>
<div class="menu-gallery">
<div class="menu-item">
<img class="menu-pic pic1" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/allmeat.jpg" alt="">
<h3 class="menu-heading">All-Meat</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic2" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/hawaiian.jpg" alt="">
<h3 class="menu-heading">Hawaiian</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic3" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/veggie.jpg" alt="">
<h3 class="menu-heading">Veggie</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic4" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/onetopping.jpg" alt="">
<h3 class="menu-heading">One Topping</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic5" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/twotopping.jpg" alt="">
<h3 class="menu-heading">Two Topping</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic6" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/cheesybread.jpg" alt="">
<h3 class="menu-heading">Cheesy Bread</h3>
<p class="menu-price">$11.95</p>
</div>
</div>
</div>
<hr>
<!-- Deals -->
<div class="deal-wrapper">
<scroll-page><h2 id="deals" class="deals scrolling-box">Deals</h2></scroll-page>
<hr class="hr2">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal.jpg" alt="">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal2.jpg" alt="">
</div>
<!-- About Us -->
<hr>
<div class="about-wrapper">
<h2 id="about" class="about scrolling-box">About Us</h2>
<hr class="hr2">
<img class="store-pic" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg" alt="">
<hr class="hr2">
<p class="about-par">With aspirations to go into the restaurant business for many years,
our dream became a reality in May 2014 when we opened the doors to Dino's Pizza in the great city of Blue Mound, TX.
With a passion to serve up the best-tasting pizza and wings in town, made from quality ingredients,
we look forward to having you as a guest at our restaurant or delivering straight to your door.</p>
<br>
<p class="about-par">At Dino's Pizza we pride ourselves in serving our customers with the utmost professionalism, friendliness, integrity and cleanliness.
We make our pizza dough fresh from scratch daily.
Dino's is committed to serving delicious, hot home-made tasting pizzas and savory wings day in and day out.</p>
<br>
<p class="about-par">Dino's Pizza is family-owned and operated.
Our freshly made dough, homemade sauce, and real shredded cheese make a difference you will definitely taste!
And our appetizing, flavorful chicken wingsand dessert options are second to none!</p>
<p class="about-par">Don't just take our word for it...check out what our loyal customers have to say
on Yelp, then order and be prepared to taste
and experience awesomeness for yourself! The Dino's Way!</p>
</div>
<hr class="hr2">
<!-- Reviews -->
<div class="review-wrapper">
<h3 class="review">"I've never had anything less than an outstanding meal from Dino's."</h3>
<p> - Brittani <i class="fab fa-yelp"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"Pizza was some of the best I've ever eaten! We will definitely be ordering again."</h3>
<p> - Michelle <i class="fab fa-yelp"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"This is by far the Best pizza near me. I haven't bought pizza from anywhere else since..."</h3>
<p> - Kevin <i class="fab fa-facebook-f"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I couldn't stop eating the pizza. There's something in the crust they use that is impossible to describe other than heavenly."</h3>
<p> - Matthew <i class="fab fa-yelp"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I've yet to find the perfect pizza place until now and you guys nail it every time!"</h3>
<p> - J.C. <i class="fab fa-yelp"></i></p>
<div class="review-wrapper">
<h3 class="review">"The staff is super friendly and the pizza is awesome!! This is by far the best pizza I've had in Texas!!!"</h3>
<p> - Benjamin <i class="fab fa-facebook-f"></i></p>
</div>
<!-- Contact -->
<div class="footer-wrapper">
<footer>
<div class="footer-social">
<i class="fab fa-yelp social"></i>
<i class="fab fa-facebook-f social"></i>
<i class="fab fa-twitter social"></i>
</div>
<div class="footer-cred">
<p>Created by</p>
</div>
</footer>
</div>
</scroll-container>
</body>
</html>
You can test scroll behaviour at jsfiddle as well

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

How do I get this css to work with my html? - html

Related

CSS bottom, top, right, left element not working

Bottom border on button disappears on hover

footer cannot go underneath sidebar

making a left sidebar right compatible

Smooth Scrolling in CSS

Categories

Resources