How to get <div>s side by side [duplicate] - javascript

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How to place div side by side
(7 answers)
Closed 2 years ago.
I have created these divs that serve as buttons to redirect to a different site page, and for some reason I cannot get them to place side by side. I have tried everything including flexbox, and I cannot seem to get the divs side by side. What am I doing wrong.
IS there an easier way to go about what I want to accomplish? Or is it a simple easy mistake that I looked over.
html, body {
margin: 0;
height: 100%;
}
.img_container {
border: none;
width: 70%;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #b3ab7d;
}
a:hover {
color: #b3ab7d;
}
.background {
background: #104723;
width: 150px;
height: 150px;
}
.img {
width: 70%;
display: block;
margin: 0 auto;
}
a {
display: block;
text-align: center;
}
.text{
font-size: 70%;
}
*{
box-sizing: border-box;
}
.center {
justify-content: center;
align-items: center;
}
<div class="center">
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Access Control (AC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Identification & Authentication (IA)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Media Protection (MP)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Physical Protection (PE)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Communications Protection (SC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Information Integrity (SI)</span>
</div>
</a>
</div>
</div>

You have forgotten display: flex; in your .center class name.
Check your updated snippet.
html, body {
margin: 0;
height: 100%;
}
.img_container {
border: none;
width: 70%;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #b3ab7d;
}
a:hover {
color: #b3ab7d;
}
.background {
background: #104723;
width: 150px;
height: 150px;
}
.img {
width: 70%;
display: block;
margin: 0 auto;
}
a {
display: block;
text-align: center;
}
.text{
font-size: 70%;
}
*{
box-sizing: border-box;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
<div class="center">
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Access Control (AC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Identification & Authentication (IA)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Media Protection (MP)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Physical Protection (PE)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Communications Protection (SC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Information Integrity (SI)</span>
</div>
</a>
</div>
</div>

Display flex; seems to be missing.
.center {
display: flex;
justify-content: center;
align-items: center;
}

Just remove width from below class and add float left or right as pr need.
.img_container {
border: none;
width: auto;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
float: left;
}

Related

Repeating the same action on multiple elements

So I've got some code for a drop-down infobox and it has some Javascripts attached to it. It works perfectly but I'm now trying to duplicate it for a second box below, but I'm getting a few bugs.
In order to duplicate this, do I just copy and paste the script and HTML and change:
handleClick() to handleClick2()
drop_down to drop_down2
product_section to product_section2
or is there an easier way to attaching the same Javascript to two boxes?
var show = false;
const handleClick = () => {
const element = document.querySelector(".drop_down");
const product = document.querySelector(".product_section");
if (!show) {
element.innerHTML = `close <i class="fas fa-angle-up"></i>`;
product.style.display = "block";
show = true;
} else {
element.innerHTML = `more info <i class="fas fa-angle-down"></i>`;
product.style.display = "none";
show = false;
}
};
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="#" class="drop_down" onclick="handleClick()">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
body {
box-sizing: border-box;
background-color: #f7f7f7;
font-family: montserrat, sans-serif;
}
.box {
position: relative;
width: 80vw;
margin: 0 auto;
display: flex;
justify-content: space-around;
padding: 10px;
background-color: #ffffff;
box-shadow: 0 2px 10px 0 rgba(78, 137, 175, 0.15);
line-height: 28px;
font-size: 20px;
text-align: left;
}
.ranked {
position: absolute;
left: -25px;
top: -25px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.badge_one {
width: 52px;
height: 52px;
background-color: #00113d;
border-radius: 50%;
color: #ffffff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
}
.badge_two {
width: 82px;
height: 32px;
background-color: #e7cd60;
border-radius: 20px;
margin-right: 5px;
margin-left: -20px;
color: black;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
font-size: 12px;
text-align: center;
padding-left: 10px;
}
.product_image {
width: 160px;
height: 100px;
padding: 40px 20px;
}
.overview_section {
display: flex;
flex-direction: column;
justify-content: center;
width: 55%;
}
.title {
color: #8f2e53;
margin-bottom: 10px;
cursor: pointer;
}
.title:hover {
color: #4a90e2;
transition: all 0.4s ease-in-out;
}
.company {
color: #001143;
font-weight: 700;
margin-bottom: 15px;
cursor: pointer;
}
.company:hover {
color: #4a90e2;
transition: all 0.4s ease-in-out;
}
.hide { display: none;
}
.drop_down {
font-size: 18px;
font-weight: 500;
color: #8f2e53;
margin-top: 5px;
cursor: pointer;
text-transform: capitalize;
}
.drop_down:hover {
text-decoration-color: #e7cd60;
}
.price_section {
border-left: 1px solid rgba(78, 137, 175, 0.15);
width: 30%;
/* min-width: 130px; */
margin-left: 25px;
display: flex;
flex-direction: column;
margin-top: 5px;
}
.section_one,
.section_two {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.price {
font-size: 35px;
font-weight: 500;
line-height: 35px;
color: #78c02a;
margin-bottom: 0;
}
.price span {
font-size: 25px;
font-weight: 100;
padding-left: 5px;
}
.btn_block {
width: 100%;
padding: 0 20px;
margin: 10px 0;
text-align: center;
}
.btn {
color: #ffffff;
background-color: #78c02a;
border: none;
text-transform: uppercase;
border-radius: 6px;
padding: 18px 60px;
cursor: pointer;
}
.btn:hover {
background: #92e879;
transition: all 0.4s ease-in-out;
}
.btn:focus {
outline: 0;
}
.btn_label {
font-size: 15px;
font-weight: 400;
letter-spacing: 0.35px;
text-transform: uppercase;
}
.info_one {
color: #999;
cursor: pointer;
font-family: noto sans, sans-serif;
font-size: 14px;
margin-top: 5px;
text-transform: capitalize;
}
.info_two {
color: #17baef;
text-decoration: none;
}
.product_section {
display: none;
width: 81vw;
margin: 0 auto;
border-radius: 4px;
background: #fff;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.05);
}
.product_info {
border-top: 2px solid #e7cd60;
padding: 25px 50px 25px 70px;
background-color: #e9f5fd;
}
.heading {
font-weight: 500;
font-family: montserrat, sans-serif;
padding: 10px 0;
color: #00113d;
text-transform: capitalize;
font-size: 22px;
}
.features {
color: #00113d !important;
list-style: none;
}
.feature_item {
line-height: 1.5;
font-weight: 300;
font-family: montserrat, sans-serif;
margin: 20px 0;
font-size: 16px;
cursor: pointer;
}
.feature_item:hover {
color: #638043;
transition: all 0.3s ease-in-out;
}
.feature_item i {
color: #78c02a;
}
.divider {
width: 100%;
height: 1px;
margin: 25px 0;
background-color: #e9e9e9;
}
.deals {
display: flex;
flex-direction: row;
justify-content: center;
gap: 2rem;
margin-top: 10px;
}
.deal_item {
display: flex;
flex-direction: column;
align-items: center;
}
.product_logo {
max-width: 70px;
max-height: 40px;
}
.product_price {
height: 40px;
display: flex;
line-height: 1.1;
flex-direction: column;
justify-content: center;
font-size: 20px;
margin: 20px 0;
font-family: "Montserrat", sans-serif;
}
.product_price small {
margin: 0 auto;
font-size: 12px;
}
.product_btn {
color: #ffffff;
background-color: #78c02a;
border: none;
text-transform: uppercase;
border-radius: 6px;
padding: 15px;
cursor: pointer;
}
.product_btn:hover {
background: #92e879;
transition: all 0.4s ease-in-out;
}
.product_btn:focus {
outline: 0;
}
#media only screen and (max-width: 776px) {
.box {
width: 90vw;
position: relative;
flex-direction: column;
margin: 0px auto;
}
.ranked {
left: 15px;
top: 15px;
}
.product_image {
align-self: flex-end;
}
.company {
order: -1;
}
.price_section {
width: 100%;
margin-left: 0px;
}
.section_one {
flex-direction: row;
justify-content: space-between;
padding-left: 10px;
}
.section_two {
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 10px;
}
.info_one {
visibility: hidden;
}
.info_two {
font-size: 15px;
}
.btn_block {
/* width: 40% !important; */
width: 40vw;
}
.btn {
padding: 9px 30px;
}
.overview_section {
width: 100%;
margin: 0 10px;
}
.drop_down {
width: 90vw;
position: absolute;
bottom: -45px;
left: 0;
padding: 10px;
text-align: center;
background-color: #e9f5fd;
color: #1f1740;
font-weight: 900;
text-transform: uppercase;
}
.product_section {
width: 93vw;
}
.product_info {
padding: 20px 5px;
}
.heading {
padding: 10px 0 5px 0px;
font-size: 20px;
}
.features {
margin-left: 5px;
}
.feature_item {
margin: 10px 0;
font-size: 14px;
}
.divider {
margin: 15px 0;
}
.deals {
margin-top: 5px;
}
.product_logo {
max-width: 60px;
max-height: 30px;
margin-top: 5px;
}
.product_price {
font-size: 16px;
margin: 10px 0;
}
.product_btn {
padding: 10px 10px;
}
}
You need to delegate from the outer container
document.getElementById("container").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("drop_down")) {
e.preventDefault();
const parent = tgt.closest(".box").parentNode; // or give the <div style="margin-top: 50px"> a class
const element = parent.querySelector(".drop_down");
const product = parent.querySelector(".product_section");
product.classList.toggle("hide")
element.innerHTML = product.classList.contains("hide") ? `more info <i class="fas fa-angle-down"></i>` :`close <i class="fas fa-angle-up"></i>`;
}
})
.hide { display:none; }
<div id="container">
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="#" class="drop_down">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section hide">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="#" class="drop_down">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
Here's a basic concept without the use of inline JavaScript on* handlers.
Use the ::after pseudo to style your buttons
Use a state class like .is-active to style the active button
Use a utility class like .u-none to hide the element
Use data-* attribute to store into it the desired target selector
Use JavaScript .addEventListener() and .classList.toggle()
document
.querySelectorAll('[data-toggle]')
.forEach( btn =>
btn.addEventListener('click', ev =>
{
ev.preventDefault()
const el = ev.currentTarget
, target = el.dataset.toggle
;
el.classList.toggle('is-active')
document.querySelector(target).classList.toggle('u-none')
}
)
)
[data-toggle] {
cursor: pointer;
}
[data-toggle]::after {
font-family: "Font Awesome 5 Free";
font-weight: 900; /* Needed for Font Awesome to work */
content: "\f107";
padding-left: 5px;
}
[data-toggle].is-active::after {
content: "\f106";
}
/* Utility classes */
.u-none {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<a data-toggle="#product_23">More info</a>
<div id="product_23" class="u-none">Product section.....</div>
I would pass an argument id to handleClick and use it like :
"drop_down"+id and "product_section"+id
and call handleClick(1) or handleClick(2)
you'd have to copy-paste the html though.
I hope it helped ^^
Edit :
I'll try to make it more clear and make it look less like a comment.
Explaination:
My suggestion is to make the handleClick() not a function that is unique to one element but make it so that it can depends on multiple elements.
But how?
Well I first changed the var show = false (lign 1) to a var show = [] to make it a set of states instead of a state (one state per element).
I then added an argument named a in the handleClick() giving me const handleClick = (a) => {...}. This a will be the id of the element we want to change.
I then add my a to the selected classes: const element = document.querySelector(".drop_down"+a);
const product = document.querySelector(".product_section"+a);
I change the classes names and function accordingly to the previous step:
<a href="#" class="drop_down drop_down1" onclick="handleClick(1)"> //lign 17
<div class="product_section1"> //lign 41
We now change all the show to show[a] in the javascript file
Conclusion and final code
You'd want to make the href="" so it doesn't go up when you click. So here you go I hope it helped ^^
index.html
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="" class="drop_down1" onclick="handleClick(1)">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section product_section1">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
index.js
var show = [];
const handleClick = (a) => {
const element = document.querySelector(".drop_down"+a);
const product = document.querySelector(".product_section"+a);
if (!show[a]) {
element.innerHTML = `close <i class="fas fa-angle-up"></i>`;
product.style.display = "block";
show[a] = true;
} else {
element.innerHTML = `more info <i class="fas fa-angle-down"></i>`;
product.style.display = "none";
show[a] = false;
}
};

localhost different css than production build

here is the production build https://daotec.herokuapp.com/
this is what i see in my localhost
on hover the button is blue on the production build on hover it turns green and also has a white border where in localhost it has a white border and
the icons are centered where you can see in production build they are not. Does anyone know why this is happening? Also could anyone tell me how to get my container of hectagons to be in the very center of the screen? here is my code
CSS
.icon {
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.hex {
display: flex;
flex-direction: row;
}
.hexs {
justify-content: center;
padding: 30px;
align-content: center;
display: flex;
flex-direction: row;
}
.hex1 {
display: flex;
flex-direction: column;
width: 230px;
}
#fastest {
padding-left: 40px;
}
.para {
width: 200px;
position: absolute;
}
.hexa {
width: 104px;
height: 60px;
background-color: blueviolet;
}
.tri1 {
width: 0;
border-bottom: 30px solid blueviolet;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.tri2 {
width: 0;
border-top: 30px solid blueviolet;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.container {
filter: drop-shadow(0 0 0.75rem black);
}
HTML
<div className="head">
<h1>About</h1>
</div>
<hr />
<div className="hexs">
<div className="hex">
<div className="hex1">
<div className="container">
<div className="tri1"></div>
<div className="hexa">
<i className="fas fa-tachometer-alt icon fa-3x"></i>
</div>
<div className="tri2"></div>
</div>
<div className="fast">
<h3 id="fastest">Fast</h3>
</div>
<div>
<p className="para">
Fast load times and lag free interaction, my highest priority.
</p>
</div>
</div>
<div className="hex1">
<div className="container">
<div className="tri1"></div>
<div className="hexa">
<i className="fas fa-laptop-code icon fa-3x"></i>
</div>
<div className="tri2"></div>
</div>
<div>
<h3>Responsive</h3>
<p>My layouts will work on any device, big or small.</p>
</div>
</div>
</div>
<div className="hex">
<div className="hex1">
<div className="container">
<div className="tri1"></div>
<div className="hexa">
<i className="far fa-lightbulb icon fa-3x"></i>
</div>
<div className="tri2"></div>
</div>
<div>
<h3>Intuitive</h3>
<p>Strong preference for easy to use, intuitive UX/UI.</p>
</div>
</div>
<div className="hex1">
<div className="container">
<div className="tri1"></div>
<div className="hexa">
<i className="fas fa-rocket icon fa-3x"></i>
</div>
<div className="tri2"></div>
</div>
<div>
<h3>Dynamic</h3>
<p>
Websites don't have to be static, I love making pages come to
life.
</p>
</div>
</div>
</div>
</div>

Unequal div heights

I want to make unequal images heights and keep the layout the same on resize without changing the aspect ratio of the image on here is what i want to do :
https://i.ibb.co/nkSXJ4f/Screen-Shot-2019-04-12-at-6-32-32-AM.png
I know this is ease with css grid but i think i can make my code more simple since the layout is not complicated
What i've tried
body {
height: 100%;
}
.card {
margin-right: 20px;
margin-bottom: 2.6668rem;
display: inline-block;
vertical-align: top;
}
.medium {
width: 65%;
margin-right: 5%;
height: 600px;
overflow: hidden;
}
.small {
width: 25%;
height: 300px;
overflow: hidden;
}
img {
width: 100%;
}
<main class="grid">
<a href="" class="card medium">
<figcaption class="caption">project title</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
<a href="" class="card small">
<figcaption class="caption">Kettle</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
</main>
Try this code
body {
height: 100%;
}
*{
box-sizing:border-box;
}
.card {
margin-right: 20px;
vertical-align: top;
height:100vh;
display: block;
overflow: hidden;
}
.medium {
width: 65%;
margin-right: 5%;
float:left
}
.small {
width: 25%;
float:left
}
.card-image { height:100%; }
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<main class="grid">
<a href="" class="card medium">
<figcaption class="caption">project title</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
<a href="" class="card small">
<figcaption class="caption">Kettle</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
</main>

Make footer move up when content appears at the bottom

I have bottom fixed footer and content that appears at the bottom too, but I want to make my footer go up when that content is loaded (and kinda stick it to the top of the content). How do I do that?
For styling I'm using SASS
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
sass:
footer
position: fixed
z-index: 10
width: 100vw
bottom: 0
display: flex
justify-content: space-between
box-sizing: border-box
flex-wrap: nowrap
padding: 0 6.25vw 2.6042vw 6.35vw
The content which has to be loaded at the bottom and move the footer up:
<div class="content"></div>
sass
.content
position: absolute
bottom: 0
z-index: 30
height: 6.25vw
width: 100%
background-color: $white
See if this is what you've looking for. Try changing the height of the .content, the footer will always stick to the top of the content part, if there is no content in the .content part, the footer will stick to the bottom of the page.
body{
width: 100vw;
margin:0;
padding:0;
}
.upper-body{
display: flex;
width: 100%;
}
.footer-content{
display: flex;
flex-direction: column;
position: fixed;
z-index: 10;
width: 100vw;
bottom: 0;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
background-color: yellow;
}
footer{
position: relative;
z-index: 10;
width: 100vw;
bottom: 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
padding: 0 6.25vw 2.6042vw 6.35vw;
background-color: yellow;
}
.content{
display: flex;
position: relative;
bottom: 0;
z-index: 2;
height: 6.25vw;
width: 100vw;
background-color: gray;
}
<div class="upper-body">
</div>
<div class="footer-content">
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
<div class="content">
</div>
</div>

How to darken and add text to images on hover?

Ive tried multiple methods, but nothing seems to be working.
Ive recently stumbled upon this http://codepen.io/VectorQuanity/pen/qEeJoK, but when i try to implement it into my code, the text doesn't pop up on hover.
My code :
$(".pic").hover(function() {
$(".info", this).css("display", "block");
}, function() {
$(".info", this).css("display", "none");
});
$('.hover').mouseover(function() {
$('.text').css("visibility","visible");
});
$('.hover').mouseout(function() {
$('.text').css("visibility","hidden");
});
body {
width: 1500px;
text-align: center;
font-family: arial;
margin: 0 auto;
}
#import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
ul {
display: flex;
list-style-type: none;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid black;
font-family: 'Source Code Pro';
}
.logo {
font-family: 'Source Code Pro';
font-size: 40px;
padding: 10px 0;
}
nav {
list-style-type: none;
}
.pic {
position: relative;
display: inline-block;
}
.pic:hover > .overlay {
position: absolute;
top: 0;
width:100%;
height:99.5%;
left: 0;
background-color:#000;
opacity:0.5;
z-index: 100;
display: block;
}
.info {
display: none;
position: absolute;
top: 100px;
left: 0;
text-align: center;
}
footer{
background: black;
color: white;
padding: 40px 0;
bottom: 0;
width: 100%;
z-index: -1;
font-family: 'Source Code Pro';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gullible</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul>
<li>Home</li>
<li>Shop</li>
<li class="logo">Gullible</li>
<li>Visit</li>
<li>Contact</li>
</ul>
<div class="pic">
<img src="http://i.stack.imgur.com/cjj0l.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/cjj0l.jpg">
<p class="text">Wonder Women</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/fgwPb.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/fgwPb.jpg">
<p class="text">Batman</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/b8VTt.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/b8VTt.jpg">
<p class="text">Joker</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/rTZPO.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/rTZPO.jpg">
<p class="text">Bane</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/7aHn3.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/7aHn3.jpg">
<p class="text">Bane</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/JOzEN.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/JOzEN.jpg">
<p class="text">Bane</p>
</div>
</div>
<footer>
<h2>Gullible</h2>
<nav>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</nav>
</footer>
</body>
</html>
There are quite a few things in your code that could be improved. For example, you don't even need ANY JavaScript at all to achieve what you're looking for.
Check out the improved code below (which fixes your issue)!
#import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
body {
width: 1500px;
text-align: center;
font-family: arial;
margin: 0 auto;
}
header ul {
display: flex;
list-style-type: none;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid black;
font-family: 'Source Code Pro';
}
.logo {
font-family: 'Source Code Pro';
font-size: 40px;
padding: 10px 0;
}
nav ul {
list-style-type: none;
}
.pic {
position: relative;
display: inline-block;
}
.info {
display: none;
color: #fff;
left : 0;
top : 45%;
right : 0;
text-align : center;
position: absolute;
}
.pic:hover > .overlay {
position: absolute;
top: 0;
width:100%;
height:99.5%;
left: 0;
background-color:#000;
opacity:0.5;
display: block;
}
.pic:hover .info {
display: block;
}
footer{
background: black;
color: white;
padding: 40px 0;
bottom: 0;
width: 100%;
z-index: -1;
font-family: 'Source Code Pro';
}
<header>
<nav>
<ul>
<li>Home</li>
<li>Shop</li>
<li class="logo">Gullible</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="pic">
<img src="http://i.stack.imgur.com/cjj0l.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Wonder Women</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/fgwPb.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Batman</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/b8VTt.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Joker</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/rTZPO.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Bane</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/7aHn3.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Bane</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/JOzEN.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Bane</p>
</div>
</div>
<footer>
<h2>Gullible</h2>
<nav>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</nav>
</footer>

Categories