This question already has answers here:
Semi-transparent color layer over background-image?
(19 answers)
Closed last year.
I'm build a page that nedds a background image with a semi transparent black cover on top (rgba 0 0 0 0.5).
My initial solution was to do:
<body id="body-pd" style="background: url('./img/Home e Roleta.png') no-repeat center center fixed; background-size: cover; box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);">
And I though it had worked. But now that I'm developing some larger pages in the site, it appears that when I scroll down the semi transparent cover doesn't follow along:
I tried to find a solution online, but couldn't find any topics on the matter.
Does anyone have an idea of how it can be solved?
Full code (uses bootstrap5):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="./css/custom.css" rel="stylesheet">
<link href="./css/navlayout.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script defer src="./js/navlayout.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
<script defer src="./js/crash.js"></script>
<link rel="icon" href="./img/icon.png" />
<title>Vegaz.bet</title>
</head>
<body id="body-pd" style="background: url('./img/Home e Roleta.png') no-repeat center center fixed; background-size: cover; box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);">
<header class="top-header align-middle">
<div class="mx-auto"></div>
</header>
<header class="header" id="header">
<div class="d-flex">
<div class="header_toggle me-3" id="toggle-up"> <i class="fas fa-bars secondary-bs-color" id="header-toggle"></i></div>
<img style="width: 50px;" class="h-auto me-1 d-none d-sm-flex" src="./img/Logo Vegaz Bet MOEDA.png" alt="">
<img style="width: 120px;" class="h-auto d-flex" src="./img/Logo Vegaz Bet ESCRITA.png" alt="">
</div>
<div id="nav-buttons" class="d-flex">
<button type="button" class="white-bs-color fw-bold btn btn-primary me-4" data-bs-toggle="modal" data-bs-target="#login-modal">Login</button>
<button type="button" class="white-bs-color fw-bold btn btn-secondary" data-bs-toggle="modal" data-bs-target="#registration-modal">Register</button>
</div>
</header>
<div class="l-navbar" id="nav-bar">
<nav class="nav">
<div>
<div class="nav_list">
<i class="fas fa-chart-line nav_icon secondary-bs-color"></i> <span class="nav_name">Crash</span>
<i class="far fa-life-ring nav_icon secondary-bs-color"></i> <span class="nav_name">Roullete</span>
<i class="fas fa-dice nav_icon secondary-bs-color"></i> <span class="nav_name">Dice</span>
<i class="fas fa-coins nav_icon secondary-bs-color"></i> <span class="nav_name">Heads or Tails</span>
<hr class="bg-white border-2 border-top border-white">
<i class="fas fa-hand-holding-usd nav_icon white-bs-color"></i> <span class="nav_name">Deposit /<br> Withdrawal</span>
<i class="far fa-question-circle nav_icon white-bs-color"></i> <span class="nav_name">Help</span>
</div>
</div>
</nav>
</div>
<div class="r-navbar invisible" id="nav-bar-chat">
<div id="invisible-toggle-div" class="container pb-5 invisible">
<div class="row h-20 mb-1">
<button id="close-chat" type="button" class="position-absolute top-8 start-10 btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="w-50 position-absolute top-7 end-10 white-bs-color fw-bold btn btn-primary"><span class="text-nowrap">Vegaz Chat</span></button>
</div>
<div class="row h-60">
<div id="chatContainer" class="chat-font d-flex flex-column bd-highlight position-absolute top-15 end-5 w-90 h-75">
<span class="time-span-chat ms-2">11:29</span>
<div class="card bg-field-grey text-white mb-1">
<span class="pt-1 pb-1 ps-1 pe-1"><span class="fw-bold" style="color: yellow">youranus420:</span> oi putões</span>
</div>
<span class="time-span-chat ms-2">11:29</span>
<div class="card bg-field-grey text-white mb-1">
<span class="pt-1 pb-1 ps-1 pe-1"><span class="fw-bold" style="color: yellow">youranus420:</span> bora crash?</span>
</div>
<span class="time-span-chat ms-2">11:30</span>
<div class="card bg-field-grey text-white mb-1">
<span class="pt-1 pb-1 ps-1 pe-1"><span class="fw-bold" style="color: purple">elon musk:</span> Olha o nome do cara kkkkk</span>
</div>
</div>
</div>
<div class="row h-10">
<div class="bg-primary text-center position-absolute end-3 bottom-6 w-94 h-5">
<div class="input-group mb-3">
<input type="text" class="chat-font form-control" placeholder="Your message" aria-label="Message">
<button class="chat-font btn btn-outline-secondary" type="button" id="button-addon2">Send</button>
</div>
</div>
</div>
</div>
</div>
<!--Container Main start-->
<div class="height-100 main-container-page">
<div class="container h-100">
<img style="display: none;" src="./img/foguete.png" alt="foguete" id="img-rocket" />
<img style="display: none;" src="./img/explosion.png" alt="explosion" id="img-explosion" />
<div class="row h-50 gx-0">
<div class="col-12 col-sm-5 order-sm-1 order-2 bg-opacity-white bg-opacity-25 text-center game-top pt-4 ps-5 pe-5">
<div class="card bg-field-grey text-white mb-3">
<div class="d-flex justify-content-between">
<button type="button" class="white-bs-color fw-bold opacity-50 btn btn-primary w-46">Normal</button>
<button type="button" class="white-bs-color fw-bold btn btn-primary w-46">Auto</button>
</div>
</div>
<div class="card bg-field-grey text-white mb-3">
<span class="pt-1 pb-1 ps-1 pe-1"><span class="fw-bold" style="color: yellow">youranus420:</span> oi putões</span>
</div>
</div>
<div class="col-12 col-sm-7 order-sm-2 order-1 bg-opacity-white bg-opacity-25 text-center game-col">
<div class="d-flex h-80 game-block pt-4 ps-4 pe-4">
<canvas class="crash-canvas" id="canvas" height="400px" width="700px"></canvas>
</div>
<div class="d-block h-35 game-top ps-3 pt-3">
<div class="d-flex text-white fw-bold ms-1 mb-3">
Last runs:
</div>
<div class="d-flex justify-content-start">
<span class="badge bg-primary ms-1 me-1">2.37x</span>
<span class="badge bg-primary ms-1 me-1">2.37x</span>
<span class="badge bg-primary ms-1 me-1">2.37x</span>
<span class="badge bg-primary ms-1 me-1">2.37x</span>
<span class="badge bg-primary ms-1 me-1">2.37x</span>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="position-absolute bottom-5 end-5 float-icon-chat" id="chatButton" role="button">
<span class="position-absolute top-15 start-20"><i class="far fa-comment-dots" style="font-size: 40px;"></i></span>
</a>
<!--Container Main end-->
</body>
</html>
CSS:
#import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
:root {
--top-header-top-position: 1.5rem;
--header-height: 3rem;
--nav-width: 68px;
--chat-width: 100px;
--primary-color: var(--bs-primary);
--secondary-color: var(--bs-secondary);
--field-gray: var(--bs-field-grey);
--field-grey-transparency: var(--bs-field-grey-transparency);
--white-color: var(--bs-white);
--body-font: 'Montserrat', sans-serif;
--normal-font-size: 1rem;
--z-fixed: 100;
--z-topbar: 101;
}
*,
::before,
::after {
box-sizing: border-box
}
.top-header {
width: 100%;
height: var(--top-header-top-position);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--secondary-color);
z-index: var(--z-topbar);
transition: .5s;
text-align: center !important;
}
.header {
width: 100%;
height: var(--header-height);
position: fixed;
top: var(--top-header-top-position);
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--primary-color);
z-index: var(--z-fixed);
transition: .5s
}
.main-container-page {
padding-top: calc(var(--header-height) + var(--top-header-top-position) + 5rem);
z-index: 5000;
}
.header_toggle {
color: var(--primary-color);
font-size: 1.5rem;
cursor: pointer
}
.header_img {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden
}
.header_img img {
width: 40px
}
.l-navbar {
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--primary-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-fixed)
}
.r-navbar {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100vh;
background-color: var(--primary-color);
padding: 1rem 0 0 1rem;
transition: .5s;
z-index: var(--z-fixed);
padding: 1rem 0 0 1rem;
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
margin-top: 5rem;
}
.nav_logo,
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem;
text-decoration: none;
}
.nav_logo {
margin-bottom: 2rem
}
.nav_logo-icon {
font-size: 1.25rem;
color: var(--white-color)
}
.nav_logo-name {
color: var(--white-color);
font-weight: 700
}
.nav_link {
position: relative;
color: var(--white-color);
margin-bottom: 1.5rem;
transition: .3s
}
.nav_link:hover {
color: var(--white-color)
}
.nav_icon {
font-size: 1.25rem;
}
.secondary-bs-color {
color: var(--bs-secondary)
}
.white-bs-color {
color: var(--white-color)
}
.show-left-nav {
left: 0;
width: calc(var(--nav-width) + 156px);
}
.show-right-nav {
width: 100%;
}
.body-menu-pd {
padding-left: calc(var(--nav-width) + 188px);
}
.body-chat-pd {
padding-right: calc(var(--chat-width) + 1rem);
}
.chat-font {
font-size: small;
}
.time-span-chat {
font-size: smaller;
color: var(--white-color);
}
#chatContainer {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
#chatContainer::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
.active {
color: var(--white-color)
}
.active::before {
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--white-color)
}
.height-100 {
height: 100vh
}
.float-icon-chat {
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: var(--secondary-color);
color: var(--white-color);
border-radius: 50px;
text-align: center;
vertical-align: middle;
z-index: 100;
}
.coin-dropdown-item {
color: var(--white-color);
}
.coin-dropdown-item:hover {
color: var(--secondary-color);
background-color: var(--field-grey-transparency);
font-weight: bold;
}
#media screen and (min-width: 768px) {
.header {
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
}
.header_img {
width: 40px;
height: 40px
}
.header_img img {
width: 45px
}
.l-navbar {
left: 0;
padding: 1rem 1rem 0 0
}
.r-navbar {
right: 0;
padding: 1rem 0 0 1rem;
width: 0;
}
.show-left-nav {
width: calc(var(--nav-width) + 156px)
}
.show-right-nav {
width: calc(var(--chat-width) + 156px)
}
.body-menu-pd {
padding-left: calc(var(--nav-width) + 188px);
}
.body-chat-pd {
padding-right: calc(var(--chat-width) + 156px)
}
}
/* Media queries for conditional borders on games */
.game-col {
border-left: none;
}
.game-block {
border-bottom: none;
}
.game-top {
border-top: 1px solid var(--white-color);
}
#media (min-width: 576px) {
.game-col {
border-left: 1px solid var(--white-color);
}
.game-block {
border-bottom: 1px solid var(--white-color);
}
.game-top {
border-top: none;
}
}
/* crash game */
.crash-canvas {
width: 100%;
max-width: 750px;
border-radius: 7px;
background-color: #0f1923;
margin: 0rem auto 2rem auto;
}
Why do you don't use the CSS filter property on your background image? you can use filter: brightness(0.5); or filter: opacity(0.5); on your image to make it semi-transparent black.
more of CSS filter property: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Why not use linear-gradient with background-image like so
background-image: linear-gradient(rgba( 0, 0, 0, 0.5), rgba( 0, 0, 0, 0.5)), url("./img/Home e Roleta.png");
Since both color are same(rgba( 0, 0, 0, 0.5)) shades will be constant and will be part of the background-image.
Related
When you hover over the image, the place where it should go down from top to bottom does not work and the image does not grow when I hover over it.
Here I want the place labeled "downmen" to go down with a top-down effect. At the same time I want the picture I hover over to grow a little.
As a result, when both hover over the image, I want one to go down from the top and the other to make the image grow.
Note I used bootstrap 5 while doing these.
.section-two-card-inner-two {
position: relative;
}
.section-two-card-inner-two .downmen {
display: none;
position: absolute;
z-index: 1;
width: 100%;
height: 110px;
padding: 2% 10%;
}
.section-two-card-inner-two:hover .downmen {
display: block;
}
.section-two-card-inner-two .downmen img {
height: 55px;
}
.card-title-head {
padding-top: 100px;
}
.section-two-card-inner-two a {
padding-top: 15%;
}
.section-two-card .card-title {
font-weight: 600;
font-family: 'Manrope', sans-serif;
font-size: 1.3rem;
line-height: 26px;
}
.section-two-card .card-text {
font-weight: 700;
font-family: 'League Spartan', sans-serif;
font-size: 26px;
line-height: 30px;
}
.section-two-card .card-text:hover {
color: #ccc;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap-grid.min.css" />
<div class="row row-cols-1 row-cols-lg-2 section-two-card m-0">
<div class="col p-2 section-two-card-inner ">
<div class="card bg-dark text-white section-two-card-inner-two ">
<div class="downmen d-flex text-secondary align-items-center ">
<img src="https://picsum.photos/seed/picsum/55" alt=".." class="img-fluid rounded-circle me-3">
<div class="col-10">
<h4 class="fw-normal">Posted by <strong>admin</strong></h4>
<h4 class="fw-normal">August 27, 2025</h4>
</div>
</div>
<img src="https://picsum.photos/500" alt="" class="rounded-4 border-0 img-fluid">
<div class="card-img-overlay p-4 p-sm-5 border border-0 ">
<div class="d-flex card-title-head">
<h5 class="card-title text-secondary">Most Read </h5>
<h4 class="card-title ms-3"><i class="bi bi-clock fs-5 text-white me-2"></i> 6 min read</h4>
</div>
<p class="card-text">This will help you become the first and strengthen your position</p>
Read More <i class="bi bi-arrow-right ms-2 fs-4"></i>
</div>
</div>
</div>
</div>
Your example provides everything you need. Just use your browser to inspect the initial state of the relevant elements (.card_post) and that after forcing hover on .item-wrapper.
The only lingering issue is that the hover state is triggered on an element which is larger than the image. That could be refined with layout adjustments.
.section-two-card-inner-two {
position: relative;
overflow: hidden; /* new */
}
.section-two-card-inner-two img {
transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s; /* new */
}
.section-two-card-inner-two:hover img {
transform: scale(1.1); /* new */
}
.section-two-card-inner-two .downmen {
opacity: 0; /* new */
transform: translateY(-10px); /* new */
transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s; /* new */
position: absolute;
z-index: 1;
width: 100%;
height: 110px;
padding: 2% 10%;
}
.section-two-card-inner-two:hover .downmen {
opacity: 1; /* new */
transform: translateY(0); /* new */
}
.section-two-card-inner-two .downmen img {
height: 55px;
}
.card-title-head {
padding-top: 100px;
}
.section-two-card-inner-two a {
padding-top: 15%;
}
.section-two-card .card-title {
font-weight: 600;
font-family: 'Manrope', sans-serif;
font-size: 1.3rem;
line-height: 26px;
}
.section-two-card .card-text {
font-weight: 700;
font-family: 'League Spartan', sans-serif;
font-size: 26px;
line-height: 30px;
}
.section-two-card .card-text:hover {
color: #ccc;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap-grid.min.css" />
<div class="row row-cols-1 row-cols-lg-2 section-two-card m-0">
<div class="col p-2 section-two-card-inner ">
<div class="card bg-dark text-white section-two-card-inner-two ">
<div class="downmen d-flex text-secondary align-items-center ">
<img src="https://picsum.photos/seed/picsum/55" alt=".." class="img-fluid rounded-circle me-3">
<div class="col-10">
<h4 class="fw-normal">Posted by <strong>admin</strong></h4>
<h4 class="fw-normal">August 27, 2025</h4>
</div>
</div>
<img src="https://picsum.photos/500" alt="" class="rounded-4 border-0 img-fluid">
<div class="card-img-overlay p-4 p-sm-5 border border-0 ">
<div class="d-flex card-title-head">
<h5 class="card-title text-secondary">Most Read </h5>
<h4 class="card-title ms-3"><i class="bi bi-clock fs-5 text-white me-2"></i> 6 min read</h4>
</div>
<p class="card-text">This will help you become the first and strengthen your position</p>
Read More <i class="bi bi-arrow-right ms-2 fs-4"></i>
</div>
</div>
</div>
</div>
I want the image in my site to completely change when the browser is resized.
I've been using media-queries, but I can't seem to get it right. Any thoughts/tips?
The thing is I have tried the display trick with media query but its not working
I did this, but it's not working even when I am lowering the viewport. The image in the laptop viewport remains the same in the phone viewport.
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display: block;
}
.blocks {
display: none;
}
}
<div class="col-lg-6 border:1px">
<img class="blocks" src="https://via.placeholder.com/200" alt="laptop-mockup">
<img class="mob" src="https://via.placeholder.com/200/ff0000" alt="android-mockup">
</div>
The whole html and css code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News homepage</title>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght#600;700;800&family=PT+Sans:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="navigator">
<nav class="navbar navbar-expand-sm navbar-dark navbar-light">
<a class="navbar-brand" href=""> <img src="C:\Users\91826\Desktop\news-homepage-main\css\images\logo.svg" alt="My Happy SVG" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation navbar-light">
<span class="navbar-toggler-icon navi"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer">Home </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#pricing"> New </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#cta"> Popular </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link" href="#footer"> Trending </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer"> Categories </a>
</li>
</ul>
</div>
</nav>
</div>
<div class="row ">
<div class="col-lg-6 border:1px">
<img class="blocks" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-desktop.jpg" alt="laptop-mockup">
<img class="mob" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-mobile.jpg" alt="android-mockup">
</div>
<div class="tag">
<h1 class="tagline">The Bright<br />Future of<br />Web 3.0?</h1>
</div>
<div class="read">
<h1 class="readline">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people.
But is it really fulfilling its promise?</h1>
</div>
<button class="button-50 readmore" type="button" name="button">READ MORE</button>
<div class="col-lg-6 border:1px">
<div class="new">
<h1>New</h1>
<h2>Hydrogen VS Electric Cars</h2>
<h3>Will hydrogen-fueled cars ever catch up to EVs?</h3>
<hr>
<h2>The Downsides of AI Artistry</h2>
<h3>What are the possible adverse effects of on-demand AI image generation?</h3>
<hr>
<h2>Is VC Funding Drying Up?</h2>
<h3>Private funding by VC firms is down 50% YOY. We take a look at what that means.</h3>
</div>
</div>
</div>
</div>
<div class="info">
<div class="row">
<div class="col-lg-4 box">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-retro-pcs.jpg" alt="" />
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1 "> 01</h1>
<h2 class="infohead2"> Reviving Retro PCs</h2>
<h3 class="infohead3"> What happens when old PCs<br>are given modern upgrades?</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-gaming-growth.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf1 inf">
<h1 class="infohead1"> 02</h1>
<h2 class="infohead2"> Top 10 laptops of 2022</h2>
<h3 class="infohead3">Our best picks for various <br> needs and budgets.</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-top-laptops.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1"> 03</h1>
<h2 class="infohead2"> The Growth of Gaming</h2>
<h3 class="infohead3">How the pandemic has sparked <br> fresh opportunities.</h3>
</div>
</div>
</div>
</div>
</div>
<hr class="hori">
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Saswat Seth.
</div>
</body>
</html>
CSS
.navigator {
margin-bottom: 2%;
}
body {
padding: 0% 10% 2% 10%;
}
.nav-link {
color: black;
}
:hover.nav-link {
color: #6B728E;
}
.navigator {
padding: 2% 5% 0% 0%;
}
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display:block;
}
.blocks {
display:none;
}
}
.new {
height: 85%;
width: 23%;
background: hsl(240, 100%, 5%);
position: absolute;
right: 140px;
padding: 2%;
}
.navelement {
padding-right: 6%;
font-size: 100%;
}
h1 {
color: hsl(35, 77%, 62%);
font-family: 'noto sans';
font-weight: 600;
}
h2 {
color: #fff;
font-size: 23px;
margin-top: 10%;
font-family: 'noto sans';
font-weight: 700;
}
h3 {
color: #6B728E;
font-size: 15px;
padding: 4% 0%;
line-height: 25px;
}
hr {
color: #fff;
border-top: solid white;
}
.tag {
position: absolute;
bottom: 20px;
}
.tagline {
font-family: 'noto sans';
color: #000;
font-weight: 800;
font-size: 60px;
}
.read {
padding: 2% 38%;
position: absolute;
bottom: 54px;
right: -15px;
}
.readline {
font-size: 110%;
color: #6B728E;
line-height: 27px;
}
.button-50 {
height: 49px;
width: 200px;
appearance: button;
background-color: hsl(5, 85%, 63%);
background-image: none;
border: 1px solid #000;
border-radius: 4px;
box-shadow: #B73E3E 4px 4px 0 0, #000 4px 4px 0 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "Montserrat";
font-size: 18px;
font-weight: 400;
line-height: 20px;
margin: 20% 5% 10% 0%;
overflow: visible;
padding: 14px 30px;
text-align: center;
text-transform: none;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
position: absolute;
bottom: -45px;
right: 45%;
}
.button-50:focus {
text-decoration: none;
}
.button-50:hover {
text-decoration: none;
}
.button-50:active {
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
outline: 0;
}
.button-50:not([disabled]):active {
box-shadow: #C9BBCF 2px 2px 0 0, #1d1716 2px 2px 0 1px;
transform: translate(2px, 2px);
}
.readmore {
margin: 10% 3% 5% 0;
font-family: 'Poppins';
font-weight: 400;
}
.info {
margin-top: 5%;
margin-left: 10%;
position: absolute;
right: 10%;
}
.infoimg {
width: 315%;
padding: 20%;
}
.infohead1 {
color: #7D9D9C;
}
.infohead2 {
color: #000;
}
.inf {
padding: 30%;
margin-left: 68px;
white-space: nowrap;
}
.hori {
margin-top: 10%;
color: #000;
border-top: solid black;
}
#media (max-width:350px) {
img{
object-fit: cover;
height: 400px;
}
}
#media screen and (max-width:400px) {
.mob {
display: block;
}
}
I am building a page based on bootstrap5, yet I am having a problem in the positioning of the footer and the main content container.
The page was working fine until I added the footer:
before footer picture:
after footer picture:
I am providing a simplified code as a snippet here (all mages and some styles are broken, but notice the overflow at the bottom of the page):
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');
:root {
--top-header-top-position: 0rem;
--header-height: 3.5rem;
--nav-width: 68px;
--chat-width: 100px;
--primary-color: var(--bs-primary);
--secondary-color: var(--bs-secondary);
--field-gray: var(--bs-field-grey);
--field-grey-transparency: var(--bs-field-grey-transparency);
--white-color: var(--bs-white);
--body-font: 'Arimo', 'Montserrat', sans-serif;
--normal-font-size: 1rem;
--z-fixed: 51;
--z-lnavbar: 50;
--z-chat: 50;
--z-topbar: 51;
}
*,
::before,
::after {
box-sizing: border-box
}
.modal-backdrop {
z-index: 100000 !important;
}
.modal {
z-index: 100001 !important;
}
.top-header {
width: 100%;
height: var(--top-header-top-position);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--secondary-color);
z-index: var(--z-topbar);
transition: .5s;
text-align: center !important;
}
.header {
width: 100%;
height: var(--header-height);
position: fixed;
top: var(--top-header-top-position);
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--primary-color);
z-index: var(--z-fixed);
transition: .5s
}
.main-container-page {
padding-top: calc(var(--header-height) + var(--top-header-top-position) + 5rem);
z-index: 5000;
}
.header_toggle {
color: var(--primary-color);
font-size: 1.5rem;
cursor: pointer;
}
.header_img {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden
}
.header_img img {
width: 40px
}
#account-icon:hover {
color: var(--white-color);
}
.l-navbar {
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--primary-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-lnavbar);
}
.r-navbar {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100vh;
background-color: var(--primary-color);
padding: 1rem 0 0 1rem;
transition: .5s;
z-index: 5000;
padding: 1rem 0 0 1rem;
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
margin-top: 5rem;
}
.nav_logo,
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 1.5rem 2rem;
text-decoration: none;
}
.nav_link {
position: relative;
color: var(--white-color);
margin-bottom: 0rem;
transition: .3s
}
.nav_logo {
margin-bottom: 3rem
}
.nav_logo-icon {
font-size: 1.25rem;
color: var(--white-color)
}
.nav_logo-name {
color: var(--white-color);
font-weight: 700
}
.nav_link:hover {
color: var(--secondary-color) !important;
}
.nav_icon {
margin-left: -1rem;
font-size: 1.2rem;
}
.nav_name {
margin-left: -0.5rem;
font-size: 1rem;
}
.secondary-bs-color {
color: var(--bs-secondary)
}
.white-bs-color {
color: var(--white-color)
}
.show-left-nav {
left: 0;
width: calc(var(--nav-width) + 156px);
}
.show-right-nav {
width: 100%;
}
.body-chat-pd {
padding-right: calc(var(--chat-width) + 1rem);
}
.chat-font {
font-size: small;
}
.time-span-chat {
font-size: smaller;
color: var(--white-color);
}
#chatContainer {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
#chatContainer::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
.active {
font-weight: bold;
color: var(--secondary-color);
}
.active::before {
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--secondary-color)
}
.height-100 {
height: 100vh
}
.float-icon-chat {
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: var(--secondary-color);
color: var(--white-color);
border-radius: 50px;
text-align: center;
vertical-align: middle;
z-index: 100;
}
.coin-dropdown-item {
color: var(--white-color);
}
.coin-dropdown-item:hover {
color: var(--secondary-color);
background-color: var(--field-grey-transparency);
font-weight: bold;
}
#media screen and (min-width: 768px) {
.header {
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 1.5rem;
}
.header_img {
width: 40px;
height: 40px
}
.header_img img {
width: 45px
}
.l-navbar {
left: 0;
padding: 1rem 1rem 0 0
}
.r-navbar {
right: 0;
padding: 1rem 0 0 1rem;
width: 0;
}
.show-left-nav {
width: calc(var(--nav-width) + 188px)
}
.body-menu-pd {
padding-left: calc(var(--chat-width) + 188px)
}
.show-right-nav {
width: calc(var(--chat-width) + 188px)
}
.body-chat-pd {
padding-right: calc(var(--chat-width) + 192px)
}
}
/* Media queries for conditional borders on games */
.game-col {
border-left: none;
}
.game-block {
border-bottom: none;
}
.game-top {
border-top: 1px solid var(--white-color);
}
#media (min-width: 576px) {
.game-col {
border-left: 1px solid var(--white-color);
}
.game-block {
border-bottom: 1px solid var(--white-color);
}
.game-top {
border-top: none;
}
}
/* crash game */
.crash-canvas {
height: 90%;
width: 100%;
max-width: 750px;
border-radius: 7px;
background-color: #0f1923;
margin: 0rem auto 2rem auto;
}
/* betting menu */
.bet-menu-buttons {
border-radius: 0.8rem;
width: 55px;
height: 50px;
font-size: 1.0rem;
color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
background-color: #262833;
color: #fff;
}
.crash-result {
border-radius: 0.8rem;
width: 40px;
height: 35px;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
background-color: #262833;
color: #fff;
}
.bettor-table-item {
border-bottom: 1px solid var(--white-color);
}
.bet-box1 {
border-left: 0.5px solid var(--field-grey-transparency);
border-top: 0.5px solid var(--field-grey-transparency);
border-right: 0.0px solid var(--field-grey-transparency);
border-bottom: 0.5px solid var(--field-grey-transparency);
}
.bet-box2 {
border-left: 0.0px solid var(--field-grey-transparency);
border-top: 0.5px solid var(--field-grey-transparency);
border-right: 0.0px solid var(--field-grey-transparency);
border-bottom: 0.5px solid var(--field-grey-transparency);
}
.bet-box3 {
border-left: 0.5px solid var(--field-grey-transparency);
border-top: 0.5px solid var(--field-grey-transparency);
border-right: 0.5px solid var(--field-grey-transparency);
border-bottom: 0.5px solid var(--field-grey-transparency);
}
.bet-box3:focus {
border-left: 0.5px solid var(--field-grey-transparency);
border-top: 0.5px solid var(--field-grey-transparency);
border-right: 0.5px solid var(--field-grey-transparency);
border-bottom: 0.5px solid var(--field-grey-transparency);
}
/* pre-footer */
.pre-footer {
height: 700px;
}
#media (min-width: 576px) {
.pre-footer {
height: 200px;
}
.footer-padding {
padding-left: var(--nav-width);
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!--Container Main start-->
<div class="height-100 main-container-page">
<div class="container h-100">
<div class="row gx-0">
<div class="col-12 col-sm-5 order-sm-1 order-2 bg-transparent text-center game-top pt-5 pb-5 ps-5 pe-5 d-flex flex-column justify-content-evenly">
<div class="input-group mb-3 pb-3">
<span class="bet-box1 bg-primary text-white fw-bold input-group-text">Amount</span>
<span class="bet-box2 bg-primary text-white fw-bold input-group-text">TC</span>
<input type="text" class="bet-box3 bg-primary text-white form-control" placeholder="select value here" aria-label="Dollar amount (with dot and two decimal places)">
</div>
<div class="d-flex justify-content-between mb-3 pb-3">
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
2x
</div>
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
10x
</div>
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
1/2
</div>
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
+5
</div>
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
+10
</div>
</div>
<div class="d-block flex-column justify-content-center align-items-start mb-3 pb-3">
<span class="text-white fw-bold">
Select your side
</span>
</div>
<div class="d-block justify-content-arround h-100 w-100 mb-3 pb-3">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2">
</div>
<div class="d-flex flex-column mb-3 pb-3">
<button class="btn btn-secondary fw-bold border border-secondary rounded-pill">Bet</button>
</div>
<div class="d-flex justify-content-between pt-3">
<div class="d-block ps-3">
<i class="fas fa-expand fa-2x text-white"></i>
</div>
<div class="d-flex pe-3">
<div class="d-block">
<i class="fas fa-history fa-2x text-white"></i>
</div>
<div class="d-block ps-3">
<i class="fas fa-volume-mute fa-2x text-white"></i>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-7 order-sm-2 order-1 bg-transparent text-center game-col pb-5">
<div class="d-block h-80 game-block pt-4 ps-4 pe-4">
<div class="d-block h-3 ps-5 pt-3 pb-5">
<div class="d-flex bg-transparent w-92 position-relative" style="height: 22px;">
<span class="position-absolute w-100 start-0 text-white fw-bold">Girando em 00:20</span>
<div id="time-bar" class="d-flex border border-0 border-primary rounded-pill bg-secondary ps-1 pe-1 pt-1 pb-1" style="height: 22px; width: 5%;"></div>
</div>
</div>
<div class="d-flex">
<div class="coin" id="coin" data-spin="tails">
<div class="coin__front"></div>
<div class="coin__edge">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="coin__back"></div>
<div class="coin__shadow"></div>
</div>
</div>
</div>
<div class="d-flex flex-column h-35 game-top ps-3 pt-3 pb-5">
<div class="d-flex text-white fw-bold ms-1 mb-2">
Last runs:
</div>
<div class="d-flex justify-content-start">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2" style="min-width: 0;">
</div>
</div>
</div>
</div>
<!-- Row for displaying bets -->
<div class="row mt-5 pb-5 mb-5 gx-0">
<div class="col-12 col-sm-5 bg-primary mt-5">
<div class="container pt-3 pb-3 ps-3 pe-3">
<div class="row gx-0 border-bottom border-white border-2 pb-4">
<div class="col-4">
<img class="mx-auto d-block w-50" src="./img/coin1.png" alt="heads">
</div>
<div class="col-2"></div>
<div class="col-6 align-self-center">
<div class="text-white" style="font-size: xx-large;"> Win 1.9x</div>
</div>
</div>
<div class="row gx-0">
<div class="col-12 mt-3">
<div class="d-flex justify-content-between">
<div class="d-block">
<span class="text-white">Total bets</span>
</div>
<div class="d-block">
<div class="text-white" style="font-size: larger;"><span class="fw-bold">0 TC</span></div>
</div>
</div>
</div>
</div>
<div class="row gx-0 bg-secondary mt-3">
<div class="col-8 text-left text-white ps-3">User</div>
<div class="col-4 text-center text-white">Bet</div>
</div>
<div class="row gx-0 pt-2 pb-2 ">
<div class="col-8 text-left text-white ps-3">Elon Musk</div>
<div class="col-4 text-center text-white">270 TC</div>
</div>
<div class="row gx-0 pt-2 pb-2 ">
<div class="col-8 text-left text-white ps-3">Tony Ramos</div>
<div class="col-4 text-center text-white">135 TC</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
<div class="col-12 col-sm-5 bg-primary bg-opacity-50 mt-5">
<div class="container pt-3 pb-3 ps-3 pe-3">
<div class="row gx-0 border-bottom border-white border-2 pb-4">
<div class="col-4">
<img class="mx-auto d-block w-50" src="./img/coin2.png" alt="heads">
</div>
<div class="col-2"></div>
<div class="col-6 align-self-center">
<div class="text-white" style="font-size: xx-large;"> Win 1.9x</div>
</div>
</div>
<div class="row gx-0">
<div class="col-12 mt-3">
<div class="d-flex justify-content-between">
<div class="d-block">
<span class="text-white">Total bets</span>
</div>
<div class="d-block">
<div class="text-white" style="font-size: larger;"><span class="fw-bold">0 TC</span></div>
</div>
</div>
</div>
</div>
<div class="row gx-0 bg-secondary mt-3">
<div class="col-8 text-left text-white ps-3">User</div>
<div class="col-4 text-center text-white">Bet</div>
</div>
<div class="row gx-0 pt-2 pb-2 ">
<div class="col-8 text-left text-white ps-3">Elon Musk</div>
<div class="col-4 text-center text-white">270 TC</div>
</div>
<div class="row gx-0 pt-2 pb-2 ">
<div class="col-8 text-left text-white ps-3">Tony Ramos</div>
<div class="col-4 text-center text-white">135 TC</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Container Main end-->
<a class="position-fixed bottom-5 end-5 float-icon-chat" id="chatButton" role="button">
<span class="position-absolute top-15 start-20"><i class="far fa-comment-dots" style="font-size: 40px;"></i></span>
</a>
<div class="pre-footer mt-5 pt-5 mb-5 pb-5"></div>
<footer class="text-center text-lg-start bg-primary text-muted pt-5 mt-5 w-100">
<div class="container text-center text-md-start mt-5">
<div class="row mt-3">
<div class="col-6 mx-auto mt-5 mb-5">
<div class="d-block justify-content-center">
<div class="d-flex justify-content-center">
<img class="w-40 h-auto center-block" src="./img/Logo horizontal.png" alt="Vegaz logo">
</div>
<div class="d-flex justify-content-center mt-3">
<i class="fab fa-instagram fa-4x me-3"></i>
<i class="fab fa-facebook fa-4x"></i>
</div>
</div>
</div>
<div class="col-1"></div>
<div class="col-5 mx-auto mt-4 mb-4 position-relative">
<div class="d-flex">
<h3 class="text-white fw-bold">About Us</h3>
</div>
<div class="d-flex">
Terms of service
</div>
<div class="d-flex">
Privacy policy
</div>
<div class="d-flex position-absolute bottom-0 start-2">
<span>©2022 Vegaz All rights reserved</span>
</div>
</div>
</div>
</div>
</footer>
You're assigning the main containers a fixed height based on the viewport size (classes height-100 and h-100), even when the viewport is smaller than the content of those containers. The content will therefore overflow the container into whatever comes after it, in this case the footer.
I need to do this kind of slider that is just three circles connected by a line and with a description below each circle:
But at the moment I just have this:
And this is the code I used to make that:
<div
class="
text-center
my-5
px-5
d-flex
align-items-center
justify-content-between
slider-container
"
>
<div class="slider-item">
<i
class="
icon-circle
fs-16 fs-md-20
d-inline-block
text-gray-300
"
></i>
<p class="m-0 font-RobotoBold1 fs-10 fs-md-12 mt-2">
Selecciona <br />
cantidad
</p>
</div>
<div>
<i
class="
icon-circle
fs-16 fs-md-20
d-inline-block
text-gray-300
"
></i>
<p class="m-0 font-RobotoBold1 fs-10 fs-md-12 mt-2">
Selecciona <br />
destino
</p>
</div>
<div>
<i
class="
icon-circle
fs-16 fs-md-20
d-inline-block
text-gray-300
"
></i>
<p class="m-0 font-RobotoBold1 fs-10 fs-md-12 mt-2">
Confirma <br />
transferencia
</p>
</div>
</div>
This is the css code:
.slider-container {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em;
overflow: hidden;
}
.slider-container::before {
position: absolute;
top: calc(50% - 20px);
right: 0;
left: 0;
Content: "";
Background-color: grey;
height: 1px;
z-index: -1;
}
Anyone knows how to make that line behind the circles and that doesn't exceed them?
Sidenote: This is why I would never use tailwindcss or the likes. You don't need it, and it totally ruins the HTML.
Now compare the markup you have with the markup below - which is a) much, much more concise, b) using only a single CSS class and c) using the proper semantic elements for the job.
It also works for 2 or 4 or 7 items. Sure it needs some refinement regarding size and color of the active circle, but that should be an easy adjustment for you.
The only restriction of this solution is that your page background-color needs to be solid and be matched by the background-color of the ::after elements.
document.querySelectorAll('.steplist').forEach(steplist => {
steplist.addEventListener('click', function(event) {
if (event.target.nodeName !== 'LI') return;
const items = event.target.closest('.steplist').querySelectorAll('li');
for (const item of items) {
item.classList.toggle('active', item === event.target);
}
});
});
*, ::after, ::before { box-sizing: border-box; }
.steplist {
border-top: 2px solid #ccc;
display: inline-flex;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
list-style-type: none;
gap: 7em;
margin: 0;
padding: 0;
--circle-radius: 8px;
}
.steplist li {
color: #999;
cursor: pointer;
padding: calc(5px + var(--circle-radius)) 0 0;
margin: 0;
position: relative;
text-align: center;
}
.steplist li::before {
background-color: #ccc;
border-radius: 50%;
content: '';
position: absolute;
height: calc(2 * var(--circle-radius));
width: calc(2 * var(--circle-radius));
top: 0;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.steplist .active {
color: black;
}
.steplist .active::before {
background-color: green;
box-shadow: 0 0 0 3px rgba(0,255,0,.25);
}
.steplist li:first-child::after {
background-color: white;
content: '';
position: absolute;
height: 2px;
width: 100%;
top: -2px;
left: calc(-50% - var(--circle-radius));
}
.steplist li:last-child::after {
background-color: white;
content: '';
position: absolute;
height: 2px;
width: 100%;
top: -2px;
left: calc(50% + var(--circle-radius));
}
.circle-big {
--circle-radius: 12px;
}
<ol class="steplist">
<li>Point 1<br>whatever</li>
<li>Point 2<br>whatever</li>
<li>Point 3<br>whatever</li>
</ol>
<br><br><br>
<ol class="steplist circle-big">
<li>Point 1<br>whatever</li>
<li>Point 2<br>whatever</li>
<li>Point 3<br>whatever</li>
<li>Point 4<br>whatever</li>
</ol>
Finally I solve the case with this code, I added the custom classes so you can understand what are those, and in the slider-container:before, the formula 'top: calc(50% - 22px)', the px can change depending of the size of the screen. :
/* slider css code */
.slider-container {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em;
overflow: hidden;
}
.slider-container::before {
position: absolute;
top: calc(50% - 22px);
right: 65px;
left: 65px;
content: "";
background-color: #d8d8d8;
height: 1px;
z-index: -1;
}
#media (max-width: 768px) {
.slider-container::before {
top: calc(50% - 22px);
right: 60px;
left: 60px;
}
}
/* this are custom css classes we use at work */
.wi-12 {
width: 12px;
}
.he-12 {
height: 12px;
}
.wi-24 {
width: 24px;
}
.he-24 {
height: 24px;
}
#media (min-width: 768px) {
.wi-md-20 {
width: 20px;
}
.he-md-20 {
height: 20px;
}
.wi-md-30 {
width: 30px;
}
.he-md-30 {
height: 30px;
}
.wi-md-100 {
width: 100px;
}
}
.wi-70 {
width: 70px;
}
.bg-green-700 {
background-color: #00bf79;
}
.bg-gray-300 {
background-color: #bababa;
}
.bor-rounded-full {
border-radius: 50%;
}
.font-Roboto {
font-family: "Roboto";
}
.fs-10 {
font-size: 10px;
}
.fs-md-12 {
font-size: 12px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="
text-center
mt-md-4
px-4
d-flex
align-items-center
justify-content-between
slider-container
mb-md-3
">
<div class="slider-item wi-70 wi-md-100">
<div class="
wi-24
he-24
wi-md-30
he-md-30
bor-rounded-full
d-inline-flex
justify-content-center
align-items-center
" style="
background: rgba(0, 191, 121, 0.3);
">
<div class="wi-12 he-12 wi-md-20 he-md-20 bg-green-700 bor-rounded-full d-inline-block"></div>
</div>
<p class="m-0 font-Roboto fs-10 fs-md-12 mt-2">
Selecciona <br /> cantidad
</p>
</div>
<div class="slider-item wi-70 wi-md-100">
<div class="
wi-24
he-24
wi-md-30
he-md-30
bor-rounded-full
d-inline-flex
justify-content-center
align-items-center
">
<div class="wi-12 he-12 wi-md-20 he-md-20 bg-gray-300 bor-rounded-full d-inline-block"></div>
</div>
<p class="m-0 font-Roboto fs-10 fs-md-12 mt-2">
Selecciona <br /> destino
</p>
</div>
<div class="slider-item wi-70 wi-md-100">
<div class="
wi-24
he-24
wi-md-30
he-md-30
bor-rounded-full
d-inline-flex
justify-content-center
align-items-center
">
<div class="wi-12 he-12 wi-md-20 he-md-20 bg-gray-300 bor-rounded-full d-inline-block"></div>
</div>
<p class="m-0 font-Roboto fs-10 fs-md-12 mt-2">
Confirma <br /> transferencia
</p>
</div>
</div>
I'm using Bootstrap 3.3.7 and Angular 5.2.0. I have a loop with the addition of a new entry. Entries are added to "cards". But the problem is that they are now added vertically. And how can I make it so that they are added all along the horizontally by about 5 "cards" in a row as a new record is added ie 6 was transferred to a new row.
html and all css on the cards: :
.card{
display: inline-block;
position: relative;
width: 100%;
margin: 25px 0;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
border-radius: $border-radius-base;
color: $mdb-card-body-text;
background: $mdb-card-body-background;
.card-height-indicator {
margin-top: 100%;
}
.title{
margin-top: 0;
margin-bottom: 5px;
}
.card-image {
height: 60%;
position: relative;
overflow: hidden;
margin-left: 15px;
margin-right: 15px;
margin-top: -30px;
border-radius: $border-radius-large;
img {
width: 100%;
height: 100%;
border-radius: $border-radius-large;
pointer-events: none;
}
.card-title {
position: absolute;
bottom: 15px;
left: 15px;
color: $mdb-card-image-headline;
font-size: $font-size-h4;
text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
}
}
.category:not([class*="text-"]){
color: $gray-color;
}
.card-content{
padding: 15px 20px;
.category{
margin-bottom: 0;
}
}
.card-header{
#include shadow-big();
margin: -20px $margin-base 0;
border-radius: $border-radius-base;
padding: $padding-base;
background-color: $gray-color;
.title{
color: $white-color;
}
.category{
margin-bottom: 0;
color: rgba($white-color, .62);
}
&.card-chart{
padding: 0;
min-height: 160px;
+ .content{
h4{
margin-top: 0;
}
}
}
.ct-label{
color: rgba($white-color, .7);
}
.ct-grid{
stroke: rgba(255, 255, 255, 0.2);
}
.ct-series-a .ct-point,
.ct-series-a .ct-line,
.ct-series-a .ct-bar,
.ct-series-a .ct-slice-donut{
stroke: rgba(255,255,255,.8);
}
.ct-series-a .ct-slice-pie,
.ct-series-a .ct-area{
fill: rgba(255,255,255,.4);
}
}
.chart-title{
position: absolute;;
top: 25px;
width: 100%;
text-align: center;
h3{
margin: 0;
color: $white-color;
}
h6{
margin: 0;
color: rgba(255,255,255, .4);
}
}
.card-footer{
margin: 0 20px 10px;
padding-top: 10px;
border-top: 1px solid #eeeeee;
.content{
display: block;
}
div{
display: inline-block;
}
.author{
color: $gray-color;
}
.stats{
line-height: 22px;
color: $gray-color;
font-size: $font-size-small;
.material-icons{
position: relative;
top: 4px;
font-size: $font-paragraph;
}
}
h6{
color: $gray-color;
}
}
img{
width: 100%;
height: auto;
}
.category{
.material-icons{
position: relative;
top: 6px;
line-height: 0;
}
}
.category-social{
.fa{
font-size: 24px;
position: relative;
margin-top: -4px;
top: 2px;
margin-right: 5px;
}
}
.author{
.avatar{
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 50%;
margin-right: 5px;
}
a{
color: $black-color;
text-decoration: none;
.ripple-container{
display: none;
}
}
}
.table{
margin-bottom: 0;
tr:first-child td{
border-top: none;
}
}
[data-background-color="purple"]{
background: linear-gradient(60deg, $purple-400, $purple-600);
#include shadow-big-color($brand-primary);
}
[data-background-color="blue"]{
background: linear-gradient(60deg, $blue-900, $blue-900);
#include shadow-big-color($brand-info);
}
[data-background-color="green"]{
background: linear-gradient(60deg, $green-400, $green-600);
#include shadow-big-color($brand-success);
}
[data-background-color="orange"]{
background: linear-gradient(60deg, $orange-400, $orange-600);
#include shadow-big-color($brand-warning);
}
[data-background-color="red"]{
background: linear-gradient(60deg, $red-400, $red-600);
#include shadow-big-color($brand-danger);
}
[data-background-color]{
color: $white-color;
a{
color: $white-color;
}
}
}
.card-stats{
.title{
margin: 0;
}
.card-header{
float: left;
text-align: center;
i{
font-size: 36px;
line-height: 56px;
width: 56px;
height: 56px;
}
}
.card-content{
text-align: right;
padding-top: 10px;
}
}
.card-nav-tabs{
.header-raised{
margin-top: -$margin-base * 2;
}
.nav-tabs{
background: transparent;
padding: 0;
}
.nav-tabs-title{
float: left;
padding: 10px 10px 10px 0;
line-height: 24px;
}
}
.card-plain{
background: transparent;
box-shadow: none;
.card-header{
margin-left: 0;
margin-right: 0;
}
.content{
padding-left: 5px;
padding-right: 5px;
}
.card-image{
margin: 0;
border-radius: $border-radius-base;
img{
border-radius: $border-radius-base;
}
}
}
.iframe-container{
margin: 0 -20px 0;
iframe{
width: 100%;
height: 500px;
border: 0;
#include shadow-big();
}
}
.card-profile,
.card-testimonial{
margin-top: 30px;
text-align: center;
.btn-just-icon.btn-raised{
margin-left: 6px;
margin-right: 6px;
}
.card-avatar{
max-width: 130px;
max-height: 130px;
margin: -50px auto 0;
border-radius: 50%;
overflow: hidden;
#include shadow-big();
& + .content{
margin-top: 15px;
}
}
&.card-plain{
.card-avatar{
margin-top: 0;
}
}
}
<div class="col-lg-3 col-md-6 col-sm-6">
<div *ngFor="let note of notes" >
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content" >
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save" ><i class="fa fa-eye"></i></button>
<button class="button-trash" ><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
</div>
Add the *ngFor on the following element
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
</div>
</div>
You need to modify the Bopotstrap grid structure to incorporate 5 columns in a row. Try using the following structure, you will be able to get what you want.
.col.col-2 {
flex: 0 0 20%;
max-width: 20%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col col-2">
1 columns
</div>
<div class="col col-2">
2 columns
</div>
<div class="col col-2">
3 columns
</div>
<div class="col col-2">
4 columns
</div>
<div class="col col-2">
5 columns
</div>
<div class="col col-2">
6 columns
</div>
</div>
</div>