Here are the code for my website which look like this :
My CSS Look like this :
/** Card View ***/
.list-items {
display: flex;
flex-flow: wrap;
justify-content: center;
}
.list-items .card{
width: 18%;
margin: 10px;
background: #262626;
position: relative;
display: block;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15);
transition: 0.4s linear;
}
.card:hover{
box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.card .image{
background: black;
overflow: hidden;
}
.card .image img{
height: 100%;
width: 100%;
transition: 0.3s;
}
.card.active .image img{
opacity: 0.6;
transform: scale(1.1);
}
.card .content{
position: absolute;
border: none;
bottom: 0px;
background: #262626;
width: 100%;
padding: 10px;
}
.content .title{
font-size: 18px;
font-weight: 600;
color: #ffffff;
}
.content .category{
color: #04e0b2;
font-size: 12px;
}
.content .bottom{
margin-top: 5px;
}
.content .bottom button{
width: 100%;
border: none;
background: #04e0b2;
color: #ffffff;
font-weight: 800;
padding: 8px 0px;
transition: 0.3s ease;
cursor: pointer;
}
.content .bottom button:hover{
transform: scale(0.9);
}
.content .bottom{
display: none;
}
Here is the HTML
<div class="list-items">
<div class="card">
<div class="image">
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/mMWLGu9pFymqipN8yvISHsAaj72.jpg">
</div>
<div class="content">
<div class="title">Dory's Reef Cam</div>
<div class="category">Family, Animation, Comedy, Adventure</div>
<div class="bottom">
<button>Play</button>
</div>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/mMWLGu9pFymqipN8yvISHsAaj72.jpg">
</div>
<div class="content">
<div class="title">Dory's Reef Cam</div>
<div class="category">Family, Animation, Comedy, Adventure</div>
<div class="bottom">
<button>Play</button>
</div>
</div>
</div>
</div>
Javascript look like this :
//Card Hover
$('.card').hover(function(){
if($(this).hasClass('active')){
$('.card .bottom').slideUp(function(){
$('.card').removeClass('active');
});
}else{
$('.card').addClass('active');
$('.card .bottom').stop().slideDown();
}
});
Its Slide up all cards lists items all at once I want to know how to implement it for single item at once!
Is there any way to hover the single item and its slide up like this only but for single item only!
Use this to refer the hovered card
//Card Hover
$('.card').hover(function(){
$(this).toggleClass('active');
$(this).find('.bottom').slideToggle();
});
/** Card View ***/
.list-items {
display: flex;
flex-flow: wrap;
justify-content: center;
}
.list-items .card{
width: 18%;
margin: 10px;
background: #262626;
position: relative;
display: block;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15);
transition: 0.4s linear;
}
.card:hover{
box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.card .image{
background: black;
overflow: hidden;
}
.card .image img{
height: 100%;
width: 100%;
transition: 0.3s;
}
.card.active .image img{
opacity: 0.6;
transform: scale(1.1);
}
.card .content{
position: absolute;
border: none;
bottom: 0px;
background: #262626;
width: 100%;
padding: 10px;
}
.content .title{
font-size: 18px;
font-weight: 600;
color: #ffffff;
}
.content .category{
color: #04e0b2;
font-size: 12px;
}
.content .bottom{
margin-top: 5px;
}
.content .bottom button{
width: 100%;
border: none;
background: #04e0b2;
color: #ffffff;
font-weight: 800;
padding: 8px 0px;
transition: 0.3s ease;
cursor: pointer;
}
.content .bottom button:hover{
transform: scale(0.9);
}
.content .bottom{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-items">
<div class="card">
<div class="image">
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/mMWLGu9pFymqipN8yvISHsAaj72.jpg">
</div>
<div class="content">
<div class="title">Dory's Reef Cam</div>
<div class="category">Family, Animation, Comedy, Adventure</div>
<div class="bottom">
<button>Play</button>
</div>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/mMWLGu9pFymqipN8yvISHsAaj72.jpg">
</div>
<div class="content">
<div class="title">Dory's Reef Cam</div>
<div class="category">Family, Animation, Comedy, Adventure</div>
<div class="bottom">
<button>Play</button>
</div>
</div>
</div>
</div>
Related
I have a menu bar that changes the tab based on which one is selected. Right now both of the headers aren't displaying properly with each of the tabs and I was wondering how I can fix this?
When I move the content-header div into the content div with the associated tab, the styling gets messed up, but when I take it out and leave it where it's at, the header gets duplicated to the other tabs. I have provided a screenshot of what I'm trying to achieve and the code as well.
(How I want to display each tab: Each will have their own header that's specific to the tab selected)
function switchTabs() {
document.querySelectorAll(".tab-button").forEach(link => {
link.addEventListener("click", () => {
const menuBar = link.parentElement;
const tabsContainer = menuBar.parentElement;
const tabNumber = link.dataset.forTab;
const tabToActivate = tabsContainer.querySelector(`[data-tab="${tabNumber}"]`)
menuBar.querySelectorAll(".tab-button").forEach(link => {
link.classList.remove("tab-button-active");
})
tabsContainer.querySelectorAll(".content").forEach(tab => {
tab.classList.remove("content-active");
})
link.classList.add("tab-button-active");
tabToActivate.classList.add("content-active");
});
});
}
document.addEventListener("DOMContentLoaded", () => {
switchTabs();
document.querySelectorAll(".content").forEach(tabsContainer => {
document.querySelector(".horizontal-tabs .tab-button").click()
})
});
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-text-primary: #282a32;
--c-text-secondary: #686b87;
--c-text-action: #404089;
--c-accent-primary: #434ce8;
--c-border-primary: #eff1f6;
--c-background-primary: #ffffff;
--c-background-secondary: #fdfcff;
--c-background-tertiary: #ecf3fe;
--c-background-quaternary: #e9ecf4;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: #E5E5E5 !important;
color: var(--c-text-primary);
}
:focus {
outline: 0;
}
.navbar-light {
background-color: #ffffff;
}
.navbar-nav{
justify-content: space-between;
}
.navbar-brand {
font-size: 45px;
color: #A388E7 !important;
font-weight: bolder;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
text-decoration: none;
white-space: nowrap;
}
.nav-item{
color: #686868 !important;
font-size: 20px;
position: relative;
right: -1675px !important;
}
.nav-item a {
display: block;
padding: 0.5rem 1rem;
color: #000000;
text-decoration: none;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#alert{
position: relative;
right: -3px !important;
}
.action {
position: fixed;
top: 20px;
right: 30px;
}
.action .profile {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.action .profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.action .menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.action .menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.action .menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
*, ::after, ::before {
box-sizing: border-box;
}
.action .menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.action .menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.action .menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.action .menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.action .menu ul li:hover img {
opacity: 1;
}
.action .menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.action .menu ul li:hover a {
color: #9370DB;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.button {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em;
height: 40px;
border-radius: 8px;
line-height: 1;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
background-color: var(--c-background-primary);
}
.button i {
margin-right: 0.5rem;
font-size: 1.25em;
}
.button span {
font-weight: 500;
}
.button:hover, .button:focus {
border-color: var(--c-accent-primary);
color: var(--c-accent-primary);
}
.main {
padding-top: 3rem;
}
.main-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.main-header h1 {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.25;
}
#media (max-width: 550px) {
.main-header h1 {
margin-bottom: 1rem;
}
}
.search {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 340px;
}
.search input {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em 0 36px;
height: 40px;
border-radius: 8px;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
width: 100%;
line-height: 1;
}
.search input::-moz-placeholder {
color: var(--c-text-action);
}
.search input:-ms-input-placeholder {
color: var(--c-text-action);
}
.search input::placeholder {
color: var(--c-text-action);
}
.search input:focus, .search input:hover {
border-color: var(--c-accent-primary);
}
.search button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background-color: transparent;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25em;
color: var(--c-text-action);
padding: 0;
height: 40px;
}
.horizontal-tabs {
margin-top: 1.5rem;
display: flex;
align-items: center;
overflow-x: auto;
}
#media (max-width: 1000px) {
.horizontal-tabs {
scrollbar-width: none;
position: relative;
}
.horizontal-tabs::-webkit-scrollbar {
display: none;
}
}
.horizontal-tabs a {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 48px;
padding: 0 0.25rem;
font-weight: 500;
color: inherit;
border-bottom: 3px solid transparent;
text-decoration: none;
transition: 0.15s ease;
}
.horizontal-tabs a:hover, .horizontal-tabs a:focus, .horizontal-tabs a.active {
color: var(--c-accent-primary);
border-bottom-color: var(--c-accent-primary);
}
.horizontal-tabs a + * {
margin-left: 1rem;
}
.content-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 3rem;
margin-top: -1px;
border-top: 1px solid var(--c-border-primary);
}
.content-header-intro h2 {
font-size: 1.25rem;
font-weight: 600;
}
.content-header-intro p {
color: var(--c-text-secondary);
margin-top: 0.25rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
#media (min-width: 800px) {
.content-header-actions a:first-child {
display: none;
}
}
.content {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: none;
}
.content-active {
display: flex !important;
}
.content-panel {
display: none;
max-width: 280px;
width: 25%;
padding: 2rem 1rem 2rem 0;
margin-right: 3rem;
}
#media (min-width: 800px) {
.content-panel {
display: block;
}
}
.vertical-tabs {
display: flex;
flex-direction: column;
}
.vertical-tabs a {
display: flex;
align-items: center;
padding: 0.75em 1em;
background-color: transparent;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
color: var(--c-text-action);
transition: 0.15s ease;
}
.vertical-tabs a:hover, .vertical-tabs a:focus, .vertical-tabs a.active {
background-color: var(--c-background-tertiary);
color: var(--c-accent-primary);
}
.vertical-tabs a + * {
margin-top: 0.25rem;
}
.content-main {
padding-top: 2rem;
padding-bottom: 6rem;
flex-grow: 1;
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: 1.5rem;
}
#media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--c-background-primary);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.card-header div {
display: flex;
align-items: center;
}
.card-header div span {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-header div span img {
max-height: 100%;
}
.card-header div h3 {
margin-left: 0.75rem;
font-weight: 500;
}
.toggle span {
display: block;
width: 40px;
height: 24px;
border-radius: 99em;
background-color: var(--c-background-quaternary);
box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.05);
position: relative;
transition: 0.15s ease;
}
.toggle span:before {
content: "";
display: block;
position: absolute;
left: 3px;
top: 3px;
height: 18px;
width: 18px;
background-color: var(--c-background-primary);
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
transition: 0.15s ease;
}
.toggle input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle input:checked + span {
background-color: var(--c-accent-primary);
}
.toggle input:checked + span:before {
transform: translateX(calc(100% - 2px));
}
.toggle input:focus + span {
box-shadow: 0 0 0 4px var(--c-background-tertiary);
}
.card-body {
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.card-footer {
margin-top: auto;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid rgba(0,0,0,.125);
}
.card-footer a {
color: var(--c-text-action);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
.tab-button-active{
color: var(--c-accent-primary) !important;
border-bottom: 3px solid var(--c-accent-primary) !important;
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-thumb {
background-color: var(--c-text-primary);
border: 4px solid var(--c-background-primary);
border-radius: 99em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StudioPick</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="CSS/settings.css">
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType"
style="position: relative; top: -20px; right: -60px; font-size: 12px !important">Studio</p>
<ul>
<li>
<img src="./assets/icons/user.png" />Dashboard
</li>
<li>
<img src="./assets/icons/edit.png" />Edit profile
</li>
<li>
<img src="./assets/icons/envelope.png" />Inbox
</li>
<li>
<img src="./assets/icons/settings.png" />Setting
</li>
<li><img src="./assets/icons/question.png" />Help</li>
<li>
<img src="./assets/icons/log-out.png" />Logout
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<main class="main">
<div class="responsive-wrapper">
<div class="main-header">
<h1>Settings</h1>
<div class="search">
<input type="text" placeholder="Search" />
<button type="submit">
<i class="ph-magnifying-glass-bold"></i>
</button>
</div>
</div>
<div class="horizontal-tabs">
<a class="tab-button" href="#" data-for-tab="1">Profile</a>
<a class="tab-button" href="#" data-for-tab="2">My Rooms</a>
<a class="tab-button" href="#" data-for-tab="3">Session Management</a>
<a class="tab-button" href="#" data-for-tab="4">Payment History</a>
<a class="tab-button" href="#" data-for-tab="5">Edit Payment</a>
</div>
<div class="content" data-tab="1">
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your profile</h2>
<p>Edit your profile information such email, username, password, etc.</p>
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your studio rooms</h2>
<p>Add, delete, and edit the room images for your studio profile.</p>
</div>
<div class="content-header-actions">
<a href="#" class="button">
<i class="ph-faders-bold"></i>
<span>Filters</span>
</a>
<a href="#" class="button">
<i class="ph-plus-bold"></i>
<span>Add a room</span>
</a>
</div>
</div>
<div class="content" data-tab="2">
<div class="content-panel">
<div class="vertical-tabs">
View Rooms
Manage Services
</div>
</div>
<div class="content-main">
<div class="card-grid">
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/zeplin.svg" /></span>
<h3>Room A</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/github.svg" /></span>
<h3>Room B</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/figma.svg" /></span>
<h3>Room C</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
</div>
</div>
</div>
<div class="content" data-tab="3">
<div class="content-panel">
<div class="vertical-tabs">
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
</div>
</main>
<!-- partial -->
<script src='https://unpkg.com/phosphor-icons'></script>
<script src="Javascript/settings.js"></script>
<script>
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
</script>
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>
There are a few things you need to do.
Add a wrapper to content-panel and content main with these styles:
width: 100%;
display: flex;
flex-direction: row;
Move your content-headers inside the content class
Finally provide a width of 100% to content-headers
And here is the working example:
https://codepen.io/saadramay/pen/NWMgxrB
I want to reduce the size of these divs so that every row contain 3 cards at most. As I change the measurements in the CSS, it gets smaller and smaller. PS I'm not allowed to use Bootstrap! I tried using different measurements and also the grid feature but it was of no help.
This is the screenshot of the divs on my website
.locations .box-container {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
grid-template-rows: auto;
}
.locations .box-container .box {
overflow: hidden;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
border: 1rem solid #fff;
border-radius: 0.5rem;
flex: 1 1 30rem;
height: 25rem;
position: relative;
}
.locations .box-container .box img {
height: 100%;
width: 100%;
object-fit: cover;
}
.locations .box-container .box .card-body {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba(0, 0, 0, 0.7);
padding: 2rem;
padding-top: 5rem;
}
.locations .box-container .box .card-body .card-btn {
display: inline-block;
margin-top: 1rem;
background: orange;
color: #fff;
padding: 0.8rem 3rem;
border: 0.2rem solid orange;
cursor: pointer;
font-size: 1.7rem;
}
.locations .box-container .box .card-body .card-btn:hover {
border: 2px solid orange;
color: orange;
background: transparent;
transition: 0.4s ease;
}
.locations .box-container .box .card-body .card-btn:focus {
outline: none;
}
.locations .box-container .box .card-body h5 {
font-size: 2.5rem;
color: orange;
}
.locations .box-container .box .card-body p {
font-size: 1.5rem;
color: #eee;
padding: 0.5rem 0;
}
<section class="locations">
<h1>Locations</h1>
<p>"Adventure is out there."</p>
<br>
<div class="box-container">
<div class="box">
<div class="card">
<img src="./murree.jpg" alt="Murree, Pakistan">
<div class="card-body">
<h5>Murree</h5>
<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
View
</div>
</div>
</div>
</div>
</section>
I simplified your HTML and CSS a bit, but this solution should work. This will give you 3 cards per row, and will fill the rows below it. I removed some of your styling for brevity, so you'll need to add that back, but this should give you the structure you need.
.locations .box-container
{
display: flex;
flex-wrap: wrap;
}
.locations .box-container .box
{
overflow: hidden;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
border: 1rem solid #fff;
border-radius: 0.5rem;
height: 25rem;
flex: 1 0 25%;
margin: 0.5rem;
box-sizing: border-box;
}
.locations .box-container .box .card
{
height: 100%;
width: 100%;
text-align: center;
background: rgba(0, 0, 0, 0.7);
padding: 2rem;
}
.locations .box-container .card h5
{
font-size: 2.5rem;
color: orange;
}
.locations .box-container .card p
{
font-size: 1.5rem;
color: #eee;
padding: 0.5rem 0;
}
.locations .box-container .card a
{
display: inline-block;
margin-top: 1rem;
background: orange;
color: #fff;
padding: 0.8rem 3rem;
border: 0.2rem solid orange;
cursor: pointer;
font-size: 1.7rem;
}
<section class="locations">
<div class="box-container">
<div class="box">
<div class="card">
<h5>Title</h5>
<p>Card content.</p>
View
</div>
</div>
<div class="box">
<div class="card">
<h5>Title</h5>
<p>Card content.</p>
View
</div>
</div>
<div class="box">
<div class="card">
<h5>Title</h5>
<p>Card content.</p>
View
</div>
</div>
<div class="box">
<div class="card">
<h5>Title</h5>
<p>Card content.</p>
View
</div>
</div>
<div class="box">
<div class="card">
<h5>Title</h5>
<p>Card content.</p>
View
</div>
</div>
</div>
</section>
I have a problem where my page looks weird. The photo should be displayed on the right and the input (date) doesntwork on mobile. Page is hosted on github pages and netlify. Problem is the same on both pages, but it is working correctly on chrome DevTools and on screens wider than 1200px. Any suggestions how to fix that behaviour?
link to the page: https://fabianswiczerewski-dashboard.netlify.app/
const sideMenu = document.querySelector('aside');
const menuBtn = document.querySelector('#menu-btn');
const closeBtn = document.querySelector('#close-btn');
const themeToggler = document.querySelector('.theme-toggler');
menuBtn.addEventListener('click', () => {
sideMenu.style.display = 'block';
} );
closeBtn.addEventListener('click', () => {
sideMenu.style.display = 'none';
} );
themeToggler.addEventListener('click', () => {
document.body.classList.toggle('dark-theme-variables');
themeToggler.querySelector('span:nth-child(1)').classList.toggle('active');
themeToggler.querySelector('span:nth-child(2)').classList.toggle('active');
} );
// fill ORDERS
Orders.forEach(order =>{
const tr = document.createElement('tr');
const trContent = `
<td>${order.productName}</td>
<td>${order.productNumber}</td>
<td>${order.paymentStatus}</td>
<td class="${order.shipping === 'Declined' ? 'danger' : order.shipping === 'Pending' ? 'warning' : 'primary'}">${order.shipping}</td>
<td class="primary">Details</td>
`
tr.innerHTML = trContent;
document.querySelector('table tbody').appendChild(tr);
})
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700;800&display=swap');
:root{
--color-primary: #7380ec;
--color-danger: #ff7782;
--color-succes: #41f1b6;
--color-warning: #ffbb55;
--color-white: #fff;
--color-info-dark: #7d8da1;
--color-info-light: #dce1eb;
--color-dark: #363949;
--color-light: rgba(132, 139, 200, 0.18);
--color-primary-variant: #111e88;
--color-dark-variant: #677483;
--color-background: #f6f6f9;
--card-border-radius: 2rem;
--border-radius-1: 0.4rem;
--border-radius-2: 0.8rem;
--border-radius-3: 1.2rem;
--card-padding: 1.8rem;
--padding-1: 1.2rem;
--box-shadow: 0 2rem 3rem var(--color-light);
}
/* dark theme */
.dark-theme-variables{
--color-background: #181a1e;
--color-white: #202528;
--color-dark: #edeffd;
--color-dark-variant: #a3bdcc;
--color-light: rgba(0, 0, 0, 0.4);
--box-shadow: 0 2rem 3rem var(--color-light);
}
*{
margin: 0;
padding: 0;
outline: 0;
appearance: none;
border: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
html{
font-size: 14px;
}
body{
width: 100vw;
height: 100vh;
font-family: 'Poppins', sans-serif;
background: var(--color-background);
user-select: none;
overflow-x: hidden;
color: var(--color-dark);
}
.container{
display:grid;
width: 96%;
margin: 0 auto;
gap: 1.8rem;
grid-template-columns: 14rem auto 23rem;
}
a{
color: var(--color-dark);
}
img{
display: block;
width: 100%;
}
h1{
font-weight: 800;
font-size: 1.8rem;
}
h2{
font-size: 1.4rem;
}
h3{
font-size: 0.87rem;
}
h4{
font-size: 0.8rem;
}
h5{
font-size: 0.77rem;
}
small{
font-size: 0.75rem;
}
.profile-photo{
width: 2.8rem;
height: 2.8rem;
border-radius: 50%;
overflow: hidden;
}
.text-muted{
color: var(--color-info-dark);
}
p{
color: var(--color-dark-variant);
}
b{
color: var(--color-dark);
}
.primary{
color: var(--color-primary);
}
.danger{
color: var(--color-danger);
}
.warning{
color: var(--color-warning);
}
.succes{
color: var(--color-succes);
}
aside{
height: 100vh;
}
aside .top{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1.4rem;
}
aside .logo{
display: flex;
gap: 0.8rem;
margin-left: 1.8rem;
}
aside .logo img{
width: 2rem;
height: 2rem;
}
aside .close{
display: none;
}
/* sidebar */
aside .sidebar{
display: flex;
flex-direction: column;
height: 86vh;
position: relative;
top: 3rem;
}
aside h3{
font-weight: 500;
}
aside .sidebar a{
display: flex;
color: var(--color-info-dark);
margin-left: 2rem;
gap: 1rem;
align-items: center;
position: relative;
height: 3.7rem;
transition: all 300ms ease;
}
aside .sidebar a span{
font-size: 1.6rem;
transition: all 300ms ease;
}
aside .sidebar a:last-child{
position: absolute;
bottom: 2rem;
width: 100%;
}
aside .sidebar a.active{
background: var(--color-light);
color: var(--color-primary);
margin-left: 0;
}
aside .sidebar .active:before{
content: "";
width: 6px;
height: 100%;
background: var(--color-primary);
}
aside .sidebar a.active span{
color: var(--color-primary);
margin-left: calc(1rem - 3px);
}
aside .sidebar a:hover{
color: var(--color-primary);
}
aside .sidebar a:hover span{
margin-left: 1rem;
}
aside .sidebar .message-count{
background: var(--color-danger);
color: var(--color-white);
padding: 2px 10px;
font-size: 11px;
border-radius: var(--border-radius-1);
}
/* main */
main{
margin-top:1.4rem;
}
main .date{
display: inline-block;
background: var(--color-light);
border-radius: var(--border-radius-1);
margin-top: 1rem;
padding: 0.5rem 1.6rem;
}
main .date input[type='date']{
background: transparent;
color: var(--color-dark);
}
main .insights{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.6rem;
}
main .insights > div{
background: var(--color-white);
padding: var(--card-padding);
border-radius: var(--card-border-radius);
margin-top: 1rem;
box-shadow: var(--box-shadow);
transition: all 300ms ease;
}
main .insights > div:hover{
box-shadow: none;
}
main .insights >div span{
background: coral;
padding: 0.5rem;
border-radius: 50%;
color: var(--color-white);
font-size: 2rem;
}
main .insights > div.expenses span{
background: var(--color-danger);
}
main .insights > div.income span{
background: var(--color-succes);
}
main .insights > div .middle{
display: flex;
align-items: center;
justify-content: space-between;
}
main .insights h3{
margin: 1rem 0 0.6rem;
font-size: 1rem;
}
main .insights .progress{
position: relative;
width: 92px;
height: 92px;
border-radius: 50%;
}
main .insights svg{
width: 7rem;
height: 7rem;
}
main .insights svg circle{
fill:none;
stroke: var(--color-primary);
stroke-width: 14;
stroke-linecap: round;
transform: translate(5px, 5px);
}
main .insights .sales svg circle{
stroke-dasharray: 200;
stroke-dashoffset: -47;
}
main .insights .expenses svg circle{
stroke-dasharray: 90;
stroke-dashoffset: 20;
}
main .insights .income svg circle{
stroke-dasharray: 110;
stroke-dashoffset: 35;
}
main .insights .progress .number{
position: absolute;
top: 0;
left:0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
main .insights small{
margin-top: 1.3rem;
display: block;
}
/* recent orders */
main .recent-orders{
margin-top: 2rem;
}
main .recent-orders h2{
margin-bottom: 0.8rem;
}
main .recent-orders table{
background: var(--color-white);
width: 100%;
border-radius: var(--card-border-radius);
padding: var(--card-padding);
text-align: center;
box-shadow: var(--box-shadow);
transition: all 300ms ease;
}
main .recent-orders table:hover{
box-shadow:none;
}
main table tbody td{
height: 2.8rem;
border-bottom: 1px solid var(--color-light);
color:var(--color-dark-variant);
}
main table tbody tr:last-child td{
border:none;
}
main .recent-orders a{
text-align: center;
display: block;
margin: 1rem auto;
color: var(--color-primary);
}
/* right section */
.right{
margin-top: 1.4rem;
}
.right .top{
display: flex;
justify-content: end;
gap: 2rem;
}
.right .top button{
display: none;
}
.right .theme-toggler{
background: var(--color-light);
display: flex;
justify-content: space-between;
align-items: center;
height: 1.6rem;
width: 4.2rem;
cursor: pointer;
border-radius: var(--border-radius-1);
}
.right .theme-toggler span{
font-size:1.2rem;
width: 50%;
height: 100%;
display:flex;
align-items: center;
justify-content: center;
}
.right .theme-toggler span.active{
background: var(--color-primary);
color: white;
border-radius: var(--border-radius-1);
}
.right .top .profile{
display: flex;
gap:2rem;
text-align: right;
}
/* recent updates */
.right .recent-updates{
margin-top:1rem;
}
.right .recent-updates h2{
margin-bottom: 0.8rem;
}
.right .recent-updates .updates{
background: var(--color-white);
padding: var(--card-padding);
border-radius: var(--card-border-radius);
box-shadow: var(--box-shadow);
transition: all 300ms ease;
}
.right .recent-updates .updates:hover{
box-shadow: none;
}
.right .recent-updates .updates .update{
display: grid;
grid-template-columns: 2.6rem auto;
gap: 1rem;
margin-bottom: 1rem;
}
/* sales analytics */
.right .sales-analytics{
margin-top:2rem;
}
.right .sales-analytics h2{
margin-bottom: 0.8rem;
}
.right .sales-analytics .item{
background: var(--color-white);
display: flex;
align-items: center;
gap:1rem;
margin-bottom: 0.7rem;
padding: 1.4rem var(--card-padding);
border-radius: var(--border-radius-3);
box-shadow: var(--box-shadow);
transition: all 300ms ease;
}
.right .sales-analytics .item:hover{
box-shadow: none;
}
.right .sales-analytics .item .right{
display: flex;
justify-content: space-between;
align-items: stretch;
margin: 0;
width: 100%;
}
.right .sales-analytics .item .icon{
padding: 0.6rem;
color: var(--color-white);
border-radius:50%;
background: var(--color-primary);
display: flex;
}
.right .sales-analytics .item.offline .icon{
background: var(--color-danger);
}
.right .sales-analytics .item.customers .icon{
background: var(--color-succes);
}
.right .sales-analytics .add-product{
background-color: transparent;
border: 2px dashed var(--color-primary);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
}
.right .sales-analytics .add-product div{
display: flex;
align-items: center;
gap:0.6rem;
}
.right .sales-analytics .add-product:hover{
color: white;
background: var(--color-primary);
}
.right .sales-analytics .add-product div h3{
font-weight: 600;
}
/* Media Queries */
#media screen and (max-width:1200px){
.container{
width: 94%;
grid-template-columns: 7rem auto 23rem;
}
aside .logo h2{
display: none;
}
aside .sidebar h3{
display: none;
}
aside .sidebar a{
width: 5.6rem;
}
aside .sidebar a:last-child{
position: relative;
margin-top: 1.8rem;
}
main .insights{
grid-template-columns: 1fr;
gap:0;
}
main .recent-orders{
width: 94%;
position: absolute;
left:50%;
transform: translateX(-50%);
margin: 2rem 0 0 8.8rem;
}
main .recent-orders table{
width: 82vw;
}
main table thead tr th:last-child, main table thead tr th:first-child{
display: none;
}
main table tbody tr td:last-child, main table tbody tr td:first-child{
display: none;
}
}
/* mobile media query */
#media screen and (max-width: 768px){
.container{
width: 100%;
grid-template-columns: 1fr;
}
aside{
position: fixed;
left: -100%;
background: var(--color-white);
width: 18rem;
z-index: 3;
box-shadow: 1rem 3rem 4rem var(--color-light);
height: 100vh;
padding-right: var(--card-padding);
display:none;
animation: showMenu 400ms ease forwards;
}
aside .logo{
margin-left: 1rem;
}
aside .logo h2{
display: inline;
}
aside .logo h3{
display: inline;
}
aside .sidebar h3{
display: inline;
}
aside .sidebar a{
width: 100%;
height: 3.4rem;
}
aside .sidebar a:last-child{
position: absolute;
bottom: 5rem;
}
aside .close{
display: inline-block;
cursor: pointer;
}
main{
margin-top: 8rem;
padding: 0 1rem;
}
main .recent-orders{
position: relative;
margin: 3rem 0 0 0;
width: 100%;
}
main .recent-orders table{
width: 100%;
margin: 0;
}
.right{
width: 94%;
margin: 0 auto 4rem;
}
.right .top{
position: fixed;
top:0;
left: 0;
align-items: center;
padding: 0 0.8rem;
height: 4.6rem;
background: var(--color-white);
width: 100%;
margin: 0;
z-index: 2;
box-shadow: 0 1rem 1rem var(--color-light);
}
.right .top .theme-toggler{
width: 4.4rem;
position: absolute;
left: 66%;
}
.right .profile .info{
display: none;
}
.right .top button{
display: inline-block;
background: transparent;
cursor: pointer;
color: var(--color-dark);
position: absolute;
left: 1rem;
}
.right .top button span{
font-size: 2rem;
}
#keyframes showMenu{
to{
left:0;
}
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>Dahshboard</title>
<!-- icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
<!-- stylesheet -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<aside>
<div class="top">
<div class="logo">
<img src="./images/code.png" alt="">
<h2>FAB<span class="primary">IAN</span></h2>
</div>
<div class="close" id="close-btn">
<span class="material-icons-sharp">close</span>
</div>
</div>
<div class="sidebar">
<a href="#" class='active'>
<span class="material-icons-sharp">grid_view</span>
<h3>Dashboard</h3>
</a>
<a href="#">
<span class="material-icons-sharp">person_outline</span>
<h3>Customers</h3>
</a>
<a href="#">
<span class="material-icons-sharp">receipt_long</span>
<h3>Orders</h3>
</a>
<a href="#">
<span class="material-icons-sharp">insights</span>
<h3>Analytics</h3>
</a>
<a href="#">
<span class="material-icons-sharp">mail_outline</span>
<h3>Messages</h3>
<span class='message-count'>17</span>
</a>
<a href="#">
<span class="material-icons-sharp">inventory</span>
<h3>Products</h3>
</a>
<a href="#">
<span class="material-icons-sharp">report_gmailerrorred</span>
<h3>Reports</h3>
</a>
<a href="#">
<span class="material-icons-sharp">settings</span>
<h3>Settings</h3>
</a>
<a href="#">
<span class="material-icons-sharp">add</span>
<h3>Add Product</h3>
</a>
<a href="#">
<span class="material-icons-sharp">logout</span>
<h3>Logout</h3>
</a>
</div>
</aside>
<!-- end of aside -->
<main>
<h1>Dashboard</h1>
<div class="date">
<input type="date" name="" value="">
</div>
<div class="insights">
<div class="sales">
<span class="material-icons-sharp">analytics</span>
<div class="middle">
<div class="left">
<h3>Total Sales</h3>
<h1>$78,876</h1>
</div>
<div class="progress">
<svg>
<circle cx='38' cy='38' r='36'> </circle>
</svg>
<div class="number">
<p>81%</p>
</div>
</div>
</div>
<small class='text-muted'>Last 24 hours</small>
</div>
<!-- end of sales -->
<div class="expenses">
<span class="material-icons-sharp">bar_chart</span>
<div class="middle">
<div class="left">
<h3>Total Expenses</h3>
<h1>$52,482</h1>
</div>
<div class="progress">
<svg>
<circle cx='38' cy='38' r='36'> </circle>
</svg>
<div class="number">
<p>62%</p>
</div>
</div>
</div>
<small class='text-muted'>Last 24 hours</small>
</div>
<!-- end of expenses -->
<div class="income">
<span class="material-icons-sharp">stacked_line_chart</span>
<div class="middle">
<div class="left">
<h3>Total Income</h3>
<h1>$26,394</h1>
</div>
<div class="progress">
<svg>
<circle cx='38' cy='38' r='36'> </circle>
</svg>
<div class="number">
<p>44%</p>
</div>
</div>
</div>
<small class='text-muted'>Last 24 hours</small>
</div>
<!-- end of income -->
</div>
<!-- end of insights -->
<div class="recent-orders">
<h2>Recent Orders</h2>
<table>
<thead>
<tr>
<th>Product Name</th>
<th>Product Number</th>
<th>Payment</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Show All
</div>
</main>
<!-- end of main -->
<div class="right">
<div class="top">
<button type="button" name="button" id='menu-btn'>
<span class="material-icons-sharp">menu</span>
</button>
<div class="theme-toggler">
<span class="material-icons-sharp active">light_mode</span>
<span class="material-icons-sharp">dark_mode</span>
</div>
<div class="profile">
<div class="info">
<p>Hey, <b>Alex</b></p>
<small class="text-muted">Admin</small>
</div>
<div class="profile-photo">
<img src="images/profile-1.jpg" alt="">
</div>
</div>
</div>
<!-- end of top -->
<div class="recent-updates">
<h2>Recent Updates</h2>
<div class="updates">
<div class="update">
<div class="profile-photo">
<img src="images/profile-2.jpg" alt="">
</div>
<div class="message">
<p><b>Daniel McKenzie</b> received his order of DJI Pro 2 drone.</p>
<small class="text-muted">2 Minutes Ago</small>
</div>
</div>
<div class="update">
<div class="profile-photo">
<img src="images/profile-3.jpg" alt="">
</div>
<div class="message">
<p><b>Daniel McKenzie</b> declined her order of Foldable Mini drone.</p>
<small class="text-muted">2 Minutes Ago</small>
</div>
</div>
<div class="update">
<div class="profile-photo">
<img src="images/profile-4.jpg" alt="">
</div>
<div class="message">
<p><b>Daniel McKenzie</b> received his order of KS304 drone.</p>
<small class="text-muted">2 Minutes Ago</small>
</div>
</div>
</div>
</div>
<!-- end of recent updates -->
<div class="sales-analytics">
<h2>Sales Analytics</h2>
<div class="item online">
<div class="icon">
<span class="material-icons-sharp active">shopping_cart</span>
</div>
<div class="right">
<div class="info">
<h3>ONLINE ORDERS</h3>
<small class='text-muted'>Last 24 Hours</small>
</div>
<h5 class='succes'>+39%</h5>
<h3>3849</h3>
</div>
</div>
<div class="item offline">
<div class="icon">
<span class="material-icons-sharp active">local_mall</span>
</div>
<div class="right">
<div class="info">
<h3>OFFLINE ORDERS</h3>
<small class='text-muted'>Last 24 Hours</small>
</div>
<h5 class='danger'>-17%</h5>
<h3>1176</h3>
</div>
</div>
<div class="item customers">
<div class="icon">
<span class="material-icons-sharp active">person</span>
</div>
<div class="right">
<div class="info">
<h3>NEW CUSTOMERS</h3>
<small class='text-muted'>Last 24 Hours</small>
</div>
<h5 class='succes'>+25%</h5>
<h3>785</h3>
</div>
</div>
<div class="item add-product">
<div class="">
<span class="material-icons-sharp active">add</span>
<h3>Add Products</h3>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="orders.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
I currently have a gallery of my portfolio set-up. Once you click on the image, it makes a pop-up. Inside of the pop-up is the image and text describing the design, copywriting ect. Once you hover over the image, it zooms. My problem is that one or two of the images, on css hover transform scale, scales to such a size that it is outside of the viewing port of the browser. It is in rectangular form, where other designs are only square. I would like the user of the website to move their cursor up and have the image move with the cursor, so the user can see the top of the image, and then have the user move their cursor down to the bottom of the image and have the image move with the cursor so that the user can see the bottom of the image. I have no idea how to do this, and I've searched everywhere but I can not find anything useful. I think it might use background-image and java-script but I really need help since I don't have knowledge of this.
html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/mainwebsite.css">
<link rel="stylesheet" href="CSS/fonts/futura_bold_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_book_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_light_bt-stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_light_italic_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_medium_stylesheet.css">
<script defer src="javascript/POPUP.js"></script>
<script src="javascript/Filters.js" defer></script>
<script defer src="javascript/tothetop.js"></script>
<script defer src="javascript/moveimage.js"></script>
<meta charset="utf-8">
<title>Ilana's creations</title>
</head>
<body class="helpme">
<div class="container">
<div class="mainnavbar">
<div class="navbar_left">
<p class="nav">
<a class="current" href="index.html">
CREATIONS
</a>
</p>
<p class="nav">
<a href="aboutme.html">
ABOUT ME
</a>
</p>
<p class="nav">
<a href="sayhi.html">
SAY HI!
</a>
</p>
</div>
<div class="navbar_right">
<p class="nav1">
<a href= target="_blank">
<img src="images/LI-In-Bug.png" alt="LinkedIn" class="icon" style="width:20px;height:20px">
</a>
</p>
<p class="nav1">
Ilana van Rooyen
</p>
</div>
</div>
<div class="searchbar" id="filtering">
<button class="searchbarbuttons active" onclick="filterSelection('all')">
ALL
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('design')">
DESIGN
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('copy')">
COPYWRITING
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('creativewriting')">
CREATIVE WRITING
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('videos')">
VIDEOS
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('socialmedia')">
SOCIAL MEDIA MANAGEMENT
</button>
</div>
<div class="case">
<!-- MODAL 22 BIGGER IMAGES -->
<div class="nobutton design" data-modal-target="#modal22">
<img src="Images/ZoetisMap_Pres.png" alt="ZoetisMap" width="250px" height="250px" class="gallerypics">
</div>
<div class="modal2" id="modal22" style="width: 50%; height: auto">
<div id="scroll">
<img src="Images/ZoetisMap_Design.png" alt="ZoetisMap" class="IMG3" style="width: 40%; height: 40%">
</div>
<div class="containerDB">
<div class="DESC">
<p class="DESC_text">
<strong class="title">
Layout design:
</strong>
Ilana van Rooyen
</p>
<p class="DESC_text">
<strong class="title">
Company:
</strong>
Agribonus
</p>
<p class="DESC_text">
<strong class="title">
Brief:
</strong>
Design a layout for an article provided by Zoetis for the Bonus magazine.
</p>
</div>
<div class="buttonclose">
<button data-close-button class="closebutton">
CLOSE
</button>
</div>
</div>
</div>
<!-- OVERLAY JAVA -->
<div id="overlay">
</div>
<!-- CLOSE DIV CASE -->
</div>
<div onclick="topFunction()" id="myBtn"><img src="images/outline_expand_circle_down_black_24dp.png" alt="tothetop" height="80%" width="80%"></div>
<div class="madewithlove" id="footer">
<p class="love"><i> This website was made by me, with a lot of <b>love</b>, a lot of <b>googling</b>, and a lot of <b>banging my head on the table</b> (I'm fine, thanks).</i></p>
</div>
<!-- CLOSE DIV CONTAINER -->
</div>
</body>
</html>
css:
#charset "utf-8";
/* CSS Document */
a {
color: inherit;
text-decoration: none;
position: inherit;
}
strong {
color: inherit;
text-decoration: none;
position: inherit;
}
p {
color: inherit;
text-decoration: none;
position: inherit;
margin: inherit;
line-spacing: inherit;
}
.helpme {
margin: 0;
}
.container {
Display: flex;
flex-direction: column;
min-height: 100vh;
}
.mainnavbar {
color: white;
background-color: white;
box-shadow: 0px 0px 5px 0.1px #707070;
border-bottom: 1px solid #D9D9D9;
overflow: hidden;
margin: 0px 0px 40px 0px;
padding: 10px;
position: sticky;
z-index: 100;
top: 0;
bottom: 0;
height: 50px;
}
.navbar_left {
margin-left: 20%;
float: left;
display: inline-flex;
font-family: 'futuralight';
color: #707070;
background-color: white;
}
.navbar_right {
margin-right: 20%;
float: right;
display: inline-flex;
font-family: 'futuralight';
font-weight: normal;
color: #707070;
background-color: white;
}
.nav {
margin: 20px 20px 20px 20px;
background-color: white;
transition-property: transform;
transition: 0.25s ease;
}
.nav .current {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.nav1 {
margin: 20px 0px 20px 0px;
padding: 0px 20px 0px 20px;
background-color: white;
}
.nav::after {
content: '';
border-top: 1px solid #707070;
width: 100%;
position: absolute;
display: block;
transform: rotateY(90deg);
transition:transform 0.25s linear;
}
.nav:hover {
transform: scale(1.05);
font-family: 'futuramedium';
letter-spacing: 1px;
}
.nav:hover::after {
transform: rotate(0deg);
}
.icon:hover {
transform: scale(1.1)
}
.searchbar {
display: block;
color: #707070;
text-align: center;
margin: 0px 20%;
}
.search {
font-family: 'futuralight';
display: inline-block;
font-size: 12px;
color: #707070;
margin: 0% 0% 8% 0%;
}
.searchbarbuttons {
background: none;
border: none;
font-family: 'futuralight';
display: inline-block;
font-size: 12px;
color: #707070;
padding: 5px;
cursor: pointer;
}
.searchbarbuttons:hover {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.searchbarbuttons.active {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.case {
margin: 0px 20% 70px 20%;
text-align: center;
position: relative;
}
.gallerypics {
padding: 5px 5px 5px 5px;
cursor: pointer;
transition: 0.3s;
border-radius: 15px;
}
.gallerypics:hover {
transform: scale(1.5)
}
.nobutton {
display: none;
}
.show {
display: inline-block;
transition: 0.3s;
border-radius: 15px;
}
/* MODAL BIG IMAGES */
.modal2 {
background-color: #CBCBCB;
position: fixed;
display: block;
padding: 20px;
border-radius: 10px;
top: 10%;
left: 23.9%;
tranform: translate(-10%, -23.9%);
transform: scale(0);
transition: 200ms ease-in-out;
z-index: 10;
width: 50%;
height: 50%;
}
.modal2.active {
background-color: #CBCBCB;
position: fixed;
display: block;
padding: 20px;
border-radius: 10px;
top: 10%;
left: 23.9%;
tranform: translate(-10%, -23.9%);
transform: scale(1);
transition: 200ms ease-in-out;
z-index: 10;
width: 50%;
height: 50%;
vertical-align: middle;
}
.modal2 .IMG3 {
object-fit: contain;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
border-radius: 15px;
display: inline-block;
float: left;
}
.modal2 .IMG3:hover {
cursor: zoom-in;
transform: scale(170%);
transition: 200ms ease-in;
transition-delay: 0.5s;
border-radius: 0px;
}
.modal2 .containerDB {
object-fit: contain;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
float: right;
}
.modal2 .DESC {
border-radius: 15px;
background-color: white;
padding: 20px;
overflow: scroll;
overflow-x: hidden;
}
.modal2 .DESC_text {
font-family: 'futuralight';
font-size: 15px;
color: #707070;
line-height: 17pt;
text-align: left;
font-weight: normal;
}
.modal2 .DESC_text a:hover {
font-family: 'futuramedium';
font-size: 15px;
color: #707070;
line-height: 17pt;
text-align: left;
font-weight: normal;
}
.modal2 .title {
font-family: 'futuramedium';
font-weight: normal;
font-size: 15px;
color: #707070;
line-spacing: 20pt;
}
.modal2 .buttonclose {
margin: 20px 0px;
}
.modal2 .closebutton {
position: fixed;
bottom: 20px;
right: 20px;
border: #707070;
border-width: 1px;
cursor: pointer;
outline: solid 1px #707070;
background: white;
font-family: 'futurabold';
letter-spacing: 0.5px;
padding: 5px 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
font-size: 1.5vh;
color: #707070;
font-weight: normal;
float: right;
}
.modal2 .closebutton:hover {
transition:transform 0.25s linear;
box-shadow: 1px 1px 1px 1px #707070;
}
/* MODAL BIG IMAGES END */
#overlay {
position: fixed;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #707070;
pointer-events: none;
transition: 200ms ease-in-out;
}
#overlay.active {
opacity:70%;
pointer-events: all;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
border: none;
outline: none;
cursor: pointer;
}
#myBtn:hover {
transform: scale(1.1);
}
.madewithlove {
background-color: white;
padding: 10px 10px;
box-shadow: -2px -2px 5px 0.1px #707070;
height: 60px;
left: 0;
bottom: 0;
right: 0;
margin-top: auto;
}
.love {
font-family: 'futuralight';
color: #707070;
padding: 20px;
text-align: center;
font-size: 13px;
}
javascript on pop-up only:
/* eslint-env es6 */
/* eslint-disable */
/* popup javascript */
const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')
/* modal */
openModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = document.querySelector(button.dataset.modalTarget)
openModal(modal)
})
})
/* close button modal */
closeModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal2')
closeModal(modal)
})
})
function closeModal(modal) {
if (modal == null) return
modal.classList.remove('active')
overlay.classList.remove('active')
}
function openModal(modal) {
if (modal == null) return
modal.classList.add('active')
overlay.classList.add('active')
}
/* overlay open all */
overlay.addEventListener('click', () => {
const modals = document.querySelectorAll('.modal2.active')
modals.forEach(modal => {
closeModal(modal)
})
})
Images for download: https://drive.google.com/drive/folders/1OGD5iuyxcVekdr-pTjfkDi5o6uF4LVH5
I have the following short and concise code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 20px;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1070px;
margin-left: auto;
margin-right: auto;
width: 80%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>
I want the corner of the blog card to be perfectly aligned under the corner of the iframe. The first corner of the blog card should be right under the first corner of the iframe.
Expected Output
How would I modify the css to have it output as the above picture? Adding margin-left: auto on square does not work. Any suggestions?
Make both parent div of the iframe and div having class .square of the same width to achieve this
.container1,.resume-item {
display: flex;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1,.resume-item {
display: flex;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-right: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1000px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>