How to make responsive horizontal cards?

How to make responsive horizontal cards? - html

My code
I want to create responsive horizontal cards but failing in all cases.
I kind of tried to give different background image according to to the viewport but still failing to accomplish.
HTML
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">
<!-- add icon link -->
<link rel="icon" href="./img/icon1.icon" type="image/x-icon">
<link rel="stylesheet" href="pool.css">
<link rel="stylesheet" href="font.css">
<!-- scrollReveal property -->
<script src="https://unpkg.com/scrollreveal#4"></script>
<script>
window.sr = ScrollReveal({
distance: '50px', //for animation of page scroll
duration: 1000,
easing: 'ease',
mobile: true,
reset: true,
viewFactor: 0.4,
});
</script>
<title>Pool2 | PLAY4LUX</title>
</head>
<body>
<div class="poolContainer">
<div class="container-fluid">
<div class="row ">
<div class="col">
<div class="poolBackground hoverable">
<div class="row poolContentRow">
<!-- Image Container -->
<div class="col-sm-5">
<div class="poolImageContainer"></div>
</div>
<!-- pool Right side content -->
<div class="col-sm-7">
<div class="poolRightContentContainer">
<h3 class="productName gara">GIORGIO ARMANI</h3>
<!-- drawdate -->
<div class="drawDate clearfix gara">
<h6 class="title">Draw Date :</h6>
<h5 class="data float-right">10 / 09 /2020</h5>
</div>
<!-- winning odds -->
<div class="winningOdd clearfix gara">
<h6 class="title">Winning Odds :</h6>
<h5 class="data float-right focused">10 / 300</h5>
</div>
<!-- Actual Price -->
<div class="actualPrice clearfix gara">
<h6 class="title">Actual Price :</h6>
<h5 class="data float-right">180,000.0/-</h5>
</div>
<!-- token Price -->
<div class="tokenPrice clearfix gara">
<h6 class="title">Token Price :</h6>
<h5 class="data float-right focused">180/-</h5>
</div>
<!-- button -->
<div class="buyTicket text-center">
<button class=" btnGold">Buy Ticket</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="poolBackground hoverable">
<div class="row poolContentRow">
<!-- Image Container -->
<div class="col-sm-5">
<div class="poolImageContainer"></div>
</div>
<!-- pool Right side content -->
<div class="col-sm-7">
<div class="poolRightContentContainer">
<h3 class="productName gara">GIORGIO ARMANI</h3>
<!-- drawdate -->
<div class="drawDate clearfix gara">
<h6 class="title">Draw Date :</h6>
<h5 class="data float-right">10 / 09 /2020</h5>
</div>
<!-- winning odds -->
<div class="winningOdd clearfix gara">
<h6 class="title">Winning Odds :</h6>
<h5 class="data float-right focused">10 / 300</h5>
</div>
<!-- Actual Price -->
<div class="actualPrice clearfix gara">
<h6 class="title">Actual Price :</h6>
<h5 class="data float-right">180,000.0/-</h5>
</div>
<!-- token Price -->
<div class="tokenPrice clearfix gara">
<h6 class="title">Token Price :</h6>
<h5 class="data float-right focused">180/-</h5>
</div>
<!-- button -->
<div class="buyTicket text-center">
<button class=" btnGold">Buy Ticket</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js " integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n "
crossorigin="anonymous "></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js " integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo "
crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js " integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6 "
crossorigin="anonymous "></script>
<!-- MDB core JavaScript -->
<script type="/text/javascript " src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/js/mdb.min.js "></script>
</body>
</html>
CSS
.container-fluid {
width: 78%;
margin: 0 auto;
}
.poolBackground {
background-image: url("image/r/Group\ 4#2x.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 565px;
height: 288px;
position: relative;
}
.poolImageContainer {
background-image: url(imgi1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 204px;
height: 264px;
position: absolute;
top: 11px;
left: 30px;
box-shadow: 3px 5px 18px 0px #08061a;
border-width: 4px;
border-style: solid;
border-image: linear-gradient(45deg, #8e602c, #b98b43, #f8ed8d, #b98b43, #8e602c) 1 1 1 1;
}
.poolRightContentContainer {
position: absolute;
top: 38px;
padding-left: 28px;
width: 80%;
}
.productName {
font-size: 20px;
background: linear-gradient(45deg, #8e602c, #f8ed8d);
background: -webkit-linear-gradient(90deg, #8e602c, #f8ed8d, #8e602c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(2px 3px 3px #000);
font-weight: 900;
margin-bottom: .9rem;
}
.title {
display: inline-block;
font-size: 17px;
font-weight: 600;
background: -webkit-linear-gradient(90deg, #fff, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.data {
font-size: 19px;
background: -webkit-linear-gradient(90deg, #fff, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.focused {
font-size: 20px;
background: -webkit-linear-gradient(90deg, #f8ed8d, #f8ed8d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
}
.drawDate, .winningOdd, .actualPrice, .tokenPrice {
background: -webkit-linear-gradient(90deg, #fff, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(2px 4px 3px #000);
font-weight: 600;
margin-bottom: .6rem;
}
/* On hover style */
.tokenPrice .title {
position: absolute;
right: 5px;
top: -39px;
}
.tokenPrice .data {
position: absolute;
right: 24px;
border: 1px solid yellow;
padding: 2px 6px;
}
.actualPrice .data {
position: absolute;
top: 42px;
left: 5px;
border: 1px solid yellow;
padding: 2px 6px;
/* box-shadow: 0px 6px 21px -9px black; */
}
.poolBackground:hover .tokenPrice .title {
position: initial;
}
.poolBackground:hover .tokenPrice .data {
position: initial;
border: none;
}
.poolBackground:hover .actualPrice .data {
position: initial;
border: none;
}
.poolBackground:hover .productName, .drawDate, .winningOdd, .actualPrice, .tokenPrice {
margin-bottom: .5rem;
}
/* end of on hover transition */
.buyTicket {
visibility: hidden;
transform: translateY(-17px);
margin-top: 17px;
}
.poolBackground:hover .buyTicket {
visibility: visible;
}
.btnGold {
border-width: 1px;
border-style: solid;
border-image: linear-gradient(45deg, #8e602c, #b98b43, #f8ed8d, #b98b43, #8e602c) 1 1 1 1;
font-size: 18px;
background: linear-gradient(45deg, #8e602c, #f8ed8d);
background: -webkit-linear-gradient(45deg, #8e602c, #f8ed8d, #8e602c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 4px 20px;
box-shadow: 8px 4px 15px black;
}
/* media queries */
#media (min-width:1800px) and (max-width: 1920px) {
.poolBackground {
width: 100%;
height: 47vh;
}
.poolImageContainer {
width: 13.594vw;
height: 324px;
}
.poolRightContentContainer {
top: 56px;
}
}
#media (min-width:1387px) and (max-width: 1525px) {
.poolBackground {
background-image: url(image/r/Group\ 7#2x.jpg);
width: 100%;
height: 288px;
}
.poolImageContainer {
width: 12.625vw;
}
}
#media (min-width:565px) and (max-width: 1386px) {
.poolBackground {
background-image: url(image/r/Group\ 7#2x.jpg);
height: 288px;
}
.col {
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: auto;
}
.poolImageContainer {
width: 193px;
}
}
The things which i tried were:
tried giving image in html itself. it was resizing with vw but the inside contents were not resizing with it properly.
I thought of giving full block for one card on mobile and medium dimensions and two cards per row in large and above dimensions like in above picture but failed to accomplish it.

Have you tried controlling the div itself rather than the picture? You'd make the size of the containing div itself vary according to viewport, and the image CSS would look something like this:
img {
max-width: 100%;
height: auto;
}

<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">
<!-- add icon link -->
<link rel="icon" href="./img/icon1.icon" type="image/x-icon">
<link rel="stylesheet" href="pool.css">
<link rel="stylesheet" href="font.css">
<!-- scrollReveal property -->
<script src="https://unpkg.com/scrollreveal#4"></script>
<script>
window.sr = ScrollReveal({
distance: '50px', //for animation of page scroll
duration: 1000,
easing: 'ease',
mobile: true,
reset: true,
viewFactor: 0.4,
});
</script>
<title>Pool2 | PLAY4LUX</title>
</head>
<style>
.container-fluid {
width: 78%;
margin: 0 auto;
}
.poolBackground {
background-image: url("image/r/Group\ 4#2x.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
max-width: 565px;
width: 100%;
min-height: 288px;
position: relative;
}
.poolImageContainer {
background-image: url(imgi1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
max-width: 204px;
width: 100%;
min-height: 264px;
/*position: absolute;*/
top: 11px;
left: 30px;
box-shadow: 3px 5px 18px 0px #08061a;
border-width: 4px;
border-style: solid;
border-image: linear-gradient(45deg, #8e602c, #b98b43, #f8ed8d, #b98b43, #8e602c) 1 1 1 1;
}
.poolRightContentContainer {
/*position: absolute;*/
top: 38px;
padding-left: 28px;
width: 80%;
}
.productName {
font-size: 20px;
background: linear-gradient(45deg, #8e602c, #f8ed8d);
background: -webkit-linear-gradient(90deg, #8e602c, #f8ed8d, #8e602c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(2px 3px 3px #000);
font-weight: 900;
margin-bottom: .9rem;
}
.title {
display: inline-block;
font-size: 17px;
font-weight: 600;
background: -webkit-linear-gradient(90deg, #fff, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.data {
font-size: 19px;
background: -webkit-linear-gradient(90deg, #fff, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.focused {
font-size: 20px;
background: -webkit-linear-gradient(90deg, #f8ed8d, #f8ed8d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
}
.drawDate, .winningOdd, .actualPrice, .tokenPrice {
background: -webkit-linear-gradient(90deg, #fff, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(2px 4px 3px #000);
font-weight: 600;
margin-bottom: .6rem;
}
/* On hover style */
.tokenPrice .title {
/*position: absolute;*/
right: 5px;
top: -39px;
}
.tokenPrice .data {
/*position: absolute;*/
right: 24px;
border: 1px solid yellow;
padding: 2px 6px;
}
.actualPrice .data {
/*position: absolute;*/
top: 42px;
left: 5px;
border: 1px solid yellow;
padding: 2px 6px;
/* box-shadow: 0px 6px 21px -9px black; */
}
.poolBackground:hover .tokenPrice .title {
position: initial;
}
.poolBackground:hover .tokenPrice .data {
position: initial;
border: none;
}
.poolBackground:hover .actualPrice .data {
position: initial;
border: none;
}
.poolBackground:hover .productName, .drawDate, .winningOdd, .actualPrice, .tokenPrice {
margin-bottom: .5rem;
}
/* end of on hover transition */
.buyTicket {
visibility: hidden;
transform: translateY(-17px);
margin-top: 17px;
}
.poolBackground:hover .buyTicket {
visibility: visible;
}
.btnGold {
border-width: 1px;
border-style: solid;
border-image: linear-gradient(45deg, #8e602c, #b98b43, #f8ed8d, #b98b43, #8e602c) 1 1 1 1;
font-size: 18px;
background: linear-gradient(45deg, #8e602c, #f8ed8d);
background: -webkit-linear-gradient(45deg, #8e602c, #f8ed8d, #8e602c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 4px 20px;
box-shadow: 8px 4px 15px black;
}
/* media queries */
#media (min-width:1800px) and (max-width: 1920px) {
.poolBackground {
width: 100%;
height: 47vh;
}
.poolImageContainer {
width: 13.594vw;
height: 324px;
}
.poolRightContentContainer {
top: 56px;
}
}
#media (min-width:1387px) and (max-width: 1525px) {
.poolBackground {
background-image: url(image/r/Group\ 7#2x.jpg);
width: 100%;
height: 288px;
}
.poolImageContainer {
width: 12.625vw;
}
}
#media (min-width:565px) and (max-width: 1386px) {
.poolBackground {
background-image: url(image/r/Group\ 7#2x.jpg);
height: 288px;
}
/*.col {
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: auto;
}*/
.poolImageContainer {
width: 193px;
}
}
</style>
<body>
<div class="poolContainer">
<div class="container-fluid">
<div class="row ">
<div class="col-md-6">
<div class="poolBackground">
<div class="row poolContentRow hoverable">
<!-- Image Container -->
<div class="col-sm-5">
<div class="poolImageContainer"></div>
</div>
<!-- pool Right side content -->
<div class="col-sm-7">
<div class="poolRightContentContainer">
<h3 class="productName gara">GIORGIO ARMANI</h3>
<!-- drawdate -->
<div class="drawDate clearfix gara">
<h6 class="title">Draw Date :</h6>
<h5 class="data float-right">10 / 09 /2020</h5>
</div>
<!-- winning odds -->
<div class="winningOdd clearfix gara">
<h6 class="title">Winning Odds :</h6>
<h5 class="data float-right focused">10 / 300</h5>
</div>
<!-- Actual Price -->
<div class="actualPrice clearfix gara">
<h6 class="title">Actual Price :</h6>
<h5 class="data float-right">180,000.0/-</h5>
</div>
<!-- token Price -->
<div class="tokenPrice clearfix gara">
<h6 class="title">Token Price :</h6>
<h5 class="data float-right focused">180/-</h5>
</div>
<!-- button -->
<div class="buyTicket text-center">
<button class=" btnGold">Buy Ticket</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="poolBackground">
<div class="row poolContentRow hoverable">
<!-- Image Container -->
<div class="col-sm-5">
<div class="poolImageContainer"></div>
</div>
<!-- pool Right side content -->
<div class="col-sm-7">
<div class="poolRightContentContainer">
<h3 class="productName gara">GIORGIO ARMANI</h3>
<!-- drawdate -->
<div class="drawDate clearfix gara">
<h6 class="title">Draw Date :</h6>
<h5 class="data float-right">10 / 09 /2020</h5>
</div>
<!-- winning odds -->
<div class="winningOdd clearfix gara">
<h6 class="title">Winning Odds :</h6>
<h5 class="data float-right focused">10 / 300</h5>
</div>
<!-- Actual Price -->
<div class="actualPrice clearfix gara">
<h6 class="title">Actual Price :</h6>
<h5 class="data float-right">180,000.0/-</h5>
</div>
<!-- token Price -->
<div class="tokenPrice clearfix gara">
<h6 class="title">Token Price :</h6>
<h5 class="data float-right focused">180/-</h5>
</div>
<!-- button -->
<div class="buyTicket text-center">
<button class=" btnGold">Buy Ticket</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js " integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n "
crossorigin="anonymous "></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js " integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo "
crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js " integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6 "
crossorigin="anonymous "></script>
<!-- MDB core JavaScript -->
<script type="/text/javascript " src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/js/mdb.min.js "></script>
</body>
</html>
Few amendments.. but still i suggest to re-write the or i can write for you from scratch if u want.. cheers bro... Happy to Help...

Related

Background image covering everything

I have a background image that is covering my content but without (background-size: cover;) it doesn't take up the space. I am working on a bootstrap project, and all my content is stacked at the top of the page in the banner area. I've tried adding height to the page to move content. I've tried adding a div around it and moving around in the body tag. I have been working on the for about 3 hours.
#import url('https://fonts.googleapis.com/css?family=Oswald|Rambla|Staatliches&display=swap');
body{
margin: 0;
padding: 0;
}
:root{
--color-black: #000000;
--color-white: #ffffff;
--color-border: #ffffff34;
--font-staat: 'Staatliches', cursive;
--font-os: 'Oswald', sans-serif;
--font-ram: 'Rambla', sans-serif;
}
/* global classes */
.font-staat{
font: normal 400 18px var(--font-staat);
}
.font-os{
font: normal 300 18px var(--font-os);
}
.font-ram{
font: normal bold 18px var(--font-ram);
}
.font-size-40{
font-size: 40px;
}
.font-size-34{
font-size: 34px;
}
.font-size-27{
font-size: 27px;
}
.font-size-20{
font-size: 20px;
}
.font-size-16{
font-size: 16px;
}
.bgcolor-black{
background-color: var(--color-black);
}
/* #global classes */
#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index:1;
transition: left .5s ease;
}
#header nav{
height: 100vh;
}
#header .site-title .navbar-brand{
letter-spacing: 2px;
color: var(--color-secondary);
}
#header .nav-link{
margin: .7rem 1rem;
border-bottom: 1px solid var(--color-border);
text-transform: uppercase;
}
#header .nav-link:hover{
color: var(--color-white) !important;
}
#header .toggle-button{
background: none;
color: var(--color-black);
position: fixed;
top: 25px;
right: 20px;
border: 1px solid var(--color-border);
}
.toggle-left{
left: 0 !important;
width: 1000px !important;
}
/* site-main */
.site-banner .banner-area{
background: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg) no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.site-banner .banner-area .author{
margin: 0;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.site-banner .banner-area .author .author-img{
width: 250px;
height: 250px;
border-radius: 50%;
margin: auto;
background: url(./20200507_023239272_iOS.jpg) no-repeat;
background-size: 115%;
background-position: 15% 20%;
}
#media screen and (min-width: 768px){
.toggle-button{
display: none;
}
#header{
z-index:0;
}
}
/* #site-main */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaija Dunklin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- header area -->
<header id="header">
<div class="row m-0">
<div class="col-3 bgcolor-black">
<nav class="primary-nav navbar-expand-md">
<div class="site-title text-center text-light py-5">
Kaykay
<p class="description text-uppercase font-os"> Kaija Dunklin</p>
</div>
<div class="d-flex flex-column">
Home
Skills
projects
Education
Experience
Resume
Contact
</div>
</nav>
</div>
</div>
<button class="toggle-button"><span class="fas fa-bars fa-2x"></span></button>
<div class="social">
<span class="mr-3"><i class="fab fa-linkedin"></i></span>
<span class="mr-3"><i class="fab fa-github"></i></span>
</div>
</header>
<!-- #header area -->
<main id="site-main">
<div class="row m-0">
<div class="col-md-9 offset-md-3 px-0">
<!-- site-banner area -->
<section class="site-banner" id="home">
<div class="banner-area">
<div class="author text-center">
<div class="author-img"></div>
<h1 class="text-white font-staat font-size-40 text-uppercase py-3">Kaija Dunklin</h1>
</div>
</div>
</section>
<section id="skills">
<i class="fab fa-github-square" >GitHub</i>
</section>
<!-- #site-banner area -->
<section id="projects">
<div>
</div>
</section>
</div>
</div>
<div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" crossorigin="anonymous"></script>
<script src="./vendor/typed/typed.min.js"></script>
<script src="./index.js"></script>
</body>
</html>

I'm really not sure what you are trying to achieve, but I guess I got what you wanted:
I set the background on separate div which I then set the background image to and then with Z-index value on css moved behind other content you may add on your page.
.background-img {
/*of course with this solution you should remove the previous background image*/
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-image: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg);
background-size: cover;
/* Without z-index the background seems to cover the content*/
z-index: -1;
}
<!--I added this empty div to hold the background image-->
<div class="background-img">
</div>
I really did not dive that deep to your source files, so I am not sure if this helps, but I hope so

Bootstrap 4.3 Make Navbar Static at Top of the Page AND Transparent

I have done my best checking and googling everywhere for info before asking here... Hopefully I am not redundant.
I am trying to make a static navbar at the top of my page in Bootstrap 4.3.
However, no matter how hard I try, it does not seem to be working:
- I have tried some of the former .static-top / .navbar-static-top classes and other similar workarounds ;
- I have also tried installing plugins (which I have now removed, due to ineffectiveness) - though this mostly "hides" the navbar, instead of leaving it static at the very top of the page.
- I have tried modifying, to no avail, my CSS with "top: 0;" and other formatting tags on the concerned elements.
I have cleaned my code again, to avoid making a big mess of things not working together. (my previous Bootstrap attempt finished in unusable code, hence me trying to be and stay clean, and remove unused / unnecessary code)
Feeling quite lost. Not a "super coder", mostly graphic designer with plenty of logic understanding. And desperate to have some kind of default functionality to make my navbar static.
The catch is my navbar has to remain transparent (this isn't always the case when working with some classes)
Here is my code.
/* 0. HTML Defaults
-----------------------------------------------------------------------------------------------------------------------------*/
:root {
--da-pink: lightpink;
--da-grey: rgba(5,5,5,1);
--da-grey: #454545;
--da-grey-grad: linear-gradient(to bottom right, #131313, #454545);
--da-grey-opac: rgba(69, 69, 69, .8);
--da-grey-opac: rgb(69, 69, 69);
}
html, body {
background-color: black;
background: rgba(65,65,65,1);
background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1)));
background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 );
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
height: 100%;
overflow: auto;
z-index: 10;
}
html body * {
}
h1 {
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
color: lightpink;
font-size: 3vw;
line-height: 4vw;
}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
p {
font-family: itc-american-typewriter, serif;
font-weight: 300;
font-style: normal;
font-size: 12.5pt;
color: #ffffff;
text-align: justify;
text-decoration: none;
/* text-indent: 50px; */
/* word-spacing: 5px */
/* white-space: pre; */
letter-spacing: 1px;
/* line-height: 1.3; */
/* padding: 50px; */
display: block;
border:0;
}
p a:link {
text-decoration: none;
border-bottom: dotted;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:visited {
text-decoration: none;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:hover {
text-decoration: none;
border-bottom: dotted;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:active {
color: lightpink;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p.error {}
a,
a:link {}
a:hover {}
/* 10. NAV
-----------------------------------------------------------------------------------------------------------------------------*/
body > #nav_desktop {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#nav_desktop > *,
#nav_desktop > div {
background: none !important;
/* background: rgba(0, 0, 0, .0) !important; */
}
.navbar {
margin-bottom: 0;
padding: 0 0;
z-index: 100;
}
/*
.navbar-toggle {
padding-top: 15px;
margin-top: 0px;
margin-bottom: 0;
} */
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translate(-50%);
}
.nav_text {
font-family: itc-american-typewriter, serif;
font-weight: 300;
font-style: normal;
font-size: 12.5pt;
color: #ffffff;
letter-spacing: 2px;
}
/* 50. Header
-----------------------------------------------------------------------------------------------------------------------------*/
header {}
/* 60. Carousel Hero slider
-----------------------------------------------------------------------------------------------------------------------------*/
.carousel {
top:0;
}
.hero-text {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('./logo_transp.png');
background-size: auto;
background-repeat: no-repeat;
background-position: center -50px;
text-shadow: 1px 1px 3px black;
text-align: center;
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -75%);
}
.carousel,
.item,
.active {
height:100vh;
}
.carousel-inner {
height:100vh;
}
.carousel-inner img {
margin: auto;
}
/* Zz. Bootstrap edit
-----------------------------------------------------------------------------------------------------------------------------*/
.overlay {
background: black;
opacity: 0.7;
/* background-size: cover; */
}
button {
display: inline-block;
border: 1px solid;
border-color: white;
padding: 10px 10px;
margin: 0;
text-decoration: none;
background: none;
color: white;
font-family: century-gothic, sans-serif;
font-weight:700;
font-style: normal;
font-size: 12 pt;
text-align: center;
}
button:hover,
button:focus {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
button:focus {
outline: 1px solid transparent;
outline-offset: -4px;
}
button:active {
transform: scale(0.99);
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.responsive-image {
max-width: 100%;
height: auto;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome to the Design Angels</title>
<!-- META DATA -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to theDesignAngels, we make it look glittery and shiny."/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="files/lib/jQuery.js"></script>
<script src="files/lib/lib/popper/Popper.js"></script>
<!-- BOOTSTRAP CSS -->
<script src="files/lib/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="files/lib/bootstrap.min.css">
<!-- Libraries & frameworks -->
<script src="functions.js"></script>
<link rel="stylesheet" style="text/css" href="style.css"/>
<link rel="stylesheet" href="xxx">
<link rel="shortcut icon" href="assets/favicon.jpg" type="image/x-icon" />
</head>
<body>
<!-- NAVBAR -->
<nav id="nav_desktop" class="navbar navbar-expand-md" role="navigation">
<!-- Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="logo_menu.png" style="width:180px;height:auto" alt="the Design Angels" data-toggle="tooltip" title="home"></a>
<!-- Collect the nav links, forms, and other content -->
<!-- Site nav -->
<ul class="nav navbar-nav navbar-center">
<li><a href="#services">
<span class="nav_text">SERVICES</span>
</a>
</li>
<li><a href="#portfolio">
<span class="nav_text">PORTFOLIO</span>
</a>
</li>
<li><a href="#contact">
<span class="nav_text">CONTACT</span>
</a>
</li>
</ul>
<!-- Social media -->
<ul class="nav navbar-nav ml-auto">
<li><a href="http://facebook.com/thedesignangels" target="_blank" alt="The Design Angels on Facebook">
<img src="social/fb_.png" onmouseover="this.src='./social/fb_mouseov.png'" onmouseout="this.src='./social/fb_.png'" style="height: 15px; margin-top: -5px;" >
</a>
</li>
<li><a href="https://www.instagram.com/thedesignangels/" target="_blank" alt="The Design Angels on Instagram">
<img src="social/inst_.png" onmouseover="this.src='./social/inst_mouseov.png'" onmouseout="this.src='./social/inst_.png'" style="height: 15px; margin-top: -5px;" >
</a>
<li><a href="https://twitter.com/thedesignangels" target="_blank" alt="The Design Angels on Twitter">
<img src="social/twit_.png" onmouseover="this.src='./social/twit_mouseov.png'" onmouseout="this.src='./social/twit_.png'" style="height: 15px; margin-top: -5px;" >
</a>
</li>
</ul>
</div>
</nav>
<!-- CAROUSEL HERO -->
<div id="myCarousel " class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slider-01.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-02.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-03.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-04.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-05.jpg" class="overlay">
</div>
</div>
<!-- Hero Text -->
<div class="hero-text container">
<h1 class="hero-cust">Looking for Character<br> and Innovation ?</h1><br> <br>
<p style="text-align: center;">The Design Angels have solutions for you,<br> on top of offering advice and custom-made designs</p><br> <br>
<button>GET IN TOUCH</button>
</div>
</div>
<!-- Introduction -->
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="padding-top:50px;">
<h1>Great design<br>
is powerful</h1>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">
<p class="tab">Not only does it brings personality and brand recognition to goods or services,
but it establishes a recognition and creates the <span style="color:lightpink;">feeling of trust</span> we feel for those brands we love.<br> <br> <br></p>
<p class="tab">Set yourself above the competition with professional design and packaging: <span style="color:lightpink;">great communication</span> shows the world how serious you are about business.
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">
<img src="mockup.png" class="responsive-image" style="width:200px; height: auto; vertical-align: top; float: right;" >
</div>
</div>
</div>
</div><br><br><br>
<!-- Services -->
<div class="container-fluid overlay"><br>
<div class="container">
<h1 style="text-align:center;">Our services</h1><br><br>
<p style="text-align:center;">We always go the extra mile to bring you kick-ass design.</p><br><br><br>
</div>
<div class="container">
<div class="row" style="padding-bottom: 50px;">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 specialties clearfix"><br>
<p style="text-align:center;">
<img src="drukwerk.png"><br><br><br>PRE-PRESS SPECIALTY<br><br>
Packagings, posters, cards, flyers,
letterheads, banners, calendars,
brochures, books, stickers,
custom work... <br>Know more<br>
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 specialties clearfix"><br>
<p style="text-align:center;">
<img src="illu.png"><br><br>ILLUSTRATION & <br>IMAGE<br><br>
Commercial illustration for packaging,
small animations, logo & branding,
photoshopping, vector illustrations,
paintings... <br>Know more
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 specialties clearfix"><br>
<p style="text-align:center; ">
<img src="digi.png"><br><br>DIGITAL & <br>WEB<br><br>
Banners, animated GIFs, brochures,
PDFs, web sites, videos, social media content... <br>Know more
</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="script.js">
</script>
</body>
</html>
Thanking you in advance.
Angie.
===============================
Update:
in the CSS, if I remove position: absolute; from body > #nav_desktop { then my navbar becomes transparent but isn't static.
If I leave that snippet in, the navbar is static, but non-transparent.
The aim is the navbar to be transparent so that the carousel picture remains fully visible.

Bootstrap 4 supports for the navbar a class called fixed-top. This allows you to make your navbar fixed to the top with a simple class.
You will need to add this to your nav:
<nav id="nav_desktop" class="navbar navbar-expand-md fixed-top" role="navigation">
You can find more info about this here.
Here is also a quick example that I already tested:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to the Design Angels</title>
<!-- META DATA -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to theDesignAngels, we make it look glittery and shiny."/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="files/lib/jQuery.js"></script>
<script src="files/lib/lib/popper/Popper.js"></script>
<!-- BOOTSTRAP CSS -->
<script src="files/lib/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="files/lib/bootstrap.min.css">
<!-- Libraries & frameworks -->
<script src="functions.js"></script>
<link rel="stylesheet" style="text/css" href="style.css"/>
<link rel="stylesheet" href="xxx">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="shortcut icon" href="assets/favicon.jpg" type="image/x-icon" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
</body>
</html>

Just move your Carousel div to top using negative margin-top:
#myCarousel {
margin-top: -42px; /* set it equal to the menu height */
}
And change the position of the menu from absolute to relative:
body > #nav_desktop {
position: relative;
}

Thank you for all the ideas and input everyone, it kinda got me rethinking how I set the whole thing up.
While playing around with some elements (in the end, it always comes down to targeting the right classes), I found the solution.
screen capture of the working solution
The attribues needed to be moved as follows:
#nav_desktop > *,
#nav_desktop > div {
background: none !important;
position: absolute;
top: 0 !important;
transform: translate(0%);
which would look like this, all put together:
/*-----------------------------------------------------------------------------------------------------------------------------
*** Angie's CSS File | The Design Angels ***
---------------------------------------------------------------------------------------------------------------
Version: 0.0.1
Date: 02-02-2020
-----------------------------------------------------------------------------------------------------------------------------*/
/* 0. HTML Defaults
-----------------------------------------------------------------------------------------------------------------------------*/
:root {
--da-pink: lightpink;
--da-grey: rgba(5,5,5,1);
--da-grey: #454545;
--da-grey-grad: linear-gradient(to bottom right, #131313, #454545);
--da-grey-opac: rgba(69, 69, 69, .8);
--da-grey-opac: rgb(69, 69, 69);
}
html, body {
background-color: black;
background: rgba(65,65,65,1);
background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1)));
background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 );
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
height: 100%;
overflow: auto;
z-index: 10;
}
html body * {
}
h1 {
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
color: lightpink;
font-size: 3vw;
line-height: 4vw;
}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
p {
font-family: itc-american-typewriter, serif;
font-weight: 300;
font-style: normal;
font-size: 12.5pt;
color: #ffffff;
text-align: justify;
text-decoration: none;
/* text-indent: 50px; */
/* word-spacing: 5px */
/* white-space: pre; */
letter-spacing: 1px;
/* line-height: 1.3; */
/* padding: 50px; */
display: block;
border:0;
}
p a:link {
text-decoration: none;
border-bottom: dotted;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:visited {
text-decoration: none;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:hover {
text-decoration: none;
border-bottom: dotted;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:active {
color: lightpink;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p.error {}
a,
a:link {
color: white;
text-decoration:none;
}
a:hover {
color: white;
text-decoration:none;
}
/* 10. NAV
-----------------------------------------------------------------------------------------------------------------------------*/
body > #nav_desktop {
left: 0;
right: 0;
}
#nav_desktop > *,
#nav_desktop > div {
background: none !important;
position: absolute;
top: 0 !important;
transform: translate(0%);
/* background: rgba(0, 0, 0, .0) !important; */
}
.navbar {
margin-bottom: 0;
padding: 0 0;
z-index: 100;
}
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translate(-50%);
}
.nav_text {
font-family: itc-american-typewriter, serif;
font-weight: 300;
font-style: normal;
font-size: 12.5pt;
color: #ffffff;
letter-spacing: 2px;
}
#media only screen and (max-width: 768px) {
.navbar-brand > img {
position: absolute !important;
left: 50% !important;
transform: translate(-50%) !important;
}
}
ul.d-md-inline > li {
display:inline !important;
}
/* 50. Header
-----------------------------------------------------------------------------------------------------------------------------*/
header {}
/* 60. Carousel Hero slider
-----------------------------------------------------------------------------------------------------------------------------*/
.carousel {
top:0;
}
.hero-text {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('./logo_transp.png');
background-size: auto;
background-repeat: no-repeat;
background-position: center -50px;
text-shadow: 1px 1px 3px black;
text-align: center;
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -75%);
}
.carousel,
.item,
.active {
height:100vh;
}
.carousel-inner {
height:100vh;
}
.carousel-inner img {
margin: auto;
}
/* 100. Content
-----------------------------------------------------------------------------------------------------------------------------*/
content {}
/* 200. Specialties section
-----------------------------------------------------------------------------------------------------------------------------*/
.specialties {
height: 375px;
width: 29%;
display: inline-box;
column-gap: 5px !important;
background-color: black;
background: rgba(65,65,65,1);
background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1)));
background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 );
padding: 15px !important;
margin-right: 10px;
margin-left: 10px;
margin-bottom:20px;
}
/* 900. Footer
-----------------------------------------------------------------------------------------------------------------------------*/
footer {}
/* Zz. Bootstrap edit
-----------------------------------------------------------------------------------------------------------------------------*/
.overlay {
background: black;
opacity: 0.7;
/* background-size: cover; */
}
button {
display: inline-block;
border: 1px solid;
border-color: white;
padding: 10px 10px;
margin: 0;
text-decoration: none;
background: none;
color: white;
font-family: century-gothic, sans-serif;
font-weight:700;
font-style: normal;
font-size: 12 pt;
text-align: center;
}
button:hover,
button:focus {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
button:focus {
outline: 1px solid transparent;
outline-offset: -4px;
}
button:active {
transform: scale(0.99);
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.responsive-image {
max-width: 100%;
height: auto;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
/* 10000. TEXT STYLING
-----------------------------------------------------------------------------------------------------------------------------*/
#media print {
p {
color: black;
}
}
.tab {
text-indent: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome to the Design Angels</title>
<!-- META DATA -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to theDesignAngels, we make it look glittery and shiny."/>
<meta name="keywords" content="graphic design, design, grafisch, vormgeving, dtp, geleen, limburg, nederland, francophone, franstalig, english, nederlands, vormgever, web sites, packaging, verpakking, creatief, creative, beautiful,thedesignangels, the design angels"/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="files/lib/jQuery.js"></script>
<script src="files/lib/lib/popper/Popper.js"></script>
<!-- BOOTSTRAP CSS -->
<script src="files/lib/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="files/lib/bootstrap.min.css">
<!-- Libraries & frameworks -->
<script src="functions.js"></script>
<link rel="stylesheet" style="text/css" href="style.css"/>
<link rel="stylesheet" href="https://xxx">
<link rel="shortcut icon" href="assets/favicon.jpg" type="image/x-icon" />
</head>
<body>
<!-- NAVBAR -->
<nav id="nav_desktop" class="navbar navbar-expand-md" role="navigation">
<!-- Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="logo_menu.png" style="width:180px;height:auto" alt="the Design Angels" data-toggle="tooltip" title="home"></a>
<!-- Collect the nav links, forms, and other content -->
<!-- Site nav -->
<ul class="nav navbar-nav navbar-center d-none d-md-inline">
<li><a href="#services">
<span class="nav_text">SERVICES</span>
</a><span> </span>
</li>
<li><a href="#portfolio">
<span class="nav_text">PORTFOLIO</span>
</a><span> </span>
</li>
<li><a href="#contact">
<span class="nav_text">CONTACT</span>
</a><span> </span>
</li>
</ul>
<!-- Social media -->
<ul class="nav navbar-nav ml-auto d-none d-md-inline">
<li><a href="http://facebook.com/thedesignangels" target="_blank" alt="The Design Angels on Facebook">
<img src="social/fb_.png" onmouseover="this.src='./social/fb_mouseov.png'" onmouseout="this.src='./social/fb_.png'" style="height: 15px; margin-top: -5px;" >
</a>
</li>
<li><a href="https://www.instagram.com/thedesignangels/" target="_blank" alt="The Design Angels on Instagram">
<img src="social/inst_.png" onmouseover="this.src='./social/inst_mouseov.png'" onmouseout="this.src='./social/inst_.png'" style="height: 15px; margin-top: -5px;" >
</a>
<li><a href="https://twitter.com/thedesignangels" target="_blank" alt="The Design Angels on Twitter">
<img src="social/twit_.png" onmouseover="this.src='./social/twit_mouseov.png'" onmouseout="this.src='./social/twit_.png'" style="height: 15px; margin-top: -5px;" >
</a>
</li>
</ul>
</div>
</nav>
<!-- CAROUSEL HERO -->
<div id="myCarousel " class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slider-01.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-02.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-03.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-04.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-05.jpg" class="overlay">
</div>
</div>
<!-- Hero Text -->
<div class="hero-text container">
<h1 class="hero-cust">Looking for Character<br> and Innovation ?</h1><br> <br>
<p style="text-align: center;">The Design Angels have solutions for you,<br> on top of offering advice and custom-made designs</p><br> <br>
<button>GET IN TOUCH</button>
</div>
</div>
<!-- Introduction -->
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="padding-top:50px;">
<h1>Great design<br>
is powerful</h1>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">
<p class="tab">Not only does it brings personality and brand recognition to goods or services,
but it establishes a recognition and creates the <span style="color:lightpink;">feeling of trust</span> we feel for those brands we love.<br> <br> <br></p>
<p class="tab">Set yourself above the competition with professional design and packaging: <span style="color:lightpink;">great communication</span> shows the world how serious you are about business.
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">
<img src="mockup.png" class="responsive-image" style="width:200px; height: auto; vertical-align: top; float: right;" >
</div>
</div>
</div>
</div><br>
<!-- Optional JavaScript -->
<script src="script.js">
</script>
</body>
</html>
Hope this can eventually help someone...

Apply gradient brightness filter to image

I have a series of photos displayed in a bootstraps card class. The images need to have white text on top of them, so I have added a dark filter to the photos filter: brightness(60%); so the text is clear to read.
See how the image currently looks https://i.ibb.co/TTTdrDP/card-image.jpg
The white text is only positioned at the bottom of the photos so I'd like to only apply the filter: brightness(60%); to the bottom of the image only and fade into the normal brightness.
I've tried many forms of gradient but all that does is apply a hard colour over the photo (removing the photo completely), rather than a transparent (gradient) filter on top of the image?
My CSS
<style>
.card {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 100%;
}
.card:hover {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
/* Card image dark filter */
.card-img-top {
width: 100%;
height: 220px;
object-fit: cover;
filter: brightness(60%);
}
/* Align heading text to bottom of photo */
.bottom {
position: absolute;
right: 0;
left: 0;
padding: 10px;
bottom: 0px;
padding-bottom: 40px;
}
.card-footer {
font-size: 12px;
font-weight: normal;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: grey;
background-color: #eeeeee !important;
}
</style>
Image card
<div class="card" style="width:100%;">
<img class="card-img-top" src="PHOTO HERE" alt="Card image">
<div class="card-img-overlay">
<div class="bottom text-light">
<h2>Hiking in Eastbourne for all who want to join.</h2>
</div>
</div>
<div class="card-footer p-2">
<div class="d-flex">
<div>
<i class="fa fa-calendar-alt fa-fw"></i><a>&nbsp</a><a>4th June</a>
</div>
<div class="ml-auto">
<a>3421</a><a>&nbsp</a><i class="fa fa-user-friends fa-fw"></i>
</div>
</div>
</div>
</div>
[1]: https://i.ibb.co/TTTdrDP/card-image.jpg

Do you mean something like this?
.card {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 100%;
}
.card:hover {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
/* Card image dark filter */
.card-img-top {
width: 100%;
height: 220px;
object-fit: cover;
filter: brightness(100%);
}
/* Align heading text to bottom of photo */
.bottom {
position: absolute;
right: 0;
left: 0;
bottom: 35px;
padding-top: 90px;
padding-left: 10px;
padding-right: 10px;
height: 150px;
background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
.card-footer {
font-size: 12px;
font-weight: normal;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: grey;
background-color: #eeeeee !important;
/*filter: brightness(100%); */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card" style="width:100%;">
<img class="card-img-top" src="https://media-cdn.tripadvisor.com/media/photo-s/0f/3d/89/4d/foto-com-dome.jpg" alt="Card image">
<div class="card-img-overlay">
<div class="bottom text-light">
<h2>Hiking in Eastbourne for all who want to join.</h2>
</div>
</div>
<div class="card-footer p-2">
<div class="d-flex">
<div>
<i class="fa fa-calendar-alt fa-fw"></i><a> </a><a>4th June</a>
</div>
<div class="ml-auto">
<a>3421</a><a> </a><i class="fa fa-user-friends fa-fw"></i>
</div>
</div>
</div>
</div>

How Can I Use Weather Icons on My Weather Application

I'm using http://erikflowers.github.io/weather-icons/ to display weather icons on my page. However, after inserting the cdn. It doesn't work.
https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css the icon has a class of "wi-wom-200" taken from http://erikflowers.github.io/weather-icons/api-list.html since I'm using openweathermap.com for my api. Any help on how to display this icon. Openweahtermap provides their own icons, but very low resolution. Thanks
/*
stylesheet for weather app
*/
body {
background-image: url("../img/city_vector.jpg");
min-height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
/* background color on top of bg image*/
.hero {
position: absolute;
min-height: 100vh;
min-width: 100vw;
top: 0;
bottom: 0;
background-color: rgba(31, 34, 118, 0.5);
z-index: -5;
}
/* navbar */
.navbar {
background-color: rgb(69, 106, 171);
}
.navbar a {
color: white;
font-size: 25px;
}
/* weather section */
.weather {
border: 1px solid white;
height: 30rem;
margin-top: 10rem;
/*background-color: rgba(160, 167, 187, 0.5);*/
background-color: rgba(0, 0, 0, 0.5);
/*background-color: rgba(213, 193, 193, 0.5);*/
border-radius: 20px;
color: white;
}
.weather-head {
height: 50%;
}
#weather-icon {
height: 7rem;
width: 7rem;
}
.weather-body {
height: 50%;
border-top: 1px solid white;
padding-top: 0.5rem;
}
#description {
/*border: 1px solid white;*/
font-size: 2rem;
/*margin-top: 2rem;*/
}
#temperature {
/*border: 1px solid white;*/
font-size: 7rem;
}
span {
font-size: 3rem;
}
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div class="hero">
<!-- navbar -->
<nav class="navbar">
<a class="navbar-brand" href="#">
<!-- <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> -->
<i class="fa fa-sun-o" aria-hidden="true"></i>
<strong>Local</strong>Weather
</a>
</nav>
<!-- weather section -->
<div class="container">
<div class="row">
<div id="" class="col-8 mx-auto weather">
<div class="weather-head">
<h2 id="location" class="text-center"></h2>
<div class="row">
<div id="description" class="description col-6 text-center">
<i class="wi wi-wom-200"></i> Thunderstorm
</div>
<div id="temperature" class="col-6 text-center">
</div>
</div>
<div class="weather-body">
<div class="row">
<div class="humidity col-4">
<div class="lead text-center">Humidity</div>
</div>
<div class="wind col-4">
<div class="lead text-center">Wind Speed</div>
</div>
<div class="wind-degree col-4">
<div class="lead text-center">Wind Direction</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

You have not included the icons cdn link. Use this
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
And then use wi-owm-200 class for the icon
body {
background-image: url("../img/city_vector.jpg");
min-height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
.hero {
position: absolute;
min-height: 100vh;
min-width: 100vw;
top: 0;
bottom: 0;
background-color: rgba(31, 34, 118, 0.5);
z-index: -5;
}
.navbar {
background-color: rgb(69, 106, 171);
}
.navbar a {
color: white;
font-size: 25px;
}
.weather {
border: 1px solid white;
height: 30rem;
margin-top: 10rem;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 20px;
color: white;
}
.weather-head {
height: 50%;
}
#weather-icon {
height: 7rem;
width: 7rem;
}
.weather-body {
height: 50%;
border-top: 1px solid white;
padding-top: 0.5rem;
}
#description {
font-size: 2rem;
}
#temperature {
font-size: 7rem;
}
span {
font-size: 3rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css">
<div class="hero">
<nav class="navbar">
<a class="navbar-brand" href="#">
<i class="fa fa-sun-o" aria-hidden="true"></i>
<strong>Local</strong>Weather
</a>
</nav>
<div class="container">
<div class="row">
<div id="" class="col-8 mx-auto weather">
<div class="weather-head">
<h2 id="location" class="text-center"></h2>
<div class="row">
<div id="description" class="description col-6 text-center">
<i class="wi wi-owm-200"></i> Thunderstorm
</div>
<div id="temperature" class="col-6 text-center">
</div>
</div>
<div class="weather-body">
<div class="row">
<div class="humidity col-4">
<div class="lead text-center">Humidity</div>
</div>
<div class="wind col-4">
<div class="lead text-center">Wind Speed</div>
</div>
<div class="wind-degree col-4">
<div class="lead text-center">Wind Direction</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

CSS alignment of columns with multiple rows

I have the following snippet
.striped {
height : 30px;
margin-right: 1px !important;
background: repeating-linear-gradient(-45deg,#E4003D,#E4003D 10px,#222 10px,#222 20px)!important;
}
.content{
height : 100%;
}
.mymedia {
font-size: 1.5vh !important;
color: #fff;
text-align: justify;
-ms-text-justify: inter-word;
text-justify: inter-word;
border-color: #E4003D;
font-weight: normal !important;
background-color:#363636 !important;
background: repeating-linear-gradient( -45deg, #111 2px, #222 3px, #222 4px, #111 7px)!important;
}
.rightpadding{
margin-right: 1px !important;
}
.top-buffer {
margin-top:13px;
overflow: hidden;
}
.bottom {
vertical-align: bottom;
bottom: 0 !important;
}
.nolrpadding{
padding-left: 0 !important;
padding-right: 0 !important;
}
.mymedia > p {
margin-left: 5vw !important;
margin-right: 5vw !important;
}
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
.square-box{
position: relative;
width: 95%;
overflow: hidden;
font-size: 2vh !important;
font-weight: bold !important;
background: repeating-linear-gradient( -45deg, #E4003D 2px, #D6003D 3px, #D6003D 4px, #E4003D 7px)!important;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
.noRightMargin {
margin-right: 0 !important;
}
.noLeftMargin {
margin-left: 0 !important;
}
.row [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row{
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:5%; margin-bottom: 10px;">
</div>
<div class="row">
<div class="col-xs-5">
<!-- <div class="row rightpadding"> -->
<div class="row striped"></div>
<div class="row rightpadding">
<div class="media mymedia">
<img src="images/Mission/cluster.png" class="img-responsive">
<p>
asas
</p>
</div>
</div>
<div class="row striped bottom"></div>
<!-- </div> -->
</div>
<div class="col-xs-7">
<div class="row noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://sky.esa.int/" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="https://twitter.com/ESAscience" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="#" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
</div>
<div class="row top-buffer noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://helioviewer.org/" data-internal="true">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="EXE" data-prog=" O:\Projects\xdisk\projects\ESAC-SOSR\Work\WP1000 - Visualization tool\wwt-windows-client\WWTExplorer3d\bin\gaiasandbox\gaiasandbox.exe" data-args="scripts\tests\Rosetta.py">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
</div>
</div>
<!-- <div class="col-xs-3"></div> -->
</div>
</div>
</html>
the problem that I have is the bottom alignments in the two columns, as shown in the image
I have seen fixes for column vertical alignments but it seems that they do not work here, so how can I align the bottom of the three rows within the first column with the next column?
thanks in advance,
es.
UPDATE
I would like it to look something like this with the bottom strip row being vertically aligned with the bottom of the red box.

managed to do what you wanted with just a little jq . hope you don't mind
check here jsfiddle
css code added : .mymedia { height:100%;}
jq code added :
var result = $(".col-xs-7").height() - $(".row.striped").height()*2
$(".row.rightpadding").height(result)
result = height of the right col - the heights of both striped rows ( which are equal i presume )
then add that height to the middle row ( .row.rightpadding )
let me know if it helps.

You should be able to achieve what you want by using absolute positioning, with fixed top and bottom so that the left column elements are "snapped" to the height of the row.
Try the snippet below.
.striped {
height: 30px;
background: repeating-linear-gradient(-45deg, #E4003D, #E4003D 10px, #222 10px, #222 20px)!important;
position: absolute;
left: 0;
right: 15px;
}
.content {
height: 100%;
}
.mymedia {
font-size: 1.5vh !important;
color: #fff;
text-align: justify;
-ms-text-justify: inter-word;
text-justify: inter-word;
border-color: #E4003D;
font-weight: normal !important;
background-color: #363636 !important;
background: repeating-linear-gradient( -45deg, #111 2px, #222 3px, #222 4px, #111 7px)!important;
top: 30px;
bottom: 30px;
left: 0;
right: 15px;
position: absolute;
margin-top: 0 !important;
}
.top-buffer {
margin-top: 13px;
overflow: hidden;
}
.bottom {
bottom: 0 !important;
}
.nolrpadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.mymedia > p {
margin-left: 5vw !important;
margin-right: 5vw !important;
}
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
.square-box {
position: relative;
width: 95%;
overflow: hidden;
font-size: 2vh !important;
font-weight: bold !important;
background: repeating-linear-gradient( -45deg, #E4003D 2px, #D6003D 3px, #D6003D 4px, #E4003D 7px)!important;
}
.square-box:before {
content: "";
display: block;
padding-top: 100%;
}
.square-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
.noRightMargin {
margin-right: 0 !important;
}
.noLeftMargin {
margin-left: 0 !important;
}
.row {
overflow: hidden;
position: relative;
}
.myLeftCol {
bottom: 0;
padding-left: 0 !important;
position: absolute !important;
top: 0;
}
.myRightCol {
margin-left: 41.6667%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:5%; margin-bottom: 10px;">
</div>
<div class="row">
<div class="col-xs-5 myLeftCol">
<div class="striped"></div>
<div class="media mymedia">
<img src="images/Mission/cluster.png" class="img-responsive">
<p>
asas
</p>
</div>
<div class="striped bottom"></div>
</div>
<div class="col-xs-7 myRightCol">
<div class="row noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://sky.esa.int/" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="https://twitter.com/ESAscience" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="#" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row top-buffer noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://helioviewer.org/" data-internal="true">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="EXE" data-prog=" O:\Projects\xdisk\projects\ESAC-SOSR\Work\WP1000 - Visualization tool\wwt-windows-client\WWTExplorer3d\bin\gaiasandbox\gaiasandbox.exe" data-args="scripts\tests\Rosetta.py">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- <div class="col-xs-3"></div> -->
</div>
</div>
</html>

Wrap everything in a <div>, and set the childs to have min-height: 100%

We Keep Coding

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

How to make responsive horizontal cards? - html

Have you tried controlling the div itself rather than the picture? You'd make the size of the containing div itself vary according to viewport, and the image CSS would look something like this: img { max-width: 100%; height: auto; }

Related

Background image covering everything

Bootstrap 4.3 Make Navbar Static at Top of the Page AND Transparent

Apply gradient brightness filter to image

How Can I Use Weather Icons on My Weather Application

CSS alignment of columns with multiple rows

Categories

Resources