Add image to Button - javascript

Add image to Button - javascript

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>

Related

After adding bootstrap there is white line between my divs

This is my HTML code.
there was no problem with my project until i added bootstrap.
it seems the details is nt enough so iam writing this pls if u know anything pls correct my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
<title>test home</title>
</head>
<body>
<div class="hero">
<video autoplay loop muted plays-inline class="back-video">
<source src="Wolf.mp4" type="video/mp4">
</video>
<nav>
<img src="Wild logo2.png" class="logo">
<div class="menu-btn">
<div class="menu-btn_lines"></div>
</div>
<ul class="menu-items">
<li>HOME</li>
<li>MISSIONS</li>
<li>COURSE</li>
<li>CONTACT</li>
<li><a type="submit" class="cta" href="#"><button>LogIn</button></a></li>
</ul>
</nav>
<div class="content">
<h1>WILDPRO</h1>
READ
</div>
</div>
<div class="banner">
<h2>
Photography is life.
</h2>
<br><br><br>
<p>Wildlife photography is one of the most exciting photographic genres out there. But it can be difficult to get started as a wildlife photographer because of all the gear, technical know-how, and additional knowledge required.In the early days of photography, it was difficult to get a photograph of wildlife due to slow lenses and the low sensitivity of photographic media. Earlier photos of animals were often captive animals. These included photos of lion cubs taken at the Bristol zoo in 1854 and in 1864, photos of the last Quagga by Frank Hayes. Wildlife photography gained more traction when faster photography emulsions and quicker shutters came in the 1880s. Developments like these lead to photos such as the ones taken by German Ottomar Anschutz in 1884, the first shots of wild birds in action. Members of the Delaware Valley Ornithological Club (DVOC) captured early photographs of nesting songbirds in the Philadelphia area in 1897.In July 1906, National Geographic published its first wildlife photos.The photos were taken by George Shiras III, a U.S. Representative from Pennsylvania. Some of his photos were taken with the first wire-tripped camera traps.</p>
<div class="custom-shape-divider-bottom-1676808801">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</div>
<div id="mission-id" class="mission">
<h2>
Missions.
</h2>
<br>
<p>
The website intends on to focus on many rescue missions,for a bright future for the wild animals and <span>SAVE</span> many animals from their existition.
</p>
</div>
</body>
</html>
This is my CSS code
the css code seem to have some position problem or something
this is a screenshot of my project
enter image description here
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
li, a, button{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
}
.hero{
background:linear-gradient(rgba(0, 0, 0, 0.5),rgb(0, 150, 17));
width: 100%;
height: 100vh;
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
}
input{
display: block;
width: 400px;
height: 40px;
margin: 60px;
border: none;
outline: none;
font-size: 20px;
background: transparent;
color: #fff;
margin-bottom: 0%;
}
::placeholder{
color: rgba(211, 211, 211, 0.767);
}
nav{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo{
margin-right:auto;
width: 100px;
cursor: pointer;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a{
transition: all 0.3s ease 0s;
text-decoration: none;
color: #fff;
font-size: 17px;
}
nav ul li a:hover {
color: #0ea900;
}
.menu-btn {
position: relative;
display: none;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
z-index: 3;
}
.menu-btn_lines,
.menu-btn_lines::before,
.menu-btn_lines::after{
width: 1.5rem;
height: 0.1rem;
background-color: #ffffff;
transition: all 0.5s ease-in-out;
}
.menu-btn_lines::before,
.menu-btn_lines::after{
content: "";
position: absolute;
}
.menu-btn_lines::before{
transform: translateY(-0.5rem);
}
.menu-btn_lines::after{
transform: translateY(0.5rem)
}
.menu-btn.open .menu-btn_lines{
transform: translateX(2rem);
background-color: transparent;
}
.menu-btn.open .menu-btn_lines::before{
transform: rotate(45deg) translate(-1.5rem,1.5rem);
}
.menu-btn.open .menu-btn_lines::after{
transform: rotate(-45deg) translate(-1.5rem,-1.5rem);
}
button{
padding: 9px 25px;
background-color: rgb(54, 169, 0);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(6, 182, 0, 0.8);
}
.content{
position: relative;
text-align: center;
z-index: 1;
}
.content h1{
font-size: 160px;
color: #fff;
font-weight: 600;
transition: 0.3s;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
cursor: default;
}
.content a{
text-decoration: none;
display: inline-block;
color: #fff;
font-size: 24px;
border: 2px solid #fff;
padding: 14px 70px;
border-radius: 50px;
margin-top: 20px;
}
.back-video{
position: absolute;
right: 0;
bottom: 0;
z-index: -2;
}
#media (min-aspect-ratio: 16/9){
.back-video{
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9){
.back-video{
width: auto;
height: 100%;
}
}
.banner{
margin-top: 0;
background-color:rgb(0, 150, 17);
width: 100;
height: auto;
position: relative;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.banner h2{
text-align: center;
font-size: 50px;
}
.banner p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.custom-shape-divider-bottom-1676808801 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1676808801 svg {
position: relative;
display: block;
width: calc(116% + 1.3px);
height: 100px;
}
.custom-shape-divider-bottom-1676808801 .shape-fill {
fill: #0b8500;
}
.mission{
margin-top: 0;
float: top;
background-color: #0b8500;
width: 100%;
height: auto;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.mission h2{
text-align: center;
font-size: 50px;
}
.mission p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.mission span{
font-size: 40px;
font-weight: 900;
background-image: linear-gradient(98deg,red,blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#media (max-width: 767px) {
.custom-shape-divider svg {
width: calc(250% + 1.3px);
height: 150px;
}
.menu-btn{
display: flex;
}
.menu-items {
flex-direction: column;
justify-content: space-around;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100vh;
transform: translateX(100vw);
background-color: #0ea900;
transition: transform 0.3s ease-in-out;
z-index: 2;
}
.menu-items.open {
transform: translateX(0);
}
.menu-items li {
width: 50vw;
height: 10%;
margin-top: 10%;
}
.menu-items li a {
color: #fff;
font-size: 2vh;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
}
.banner h2{
font-size: 30px;
text-align: center;
color: #ffffff;
}
.banner p{
font-size: 20px;
text-align: center;
color: white;
padding-bottom: 20%;
}
.content h1{
font-size: 80px;
}
nav .logo{
width: 20%;
}
}

Try adding class="m-0" to the p tag inside div.banner like this:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
li, a, button{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
}
.hero{
background:linear-gradient(rgba(0, 0, 0, 0.5),rgb(0, 150, 17));
width: 100%;
height: 100vh;
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
}
input{
display: block;
width: 400px;
height: 40px;
margin: 60px;
border: none;
outline: none;
font-size: 20px;
background: transparent;
color: #fff;
margin-bottom: 0%;
}
::placeholder{
color: rgba(211, 211, 211, 0.767);
}
nav{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo{
margin-right:auto;
width: 100px;
cursor: pointer;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a{
transition: all 0.3s ease 0s;
text-decoration: none;
color: #fff;
font-size: 17px;
}
nav ul li a:hover {
color: #0ea900;
}
.menu-btn {
position: relative;
display: none;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
z-index: 3;
}
.menu-btn_lines,
.menu-btn_lines::before,
.menu-btn_lines::after{
width: 1.5rem;
height: 0.1rem;
background-color: #ffffff;
transition: all 0.5s ease-in-out;
}
.menu-btn_lines::before,
.menu-btn_lines::after{
content: "";
position: absolute;
}
.menu-btn_lines::before{
transform: translateY(-0.5rem);
}
.menu-btn_lines::after{
transform: translateY(0.5rem)
}
.menu-btn.open .menu-btn_lines{
transform: translateX(2rem);
background-color: transparent;
}
.menu-btn.open .menu-btn_lines::before{
transform: rotate(45deg) translate(-1.5rem,1.5rem);
}
.menu-btn.open .menu-btn_lines::after{
transform: rotate(-45deg) translate(-1.5rem,-1.5rem);
}
button{
padding: 9px 25px;
background-color: rgb(54, 169, 0);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(6, 182, 0, 0.8);
}
.content{
position: relative;
text-align: center;
z-index: 1;
}
.content h1{
font-size: 160px;
color: #fff;
font-weight: 600;
transition: 0.3s;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
cursor: default;
}
.content a{
text-decoration: none;
display: inline-block;
color: #fff;
font-size: 24px;
border: 2px solid #fff;
padding: 14px 70px;
border-radius: 50px;
margin-top: 20px;
}
.back-video{
position: absolute;
right: 0;
bottom: 0;
z-index: -2;
}
#media (min-aspect-ratio: 16/9){
.back-video{
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9){
.back-video{
width: auto;
height: 100%;
}
}
.banner{
margin-top: 0;
background-color:rgb(0, 150, 17);
width: 100;
height: auto;
position: relative;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.banner h2{
text-align: center;
font-size: 50px;
}
.banner p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.custom-shape-divider-bottom-1676808801 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1676808801 svg {
position: relative;
display: block;
width: calc(116% + 1.3px);
height: 100px;
}
.custom-shape-divider-bottom-1676808801 .shape-fill {
fill: #0b8500;
}
.mission{
margin-top: 0;
float: top;
background-color: #0b8500;
width: 100%;
height: auto;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.mission h2{
text-align: center;
font-size: 50px;
}
.mission p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.mission span{
font-size: 40px;
font-weight: 900;
background-image: linear-gradient(98deg,red,blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#media (max-width: 767px) {
.custom-shape-divider svg {
width: calc(250% + 1.3px);
height: 150px;
}
.menu-btn{
display: flex;
}
.menu-items {
flex-direction: column;
justify-content: space-around;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100vh;
transform: translateX(100vw);
background-color: #0ea900;
transition: transform 0.3s ease-in-out;
z-index: 2;
}
.menu-items.open {
transform: translateX(0);
}
.menu-items li {
width: 50vw;
height: 10%;
margin-top: 10%;
}
.menu-items li a {
color: #fff;
font-size: 2vh;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
}
.banner h2{
font-size: 30px;
text-align: center;
color: #ffffff;
}
.banner p{
font-size: 20px;
text-align: center;
color: white;
padding-bottom: 20%;
}
.content h1{
font-size: 80px;
}
nav .logo{
width: 20%;
}
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
<title>test home</title>
</head>
<body>
<div class="hero">
<video autoplay loop muted plays-inline class="back-video">
<source src="Wolf.mp4" type="video/mp4">
</video>
<nav>
<img src="Wild logo2.png" class="logo">
<div class="menu-btn">
<div class="menu-btn_lines"></div>
</div>
<ul class="menu-items">
<li>HOME</li>
<li>MISSIONS</li>
<li>COURSE</li>
<li>CONTACT</li>
<li><a type="submit" class="cta" href="#"><button>LogIn</button></a></li>
</ul>
</nav>
<div class="content">
<h1>WILDPRO</h1>
READ
</div>
</div>
<div class="banner">
<h2>
Photography is life.
</h2>
<br><br><br>
<p class="m-0">Wildlife photography is one of the most exciting photographic genres out there. But it can be difficult to get started as a wildlife photographer because of all the gear, technical know-how, and additional knowledge required.In the early days of photography, it was difficult to get a photograph of wildlife due to slow lenses and the low sensitivity of photographic media. Earlier photos of animals were often captive animals. These included photos of lion cubs taken at the Bristol zoo in 1854 and in 1864, photos of the last Quagga by Frank Hayes. Wildlife photography gained more traction when faster photography emulsions and quicker shutters came in the 1880s. Developments like these lead to photos such as the ones taken by German Ottomar Anschutz in 1884, the first shots of wild birds in action. Members of the Delaware Valley Ornithological Club (DVOC) captured early photographs of nesting songbirds in the Philadelphia area in 1897.In July 1906, National Geographic published its first wildlife photos.The photos were taken by George Shiras III, a U.S. Representative from Pennsylvania. Some of his photos were taken with the first wire-tripped camera traps.</p>
<div class="custom-shape-divider-bottom-1676808801">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</div>
<div id="mission-id" class="mission">
<h2>
Missions.
</h2>
<br>
<p>
The website intends on to focus on many rescue missions,for a bright future for the wild animals and <span>SAVE</span> many animals from their existition.
</p>
</div>
</body>

space-between not working on loading page

I have created a loading page with css and html. I would like to display a loading bar to display when the page is loading, between 0% to 100%.I have used justify-content:space-between to solve this but I can't seem to make this work. I have read previous posts on this in the forum but am still stuck. here is my code, both html and css
<body>
<div class="loading">
<div class="loading__box">
<div class="loading__text">
<div class="loading__text--border"></div>
L
<div class="loading__text--dot"></div>
OADING EXPERIENCE
</div>
<div class="loading__bar">
<div class="loading__bar--inner"></div>
</div>
<div class="loading__counter">
<span>0%</span>
<div class="loading__counter--number">100%</div>
</div>
</div>
</div>
</body>
base.scss
body {
margin: 0;
box-sizing: border-box;
&::after,
&::before {
box-sizing: border-box;
}
}
html, body {
overflow-x: hidden;
}
body{
font-family: 'Poppins', sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
```
loader.scss
```
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
z-index: 99;
background: #0b134f;
place-items: center;
display: grid;
font-family: "Orbitron", sans-serif;
&__box {
position: relative;
width: 500px;
height: 200px;
border: 3px solid #6cff8d;
border-top: 3px solid #6cff8c7a;
border-bottom: 3px solid #6cff8c7a;
}
&__bar {
width: 90%;
height: 10%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
background: #ccc;
border-radius: 2px;
&--inner {
height: 100%;
width: 50%;
border-radius: 2px;
background: #6cff8d;
}
}
&__text {
position: relative;
color: #fff;
padding: 1rem;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
&--dot {
width: 15px;
height: 15px;
margin: 0 3px;
border-radius: 50%;
animation: pulse 1s infinite;
background: #fff;
#keyframes pulse {
from {
opacity: 0;
background: #6cff8d;
}
to {
opacity: 1;
}
}
}
&--border {
width: 85%;
height: 1px;
background: #6cff8c7a;
position: absolute;
bottom: 0;
left: 50px;
transform: translateY(-50%);
}
}
&__counter {
position: absolute;
top: 70%;
left: 0;
color: #fff;
font-size: 20px;
font-weight: 700;
width: 100px;
display: flex;
justify-content: space-between;
padding-left: 10px;
}
}
```

you need to edit you .loading__counter:
width: 100%;
box-sizing: border-box;
padding: 0 10px;
See the working example below:
body {
margin: 0;
box-sizing: border-box;
&::after,
&::before {
box-sizing: border-box;
}
}
html, body {
overflow-x: hidden;
}
body{
font-family: 'Poppins', sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
z-index: 99;
background: #0b134f;
place-items: center;
display: grid;
font-family: "
Orbitron"
, sans-serif;
}
.loading__box {
position: relative;
width: 500px;
height: 200px;
border: 3px solid #6cff8d;
border-top: 3px solid #6cff8c 7a;
border-bottom: 3px solid #6cff8c 7a;
}
.loading__bar {
width: 90%;
height: 10%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
background: #ccc;
border-radius: 2px;
}
.loading__bar--inner {
height: 100%;
width: 50%;
border-radius: 2px;
background: #6cff8d;
}
.loading__text {
position: relative;
color: #fff;
padding: 1rem;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.loading__text--dot {
width: 15px;
height: 15px;
margin: 0 3px;
border-radius: 50%;
animation: pulse 1s infinite;
background: #fff;
}
#keyframes pulse {
from {
opacity: 0;
background: #6cff8d;
}
to {
opacity: 1;
}
}
.loading__text--border {
width: 85%;
height: 1px;
background: #6cff8c 7a;
position: absolute;
bottom: 0;
left: 50px;
transform: translateY(-50%);
}
.loading__counter {
position: absolute;
top: 70%;
left: 0;
color: #fff;
font-size: 20px;
font-weight: 700;
width: 100%;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 10px;
}
<body>
<div class="loading">
<div class="loading__box">
<div class="loading__text">
<div class="loading__text--border"></div>
L
<div class="loading__text--dot"></div>
OADING EXPERIENCE
</div>
<div class="loading__bar">
<div class="loading__bar--inner"></div>
</div>
<div class="loading__counter">
<span>0%</span>
<div class="loading__counter--number">100%</div>
</div>
</div>
</div>
</body>

Animation in html/css/js [duplicate]

This question already has an answer here:
How to reuse the same code multiple times - html/css
(1 answer)
Closed 1 year ago.
I would like the modal that pops up in my code to work separately for the buttons I have. For example, I have the About Me button and the Projects button. When the user clicks the About Me button, there should be a separate modal that pops up with different text, and then when the user clicks the Projects button, there should be a different modal that pops up with a different text. Essentially, the design of the modal should be the same, it just that it should have different text for each of the buttons.
Code:
function popUp_model(){
const pop_up_model = document.getElementById('model');
pop_up_model.classList.toggle('active');
}
body{
background: black;
}
.wrapper { display: flex; }
#container {
display: flex;
align-items: center;
justify-content: center;
margin: 0 100px;
}
.button {
margin-top: 58px;
align-content: left;
--y: -25;
--x: 0;
--rotation: 0;
--speed: 2;
--padding: 1rem 1.25rem;
cursor: pointer;
padding: var(--padding);
border: 4px solid;
border-color: #00fffe;
color: white; /* changed */
font-weight: bold;
font-size: 1.25rem;
transition: background 0.1s ease;
background: hsl(var(--grey), 100%, 50%);
animation-name: flow-and-shake;
-webkit-animation-duration: calc(var(--speed) * 1s);
animation-duration: calc(var(--speed) * 1s);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.button:hover {
background: hsl(var(--grey), 100%, 40%);
--speed: 0.1;
--rotation: -1;
--y: -1;
--x: 1;
}
#-webkit-keyframes flow-and-shake {
0%, 100% {
transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
}
50% {
transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
}
}
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body1 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button {
position: relative;
}
#model {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: #101010;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model.active {
visibility: visible;
left: 50%;
}
#model .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model .model-content img {
width: 80px;
}
#model .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input {
margin-top: 20px;
width: 100%;
}
.model-input input {
width: 100%;
border: 1px solid;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model img {
width: 20px;
}
/* modal 2*/
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body2 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button1 {
position: relative;
}
#subscribe-us1 {
padding: 15px 20px;
background: #000;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 10px;
outline: none;
display: inline-block;
font-weight: 600;
cursor: pointer;
}
#subscribe-us1:hover {
letter-spacing: 4px;
}
#model1 {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: steelblue;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model1.active {
visibility: visible;
left: 50%;
}
#model1 .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model1 .model-content img {
width: 80px;
}
#model1 .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input1 {
margin-top: 20px;
width: 100%;
}
.model-input1 input {
width: 100%;
border: 1px solid #cccccc;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input1 input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input1 input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model1 {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model1 img {
width: 20px;
}
<div id="container">
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model()" >About me</button>
</div>
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model()">My Projects</button>
<div class="button__shadow"></div>
</div>
</div>
<div id="model">
<div class="model-content">
<img src="https://image.shutterstock.com/image-vector/mail-icon-260nw-523869661.jpg" alt="Email">
<h2>
Join Our Newsletter
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<div class="model-input">
<input type="email" placeholder="Enter Email">
</div>
<div class="model-input">
<input type="submit" value="Sign Up">
</div>
</div>
<a class="close-model" onclick="popUp_model()"><img src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/close-512.png" alt="Close-model-icon"></a>
</div>
</div>
</div>
As you can see, there is the same modal with the same text for both of the buttons. But I want different text on the modals for each of the buttons. Any suggestions?
Expected Output
When the user clicks About Me the modal with the text that I sent in the code should appear.
When the user clicks Projects the modal with a different text saying something like, "Hello, these are my projects" should appear.
NOTE: The design of the modal should be the exact same, the only thing that changes is the text.
I tried switching the names of the classes and making like a second modal with different text but it did not quite work, and I got the wrong output.
Is there a way this can be accomplished?

There are multiples ways to reuse the same model with different content, based on the situation.
A simple solution can be passing some parameters to the popUp_model function.
function popUp_model(typeOfModel) {
let aboutHTML = `
<img src="https://image.shutterstock.com/image-vector/mail-icon-260nw-523869661.jpg" alt="Email">
<h2>
Join Our Newsletter
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<div class="model-input">
<input type="email" placeholder="Enter Email">
</div>
<div class="model-input">
<input type="submit" value="Sign Up">
</div>
`;
let projectHTML = `
<h2>
My Projects
</h2>
<ul>
<li>Project 1</li>
<li>Project 2</li>
</ul>
`;
if(typeOfModel == 0)
document.getElementsByClassName("model-content")[0].innerHTML = aboutHTML;
else
document.getElementsByClassName("model-content")[0].innerHTML = projectHTML;
const pop_up_model = document.getElementById('model');
pop_up_model.classList.toggle('active');
}
body {
background: black;
}
.wrapper {
display: flex;
}
#container {
display: flex;
align-items: center;
justify-content: center;
margin: 0 100px;
}
.button {
margin-top: 58px;
align-content: left;
--y: -25;
--x: 0;
--rotation: 0;
--speed: 2;
--padding: 1rem 1.25rem;
cursor: pointer;
padding: var(--padding);
border: 4px solid;
border-color: #00fffe;
color: white;
/* changed */
font-weight: bold;
font-size: 1.25rem;
transition: background 0.1s ease;
background: hsl(var(--grey), 100%, 50%);
animation-name: flow-and-shake;
-webkit-animation-duration: calc(var(--speed) * 1s);
animation-duration: calc(var(--speed) * 1s);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.button:hover {
background: hsl(var(--grey), 100%, 40%);
--speed: 0.1;
--rotation: -1;
--y: -1;
--x: 1;
}
#-webkit-keyframes flow-and-shake {
0%,
100% {
transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
}
50% {
transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
}
}
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body1 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button {
position: relative;
}
#model {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: #101010;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model.active {
visibility: visible;
left: 50%;
}
#model .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model .model-content img {
width: 80px;
}
#model .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input {
margin-top: 20px;
width: 100%;
}
.model-input input {
width: 100%;
border: 1px solid;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model img {
width: 20px;
}
/* modal 2*/
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body2 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button1 {
position: relative;
}
#subscribe-us1 {
padding: 15px 20px;
background: #000;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 10px;
outline: none;
display: inline-block;
font-weight: 600;
cursor: pointer;
}
#subscribe-us1:hover {
letter-spacing: 4px;
}
#model1 {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: steelblue;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model1.active {
visibility: visible;
left: 50%;
}
#model1 .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model1 .model-content img {
width: 80px;
}
#model1 .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input1 {
margin-top: 20px;
width: 100%;
}
.model-input1 input {
width: 100%;
border: 1px solid #cccccc;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input1 input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input1 input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model1 {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model1 img {
width: 20px;
}
h2, p, li {
color: white;
}
<div id="container">
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(0)">About me</button>
</div>
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(1)">My Projects</button>
<div class="button__shadow"></div>
</div>
</div>
<div id="model">
<div class="model-content">
</div>
<a class="close-model" onclick="popUp_model()"><img src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/close-512.png" alt="Close-model-icon"></a>
</div>
</div>
</div>

You can do something like this to send the type and set the text in the function based on the type.
function popUp_model(type){
let changeTextEl = document.getElementById('change-text')
if (type == 1) changeTextEl.innerHTML = 'Join Our Newsletter'
if (type == 2) changeTextEl.innerHTML = 'Hello, these are my projects'
const pop_up_model = document.getElementById('model');
pop_up_model.classList.toggle('active');
}
body{
background: black;
}
.wrapper { display: flex; }
#container {
display: flex;
align-items: center;
justify-content: center;
margin: 0 100px;
}
.button {
margin-top: 58px;
align-content: left;
--y: -25;
--x: 0;
--rotation: 0;
--speed: 2;
--padding: 1rem 1.25rem;
cursor: pointer;
padding: var(--padding);
border: 4px solid;
border-color: #00fffe;
color: white; /* changed */
font-weight: bold;
font-size: 1.25rem;
transition: background 0.1s ease;
background: hsl(var(--grey), 100%, 50%);
animation-name: flow-and-shake;
-webkit-animation-duration: calc(var(--speed) * 1s);
animation-duration: calc(var(--speed) * 1s);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.button:hover {
background: hsl(var(--grey), 100%, 40%);
--speed: 0.1;
--rotation: -1;
--y: -1;
--x: 1;
}
#-webkit-keyframes flow-and-shake {
0%, 100% {
transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
}
50% {
transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
}
}
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body1 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button {
position: relative;
}
#model {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: #101010;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model.active {
visibility: visible;
left: 50%;
}
#model .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model .model-content img {
width: 80px;
}
#model .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input {
margin-top: 20px;
width: 100%;
}
.model-input input {
width: 100%;
border: 1px solid;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model img {
width: 20px;
}
/* modal 2*/
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body2 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button1 {
position: relative;
}
#subscribe-us1 {
padding: 15px 20px;
background: #000;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 10px;
outline: none;
display: inline-block;
font-weight: 600;
cursor: pointer;
}
#subscribe-us1:hover {
letter-spacing: 4px;
}
#model1 {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: steelblue;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model1.active {
visibility: visible;
left: 50%;
}
#model1 .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model1 .model-content img {
width: 80px;
}
#model1 .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input1 {
margin-top: 20px;
width: 100%;
}
.model-input1 input {
width: 100%;
border: 1px solid #cccccc;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input1 input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input1 input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model1 {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model1 img {
width: 20px;
}
<div id="container">
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(1)" >About me</button>
</div>
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(2)">My Projects</button>
<div class="button__shadow"></div>
</div>
</div>
<div id="model">
<div class="model-content">
<img src="https://image.shutterstock.com/image-vector/mail-icon-260nw-523869661.jpg" alt="Email">
<h2 id="change-text">
Join Our Newsletter
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<div class="model-input">
<input type="email" placeholder="Enter Email">
</div>
<div class="model-input">
<input type="submit" value="Sign Up">
</div>
</div>
<a class="close-model" onclick="popUp_model()"><img src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/close-512.png" alt="Close-model-icon"></a>
</div>
</div>
</div>

CSS z-index property and javascript background mouse interaction

I'm trying to add a radial gradient as a background of my blogpost card.
This radial gradient should follow the cursor when the
blog post card is hovered. Here here my little code example about the
effect ( https://codepen.io/D_s/pen/OJNpNBV ).
The problem is that doesn't work as expected because the other div elements of the card (title, image, tags, button) are interfering with the hovering. How i can solve this?
Here is the code of the blog post card:
let backgroundgradient = document.querySelector('.card');
backgroundgradient.onmousemove = function(e) {
let rect = e.target.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
backgroundgradient.style.setProperty('--x', x + 'px');
backgroundgradient.style.setProperty('--y', y + 'px');
}
Thank you for the help!

Instead of using e.target.getBoundingClientRect() and .left/.right which will change as the child elements are hovered, consider using the .offsetLeft/.offsetRight of the .card element itself.
let backgroundgradient = document.querySelector('.card');
backgroundgradient.onmousemove = function(e) {
let x = e.clientX - backgroundgradient.offsetLeft;
let y = e.clientY - (backgroundgradient.offsetTop - window.pageYOffset);
backgroundgradient.style.setProperty('--x', x + 'px');
backgroundgradient.style.setProperty('--y', y + 'px');
}
.card,
.imagebox {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.imagebox {
flex: 3 1 30ch;
height: calc(282px + 5vw);
overflow: hidden;
}
.imagebox img {
max-width: 100%;
min-width: 100%;
min-height: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: cover;
object-position: 50% 50%;
padding: 15px;
border-radius: 30px;
z-index: 1;
}
.card {
background: #bdbdbd;
box-sizing: border-box;
border: 2px solid #f93668;
overflow: hidden;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.card:before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #f93668, transparent);
transform: translate(-50%, -50%);
transition: width 0.8s ease, height 0.4s ease;
}
.card:hover:before {
--size: 90rem;
}
.card-content {
padding: 16px 32px;
flex: 10 1 40ch;
z-index: 2;
}
.card-tags {
margin: 0 -8px;
}
.card-tag {
display: inline-block;
margin: 8px;
font-size: 0.875em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--primary);
}
.card-title {
margin: 0;
font-size: clamp(2.4em, 1.1vw, 1.1em);
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
}
.card-title a {
text-decoration: none;
color: inherit;
}
.card-metadata {
margin: 0;
}
.card-save {
display: flex;
align-items: center;
padding: 6px 14px 6px 12px;
border-radius: 4px;
border: 2px solid currentColor;
color: var(--primary);
background: none;
cursor: pointer;
font-weight: bold;
}
.card-save svg {
margin-right: 6px;
}
/* Body Layout */
* {
box-sizing: border-box;
}
body {
--primary: rgb(249, 54, 104);
--grey: #454545;
--lightgrey: #666;
color: var(--grey);
line-height: 1.55;
display: flex;
justify-content: center;
flex-wrap: wrap;
font-family: "Roboto", Helvetica, Arial, sans-serif;
}
.container {
width: clamp(20px, 90%, 90%);
padding: 24px;
}
<div class="container">
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
</div>
An example with multiple card elements...
let cards = document.querySelectorAll('.card');
for (let card of cards) {
card.onmousemove = function(e) {
let x = e.clientX - card.offsetLeft;
let y = e.clientY - (card.offsetTop - window.pageYOffset);
card.style.setProperty('--x', x + 'px');
card.style.setProperty('--y', y + 'px');
}
}
.card,
.imagebox {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.imagebox {
flex: 3 1 30ch;
height: calc(282px + 5vw);
overflow: hidden;
}
.imagebox img {
max-width: 100%;
min-width: 100%;
min-height: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: cover;
object-position: 50% 50%;
padding: 15px;
border-radius: 30px;
z-index: 1;
}
.card {
background: #bdbdbd;
box-sizing: border-box;
border: 2px solid #f93668;
overflow: hidden;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.card:before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #f93668, transparent);
transform: translate(-50%, -50%);
transition: width 0.8s ease, height 0.4s ease;
}
.card:hover:before {
--size: 90rem;
}
.card-content {
padding: 16px 32px;
flex: 10 1 40ch;
z-index: 2;
}
.card-tags {
margin: 0 -8px;
}
.card-tag {
display: inline-block;
margin: 8px;
font-size: 0.875em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--primary);
}
.card-title {
margin: 0;
font-size: clamp(2.4em, 1.1vw, 1.1em);
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
}
.card-title a {
text-decoration: none;
color: inherit;
}
.card-metadata {
margin: 0;
}
.card-save {
display: flex;
align-items: center;
padding: 6px 14px 6px 12px;
border-radius: 4px;
border: 2px solid currentColor;
color: var(--primary);
background: none;
cursor: pointer;
font-weight: bold;
}
.card-save svg {
margin-right: 6px;
}
/* Body Layout */
* {
box-sizing: border-box;
}
body {
--primary: rgb(249, 54, 104);
--grey: #454545;
--lightgrey: #666;
color: var(--grey);
line-height: 1.55;
display: flex;
justify-content: center;
flex-wrap: wrap;
font-family: "Roboto", Helvetica, Arial, sans-serif;
}
.container {
width: clamp(20px, 90%, 90%);
padding: 24px;
}
<div class="container">
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
</div>

CSS: responsive design, position card to fit in the middle any size of screen

I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
#import url("https://fonts.googleapis.com/css?family=Montserrat");
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
width: 100%;
height: 100%;
font-family: "Montserrat";
color: #303633;
background-color: #C8D9E7;
overflow: hidden;
font-size: 1em;
font-style: normal;
-webkit-appearance: none;
outline: none;
text-rendering: geometricPrecision;
perspective: 1000px;
}
a {
position: relative;
display: inline-block;
padding: 12px 35px;
margin: 0 0 20px;
background-color: #e1306c;
color: white;
border-radius: 5px;
transition: all 0.3s;
letter-spacing: 2px;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
background-color: #e75d8c;
}
.content-wrapper {
width: 300px;
max-height: 530px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
background: #fbfcee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.content-wrapper .img {
width: 302px;
height: 350px;
position: relative;
overflow: hidden;
}
.content-wrapper img {
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: contain;
*/
width: 100%;
height: 100%;
object-fit: cover;
}
.profile--info {
text-align: left;
padding-top: 10px;
}
.profile--info span {
font-family: "Open Sans", "Adobe Blank";
z-index: 1;
left: 15px;
top: 15px;
font-size: 0.575em;
color: rgba(84, 95, 89, 0.75);
display: block;
}
.profile--info span.username {
font-weight: 700;
font-style: normal;
font-size: 1em;
color: black;
}
.profile--info span.userquote {
margin-top: -15px;
font-size: 0.7em;
color: rgba(84, 95, 89, 0.75);
}
.user {
background-color: white;
width: 100%;
margin-top: 0;
max-height: 600px;
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
.user-social-wrapper {
display: flex;
justify-content: space-around;
position: relative;
padding: 5px 0;
padding-bottom: 15px;
}
.user-social-wrapper .user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 200;
flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
font-size: 0.75em;
color: rgba(84, 95, 89, 0.75);
}
.shots {
width: calc(100% + 60px);
margin-left: -30px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.shots .shot {
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
}
.shots .shot img {
transition: all 0.255s;
width: 102px;
}
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fcc951ea7fb4756657e6a7d042bf28f3/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/cc7f49ae37334eff4a2e844ffbebaa21/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/d8b9d0e098128aad6eac6c39c19439cb/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/a0efc75790b1d1a20306b4b9ee8c0d31/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fa49d4e551525ac7a288784e0866f7cf/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/845ad7174d012da1d1b62ac375d2b466/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/7d4877bc850a66d5aeb539c5510add7e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/5252d016bae25d4ef4bca9e0c0a0306b/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/880acf9db110584cb44b3b69ad0a366f/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
</div>
<div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺#bobby_dyr</span><br/><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>104</span><span>Shots</span></div>
<div class="user-info user-followers"><span>16,964</span><span>Likes</span></div>
<div class="user-info user-following"><span>643</span><span>Comments</span></div>
</div>
</div>
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
Basically what should I do to adjust it from (too small)to this (ideal)

Just change it:
.shots .shot {
overflow: hidden;
position: relative;
width: 33%; // <-- change it
height: 100px;
flex-grow: 1; // <-- add
}

I would use media queries and target the classes you want to amend on the different screen sizes to make it fit as you need. Some useful links:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
In your case, you would need to amend the width of the card to 100% on mobile to achieve the design on your screenshot. Hope that makes sense! :)

We Keep Coding

JavaScript is the programming language of the Web.

Add image to Button - javascript

Related

After adding bootstrap there is white line between my divs

space-between not working on loading page

Animation in html/css/js [duplicate]

CSS z-index property and javascript background mouse interaction

CSS: responsive design, position card to fit in the middle any size of screen

Categories

Resources