We Keep Coding

is there a way for me to make a custom scrollbar appear on the left instead of the right?

I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the right side, but I want to move it over to the left. Is this possible?
body::-webkit-scrollbar {
width: 0px;
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 20px;
border: 3px solid transparent;
}
.CONT {
position: relative;
top: -25px;
left: 20px;
}
.CONT_2 {
position: relative;
top: 25px;
left: 20px;
height: 100px;
}
#words {
top: -2px;
left: 25px;
position: relative;
}
#words2 {
top: 2px;
left: 25px;
position: relative;
}
.DOC_CONTAINER {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 16px;
left: -4px;
color: #0088FF;
user-select: none;
cursor: pointer;
width: 280px;
z-index: 1;
overflow: hidden;
height: 46px;
}
#HTML_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 75px;
left: 15px;
}
#CSS_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 125px;
left: 15px;
}
#JAVA_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 175px;
left: 15px;
}
#JQUERY_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 225px;
left: 15px;
}
#LUA_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 275px;
left: 15px;
}
#ICON_1 {
position: absolute;
top: 0px;
left: 200px;
}
#icon2 {
position: absolute;
top: 2px;
left: 180px;
}
#ICON_2 {
position: absolute;
top: 4px;
left: 118px;
}
#icon3 {
position: absolute;
top: 2px;
left: 100px;
}
div.DOC_CONTAINER.expanded {
width: 390px;
height: 395px;
top: 16px;
left: -4px;
position: relative;
animation-name: Expand1;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div.WEBVAR_CONTAINER.EXPAND {
width: 390px;
height: 395px;
top: 35px;
left: -4px;
position: relative;
animation-name: Expand2;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes Expand2 {
0% {
height: 70px;
}
100% {
height: 280px;
}
}
#keyframes Expand1 {
0% {
height: 70px;
}
100% {
height: 421px;
}
}
#SEP2 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: absolute;
top: 65px;
left: -27px;
}
#SEP3 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: relative;
top: 420px;
left: -27px;
}
#SEP4 {
width: 370px;
height: 1px;
background-color: #2e2e2e;
position: absolute;
top: 135px;
left: 0px;
}
#SEP5 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: relative;
top: 420px;
left: -27px;
}
#CREDITS {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 30px;
left: 20px;
}
#ABOUT {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: absolute;
top: 100px;
left: 20px;
}
#COPY_RIGHT {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: absolute;
top: 170px;
left: 20px;
}
div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: #1f1f1f;
width: 350px;
height: 85vh;
top: 127px;
left: -5px;
position: absolute;
overflow-x: hidden;
text-align: justify;
border-bottom-right-radius: 20px;
}
.scroll::-webkit-scrollbar {
width: 5px;
color: #0088FF;
height: 25px;
}
.scroll::-webkit-scrollbar-track {
background: #2e2e2e;
}
.scroll::-webkit-scrollbar-thumb {
background: #0088FF;
}
.scroll::-webkit-scrollbar-thumb:hover {
background: #0088FF;
}
.flip {
transform: rotateX(180deg);
transition-duration: 0.2s;
}
.flip2 {
transform: rotateX(180deg);
transition-duration: 0.2s;
}
#MENU_LABEL {
color: #2E2E2E;
top: 11px;
left: 45vw;
position: absolute;
font-size: 20px;
font-family: verdana;
}
body {
height: 200vh;
background-color: #2E2E2E;
}
a {
color: #0088ff;
text-decoration: none;
}
a:hover {
color: #0056A3;
text-decoration: none;
}
.WEBVAR_CONTAINER {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 35px;
left: -4px;
color: #0088FF;
user-select: none;
cursor: pointer;
width: 390px;
z-index: 1;
overflow: hidden;
height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll">
<div class="DOC_CONTAINER">
<div id="SEP3"></div>
<div id="words">Documentation</div>
<div id="ICON_1"><i class="fa-solid fa-angle-down"></i></div>
<script>
$(document).ready(function() {
$('#words').click(function(event) {
event.preventDefault();
$(".DOC_CONTAINER").toggleClass('expanded');
$("#ICON_1").toggleClass("flip");
});
});
</script>
<div class="CONT">
<div id="HTML_DOC">HTML</div>
<div id="CSS_DOC">CSS</div>
<div id="JAVA_DOC">Javascript</div>
<div id="JQUERY_DOC">Jquery</div>
<div id="LUA_DOC">Lua</div>
</div>
</div>
<div id="SEP2"></div>
<div class="WEBVAR_CONTAINER">
<div id="SEP5"></div>
<div id="words2">WebVar</div>
<div id="ICON_2"><i class="fa-solid fa-angle-down"></i></div>
<script>
$(document).ready(function() {
$('#words2').click(function(event) {
event.preventDefault();
$(".WEBVAR_CONTAINER").toggleClass('EXPAND');
$("#ICON_2").toggleClass("flip2");
});
});
</script>
<div class="CONT_2">
<div id="CREDITS">Credits</div>
<div id="ABOUT">About</div>
<div id="COPY_RIGHT">Copyright</div>
</div>
</div>
<div id="SEP4"></div>
</div>
I tried setting float but that didn't work. If there is a solution please enlighten me.

Easy way to move scrollbar to the left side:
.scroll-at-left {
width: 200px;
height: 95vh;
overflow-y: scroll;
transform: rotateY(180deg);
}
.scroll-at-left>section {
padding: 0 1em;
transform: rotateY(180deg);
}
<div class="scroll-at-left">
<section>
<p>I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the left side, but I want to move it over to the right. Is this possible?</p>
<p>I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the left side, but I want to move it over to the right. Is this possible?</p>
</section>
</div>

You can set the div to right text align and the text to left text align.
.scroll-at-left {
width: 200px;
height: 95vh;
overflow-y: scroll;
direction: rtl;
}
.scroll-at-left section {
padding: 0 1em;
direction: ltr;
}
<div class="scroll-at-left">
<section>
<p>The scroll bar should be on the left side now when you scroll. The section is set to left text align while the div is set to right text align. This is just filler text. It has no purpose other than to fill. This is even more filler text. Why are you reading this</p>
</section>
</div>

CSS / HTML layering problems

I have made a toggle-switch in HTML with a label and styled in css. When the toggle is on its working as intended, but when its off the label overlaps with the switch.
The toggle container wont layer on top of the label element. I have tried with z-index and different positions, but to no avail.
Built with React, and the CSS is in the pre-made App.css file.
React // HTML // Javascript
const toggleClasses = classNames('wrg-toggle', {
'wrg-toggle--checked': toggle,
'wrg-toggle--disabled': disabled
}, className);
return(
<div
onMouseOver={() => setHoveredElement(5)}
onMouseLeave={() => setHoveredElement(null)}
>
<div onClick={triggerToggle} className={toggleClasses}>
<div className="wrg-toggle-container">
<label htmlFor="grid">Enable grid</label>
<div className="wrg-toggle-check">
<span>{ getIcon('checked')}</span>
</div>
<div className="wrg-toggle-uncheck">
<span>{ getIcon('unchecked')}</span>
</div>
</div>
<div className="wrg-toggle-circle"></div>
<input type="checkbox" aria-label="Toggle Button" className="wrg-toggle-input" />
</div>
</div>
);
};
CSS code
.wrg-toggle {
touch-action: pan-x;
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
margin-left: 5em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.wrg-toggle-input {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.wrg-toggle-check, .wrg-toggle-uncheck {
position: absolute;
width: 10px;
height: 10px;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
opacity: 0;
}
.wrg-toggle-check {
z-index: 3;
left: 8px;
position: absolute;
opacity: 0;
}
.wrg-toggle-uncheck {
opacity: 1;
right: 10px;
top: 2px;
position:inherit;
z-index: 50;
opacity: 1;
background-color: white;
}
label {
float: right;
right: 0.5em;
width: 8em;
margin-left: 0px;
text-align: center;
margin-right: 20px;
background-color: #8E9092;
border-radius: 30px;
border-top-right-radius: 0;
border-bottom-right-radius: 0 ;
height: 24px;
border: solid 1px;
top: -1.3px;
position: relative;
z-index: 0;
}
.wrg-toggle-uncheck span,
.wrg-toggle-check span {
align-items: center;
display: flex;
height: 10px;
justify-content: center;
position: relative;
width: 10px;
}
.wrg-toggle-container{
width: 50px;
height: 24px;
padding: 0;
left: 10em;
border-radius: 30px;
background-color: #f5f6f8;
transition: all .2s ease;
border: solid 1px;
z-index: 100;
}
.wrg-toggle-container .wrg-toggle-check{
width: 50px;
height: 24px;
left: -0.3px;
border-radius: 30px;
background-color:#61dafb;
border: solid 1px;
top: 0px;
}
.wrg-toggle-circle{
transition: all .5s cubic-bezier(.23,1,.32,1) 0ms;
position: absolute;
top: 3px;
left: 1px;
width: 22px;
height: 21px;
border: 1px solid #4d4d4d;
border-radius: 50%;
background-color: #fafafa;
box-sizing: border-box;
z-index: 30;
}
.wrg-toggle--checked .wrg-toggle-check{
opacity: 1;
position:relative;
border-top: 2px;
border-left: -3px;
}
.wrg-toggle--checked .wrg-toggle-uncheck {
opacity: 0;
border: 0;
}
.wrg-toggle--checked .wrg-toggle-circle {
left: 27px;
}
.wrg-toggle--checked .wrg-toggle-circle:after {
content: "✔";
color: green;
}

Solved!
added a
.wrg-toggle-container .wrg-toggle-uncheck {
position: absolute;
z-index: 1;
}

CSS curtains, it rimains opened when the site is runned up

As u can see, my curtain is open every time u first run up the site. The curtain opens when u click Account and closes when u click it again. I need to have the curtain closes and open only when someone clicks Account. Then, I need also that, when u click Account, the world became of the gradient of the background and the background himself get white.
function open_ac_c() {
document.getElementById("ac_c").style.height = "100%";
document.querySelector('button.account_open_button').style.display = "none"
document.querySelector('button.account_close_button').style.display = "block"
}
function close_ac_c() {
document.getElementById("ac_c").style.height = "0%";
document.querySelector('button.account_open_button').style.display = "block"
document.querySelector('button.account_close_button').style.display = "none"
}
body {
background-color: #6f0da8;
margin: 0;
}
.topnav {
background: linear-gradient(90deg, #2c8a86, #1dada7, #04d6ce, #00fff6);
padding: 30px;
float: center;
}
.home {
background-color: transparent;
float: center;
position: absolute;
left: 0px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
.home:hover{
background-color: #048b59;
}
.account{
background-color: transparent;
float: center;
position: absolute;
left: 86px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
body {
font-family: 'Lato', sans-serif;
}
.ac_curtain {
position: fixed;
top: 1;
left: 100px;
background-color: transparent;
transition: 1s;
overflow: hidden;
}
.ac_curtain a {
padding: 8px;
text-decoration: none;
font-size: 20px;
color: #ffffff;
display: block;
}
.account_open_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 28px 53px;;
}
.account_close_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 30px 53px;;
}
<div class="topnav">
<dive class="home">Home</dive>
<dive class="account">Account</div>
</div>
<div id="ac_c" class="ac_curtain">
<div class="overlay-content">
Log in
Log out
Dashboard
Settings
</div>
</div>
<button onclick="open_ac_c()" class="account_open_button"></button>
<button onclick="close_ac_c()" class="account_close_button"></button>

On initial load, as the height of ac_curtain is not defined, hence it has a default height and thus it gets displayed on the initial load. Please add height: 0 in the ac_curtain class.
function open_ac_c() {
document.getElementById("ac_c").style.height = "100%";
document.querySelector('button.account_open_button').style.display = "none"
document.querySelector('button.account_close_button').style.display = "block"
}
function close_ac_c() {
document.getElementById("ac_c").style.height = "0%";
document.querySelector('button.account_open_button').style.display = "block"
document.querySelector('button.account_close_button').style.display = "none"
}
body {
background-color: #6f0da8;
margin: 0;
}
.topnav {
background: linear-gradient(90deg, #2c8a86, #1dada7, #04d6ce, #00fff6);
padding: 30px;
float: center;
}
.home {
background-color: transparent;
float: center;
position: absolute;
left: 0px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
.home:hover{
background-color: #048b59;
}
.account{
background-color: transparent;
float: center;
position: absolute;
left: 86px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
body {
font-family: 'Lato', sans-serif;
}
.ac_curtain {
position: fixed;
top: 1;
left: 100px;
background-color: transparent;
transition: 1s;
overflow: hidden;
height: 0;
}
.ac_curtain a {
padding: 8px;
text-decoration: none;
font-size: 20px;
color: #ffffff;
display: block;
}
.account_open_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 28px 53px;;
}
.account_close_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 30px 53px;;
}
<div class="topnav">
<div class="home">Home</div>
<div class="account">Account</div>
</div>
<div id="ac_c" class="ac_curtain">
<div class="overlay-content">
Log in
Log out
Dashboard
Settings
</div>
</div>
<button onclick="close_ac_c()" class="account_close_button"></button>
<button onclick="open_ac_c()" class="account_open_button"></button>

How to create this icon with text inside?

I have already created burst put facing problem with putting number inside burst.So i need help for fix it
Need to look like Image burst.
#burst-8 {
background: #00aaad;
width: 15px;
height: 15px;
margin: 4px;
color: white;
position: absolute;
text-align: center;
transform: rotate(45deg);
}
#burst-8:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 15px;
color: white;
width: 15px;
background: #00aaad;
transform: rotate(45deg);
}
<div id="burst-8"></div>

Not exactly sure what you want, see if the following answer helps.
#burst-8 {
background: #00aaad;
width: 15px;
height: 15px;
margin: 4px;
font-size: 12px;
position: absolute;
text-align: center;
}
#burst-8:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 15px;
color: white;
width: 15px;
background: #00aaad;
transform: rotate(45deg);
z-index: -1;
}
<div id="burst-8">99</div>

Try setting content property
#burst-8 {
background: #00aaad;
width: 15px;
height: 15px;
margin: 4px;
color: white;
position: absolute;
text-align: center;
transform: rotate(-45deg);
}
#burst-8:after {
content: "99";
position: absolute;
top: 0;
left: 0;
height: 15px;
color: white;
width: 15px;
font-size: 13px;
background: #00aaad;
transform: rotate(45deg);
}
<div id="burst-8"></div>
Using attr()
#burst-8 {
background: #00aaad;
width: 15px;
height: 15px;
margin: 4px;
color: white;
position: absolute;
text-align: center;
transform: rotate(-45deg);
}
#burst-8:after {
content: attr(data-burst);
position: absolute;
top: 0;
left: 0;
height: 15px;
color: white;
width: 15px;
font-size: 13px;
background: #00aaad;
transform: rotate(45deg);
}
<div id="burst-8" data-burst="99"></div>

First you don't need to rotate the div element rotate only pseudo element and
then setting pseudo element to the lower level than div element with z-index can fix it.
Positions work as layering of elements and z-index handles layer order.
#burst-8 {
background: #00aaad;
width: 25px;
height: 25px;
margin: 4px;
color: white;
position: absolute;
text-align: center;
font-size: 12px;
line-height:25px;
}
#burst-8:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background: #00aaad;
transform: rotate(45deg);
z-index: -1;
}
<div id="burst-8">99</div>

#burst-8 {
background: #00aaad;
width: 15px;
height: 15px;
margin: 4px;
font-size: 12px;
position: absolute;
text-align: center;
}
#burst-8:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 15px;
color: white;
width: 15px;
background: #00aaad;
transform: rotate(45deg);
z-index: -1;
}
<div id="burst-8">99</div>

How can I make an image slider which makes image move right to left?

Hey guys I'm making an image slider on my website and I've got the main functionality down but I want there to be a transition where you see the next image being pulled into view instead of just appearing there. Kind of like the one on this site.
https://allisonstexasbbq.com/
Also here's a link to my website, the code posted below is incomplete because there's too much code to post here so here's my fiddle.
http://jsfiddle.net/0ekqLu4c/
p.s I also realized you can't see my images cause there saved to my machine. Unfortunately I don't know how to get around this.
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/*HEADER*/
.logo {
text-transform: uppercase;
color: white;
font-family: 'Staatliches';
font-size: 10rem;
letter-spacing: 20px;
font-weight: bolder;
position: relative;
left: 800px;
top: 150px;
}
#header {
background: url('img/mex-9.jpg');
background-attachment: fixed;
background-size: cover;
width: 100vw;
height: 100vh;
}
.btn-1, .btn-2, .btn-3 {
background-color: white;
width: 62px;
margin-bottom: 9px;
height: 8px;
border-radius: 5px;
}
.btn-1 {
background-color: lightgreen;
position: relative;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes btn-1-animate {
from {width: 62px; left: 0px; top: 0px;}
to { top: 75px; left: -12px; width: 84px;}
}
#keyframes btn-1-reverse {
from {top: 75px; left: -12px; width: 84px;}
to {top: 0px; left: 0px; width: 62px;}
}
.btn-2 {
border-radius: none;
background-color: white;
position: relative;
animation-duration: 0.3s;
animation-fill-mode: forwards;
z-index: 1;
}
#keyframes btn-2-animate {
from {top: 0px; left: 0px; width: 62px}
to {top: 58px; left: 65px; width: 117px;}
}
#keyframes btn-2-reverse {
from {top: 58px; left: 65px; width: 117px;}
to {top: 0px; left: 0px; width: 62px;}
}
.btn-3 {
background-color: #ff4d4d;
position: relative;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes btn-3-animate {
from {top: 0px; left: 0px; width: 62px;}
to {top: 41px; left: 180px; width: 160px;}
}
#keyframes btn-3-reverse {
from {top: 41px; left: 180px; width: 160px;}
to {top: 0px; left: 0px; width: 62px;}
}
.side-menu, .nav-btn {
padding-top: 100px;
padding-left: 50px;
}
.nav-btn {
width: 70px;
position: fixed;
top: 5px;
z-index: 10;
}
#header ul {
border-radius: 10px;
margin: 0;
list-style-type: none;
background-color: white;
position: fixed;
top: 200px;
text-align: center;
box-shadow: -15px 0px lightgreen;
}
.side-menu {
position: relative;
left: -2370px;
transition: all 0.2s ease;
z-index: 1;
}
.fa-times {
position: fixed;
left: -380px;
top: 200px;
font-size: 2rem;
color: white;
transition: all 0.2s ease;
}
.fa-times:hover {
transform: scale(1.3);
cursor: pointer;
}
#header li a {
font-family: 'Kumar One Outline';
text-decoration: none;
font-size: 2.2rem;
padding: 15px;
color: grey;
margin-bottom: 15px;
}
#header li:hover {
transform: scale(1.15);
}
#header li {
margin: 15px;
padding-left: 10px;
padding-right: 50px;
transition: all 0.35s ease;
}
#header li a:hover {
cursor: pointer;
font-weight: bolder;
color: #96ea96;
}
#header p {
float: right;
font-weight: bold;
font-size: 3.2rem;
margin-top: -10px;
margin-right: 100px;
color: white;
font-family: 'Cedarville Cursive';
}
/*ABOUT*/
#about .container {
background-color: #339966;
width: 100vw;
overflow: auto;
padding-bottom: -400px;
}
#about h1 {
margin-top: 0;
font-family: 'Cedarville Cursive';
font-size: 3.5rem;
color: white;
text-align: center;
padding-top: 5px;
}
.line {
background-color: orange;
width: 0px;
height: 4px;
padding: 0;
border-radius: 5px;
text-align: center;
margin-left: 560px;
position: relative;
top: 90px;
transition: all 1s ease;
}
#about p {
font-family: 'Josefin Sans';
color: white;
font-size: 1.8rem;
width: 35%;
margin-left: 130px;
}
.image-slider {
background-color: grey;
background-image: url(img/f-0.jpeg);
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
width: 35%;
height: 250px;
margin-right: 160px;
padding-bottom: 100px;
position: relative;
top: -380px;
float: right;
}
.fa-caret-down {
color: white;
font-size: 4rem;
margin-top: 29%;
position: relative;
}
.left {
transform: rotate(90deg);
left: -40px;
}
.right {
float: right;
transform: rotate(-90deg);
left: 40px;
}
.left:hover, .right:hover {
cursor: pointer;
}
/*MENU*/
#menu .container {
background-color: #e6ac00;
width: 100vw;
margin-top: -330px;
clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
overflow: hidden;
}
.shape-wrap {
position: relative;
}
.shape-1 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
top: 50px;
left: -190px;
display: inline-block;
margin: 0;
}
.shape-2 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
top: 25px;
display: inline-block;
left: 10px;
}
.shape-3 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #40bf80;
border-bottom: 25px solid transparent;
position: relative;
left: -195px;
display: inline-block;
top: 25px;
}
.shape-4 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
left: -40px;
display: inline-block;
top: 85px;
}
.shape-5 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
left: -298px;
display: inline-block;
top: 110px;
}
.shape-6 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
top: 230px;
display: inline-block;
left: -351px;
}
.shape-7 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
left: -90px;
display: inline-block;
top: 265px;
}
.shape-8 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
top: 290px;
display: inline-block;
left: -405px;
}
.shape-9 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
left: -140px;
display: inline-block;
top: 325px;
}
.shape-10 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #40bf80;
border-bottom: 25px solid transparent;
position: relative;
left: -410px;
display: inline-block;
top: 325px;
}
#menu h1 {
font-size: 7rem;
color: white;
font-family: 'Cedarville Cursive';
margin-left: 220px;
position: relative;
top: -450px;
}
.line-2 {
background-color: #339966;
width: 0px;
height: 5px;
border-radius: 5px;
position: relative;
top: -600px;
left: 45px;
transition: all 1s ease;
}
.platter {
font-size: 2.3rem;
font-family: 'Cedarville Cursive';
color: #339966;
margin-left: 60px;
}
.platter-info {
font-size: 1.2rem;
font-family: 'Josefin Sans';
color: white;
margin-left: 120px;
margin-top: -50px;
margin-bottom: 30px;
}
.item {
font-family: 'Josefin Sans';
font-size: 1.3rem;
}
.price {
font-size: 1.3rem;
font-family: 'Josefin Sans';
display: block;
margin-left: 400px;
margin-bottom: -40px;
position: relative;
bottom: 40px;
}
.col-1 {
margin-left: 200px;
margin-top: 0px;
position: relative;
top: -550px;
}
.plat-4 {
position: relative;
left: 120px;
}
.plat-5 {
position: relative;
left: 75px;
}
.plat-6 {
position: relative;
left: 85px;
}
.info4tacos {
position: relative;
left: 70px;
margin-bottom: 35px;
}
.plat-7 {
position: relative;
left: 100px;
}
.plat-8 {
position: relative;
right: 50px;
}
.plat-9 {
position: relative;
left: 30px;
}
.info4breakfast {
position: relative;
left: 50px;
}
.col-2 {
float: right;
margin-top: -3185px;
margin-right: 200px;
}
.plat-2 {
position: relative;
left: 70px;
top: 15px;
}
.plat-3 {
position: relative;
left: 60px;
}
.right-border {
float: right;
transform: rotate(180deg);
position: relative;
top: 2400px;
right: 10px;
}
/*HOURS*/
#hours .container {
background-color: #339966;
width: 100vw;
position: relative;
margin-top: -470px;
clip-path: polygon(0% 4%, 5% 0%, 95% 0%, 100% 4%, 100% 100%, 0% 100%);
overflow: hidden;
}
#hours h1 {
text-align: center;
font-size: 4rem;
color: white;
font-family: 'Cedarville Cursive';
padding-bottom: 100px;
margin-top: 0px;
position: relative;
bottom: 80px;
}
.day, .hour {
text-align: center;
background-color: white;
font-size: 2.5rem;
color: #666;
padding-top: 10px;
margin-bottom: 10px;
width: 220px;
font-family: 'Josefin Sans';
border-right: 12px solid #40bf80;
}
.grid {
display: grid;
grid-template-columns: 270px 270px;
grid-auto-rows: 65px;
grid-gap: 15px;
position: relative;
left: 50%;
margin-left: -272.5px;
margin-top: -220px;
}
.move3 {
top: 85px;
}
.move10 {
position: relative;
top: 265px;
}
.rotate {
transform: rotate(180deg);
width: 600px;
}
.hours-line, .hours-line2 {
width: 500px;
height: 10px;
border-radius: 5px;
position: relative;
background-color: #ff4d4d;
top: -300px;
left: 30px;
}
.hours-line2 {
background-color: lightgreen;
left: 820px;
top: -305px;
}
.lom {
transform: rotate(-180deg);
}
/*CONTACT*/
.back-wrapper {
background-color: #595959;
width: 100vw;
height: 650px;
clip-path: polygon(0 0, 15% 15%, 85% 15%, 100% 0, 100% 100%, 0 100%);
margin-top: -100px;
overflow: hidden;
}
.contact-wrapper:before {
content: '';
background-color: #339966;
width: 250px;
height: 130px;
position: absolute;
left: 50%;
margin-left: -125px;
top: -91px;
clip-path: polygon(15% 1%, 85% 0, 100% 30%, 100% 70%, 85% 100%, 15% 100%, 0% 70%, 0% 30%);
}
.contact-wrapper:after {
content: '';
background-color: #339966;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
width: 65px;
height: 65px;
position: absolute;
top: 65px;
left: 50%;
margin-left: -32.5px;
}
.contact-wrapper {
display: flex;
justify-content: space-between;
background-color: #404040;
position: relative;
margin-top: -552px;
}
.loc, .con {
flex-basis: 48%;
}
.contact-wrapper h1 {
font-family: 'Cedarville Cursive';
color: white;
font-size: 5rem;
margin-bottom: 0;
margin-top: 0;
text-align: center;
}
.split {
background-color: orange;
width: 3px;
height: 300px;
position: relative;
top: 160px;
}
.upArrow {
font-size: 2.5rem;
color: #404040;
position: absolute;
z-index: 1;
left: 50%;
top: -55px;
margin-left: -20px;
cursor: pointer;
transition: all 0.2s ease;
}
.upArrow:hover {
transform: scale(1.25);
color: orange;
}
.to-top {
font-family: 'Josefin Sans';
color: #404004;
font-size: 2rem;
position: absolute;
left: 50%;
margin-left: -85px;
font-weight: bold;
}
.phone, .email {
color: white;
font-size: 1.7rem;
font-family: 'Josefin Sans';
text-align: center;
margin-top: 0;
margin-bottom: 0;
margin-left: 70px;
}
textarea {
outline: none;
background-color: #333;
border: none;
margin: 15px;
position: relative;
left: 50%;
margin-left: -158.75px;
color: white;
}
input {
margin: 20px;
font-size: 1.25rem;
position: relative;
left: -95px;
top: 10px;
background-color: grey;
border: none;
border-radius: 4px;
transition: all 0.2s ease;
}
input:hover {
cursor: pointer;
color: orange;
}
.review {
font-size: 1.5rem;
color: white;
font-family: 'Josefin Sans';
position: relative;
left: 170px;
top: -20px;
}
.fab {
font-size: 3.3rem;
margin-right: 15px;
position: relative;
left: 385px;
top: -85px;
}
.recker {
transform: rotate(90deg);
width: 300px;
height: 15px;
position: relative;
background-color: #595959;
left: 30px;
top: 120px;
border-radius: 10px;
}
.main {
width: 400px;
height: 20px;
position: relative;
background-color: #595959;
left: 80px;
top: 100px;
border-radius: 10px;
}
.rd {
transform: rotate(90deg);
width: 300px;
height: 10px;
position: relative;
background-color: #595959;
left: 280px;
top: 80px;
border-radius: 10px
}
.fa-map-pin {
font-size: 4rem;
color: orange;
position: relative;
left: 290px;
top: -35px;
}
.loc p {
position: relative;
color: white;
font-family: 'Josefin Sans';
}
.con-border, .loc-border {
position: absolute;
}
.loc-border {
transform: rotate(180deg);
}
/*FOOTER*/
#footer .container {
width: 100%;
background-color: #595959;
text-align: center;
position: relative;
margin-top: -54px;
margin-bottom: 0;
}
#footer h1 {
margin: 0;
font-family: 'Josefin Sans';
font-weight: bolder;
font-size: 1.5rem;
padding: 15px;
color: darkgrey;
}