We Keep Coding

Why are these input and text parts on the right side, if they supposed to be on the center?

I have a problem whit my new project. A login system. I did it from a youtube video: https://youtu.be/cxm5bCCa9OA . Everything works perfectly, It just bothers me, that my text is right-sided instead of centered, but the YouTuber's text is fine. I think I have the same code. I think The problem might be with the form's border or the positioning of my Texts.
My Log in system:
The YouTuber's Log in system:
My code is also here:
.box {
top: 80px;
justify-content: center;
align-items: center;
position: relative;
width: 380px;
height: 420px;
background: #000000;
border-radius: 8px;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
}
.box::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
#keyframes animate {
/*colorwave line animation*/
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
display: flex;
flex-direction: column;
}
.form h4 {
color: #7ed6df;
font-weight: 500;
text-align: center;
letter-spacing: 0.05em;
font-size: 3em;
font-style: italic;
}
.inputBox {
position: relative;
width: 300px;
margin-top: 35px;
}
.inputBox input {
position: relative;
width: 90%;
padding: 20px 10px 10px;
background: transparent;
border: none;
outline: none;
color: #535c68;
font-size: 0.5em;
letter-spacing: 0.06em;
z-index: 10;
}
.inputBox span {
position: absolute;
left: 0;
padding: 20px 0px 10px;
font-size: 0.7em;
color: #8f8f8f;
pointer-events: none;
letter-spacing: 0.03em;
}
.inputBox input:valid~span,
.inputBox input:focus~span {
color: #7ed6df;
transform: translateX(0px) translateY(-34px);
font-size: 0.7em
}
.inputBox i {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #7ed6df;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputBox input:valid~i,
.inputBox input:focus~i {
height: 40px;
}
.loglinks {
display: flex;
justify-content: space-between;
}
.loglinks a {
margin: 15px;
font-size: 0.4em;
color: #8f8f8f;
text-decoration: none;
}
.loglinks a:hover,
.loglinks a:nth-child(2) {
color: #7ed6df;
}
input[type="submit"] {
border: none;
outline: none;
background: #7ed6df;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
input[type="submit"]:active {
opacity: 0.8;
}
<link href="https://fonts.googleapis.com/css2?family=Clicker+Script&family=IM+Fell+DW+Pica&family=Playfair+Display+SC:ital#1&family=Yeseva+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f90175d7f9.js" crossorigin="anonymous"></script>
<center>
<div class="box">
<div class="form">
<h4>Log In
<h4>
<div class="inputBox">
<input type="text" required="required">
<span>Username</span>
<i></i>
</div>
<div class="inputBox">
<input type="password" required="required">
<span>Password</span>
<i></i>
</div>
<div class="loglinks">
Forgot Password
Sign up
</div>
<input type="submit" value="Enter">
</div>
</div>
</center>

To center those inputs you may add a margin-left and a margin-right of auto to .inputBox. Or simply change this:
.inputBox {
position: relative;
width: 300px;
margin-top: 35px; /** change this */
}
into this:
.inputBox {
position: relative;
width: 300px;
margin: 35px auto 0; /** into that */
/**
* the above rule means:
* - 35px as margin top
* - left and right margins set to "auto" which horizontally centers your ".inputBox"
* - 0px as margin bottom
*/
}
And here's a live demo (made some changes to your code because you had some tags that were not closed)
.box {
top: 80px;
justify-content: center;
align-items: center;
position: relative;
width: 380px;
height: 420px;
background: #000000;
border-radius: 8px;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
}
.box::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
#keyframes animate {
/*colorwave line animation*/
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
display: flex;
flex-direction: column;
}
.form h4 {
color: #7ed6df;
font-weight: 500;
text-align: center;
letter-spacing: 0.05em;
font-size: 3em;
font-style: italic;
}
.inputBox {
position: relative;
width: 300px;
margin: 35px auto 0;
}
.inputBox input {
position: relative;
width: 90%;
padding: 20px 10px 10px;
background: transparent;
border: none;
outline: none;
color: #535c68;
font-size: 0.5em;
letter-spacing: 0.06em;
z-index: 10;
}
.inputBox span {
position: absolute;
left: 0;
padding: 20px 0px 10px;
font-size: 0.7em;
color: #8f8f8f;
pointer-events: none;
letter-spacing: 0.03em;
}
.inputBox input:valid~span,
.inputBox input:focus~span {
color: #7ed6df;
transform: translateX(0px) translateY(-34px);
font-size: 0.7em
}
.inputBox i {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #7ed6df;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputBox input:valid~i,
.inputBox input:focus~i {
height: 40px;
}
.loglinks {
display: flex;
justify-content: space-between;
}
.loglinks a {
margin: 15px;
font-size: 0.4em;
color: #8f8f8f;
text-decoration: none;
}
.loglinks a:hover,
.loglinks a:nth-child(2) {
color: #7ed6df;
}
input[type="submit"] {
border: none;
outline: none;
background: #7ed6df;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
input[type="submit"]:active {
opacity: 0.8;
}
<link href="https://fonts.googleapis.com/css2?family=Clicker+Script&family=IM+Fell+DW+Pica&family=Playfair+Display+SC:ital#1&family=Yeseva+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f90175d7f9.js" crossorigin="anonymous"></script>
<div class="box">
<div class="form">
<h4>Log In</h4>
<div class="inputBox">
<input type="text" required="required">
<span>Username</span>
<i></i>
</div>
<div class="inputBox">
<input type="password" required="required">
<span>Password</span>
<i></i>
</div>
<div class="loglinks">
Forgot Password
Sign up
</div>
<input type="submit" value="Enter">
</div>
</div>

Compared to the video, you are missing a padding: 50px 40px; in the .form part.
Try replacing your .form css with this:
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
padding: 50px 40px;
display: flex;
flex-direction: column;
}
UPDATE: furthermore, there is an issue with the <h4> tag which is opened twice. Maybe you should have <h4>Log In</h4>.

Buttons don't work after creating a Modal

I'm working on a project and I need to add a modal to it, before creating my modal, Buttons were working fine and functions were executing normaly, but after creating the modal, only the modal buttons are working, and the page buttons don't, I tried removing the html of the modal and they worked fine(that's how I understood that problem is with the modal), I also tried to remove the overlay but nothing changed .
I've just tried to remove the css of the modal and the overlay and It's working fine, so maybe there's a problem there ?
Here's the code of the modal:
//modal part
const modal = document.querySelector('.modal');
const overlay = document.querySelector('#overlay');
const closeModalBtn = document.querySelector('.close-btn');
const backProjectBtn = document.querySelector('.join-btn');
const selectRewardBtn = document.querySelector('.select-reward-btn');
backProjectBtn.addEventListener('click', openModal)
function openModal(){
modal.classList.add('active');
overlay.classList.add('active');
}
closeModalBtn.addEventListener('click', closeModal);
function closeModal(){
modal.classList.remove('active');
overlay.classList.remove('active');
}
/* modal styling*/
.modal{
background: white;
border: 1px solid white;
border-radius: 15px;
padding: 30px;
width: 60%;
position: absolute;
top: 170px;
z-index: 10;
opacity: 0;
}
.modal.active{
opacity: 1;
}
.modal-header{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#overlay{
background: hsla(0, 0%, 48%, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
}
#overlay.active{
opacity: 1;
pointer-events: none;
}
.close-btn{
background: none;
font-size: 2rem;
font-weight: bolder;
border: none;
cursor: pointer;
}
.pledging-block{
display: flex;
flex-direction: row;
align-items: flex-start;
width: 90%;
border: 0.5px solid hsl(0, 0%, 80%);
border-radius: 15px;
margin-top: 30px;
margin-bottom: 30px;
padding: 20px;
}
span{
font-weight: lighter;
color: hsl(176, 50%, 47%);
margin-left: 5px;
font-size: 1.1rem;
}
.header-infos-mahogany{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.title{
font-weight: bolder;
font-size: 1.5rem;
}
.money-block{
border-top: 0.5px solid hsl(0, 0%, 80%);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
opacity: 0;
}
.infos-mahogany-pladging, .black-pledging-radio{
display: flex;
flex-direction: column;
}
.left{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.header-infos-bamboo, .header-infos-black, .header-infos-mahogany{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.enter-value{
width: 25%;
border: hsl(176, 50%, 47%) 1px solid;
border-radius: 25px;
font-size: 1.3rem;
padding-top: 7px;
padding-bottom: 7px;
}
.radio-label{
width: 25px;
height: 25px;
border: 1px solid hsl(176, 50%, 47%);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.radio-label .checkmark{
width: calc(100% - 5%);
height: calc(100% - 5%);
background-color: hsl(176, 50%, 47%);
border-radius: 50%;
display: none;
}
.radio-label input{
display: none;
}
.radio-label input:checked + .checkmark{
display: inline-block;
}
.label-part{
width: 10%;
}
.mahogany-pledging{
opacity: 0.5;
pointer-events: none;
}
<div class="interactive-div">
<button class="joinbtn">Backthisproject</button>
<button class="bookmark-btn"><img src="images/icon-bookmark.svg" class="bookmark-icon"><div class="text">Bookmark</div></button>
</div>
<div class="modal" >
<div class="modal-header">
<h1>Back this project </h1>
<button class="close-btn">×</button>
</div>
<p>Want to support us in bringing Mastercraft Bamboo Monitor Riser out in the world?</p>
<div class="no-reward-pledging pledging-block">
<div class="label-part">
<label class="radio-label">
<input type="radio" id="no-reward-pledging-radio" name="radio">
<span class="checkmark"></span>
</label>
</div>
<div class="infos-no-reward">
<div class="title">Plegde with no reward</div>
<p>Choose to support us without a reward if you simply believe in our project. As a backer, you will be signed up to receive product updates via email.</p>
<div class="money-block">
<p>Enter your plegde</p>
<div class="entering-money">
<input type="number" class="enter-value">
<button class="continue-btn">Continue</button>
</div>
</div>
</div>
</div>
<div class="bamboo-pledging pledging-block">
<div class="label-part">
<label class="radio-label">
<input type="radio" id="no-reward-pledging-radio" name="radio">
<span class="checkmark"></span>
</label>
</div>
<div class="infos-bamboo-pladging">
<div class="header-infos-bamboo">
<div class="title">Bamboo Stand <span> Pledge $25 or more</span></div>
<div class="left">
<div class="num-left">101</div>
<p class="left">left</p>
</div>
</div>
<p>You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign, and you’ll be added to a special Backer member list..</p>
<div class="money-block">
<p>Enter your plegde</p>
<div class="entering-money">
<input type="number" class="enter-value">
<button class="continue-btn">Continue</button>
</div>
</div>
</div>
</div>
<!-- I removed some elements as they are almost identical -->
I removed some elements as they are almost identical

I solved the problem by changing the css of my modal
.modal{
background: white;
border: 1px solid white;
border-radius: 15px;
padding: 30px;
width: 60%;
position: absolute;
top: 100%;
left: 50%;
z-index: 10;
transform: translate(-50%, -50%) scale(0);
}
.modal.active{
transform: translate(-50%, -50%) scale(1);
}

HTML/CSS Hamburger Menu - where to place the div for hamburger menu?

I have coded in the header for my school project, and now trying to add a hamburger menu for tablets & mobile versions. I wish to have the hamburger menu on the right side of the screen and the logo on the left side like it already is, the rest of the information like the nav, opening hours, phone number, etc will all be inside the hamburger menu.
The thing I am sitting with is that, I don't really know where to place the div for the hamburger menu. I have built the header for pc screen-size but it all does mess up when I drag the screen to the size of the mobile screen. After watching tutorials and reading about the hamburger menu, I am still sitting here not knowing where to place the div for the hamburger menu and have everything except the logo inside the hamburger menu for tablets and mobile.
Added the code for a header in the snippet, it is showing up weird in the snippet. Probably because I have written a lot wrong, but it still works though:
So this is the full HTML and CSS code for the header:
let popup = document.getElementById("Contact-popup");
popup.addEventListener("click", () => {
document.getElementById("contact_popup_page").style.display = "block";
});
let close = document.getElementById("close");
/** HEADER **/
body {
margin: 0 10%;
font-size: 12px;
}
a {
text-decoration: none;
color: #707070;
}
header {
box-shadow: 2px 2px 2px 3px rgb(0, 0, 0, 0.1);
position: fixed;
width: 80%;
background-color: #fff;
z-index: 100;
margin-top: 0;
}
.header__main {
width: 100%;
display: grid;
grid-template-areas: "box1 box2";
color: #707070;
}
.logo__section {
height: 100px;
grid-area: box1;
margin-left: 2.5%;
width: 40%;
}
.header__main>.logo__section>a>img {
width: 100%;
}
.nav__topRight {
width: 100%;
height: 100px;
grid-area: box2;
color: #000;
flex-direction: column;
margin-top: 0;
align-items: flex-end;
}
.flexbox1 {
margin: 1% 0 3% 0;
}
.nav__top {
display: flex;
justify-content: flex-end;
}
.nav__middle {
display: flex;
justify-content: flex-end;
margin: 5% 3% 0 0;
font-size: 1.8rem;
color: #707070;
}
/** Contact */
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
.contact {
font-size: 1.8rem;
color: #707070;
}
.contact__info {
margin-left: 5%;
}
.contact__info>p {
color: #707070;
display: inline;
font-size: 1.8rem;
margin: 0 15px 0 5px;
}
.contact_popup_page {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
}
.close,
.closer {
display: flex;
justify-content: right;
position: absolute;
font-size: 50px;
}
textarea:focus,
input:focus {
border-color: #fdb834 !important;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
input:focus:-ms-input-placeholder {
color: transparent;
}
textarea:focus::-webkit-input-placeholder {
color: transparent;
}
textarea:focus:-moz-placeholder {
color: transparent;
}
textarea:focus::-moz-placeholder {
color: transparent;
}
textarea:focus:-ms-input-placeholder {
color: transparent;
}
input::-webkit-input-placeholder {
color: #707070;
}
input:-moz-placeholder {
color: #707070;
}
input::-moz-placeholder {
color: #707070;
}
input:-ms-input-placeholder {
color: #707070;
}
textarea::-webkit-input-placeholder {
color: #707070;
}
textarea:-moz-placeholder {
color: #707070;
}
textarea::-moz-placeholder {
color: #707070;
}
textarea:-ms-input-placeholder {
color: #707070;
}
label {
display: block;
margin: 0;
}
/*---------------------------------------------*/
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
/*//////////////////////////////////////////////////////////////////
[ utility ]*/
/*//////////////////////////////////////////////////////////////////
[ Contact ]*/
.container-contact {
width: 100%;
min-height: 300px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 5px;
}
.wrap-contact {
width: 500px;
background: #fff;
border-radius: 2px;
padding: 30px 40px 40px 40px;
}
/*==================================================================
[ Form ]*/
.contact-form {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact-form-title {
width: 100%;
display: block;
font-family: Raleway-Black;
font-size: 30px;
color: #fdb834;
line-height: 1.2;
text-align: center;
padding-bottom: 45px;
}
/*------------------------------------------------------------------
[ Input ]*/
.wrap-input {
width: 100%;
position: relative;
border: 1px solid #707070;
border-radius: 2px;
margin-bottom: 34px;
}
.rs1.wrap-input {
width: calc((100% - 40px) / 2);
}
.label-input {
font-family: Raleway-SemiBold;
font-size: 13px;
color: #fdb834;
line-height: 1.5;
text-transform: uppercase;
width: 100%;
padding-bottom: 11px;
}
.input {
display: block;
width: 100%;
background: transparent;
font-family: Raleway-SemiBold;
font-size: 18px;
color: #333333;
line-height: 1.2;
padding: 0 25px;
}
input.input {
height: 35px;
}
textarea.input {
min-height: 150px;
padding-top: 19px;
padding-bottom: 15px;
}
/*---------------------------------------------*/
.focus-input {
position: absolute;
display: block;
width: calc(99% + 1px);
height: calc(98%);
top: -1px;
left: 0px;
pointer-events: none;
border: 2px solid;
border-color: #fdb834;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: scaleX(1.1) scaleY(1.3);
-moz-transform: scaleX(1.1) scaleY(1.3);
-ms-transform: scaleX(1.1) scaleY(1.3);
-o-transform: scaleX(1.1) scaleY(1.3);
transform: scaleX(1.1) scaleY(1.3);
}
.input:focus+.focus-input {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/*------------------------------------------------------------------
[ Button ]*/
.container-contact-form-btn {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: -4px;
}
.contact-form-btn {
font-family: Raleway-Bold;
font-size: 16px;
color: #fff;
line-height: 1.2;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
min-width: 150px;
height: 55px;
border-radius: 27px;
background: #fdb834;
position: relative;
z-index: 1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.contact-form-btn::before {
content: "";
display: block;
position: absolute;
z-index: -1;
border-radius: 27px;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
opacity: 1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.contact-form-btn:hover:before {
opacity: 0;
}
.cart__link,
.giftcard__link {
margin-right: 40px;
font-size: 1.8rem;
color: #707070;
}
.box3 {
height: 40px;
display: flex;
flex-direction: row;
margin-left: 2%;
}
.nav__bottom {
width: 55%;
justify-content: flex-start;
}
.help {
margin-left: 25px;
margin-right: 10px;
}
.favorite__link,
.help__link {
color: #707070;
}
.fa-user,
.fa-shopping-cart,
.fa-gift,
.fa-heart {
color: #fdb834;
}
.search {
width: 45%;
display: flex;
position: relative;
height: 40px;
justify-content: flex-end;
align-content: flex-end;
margin: 0 2% 0 0;
font-size: 1.8rem;
color: #707070;
}
.search-box {
background: #fff;
height: 10px;
padding: 5px;
border: 1px solid #707070;
border-radius: 2%;
box-shadow: 1px 1px rgb(112, 112, 112, 0.2);
margin-left: 10px;
}
.search-btn {
text-decoration: none;
color: #707070;
font-size: 2rem;
width: 20px;
height: 10px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
font-size: 1.4rem;
transition: 0.4s;
color: #707070;
width: 15rem;
}
::placeholder {
color: rgb(112, 112, 112, 0.7);
font-size: 1.4rem;
}
<header>
<div class="header__main">
<div class="logo__section">
<img src="https://kommunikasjon.ntb.no/data/images/00171/daaffdf6-fb0e-4e74-9b6b-7f973dbfa6a3.png/social" alt="logo" class="logo" />
</div>
<div class="nav__topRight">
<div class="flexbox1">
<div class="nav__top">
Contact us
<div class="contact_popup_page" id="contact_popup_page">
<div class="container-contact">
<div class="wrap-contact">
<form class="contact-form validate-form">
<button class="close" id="close">×</button>
<span class="contact-form-title"> Contact Us </span>
<label class="label-input" for="first-name">Your Name *</label
>
<div class="wrap-input rs1 validate-input">
<input
id="first-name"
class="input"
type="text"
name="first-name"
placeholder="First name"
/>
<span class="focus-input"></span>
</div>
<div class="wrap-input rs1 validate-input">
<input
class="input"
type="text"
name="last-name"
placeholder="Last name"
/>
<span class="focus-input"></span>
</div>
<label class="label-input" for="email"
>Email Address *</label
>
<div class="wrap-input validate-input">
<input
id="email"
class="input"
type="text"
name="email"
placeholder="Eg. example#email.com"
/>
<span class="focus-input"></span>
</div>
<label class="label-input" for="phone"
>Phone Number</label
>
<div class="wrap-input">
<input
id="phone"
class="input"
type="text"
name="phone"
placeholder="Eg. +47 000 00 000"
/>
<span class="focus-input"></span>
</div>
<label class="label-input" for="message">Message *</label>
<div class="wrap-input validate-input">
<textarea id="message" class="input" name="message" placeholder="Please give us the detail here...."></textarea>
<span class="focus-input"></span>
</div>
<div class="container-contact-form-btn" id="contact-submit">
<button class="contact-form-btn">
<span> Submit </span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="contact__info">
<p>
<i class="fas fa-phone-alt"></i> (+47) 000 00 000
</p>
<p class="opening__p">Mon-Fri (8-20) Sat (9-16)</p>
</div>
</div>
</div>
<div class="flexbox2">
<div class="nav__middle">
<div class="cart">
<a href="#" class="cart__link"><i class="fas fa-shopping-cart"></i>
Cart</a
>
</div>
<div class="giftcard">
<a href="#" class="giftcard__link"
><i class="fas fa-gift"></i>
Gift Card</a
>
</div>
<div class="signin">
<a href="#" class="singin__link"
><i class="fas fa-user"></i>
Sing In</a
>
</div>
</div>
</div>
</div>
</div>
<div class="box3">
<div class="nav__bottom">
<div class="navbar">
Men
</div>
<div class="navbar">
Women
</div>
<div class="navbar">
Junior
</div>
<div class="navbar">
Gears
</div>
<div class="navbar">
Explore
</div>
<div class="navbar">
About
</div>
</div>
<div class="search">
<div class="favorite">
<a href="#" class="favorite__link"><i class="fas fa-heart"></i>
Favorite</a
>
</div>
<div class="help">
<a href="#" class="help__link"
><i class="fas fa-info-circle"></i>
Help</a
>
</div>
<div class="search-box">
<form action="">
<input
class="search-txt"
type="text"
placeholder="Search....."
name="search"
/>
<a class="search-btn" href="#"><i class="fa fa-search"></i></a>
</form>
</div>
</div>
</div>
</header>

Add image to Button

I would like to add a .png image to the buttons .img-btn-next and img-btn-prev.
It is a picture gallery and I want to replace the buttons with next icons.
I'm a starter, I suppose it's not that difficult.
Thanks for your help in advance.
display: block;
padding: 0.5vw 0.5vw;
position: fixed;
background-color: black;
color: white;
top: 50vh;
z-index: 150;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
cursor: pointer;
}
.img-btn-next:hover{
opacity: 0.8;
}
.img-btn-prev {
display: block;
padding: 0.5vw 0.5vw;
background-color: black;
position: fixed;
top: 50vh;
z-index: 150;
font-family: Arial, Helvetica, sans-serif;
color: white;
cursor: pointer;
text-transform: uppercase;
}
.img-btn-prev:hover{
opacity: 0.8;
-----------------------------------------------------------------------
let newNextBtn = document.createElement("a");
let btnNextText = document.createTextNode("next");
newNextBtn.appendChild(btnNextText);
container.appendChild(newNextBtn);
newNextBtn.setAttribute("class", "img-btn-next");
newNextBtn.setAttribute("onclick", "changeImg(1)");
newNextBtn.style.cssText = "right:" + calcImgtoEdge + "px;";
//last Button
let newPrevBtn = document.createElement("a");
let btnPrevText = document.createTextNode("last");
newPrevBtn.appendChild(btnPrevText);
container.appendChild(newPrevBtn);
newPrevBtn.setAttribute("class", "img-btn-prev");
newPrevBtn.setAttribute("onclick", "changeImg(0)");
newPrevBtn.style.cssText = "left:" + calcImgtoEdge + "px;";
}

You can simply add an <img> tag inside the <a> or <button> element, which I think is the easier option in order to style it properly and mix it with other elements such as a text label:
.img-btn {
position: fixed;
display: block;
top: 50vh;
transform: translate(0, -50%);
text-transform: uppercase;
font-family: monospace;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 100%;
width: 128px;
height: 128px;
box-shadow: 0 0 64px rgba(0, 0, 0, .125);
}
.img-btn:hover {
opacity: 0.5;
}
.img-btn-next {
left: 16px;
}
.img-btn-prev {
right: 16px;
}
.img-btn-img {
width: 64px;
margin: 0 0 8px;
}
<a class="img-btn img-btn-prev">
<img class="img-btn-img" src="https://i.stack.imgur.com/9fbz7.png" />
<span class="img-btn-text">Prev</span>
</a>
<a class="img-btn img-btn-next">
<img class="img-btn-img" src="https://i.stack.imgur.com/WBFLy.png" />
<span class="img-btn-text">Next</span>
</a>
Alternatively, you can also add it as a CSS background:
.img-btn {
position: fixed;
display: block;
top: 50vh;
transform: translate(0, -50%);
text-transform: uppercase;
font-family: monospace;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 100%;
width: 128px;
height: 128px;
box-shadow: 0 0 64px rgba(0, 0, 0, .125);
background-size: 50%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.img-btn:hover {
opacity: 0.5;
}
.img-btn-prev {
left: 16px;
background-image: url("https://i.stack.imgur.com/WBFLy.png");
}
.img-btn-next {
right: 16px;
background-image: url("https://i.stack.imgur.com/9fbz7.png");
}
.img-btn-img {
width: 64px;
margin: 0 0 8px;
}
<a class="img-btn img-btn-prev"></a>
<a class="img-btn img-btn-next"></a>

How to make a rotated element height:100% of its parent?

I am looking to create a division with border like the following PNG
I have planned to make an ::after element with the following dimensions:
width=height of the parent division;
height=1.5em;
The following is the code works fine but the width of the ::after element is not right...
body {
display: flex;
flex-direction: column;
height: 93vh;
justify-content: center;
align-items: center;
background: #222;
color: #eee;
font-family: "Dosis", sans-serif;
}
.side-text {
position: relative;
font-size: 4em;
color: #eee;
background: none;
padding: 0.4em 0.5em 0.4em 0.3em;
border: 5px solid #eee
}
.side-text::after {
position: absolute;
content: "Points Needed";
font-size: 0.25em;
color: #222;
background: #eee;
text-align: center;
width: 100%;
/*This takes the value of 100%(Parent's Width) but we need 100%(Parents Height)*/
transform: rotate(-90deg);
left: 45%;
top: 42.5%;
/*The values of left, top have been assigned by trial & error, and will change with the length of the text in the parent division. If the text contained in the parent changes to say, 5000, the values specified above won't work */
}
<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
50
</div>
The values of left-margin, top-margin have been assigned by trial & error, and will change with the length of the text in the parent division. If the text contained in the parent changes to say, 5000 from 50, the values specified above won't work.

You can consider writing-mode
body {
display: flex;
flex-direction: column;
min-height: 93vh;
align-items: center;
background: #222;
color: #eee;
font-family: "Dosis", sans-serif;
}
.side-text {
position: relative;
font-size: 4em;
color: #eee;
background: none;
padding: 0.4em 0.5em 0.4em 0.3em;
border: 5px solid #eee;
margin:5px;
}
.side-text::after {
position: absolute;
content: "Points Needed";
font-size: 0.25em;
color: #222;
background: #eee;
text-align: center;
transform: rotate(-180deg);
right: 0;
top: -1px;
bottom: -1px;
writing-mode: vertical-lr;
}
<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
50
</div>
<div class="side-text">
5000
</div>
You can make it easier to approximate by adjusting transform-origin and then simply change the left property but it will remain an approximation.
body {
display: flex;
flex-direction: column;
height: 93vh;
justify-content: center;
align-items: center;
background: #222;
color: #eee;
font-family: "Dosis", sans-serif;
}
.side-text {
position: relative;
font-size: 4em;
color: #eee;
background: none;
padding: 0.4em 0.5em 0.4em 0.3em;
border: 5px solid #eee
}
.side-text::after {
position: absolute;
content: "Points Needed";
font-size: 0.25em;
color: #222;
background: #eee;
text-align: center;
transform: rotate(-90deg) translateY(-100%);
transform-origin: top right;
right: 0px;
left: -15px; /*adjust this*/
top: 0;
}
<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
50
</div>
Another idea is to separate the content from the background. We keep the background inside the element and we simply need to put the text centered on the right and no need to bother about its width.
This will work in all the cases and you will probably have better support than writing-mode:
body {
display: flex;
flex-direction: column;
min-height: 93vh;
align-items: center;
background: #222;
color: #eee;
font-family: "Dosis", sans-serif;
}
.side-text {
position: relative;
font-size: 4em;
color: #eee;
background: none;
padding: 0.4em 0.5em 0.4em 0.3em;
border: 5px solid #eee;
background: linear-gradient(#eee, #eee) right/20px 100% no-repeat;
margin:5px;
}
.side-text::after {
position: absolute;
content: "Points Needed";
font-size: 0.25em;
color: #222;
text-align: center;
top: 50%;
right: 0;
transform: translate(41%, -50%) rotate(-90deg);
}
<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
50
</div>
<div class="side-text">
5000
</div>

You weren't taking into account the parent element's padding which needs to be added back in. That can be done with the CSS calc() function. This solution is still a bit static though.
body {
display: flex;
flex-direction: column;
height: 93vh;
justify-content: center;
align-items: center;
background: #222;
color: #eee;
font-family: "Dosis", sans-serif;
}
.side-text {
position: relative;
font-size: 4em;
color: #eee;
background: none;
padding: 0.4em 0.5em 0.4em 0.3em;
border: 5px solid #eee
}
.side-text::after {
position: absolute;
content: "Points Needed";
font-size: 0.25em;
color: #222;
background: #eee;
text-align: center;
/* Add back the top/bottom padding of the parent (plus .1em for rounding) */
width: calc(100% + .9em);
transform: rotate(-90deg);
left: 39%;
top: 42.1%;
/*The values of left, top have been assigned by trial & error, and will change with the length of the text in the parent division. If the text contained in the parent changes to say, 5000, the values specified above won't work */
}
<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
50
</div>