I have three cards when I hover on any card it it should translate upwards up to this it's working fine, now what my requirement is when ever the hovered card translates there should be a small space in that I want to fill with some message. Please help me to achieve this thing.
Note - each card contains different messages
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons {
margin-left: -40%;
}
/* .fas{
background: transparent;
color:red;
} */
button {
border: none;
position: absolute;
}
.fas {
/* padding-left:2000%; */
background: #ebf5fc;
padding-top: 500%;
color: yellowgreen;
font-weight: 600;
/* top:10;
right:50; */
}
audio {
margin-top: 40%;
}
* {
margin: o;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
/* background:#c7c744; */
}
#my_audio {
margin-top: -40%;
}
.main-section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ebf5fc;
}
.container {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card {
position: relative;
width: 320px;
height: 440px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
border-radius: 15px;
margin: 30px;
}
.container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box {
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #b95ce4, #4f29cd);
}
.container .card .box .content {
padding: 20px;
text-align: center;
}
.container .card .box .content h2 {
position: absolute;
top: -10px;
right: 30px;
font-size: 8em;
color: rgba(0, 0, 0, 0.02);
transition: 0.5s;
pointer-events: none;
}
.container .card:hover .box .content h2 {
color: rgba(0, 0, 0, 0.05);
}
.container .card .box .content h3 {
font-size: 1.8em;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card .box .content p {
font-size: 1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card:hover .box .content h3,
.container .card:hover .box .content p {
color: #fff;
}
.container .card:hover .box .content p {
font-style: italic;
color: gold;
}
.container .card .box .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top: 15px;
border-radius: 20px;
color: #fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.container .card:hover .box .content a {
background: #ff568f;
}
#i1 {
width: 100%;
height: 50px;
}
h1 {
text-align: center;
font-size: 65px;
font-style: italic;
}
#love {
color: red;
}
#shape {
width: 150px;
height: 150px;
border-radius: 50%;
margin-left: 45%;
margin-top: -12%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css" rel="stylesheet" />
First, you have to use an absolute div to position it on the bottom of the card, next use z index in order to move the absolute div behind the main moving card
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<title>Special-Wishes </title>
<style>
.secret{
position : absolute;
bottom : 2px;
padding : 20px;
z-index : 0
}
.box{
z-index:1
}
</style>
<script>
</script>
</head>
<body>
<h1>kitty <span class="wifey">puppy</span></h1>
<img id="shape"src="https://i.pinimg.com/originals/2f/9d/95/2f9d9562eb2252ae132b4bf8258aa18a.jpg"/>
<audio autoplay id="player">
<source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
<button id="music" onclick="document.getElementById('player').play()">
<i style='font-size:24px;' class='fas'></i>
</button>
<div class="main-section">
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2 id="initial">I</h2>
<h3>Card One</h3>
<p>Your birthday is the first day of another 365-day journey. Be the shining thread in the beautiful tapestry of the world to make this year the best ever.</p>
Read More
</div>
</div>
<div class="secret">
This is my secret
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2><span class="heart-icon" style='font-size:180px;'>♥</span></h2>
<h3>Card Two</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>U</h2>
<h3>Card Three</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
</div>
</div>
</body>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons{
margin-left:-40%;
}
/* .fas{
background: transparent;
color:red;
} */
button{
border: none;
position:absolute;
}
.fas{
/* padding-left:2000%; */
background:#ebf5fc;
padding-top:500%;
color:yellowgreen;
font-weight: 600;
/* top:10;
right:50; */
}
audio{
margin-top:40%;
}
*{
margin: o;
padding:0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
/* background:#c7c744; */
}
#my_audio{
margin-top:-40%;
}
.main-section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background:#ebf5fc;
}
.container{
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card{
position: relative;
width:320px;
height:440px;
box-shadow: inset 5px 5px 5px rgba(0,0,0,0.05),
inset -5px -5px 5px rgba(255,255,255,0.5),
5px 5px 5px rgba(0,0,0,0.05),
-5px -5px 5px rgba(255,255,255,0.5);
border-radius: 15px;
margin:30px;
}
.container .card .box{
position: absolute;
top:20px;
left:20px;
right:20px;
bottom:20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box{
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
background: linear-gradient(45deg,#b95ce4,#4f29cd);
}
.container .card .box .content{
padding:20px;
text-align: center;
}
.container .card .box .content h2{
position: absolute;
top:-10px;
right:30px;
font-size: 8em;
color:rgba(0,0,0,0.02);
transition: 0.5s;
pointer-events: none;
}
.container .card:hover .box .content h2{
color: rgba(0,0,0,0.05);
}
.container .card .box .content h3{
font-size:1.8em;
color: #777;
z-index:1;
transition: 0.5s;
}
.container .card .box .content p{
font-size:1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card:hover .box .content h3,
.container .card:hover .box .content p{
color: #fff;
}
.container .card:hover .box .content p{font-style: italic;color: gold;}
.container .card .box .content a{
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top:15px;
border-radius: 20px;
color:#fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.container .card:hover .box .content a{
background: #ff568f;
}
#i1{
width:100%;
height:50px;
}
h1{
text-align:center;
font-size:65px;
font-style: italic;
}
#love{
color:red;
}
#shape{
width:150px;
height:150px;
border-radius:50%;
margin-left:45%;
margin-top:-12%;
}
.
</style>
</html>
Related
i've got a problem that the navbar was stacked with the content. Does Anyone know How to fix the nav-bar? and why the navbar is stacked, help me. i was try to fix it with z-index but not working... plz help me, i was frustated. i want the navbar is not stacked and the background is #fff.
stacked image
const burger = document.querySelector('.burger');
let nav = document.querySelector('.menu ul')
burger.addEventListener('click', function () {
this.classList.toggle('change');
nav.classList.toggle('open');
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
font-size: 18px;
transition: .5s;
}
:root {
--body-color: #fff;
--main-color: #1c1c3c;
--text-color: #fff;
--red-color: #800000;
--semi-white: #ccc;
}
body {
min-height: 100vh;
overflow-x: hidden;
}
.body{
background-position:center;
background-size:cover;
background-repeat: no-repeat;
height:100vh
}
/*Nav And Header*/
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
align-items: center;
background:#fff;
padding: 20px 40px;
display: flex;
justify-content: space-between;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.logo {
font-size: 1.5em;
color: var(--main-color);
font-weight: 500;
letter-spacing: 1px;
}
.flex {
display: flex;
align-items: center;
}
header ul {
position: relative;
display: flex;
gap: 30px;
}
header ul li {
list-style: none;
}
header ul li a {
position: relative;
text-decoration: none;
font-size: 17px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--main-color);
}
header ul li a:hover {
transition: .5s;
font-size: 18px;
font-weight: 525;
color: var(--red-color);
}
header ul li a::before {
content: '';
position: absolute;
width: 100%;
bottom: -3px;
height: 3px;
background-color: #800000;
transform: scaleX(0);
transition: transform .3s ease-in-out;
transform-origin: right;
}
header ul li a:hover::before {
transform: scaleX(1);
transform-origin: left;
}
/*Hamburger Setting*/
.burger {
position: relative;
display: none;
cursor: pointer;
z-index: 2;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
border-radius: 5px;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
background-color: var(--red-color);
}
.change .bar2 {
opacity: 0;
background-color: var(--red-color);
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: var(--red-color);
}
/*TextBox code*/
.text-box {
width: 90%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1,
.text-box span {
color: var(--main-color);
font-size: 46px;
}
.red-btn {
text-decoration: none;
font-family: 'Rubik', sans-serif;
color: var(--main-color);
margin: 5px auto;
padding: 15px 34px;
font-size: 17px;
background: var(--body-color);
border: 1px solid var(--red-color);
position: relative;
cursor: pointer;
border-radius: 25px;
}
.red-btn:hover{
background: var(--red-color);
color: var(--text-color);
}
/*Code Of Dashboard*/
/*This is responsive code*/
#media(max-width:920px) {
.text-box h1 {
font-size: 190%;
}
.text-box p {
margin: 20px 0 20px;
font-size: 16px;
font-weight: 500;
color: var(--main-color);
}
.menu ul {
position: absolute;
height: 40vh;
top: 100%;
width: 100%;
background-color:#fff;
justify-content: space-evenly;
padding: auto;
top: 100px;
flex-direction: column;
align-items: center;
z-index: 3;
}
.burger {
position: relative;
display: block;
cursor: pointer;
z-index: 2;
}
.menu ul.open {
position: fixed;
opacity: 5;
visibility:visible;
left:0;
z-index: 99;
transition: 1s;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>BeHealthy.com</title>
</head>
<body>
<header>
<a href="#"><img src="" alt="logo" style="width: 55px;">
<p style="float: right; padding: 22px 0 ;" class="logo"> Lo<span
style="color:#800000 ;font-size:1em; font-weight: 500;">go</span></p>
</a>
<div class="flex">
<div class="menu">
<ul>
<li>Home</li>
<li>Dashboard</li>
<li>Artikel</li>
<li>Konsultasi</li>
</ul>
</div>
<div class="icon">
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</header>
<div class="body">
<div class="text-box">
<h1>Lorem <span style="color: #800000;font-size: 100%;">Ipsum!</span>
<h1>
<p><b>Healthy First!</b>,Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium culpa debitis porro, neque consequatur, est quisquam nisi explicabo error, nostrum iste id. Incidunt, laudantium rem totam nisi itaque aperiam amet?
</b>BeHealthy<b>.</p>
<span style="font-size:18px;font-weight:550;">#StayHealthy</span>
<br>
this is button
</div>
</div>
</body>
</html>
Hello Please use below css. I have made changes only css file. Hope it may helpful to you.
const burger = document.querySelector('.burger');
let nav = document.querySelector('.menu ul')
burger.addEventListener('click', function () {
this.classList.toggle('change');
nav.classList.toggle('open');
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
font-size: 18px;
transition: .5s;
}
:root {
--body-color: #fff;
--main-color: #1c1c3c;
--text-color: #fff;
--red-color: #800000;
--semi-white: #ccc;
}
body {
min-height: 100vh;
overflow-x: hidden;
}
.body{
background-position:center;
background-size:cover;
background-repeat: no-repeat;
height:100vh;
}
/*Nav And Header*/
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
align-items: center;
background:#fff;
padding: 20px 40px;
display: flex;
justify-content: space-between;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
z-index: 1;
}
.logo {
font-size: 1.5em;
color: var(--main-color);
font-weight: 500;
letter-spacing: 1px;
}
.flex {
display: flex;
align-items: center;
}
header ul {
position: relative;
display: flex;
gap: 30px;
}
header ul li {
list-style: none;
}
header ul li a {
position: relative;
text-decoration: none;
font-size: 17px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--main-color);
}
header ul li a:hover {
transition: .5s;
font-size: 18px;
font-weight: 525;
color: var(--red-color);
}
header ul li a::before {
content: '';
position: absolute;
width: 100%;
bottom: -3px;
height: 3px;
background-color: #800000;
transform: scaleX(0);
transition: transform .3s ease-in-out;
transform-origin: right;
}
header ul li a:hover::before {
transform: scaleX(1);
transform-origin: left;
}
/*Hamburger Setting*/
.burger {
position: relative;
display: none;
cursor: pointer;
z-index: 2;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
border-radius: 5px;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
background-color: var(--red-color);
}
.change .bar2 {
opacity: 0;
background-color: var(--red-color);
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: var(--red-color);
}
/*TextBox code*/
.text-box {
width: 90%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1,
.text-box span {
color: var(--main-color);
font-size: 46px;
}
.red-btn {
text-decoration: none;
font-family: 'Rubik', sans-serif;
color: var(--main-color);
margin: 5px auto;
padding: 15px 34px;
font-size: 17px;
background: var(--body-color);
border: 1px solid var(--red-color);
position: relative;
cursor: pointer;
border-radius: 25px;
}
.red-btn:hover{
background: var(--red-color);
color: var(--text-color);
}
/*Code Of Dashboard*/
/*This is responsive code*/
#media(max-width:920px) {
.text-box h1 {
font-size: 190%;
}
.text-box p {
margin: 20px 0 20px;
font-size: 16px;
font-weight: 500;
color: var(--main-color);
}
.menu ul {
position: absolute;
height: calc(100vh - 80px);
top: 100%;
width: 100%;
background-color:#fff;
justify-content: space-evenly;
padding: auto;
top: 80px;
flex-direction: column;
align-items: center;
z-index: 3;
visibility: hidden;
}
.burger {
position: relative;
display: block;
cursor: pointer;
z-index: 2;
}
.menu ul.open {
position: fixed;
opacity: 5;
visibility:visible;
left:0;
z-index: 99;
transition: 1s;
overflow: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>BeHealthy.com</title>
</head>
<body>
<header>
<a href="#"><img src="" alt="logo" style="width: 55px;">
<p style="float: right; padding: 22px 0 ;" class="logo"> Lo<span
style="color:#800000 ;font-size:1em; font-weight: 500;">go</span></p>
</a>
<div class="flex">
<div class="menu">
<ul>
<li>Home</li>
<li>Dashboard</li>
<li>Artikel</li>
<li>Konsultasi</li>
</ul>
</div>
<div class="icon">
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</header>
<div class="body">
<div class="text-box">
<h1>Lorem <span style="color: #800000;font-size: 100%;">Ipsum!</span>
<h1>
<p><b>Healthy First!</b>,Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium culpa debitis porro, neque consequatur, est quisquam nisi explicabo error, nostrum iste id. Incidunt, laudantium rem totam nisi itaque aperiam amet?
</b>BeHealthy<b>.</p>
<span style="font-size:18px;font-weight:550;">#StayHealthy</span>
<br>
this is button
</div>
</div>
</body>
</html>
Html:
<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse" id="collapse">
<div class="progNum" style="--i: 'Program 1'">
<div>
<h1>1</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 01:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis. </p>
<div class="btns"> <button class="btn btn1 showDiv3"> <img src="svg/dash.svg"> </button> <button class="btn btn2"> <span>Source code</span> <img src="svg/arrow.svg"> </button>
</div>
</div>
<div class="div3">
<div class="h-div3">
<h1>C++</h1>
<img src="svg/close.svg" class="div3-close">
</div>
<div class="d-link-div3"> <span>Download</span> Turbo C++ Code Dev C++ Code
</div>
<div class="c-link-div3"> <span>Compiler</span> Compile
</div>
<div class="view-div3"> <span>View Code</span> View Code
</div>
</div>
</div>
When a user click on div.prog shrink the class name changes to div.prog expand
I want to add the class shrink and remove the class expand when a user click on img.collapse#collapse
I tried:
var closeBtn = document.getElementById('collapse');
var prog = document.getElementById('prog');
closeBtn.onclick = function(){
console.log('close button clicked..');
prog.classList.remove('expand');
prog.classList.add('shrink');
}
The output statement is displaying on the console but the div is not returning to its initial state.
Full code :
var progElements = document.getElementsByClassName('prog');
var closeBtn = document.getElementById('collapse');
for (let i = 0; i < progElements.length; i++) {
progElements[i].onclick = function() {
this.classList.add('expand');
this.classList.remove('shrink');
for (let j = 0; j < progElements.length; j++) {
if (i !== j) {
if (!progElements[j].classList.contains('shrink')) {
progElements[j].classList.add('shrink');
progElements[j].classList.remove('expand');
}
}
}
}
}
var showDiv3 = document.getElementsByClassName('showDiv3');
var div3 = document.getElementsByClassName('div3');
var div3Close = document.getElementsByClassName('div3-close');
for (let i = 0; i < div3.length; i++) {
showDiv3[i].onclick = function() {
div3[i].style.display = 'block';
div3[i].style.zIndex = '100';
}
div3Close[i].onclick = function() {
div3[i].style.display = 'none';
}
}
var closeBtn = document.getElementById('collapse');
var prog = document.getElementById('prog');
closeBtn.onclick = function() {
console.log('close button clicked..');
prog.classList.remove('expand');
prog.classList.add('shrink');
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&family=Roboto+Condensed:wght#300;400;700&family=Source+Sans+Pro:wght#300;400;600;700;900&display=swap");
* {
outline: 0px solid #0f0;
font-family: "Poppins", sans-serif;
user-select: none;
}
.container {
position: relative;
transform: translateX(60px);
width: calc(100vw - 60px);
height: 100vh;
overflow: scroll;
background: #152644;
}
.container .title {
text-align: center;
width: 100%;
height: 66px;
background: #11101d;
display: flex;
justify-content: center;
align-items: center;
}
.container .title h1 {
color: #fff;
font-size: 35px;
font-weight: 700;
font-family: "Poppins", sans-serif;
background: var(--rainbow);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container .content {
position: relative;
height: calc(100% - 66px);
width: 100%;
overflow: scroll;
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.home-content {
border: 0px solid #fff;
}
.home-content h1 {
color: #fff;
border: 0px solid #aaa;
}
.home-content .hc-links {
border: 0px solid #f0f;
}
.home-content .hc-links div {
border: 0px solid #0ff;
}
.home-content .hc-links div h1 {
border: 0px solid #faa;
}
.home-content .hc-links div a {
border: 0px solid #ff0;
}
.home-content .fback {
border: 0;
}
.content::-webkit-scrollbar {
display: none;
}
.content .prog.shrink {
margin: 16px;
width: 125px;
height: 125px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 -5px 5px rgba(250, 250, 255, 0.05), inset 0 -5px 5px rgba(250, 250, 255, 0.05), 0 5px 5px rgba(0, 0, 0, 0.3), inset 0 5px 5px rgba(0, 0, 0, 0.3);
}
.content .prog.expand {
position: relative;
margin: 20px auto;
width: 75%;
background-color: #007bff;
border-radius: 20px;
display: flex;
justify-content: space-evenly;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 20;
box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.3);
}
.prog.shrink .div1 {
height: 125px;
width: 125px;
background: #11101d;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 {
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.prog.shrink .div1 .collapse {
display: none;
}
.prog.expand .div1 .collapse {
border: 1px solid #00f;
position: absolute;
top: 10px;
left: 10px;
height: 40px;
filter: invert(1);
background: #778;
border-radius: 5px;
}
.prog.shrink .div1 .progNum {
padding: 7px;
position: relative;
height: 75px;
width: 75px;
background: rgba(250, 250, 255, 0.45);
border-radius: 50%;
transform: translateY(-15px);
}
.prog.shrink .div1 .progNum::after {
content: var(--i);
position: absolute;
bottom: -28px;
left: 50%;
transform: translateX(-50%);
color: #0088ff;
font-size: 15px;
font-weight: 500;
font-family: "Poppins", sans-serif;
opacity: 0.8;
}
.prog.expand .div1 .progNum {
background: #0088ff;
height: 125px;
width: 125px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
box-shadow: 0 0 20px rgba(0, 0, 255, 0.2);
}
.prog.shrink .div1 .progNum>div {
background: #11101d;
height: 100%;
width: 100%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div {
background: #def;
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.shrink .div1 .progNum>div>h1 {
font-size: 2.5em;
color: #0088ff;
font-weight: bold;
opacity: 0.8;
}
.prog.expand .div1 .progNum>div>h1 {
font-size: 52px;
}
.prog.shrink div2 {
display: none;
}
.prog.expand .div2 {
padding: 20px;
width: calc(100% - 250px);
}
.prog.expand .div2 h1 {
color: #fff;
font-size: 30px;
font-family: "Poppins", sans-serif;
}
.prog.expand .div2 p {
color: rgba(255, 255, 255, 0.8);
height: 100px;
margin-top: 20px;
margin-bottom: 10px;
font-size: 17px;
}
.prog.expand .div2 .btns {
width: 100%;
display: flex;
}
.prog.expand .div2 .btns .btn {
padding: 10px 15px;
display: flex;
justify-content: center;
align-items: center;
background: #0bc42a;
border: none;
border-radius: 5px;
color: #fff;
}
.prog.expand .div2 .btns .btn1 {
padding: 10px;
}
.prog.expand .div2 .btns .btn2 {
margin-left: 20px;
}
.prog.expand .div2 .btns .btn2 span {
font-size: 20px;
}
.prog.expand .div2 .btns .btn img {
filter: invert(1);
}
.prog.expand .div3 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
background: #11101d;
}
.prog.expand .div3 .h-div3 {
margin-left: -10px;
margin-top: -10px;
width: calc(100% + 20px);
min-height: 50px;
background: #007bff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
}
.prog.expand .div3 .h-div3 h1 {
font-size: 30px;
color: #fff;
}
.prog.expand .div3 .h-div3 img {
filter: invert(1);
height: 30px;
}
.prog.expand .div3 .d-link-div3 {
margin-top: 20px;
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: row;
padding: 15px 0;
}
.prog.expand .div3 .d-link-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .d-link-div3 a {
margin: 5px 5px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
.prog.expand .div3 .c-link-div3 {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 0px;
min-height: 50px;
}
.prog.expand .div3 .c-link-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .c-link-div3 a {
display: block;
margin-top: 20px;
margin-bottom: 20px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
letter-spacing: 1px;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
.prog.expand .div3 .view-div3 {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 0px;
min-height: 50px;
}
.prog.expand .div3 .view-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .view-div3 a {
display: block;
margin-top: 20px;
margin-bottom: 10px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
letter-spacing: 1px;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
#media screen and (max-width: 700px) {
.home-content {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 22px;
min-width: 270px;
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #11101d;
border-radius: 8px;
box-shadow: 0 -5px 5px rgba(250, 250, 255, 0.05), inset 0 -5px 5px rgba(250, 250, 255, 0.05), 0 5px 5px rgba(0, 0, 0, 0.3), inset 0 5px 5px rgba(0, 0, 0, 0.3);
}
.home-content h1 {
margin-top: 15px;
font-size: 32px;
font-family: "Poppins", sans-serif;
}
.home-content .hc-links {
position: relative;
margin-top: 10px;
margin-bottom: 25px;
width: 100%;
border-radius: 8px;
}
.home-content .hc-links div {
padding: 12px;
margin-top: 15px;
display: flex;
flex-direction: column;
align-items: stretch;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border-radius: 10px;
}
.home-content .hc-links div:nth-child(2) {
margin-bottom: 10px;
}
.home-content .hc-links div h1 {
font-size: 25px;
color: #def;
margin-bottom: 5px;
}
.home-content .hc-links div a {
white-space: nowrap;
text-decoration: none;
color: #fff;
background: #007bff;
font-size: 16px;
padding: 8px;
text-align: center;
border-radius: 5px;
}
.container .content {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.content .prog.shrink {
margin: 6px;
margin-bottom: 12px;
}
.content .prog.expand {
position: relative;
top: 0;
left: 0;
transform: translate(0, 0);
width: 250px;
min-height: 370px;
border-radius: 10px;
overflow: hidden;
margin: 10px;
background: #11101d;
flex-direction: column;
}
.prog.expand .div1 {
position: relative;
top: 0px;
width: 100%;
height: 100px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #007bff;
}
.prog.expand .div1 .collapse {
height: 32px;
filter: invert(0);
opacity: 1;
position: absolute;
right: 10px;
}
.prog.expand .div1 .progNum {
position: absolute;
bottom: -37px;
left: 15px;
background: #11101d;
height: 75px;
width: 75px;
padding: 7px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div {
background: #eee;
border-radius: 50%;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div>h1 {
font-size: 2.5em;
color: #000;
opacity: 0.6;
}
.prog.expand .div2 {
padding: 8px 16px;
display: block;
position: relative;
left: 0;
top: 0;
min-height: 270px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
}
.prog.expand .div2 h1 {
transform: translateY(-10px);
align-self: flex-end;
margin-right: 0px;
font-size: 24px;
font-weight: 700;
color: #fff;
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
}
.prog.expand .div2 p {
transform: translateY(-10px);
margin-top: 10px;
margin-bottom: 0px;
font-size: 16.5px;
color: rgba(250, 250, 255, 0.8);
height: 160px;
overflow-y: scroll;
font-family: "Source Sans Pro", sans-serif;
word-break: break-all;
}
.prog.expand .div2 .btns {
display: flex;
justify-content: flex-start;
}
.prog.expand .div2 .btns .btn {
border: none;
border-radius: 4px;
}
.prog.expand .div2 .btns .btn1 {
padding: 4px 5px;
}
.prog.expand .div2 .btns .btn1 img {
height: 28px;
}
.prog.expand .div2 .btns .btn2 {
margin-left: 10px;
padding: 5px 10px;
}
.prog.expand .div2 .btns .btn2 span {
font-size: 20px;
margin-right: 10px;
color: #fff;
font-family: "Source Sans Pro", sans-serif;
font-weight: 500;
}
.prog.expand .div2 .btns .btn2 img {
height: 25px;
}
.prog.expand .div3 .d-link-div3 {
flex-direction: column;
align-items: center;
}
.prog.expand .div3 .d-link-div3 a {
margin: 7px 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>C++ programs</title>
<link rel="stylesheet" href="css/sideBar.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<section class="main">
<!--< --sideBar-- >-->
<section class="sidebar close" id="sideBar">
<div class="logo-section close" id="logoSection">
<img src="svg/cpp.svg" id="btn1">
<h1>C++<span>programs</span></h1>
<img src="svg/bar.svg" id="btn2" class="close">
</div>
<ul class="nav-list close" id="navList">
<li>
<a href="11th.html" class="navLinks">
<img src="svg/1.svg" class="navImg">
<span class="navItem">
11th class
</span>
</a>
<span class="tooltip">
11th class
</span>
</li>
<li>
<a href="12th.html" class="navLinks">
<img src="svg/2.svg" class="navImg">
<span class="navItem">
12th class
</span>
</a>
<span class="tooltip">
12th class
</span>
</li>
<li>
<a href="others.html" class="navLinks">
<img src="svg/3.svg" class="navImg">
<span class="navItem">
Others
</span>
</a>
<span class="tooltip">
Others
</span>
</li>
<li>
<a href="feedback.html" class="navLinks">
<img src="svg/4.svg" class="navImg">
<span class="navItem">
Feedback
</span>
</a>
<span class="tooltip">
Feedback
</span>
</li>
<li>
<a href="more.html" class="navLinks">
<img src="svg/5.svg" class="navImg">
<span class="navItem">
More
</span>
</a>
<span class="tooltip">
More
</span>
</li>
<li>
<a href="FAQ.html" class="navLinks">
<img src="svg/6.svg" class="navImg">
<span class="navItem">
FAQ
</span>
</a>
<span class="tooltip">
FAQ
</span>
</li>
<li class="theme">
<a id="theme">
<span>
Darkmode
</span>
<img src="svg/sun.svg" id="ThemeImg">
</a>
</li>
</ul>
</section>
<!--< --content-section-- >-->
<section class="container">
<div class="title">
<h1>C++ programs</h1>
</div>
<div class="content 11th">
<!--program 1-->
<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse" id="collapse">
<div class="progNum" style="--i: 'Program 1'">
<div>
<h1>1</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 01:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis.
</p>
<div class="btns">
<button class="btn btn1 showDiv3">
<img src="svg/dash.svg">
</button>
<button class="btn btn2">
<span>Source code</span>
<img src="svg/arrow.svg">
</button>
</div>
</div>
<div class="div3">
<div class="h-div3">
<h1>C++</h1>
<img src="svg/close.svg" class="div3-close" />
</div>
<div class="d-link-div3">
<span>Download</span>
Turbo C++ Code
Dev C++ Code
</div>
<div class="c-link-div3">
<span>Compiler</span>
Compile
</div>
<div class="view-div3">
<span>View Code</span>
View Code
</div>
</div>
</div>
<!--program 2-->
<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse">
<div class="progNum" style="--i: 'Program 2'">
<div>
<h1>2</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 02:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis.
</p>
<div class="btns">
<button class="btn btn1">
<img src="svg/dash.svg">
</button>
<button class="btn btn2">
<span>Source code</span>
<img src="svg/arrow.svg">
</button>
</div>
</div>
</div>
</div>
</section>
</section>
<script src="js/sidebar.js"></script>
<script src="js/main.js"></script>
<script>
links[0].classList.add('active');
</script>
</body>
</html>
I want to close the div by changing its class from prog expand to prog shrink
Can anyone tell how can I achieve that ...
Full project : link
First you need to have a unique id for example id="prog-one" id="prog-two".
Secondly you need to set the data-target attribute so you can target specific div to toggle(add/remove) classes like this.
<img src="svg/close.svg" class="collapse" data-target="prog-two" id="collapse">
Finally you have to get all the collapse image and add the event listener.
var closeBtns = document.querySelectorAll('.collapse');
closeBtns.forEach(closeBtn => {
closeBtn.addEventListener('click', function({target}) {
const targetId = target.getAttribute('data-target');
const targetDOM = document.getElementById(targetId);
console.log('close button clicked..');
targetDOM.classList.remove('expand');
targetDOM.classList.add('shrink');
})
})
Here is the code pen link.😊 LINK ONE LINKTWO
[UPDATED]
var progElements = document.getElementsByClassName("prog");
var closeBtn = document.getElementById("collapse");
for (let i = 0; i < progElements.length; i++) {
progElements[i].onclick = function ({ target }) {
if (target.getAttribute("class") === "collapse") return;
this.classList.add("expand");
this.classList.remove("shrink");
console.log("running");
for (let j = 0; j < progElements.length; j++) {
if (i !== j) {
if (!progElements[j].classList.contains("shrink")) {
progElements[j].classList.add("shrink");
progElements[j].classList.remove("expand");
}
}
}
};
}
var showDiv3 = document.getElementsByClassName("showDiv3");
var div3 = document.getElementsByClassName("div3");
var div3Close = document.getElementsByClassName("div3-close");
for (let i = 0; i < div3.length; i++) {
showDiv3[i].onclick = function () {
div3[i].style.display = "block";
div3[i].style.zIndex = "100";
};
div3Close[i].onclick = function () {
div3[i].style.display = "none";
};
}
var closeBtns = document.querySelectorAll(".collapse");
closeBtns.forEach((closeBtn) => {
closeBtn.addEventListener("click", function ({ target }) {
const targetId = target.getAttribute("data-target");
const targetDOM = document.getElementById(targetId);
console.log("close button clicked..");
targetDOM.className = "prog shrink";
});
});
I'm trying to make a portfolio page, using HTML, CSS & JS.
Encountered a weird error. The CSS styling that I have performed on one div is somehow also getting on another div. And the weird part is that, the second div responds to its own styling along with the first ones....It will be more clear from the code
$(document).ready(function () {
$(window).scroll(function() { // of scroll function of windows
if (this.scrollY > 20) { //if scroll on Y axis is more than 50 units
$('.navbar').addClass("sticky"); // add sticky class 2 navbar
} else {
$('.navbar').removeClass("sticky"); // when it insn't scrolled remove sticky
}
});
//toggle menu/navbar script
$('.menu-btn').click(function(){ // this activates the inbuilt click function of js on the menu button
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap');
*{
user-select: text;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
width: 100%;
z-index: 999;
position:fixed;
padding: 30px 0;
width: 100%;
font-family: 'Ubuntu', sans-serif;
transition: all 0.55s ease;
}
.navbar.sticky{
transition: background-color 0.55s ease;
padding: 15px 0;
background-color: crimson;
}
.max-width{
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
.navbar .max-width{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
font-size: 35px;
font-weight: 600;
color: cyan;
}
.navbar .logo a span{
color: cyan
}
.navbar.sticky .logo a span{
color: white;
transition: all 0.3s ease;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover{
color: crimson;
}
.navbar.sticky .menu li a:hover{
color: white;
}
/* menu button styling */
.menu-btn{
color: white;
font-size: 23px;
cursor: pointer;
display: none;
}
/*home section styling */
.home{
cursor: default;
display: flex;
background: url("./Images/wallpapertip_fantasy-art-wallpaper_1940256.jpg") no-repeat center;/* Enter the background image location */
height: 100vh;
background-size: cover;
background-attachment: fixed;
color: #fff;
min-height: 500px;
font-family: 'Ubuntu', sans-serif;
background-color: black;
}
.home .max-width{
margin: auto 0 auto 40px;
}
.home .home-content .text-1{
font-size: 27px;
}
.home .home-content .text-2{
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3{
font-size: 40px;
margin: 5px, 0 ;
}
.home .home-content .text-3 span{
color: crimson;
font-weight: 500;
}
/* .home .home-content a{
display: inline-block;
background: crimson;
color: white;
font-size: white;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
} HIRE ME BUTTON STYLE*
.home .home-content a:hover{
color: crimson;
background: none; */
/* ABOUT SECTION STYLING */
section{
padding: 100px 0;
}
.about{
font-family: "Poppins", sans-serif;
user-select: text;
}
.about .title{
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 60px;
padding-bottom: 20px;
font-family: 'Ubuntu', sans-serif;
color: black;
}
.about .title::before{
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: black;
transform: translateX(-50%);
}
.about .title::after{
content: "who i am";
position: absolute;
padding: 5px;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
color: crimson;
background: white;
}
.about .about-content{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.about .about-content .left {
width: 45%;
}
.about .about-content .left img{
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right {
width: 55%;
}
.about .about-content .right .text {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
color: black;
}
.about .about-content .right .text span{
color: white;
}
.about .about-content .right .lorem{
color: black;
background: none;
}
.about .about-content .column a{
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover{
background: none;
color: crimson;
}
/* -----------------------------------------------------------------------------*/
/*start media query :start*/
#media(max-width: 1104px){
.home .max-width{
margin-left: 0px;
}
}
#media(max-width: 991px){
.max-width{
padding: 0 50px;
}
}
#media(max-width: 947px){
.menu-btn{
position: fixed;
display: block;
z-index: 999;
color: white;
}
.navbar .menu{
position: fixed;
height:100vh;
width: 100%;
left: -100%;
top: 0;
text-align: center;
padding-top: 80px;
background: black;
transition: all 0.3s ease;
}
.menu-btn i.active:before{
content: "\f00d";
}
.navbar .menu.active{
left: 0;
}
.navbar .menu li{
display: block;
}
.navbar .menu li a{
display: inline-block;
margin:20px 0;
font-size: 25px;
}
.home .home-content .text-2{
font-size: 70px;
}
.home .home-content .text-3{
font-size: 35px;
}
}
#media(max-width: 690px){
.max-width{
padding: 0 23px;
}
.home .home-content .text-2{
font-size: 70px;
}
.home .home-content .text-3{
font-size: 32px;
}
}
#media(max-width: 500px){
.home .home-content .text-2{
font-size: 50px;
}
.home .home-content .text-3{
font-size: 32px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale = 1.0">
<title> Personal Portfolio Website </title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Portfo<span>lio.</span></div>
<ul class="menu">
<li><a href="#">Home</li>
<!--navbar -->
<li><a href="#">About</li>
<li><a href="#">Skills</li>
<li><a href=#>Projects</li>
<li><a href=#>Experience</li>
<li><a href="#">Contact</li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Merlin</div>
<div class="text-3">And I'm an <span class="typing">Undergrad</span></div>
</div>
</div>
</section>
<!-- ABOUT SECTION STARTS-->
<section class="about" id="about">
<!-- Start Section-->
<div class="max-width">
<h2 class="title">About Me</h2>
<div class="about-content">
<div class="column left">
<img src="./Images/653438.jpg" alt="Image">
</div>
<div class="column right">
<div class="text">I'm Merlin and I'm an <span class="typing-2">Undergrad</span></div>
<div class="lorem">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, illum quaerat dolores
cumque
doloribus atque rerum molestiae laborum repudiandae expedita, unde quo, exercitationem
consequatur. Hic quas amet, aliquam nihil voluptatem, porro culpa doloremque qui numquam
atque
rerum. Impedit quisquam animi repellat officia! Expedita officia architecto sed veniam,
adipisci
cumque molestiae doloribus dolor tenetur maiores nihil explicabo eveniet accusantium quos!
Perferendis? </p>
</div>
Download Resume
</div>
</div>
</div>
</section>
<script src="./script.js"></script>
</body>
</html>
In the About section only the Resume Button is to be highlted but the entire colum right div is somehow affected. When I ran just the About section part, everything worked well. But when I run the whole file the same error pops up. I've tried removing the lorem part from div and put in and try, still the same error pops up. The same part is somehow referenced to the above the navbar as well, cause when clicked upon it shifts to the navbar. Please look into this.
The error is occurring because you did not close the anchor tags in your menu,
change it to this
<ul class="menu">
<li>Home</li>
<!--navbar -->
<li>About</li>
<li>Skills</li>
<li><a href=#>Projects</a></li>
<li><a href=#>Experience</a></li>
<li>Contact</li>
</ul>
You have this styling in the about section:
.about .about-content .column a{
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover{
background: none;
color: crimson;
}
That is, every anchor link in the about right part is styled that way - with a crimson background (which changes to crimson text and no background on hover).
Because the anchor tags are not closed in your menu you have anchor tags open (nested anchor tags aren't legal HTML BTW) and it seems the browser is doing its best to understand these open anchor tags. By the time you get to the about section right hand side it still thinks there's an anchor tag (at least, in my Edge on Windows 10 that's what it had put there when I used the dev tools inspect facility to check the actual HTML it's trying to interpret). So it picks up the crimson styling.
Here's the snippet with the anchor tags in the menu closed and the text part of the resume does not have that crimson background:
$(document).ready(function() {
$(window).scroll(function() { // of scroll function of windows
if (this.scrollY > 20) { //if scroll on Y axis is more than 50 units
$('.navbar').addClass("sticky"); // add sticky class 2 navbar
} else {
$('.navbar').removeClass("sticky"); // when it insn't scrolled remove sticky
}
});
//toggle menu/navbar script
$('.menu-btn').click(function() { // this activates the inbuilt click function of js on the menu button
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap');
* {
user-select: text;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar {
width: 100%;
z-index: 999;
position: fixed;
padding: 30px 0;
width: 100%;
font-family: 'Ubuntu', sans-serif;
transition: all 0.55s ease;
}
.navbar.sticky {
transition: background-color 0.55s ease;
padding: 15px 0;
background-color: crimson;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
color: cyan;
}
.navbar .logo a span {
color: cyan
}
.navbar.sticky .logo a span {
color: white;
transition: all 0.3s ease;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: crimson;
}
.navbar.sticky .menu li a:hover {
color: white;
}
/* menu button styling */
.menu-btn {
color: white;
font-size: 23px;
cursor: pointer;
display: none;
}
/*home section styling */
.home {
cursor: default;
display: flex;
background: url("./Images/wallpapertip_fantasy-art-wallpaper_1940256.jpg") no-repeat center;
/* Enter the background image location */
height: 100vh;
background-size: cover;
background-attachment: fixed;
color: #fff;
min-height: 500px;
font-family: 'Ubuntu', sans-serif;
background-color: black;
}
.home .max-width {
margin: auto 0 auto 40px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px, 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
/* .home .home-content a{
display: inline-block;
background: crimson;
color: white;
font-size: white;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
} HIRE ME BUTTON STYLE*
.home .home-content a:hover{
color: crimson;
background: none; */
/* ABOUT SECTION STYLING */
section {
padding: 100px 0;
}
.about {
font-family: "Poppins", sans-serif;
user-select: text;
}
.about .title {
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 60px;
padding-bottom: 20px;
font-family: 'Ubuntu', sans-serif;
color: black;
}
.about .title::before {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: black;
transform: translateX(-50%);
}
.about .title::after {
content: "who i am";
position: absolute;
padding: 5px;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
color: crimson;
background: white;
}
.about .about-content {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.about .about-content .left {
width: 45%;
}
.about .about-content .left img {
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right {
width: 55%;
}
.about .about-content .right .text {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
color: black;
}
.about .about-content .right .text span {
color: white;
}
.about .about-content .right .lorem {
color: black;
background: none;
}
.about .about-content .column a {
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover {
background: none;
color: crimson;
}
/* -----------------------------------------------------------------------------*/
/*start media query :start*/
#media(max-width: 1104px) {
.home .max-width {
margin-left: 0px;
}
}
#media(max-width: 991px) {
.max-width {
padding: 0 50px;
}
}
#media(max-width: 947px) {
.menu-btn {
position: fixed;
display: block;
z-index: 999;
color: white;
}
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
text-align: center;
padding-top: 80px;
background: black;
transition: all 0.3s ease;
}
.menu-btn i.active:before {
content: "\f00d";
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
.home .home-content .text-2 {
font-size: 70px;
}
.home .home-content .text-3 {
font-size: 35px;
}
}
#media(max-width: 690px) {
.max-width {
padding: 0 23px;
}
.home .home-content .text-2 {
font-size: 70px;
}
.home .home-content .text-3 {
font-size: 32px;
}
}
#media(max-width: 500px) {
.home .home-content .text-2 {
font-size: 50px;
}
.home .home-content .text-3 {
font-size: 32px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale = 1.0">
<title> Personal Portfolio Website </title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Portfo<span>lio.</span></div>
<ul class="menu">
<li><a href="#">Home</li>
<!--navbar -->
<li>About</li>
<li>Skills</li>
<li><a href=#>Projects</a></li>
<li><a href=#>Experience</a></li>
<li>Contact</li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Merlin</div>
<div class="text-3">And I'm an <span class="typing">Undergrad</span></div>
</div>
</div>
</section>
<!-- ABOUT SECTION STARTS-->
<section class="about" id="about">
<!-- Start Section-->
<div class="max-width">
<h2 class="title">About Me</h2>
<div class="about-content">
<div class="column left">
<img src="./Images/653438.jpg" alt="Image">
</div>
<div class="column right">
<div class="text">I'm Merlin and I'm an <span class="typing-2">Undergrad</span></div>
<div class="lorem">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, illum quaerat dolores cumque doloribus atque rerum molestiae laborum repudiandae expedita, unde quo, exercitationem consequatur. Hic quas amet, aliquam nihil voluptatem, porro
culpa doloremque qui numquam atque rerum. Impedit quisquam animi repellat officia! Expedita officia architecto sed veniam, adipisci cumque molestiae doloribus dolor tenetur maiores nihil explicabo eveniet accusantium quos! Perferendis? </p>
</div>
Download Resume
</div>
</div>
</div>
</section>
<script src="./script.js"></script>
</body>
</html>
I've come across an issue when coding a site for a colleague of mine. He resells t-shirts that are given to him by a friend, and does so by listing them on his current eBay page. He asked me to code a site for him which would promote his t-shirts more, and wanted me to allow customers to click on the shirts from his website to be redirected to the corresponding eBay page. I want to be able to randomly generate images from his eBay page and have them show up on the website, and therefore be able to redirect users to his eBay page from the site.
EDIT: I have already included a script in my .html file for randomly selecting images. My main issue is being able to randomly select such images from eBay itself.
Here is the HTML for the page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ADARA Enterprises</title>
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
</head>
<script type="text/javascript">
var imageURLs = [
"http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
, "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
, "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Some alt text\"/>';
return img;
}
</script>
</head>
<body>
<div id="background">
<div id="page">
<div id="header">
<span id="connect">
</span>
<!-- /#logo -->
<ul id="navigation">
<li>Home</li>
<li>About</li>
<!-- <li>Blog</li> -->
<li>Shop</li>
<li class="selected">Contact Us</li>
</ul>
</div> <!-- /#header -->
<div id="contents">
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
</p>
<address>
<span>Telephone numbers:</span>
555-5678901 to 555-5678902
<span>Email Address:</span>
adarasomething#whateverthehell.com
<span>Street Address:</span>
4th Lit Street, 73813 Yeet, CO
</address>
</div>
<div id="featured">
<ul>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li class="last"><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
</ul>
shop here!
</div>
</div> <!-- /#contents -->
<div id="footer">
<div id="description">
<div>
<span>© Copyright © 2017. ADARA Enterprises All rights reserved</span>
</div>
<p>
This is just filler text. <br>
<br>
Filler text.
</p>
</div>
<div class="navigation">
Home|
About|
<!-- Yeet| -->
Shop|
Contact Us
</div>
</div> <!-- /#footer -->
</div> <!-- /#page -->
</div> <!-- /#background -->
</body>
</html>
And here is the CSS file associated with it:
html {
font-family: 'Trebuchet MS', sans-serif, Arial, Helvitica;
}
body {
background-color: #ffffff;
margin: 0;
// padding-top: 19px;
min-height: 100%;
}
#background {
background: url(https://static.pexels.com/photos/29724/pexels-photo-29724.jpg) repeat;
min-height: 100%;
//border-top: 1px solid #000000;
margin: 0;
}
#page {
width: 960px;
margin: 0 auto;
min-height: 100%;
height: 100%;
}
#font-face {
font-family: 'Arial Bold';
src: url('fonts/corben-bold-webfont.eot');
src: local('?'), url('fonts/corben-bold-webfont.woff') format('woff'),
url('fonts/corben-bold-webfont.ttf') format('truetype'),
url('fonts/corben-bold-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*
img {
border: 0;
}
*/
#connect .facebook, #connect .twitter, #connect .vimeo {
background: url(../images/icons.png) no-repeat;
}
/*------------------------------ HEADER ------------------------------*/
#header {
background: url(../images/bg-header.png) no-repeat center top;
min-height: 340px;
margin-bottom: 20px;
}
#connect {
float: left;
display: inline-block;
height: 30px;
width: 300px;
margin: 15px 0 15px 10px;
}
#connect a {
display: inline-block;
height: 30px;
margin: 0 10px;
padding: 0;
}
#connect .facebook {
background-position: 0 2px;
width: 27px;
}
#connect .twitter {
background-position: 0 -36px;
width: 36px;
}
/* #connect .vimeo {
background-position: 0 -74px; // Removed Vimeo Logo. Can implement any other logo here with matching dimensions
width: 32px; */
}
#infos {
float: right;
color: #ffe680 ;
display: inline-block;
height: 30px;
width: 200px;
margin: 15px 0;
}
#infos a {
color: #ffe680;
font-family: Arial;
font-size: 14px;
line-height: 30px;
margin: 0 5px;
text-decoration: none;
}
/** Logo **/
#logo {
clear: both;
display: block;
height: 217px;
width: 950px;
margin: 0 auto;
}
/** Navigation **/
#navigation {
height: 40px;
list-style-type: none;
margin: 0;
display: inline-block;
padding: 8px 20px 12px 84px;
}
#navigation li {
float: left;
font-family: 'Arial Black';
font-size: 22px;
font-weight: bold;
line-height: 40px;
width: 186px;
text-align: center;
}
#navigation a {
color: #ffe680;
text-decoration: none;
text-shadow: 1px 1px #C3A33B;
}
#navigation a:hover, #navigation li.selected a {
color: #FFFFAC;
text-shadow: 1px 1px 0 #C3A33B;
}
/*------------------------------ CONTENTS ------------------------------*/
#contents {
margin: 0 0 40px;
padding: 0 5px;
}
#main {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
margin: 0 0 30px;
padding: 0 0 30px;
}
#main p {
color: #ffe680;
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 0 0 20px;
text-shadow: 1px 1px #C3A33B;
}
#main p a {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
}
#main address {
color: #FFFFAC;
font-style: normal;
width: 350px;
margin: 0 auto;
text-align: center;
text-shadow: 1px 1px #C3A33B;
}
#main address span {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
line-height: 20px;
margin: 20px 0;
width: 350px;
}
/* #adbox {
background: #FFFFAC url(../images/bottom-shadow-headliner.jpg) no-repeat center bottom;
height: 371px;
width: 935px;
margin: 0 auto;
padding: 7px 7px 22px;
position: relative;
}
#adbox img {
height: 371px;
width: 935px;
margin: auto;
}
*/
#featured {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 42px;
position: relative;
}
#featured ul {
display: inline-block;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
#featured ul li {
float: left;
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
height: 253px;
width: 204px;
margin-right: 28px;
padding: 6px 6px 15px;
}
#featured ul li.last {
margin-right: 0;
}
#featured ul li img {
border: 1px solid #e4e0d1;
}
#featured a.button {
background: url(../images/bg-button.jpg) no-repeat;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
height: 30px;
line-height: 30px;
width: 144px;
padding: 4px 0 6px;
text-align: center;
text-decoration: none;
position: absolute;
bottom: -20px;
left: 403px;
}
/*------------------------------ Blog Page ------------------------------*/
#blogs {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 20px;
position: relative;
}
#blogs div {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
display: inline-block;
margin: 0 0 20px;
padding: 0 0 20px;
}
#blogs div.last {
background: none;
margin: 0;
}
#blogs span {
float: left;
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
display: block;
height: 253px;
width: 204px;
margin-bottom: 6px;
margin-right: 40px;
padding: 6px 6px 15px;
}
#blogs span img {
border: 1px solid #e4e0d1;
}
#blogs h3 {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
line-height: 30px;
margin: 0 0 20px 258px;
padding: 0 0 10px;
}
#blogs p {
color: #ffe680;
max-height: 160px;
line-height: 20px;
margin: 0 0 20px 258px;
padding: 0 0 20px;
overflow: hidden;
text-shadow: 2px 2px #C3A33B;
}
#blogs p a {
color: #ffe680;
text-shadow: 2px 2px #C3A33B;
}
#blogs a.more {
color: #C3A33B;
font-style: italic;
text-decoration: none;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
background: none;
display: inline-block;
width: 328px;
margin: 0;
padding: 0;
position: absolute;
bottom: -20px;
left: 311px;
}
#blogs div.buttons a, #blogs div.blog-entry-buttons a {
float: left;
background: url(../images/bg-button.jpg) no-repeat;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
height: 30px;
line-height: 30px;
width: 144px;
margin-right: 20px;
padding: 4px 0 6px;
text-align: center;
text-decoration: none;
}
#blogs div.blog-entry-buttons {
width: 690px;
left: 258px;
}
#blogs div.blog-entry-buttons a.back {
float: right;
font-size: 16px;
margin-right: 0;
}
/*------------------------------ Shop Page ------------------------------*/
#shop {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 20px;
position: relavive;
}
#shop ul.items {
display: inline-block;
list-style-type: none;
margin: 0 auto 16px;
padding: 0;
}
#shop ul.items li {
float: left;
color: #ffe680;
height: 340px;
width: 216px;
margin-bottom: 20px;
margin-right: 28px;
}
#shop ul.items li span {
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
display: block;
height: 253px;
width: 204px;
margin-bottom: 10px;
padding: 6px 6px 14px;
}
#shop ul.items li span img {
border: 1px solid #e4e0d1;
}
#shop ul.items li span.price {
float: right;
background: none;
color: #FFFFAC;
display: inine-block;
font-size: 17px;
height: 20px;
line-height: 20px;
width: 80px;
margin: 0;
padding: 0;
text-align: right;
}
#shop ul.items li a.buy {
background-color: #ffe680;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 14px;
height: 20px;
line-height: 20px;
width: 80px;
border-radius: 3px;
margin: 13px auto 0;
padding: 1px 0 4px;
text-align: center;
text-decoration: none;
}
#shop ul.items li.last {
margin-right: 0;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
padding: 0 5px;
}
#description {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
margin: 0 0 30px;
padding: 0 0 30px;
}
#description div {
float: left;
width: 180px;
margin-right: 50px;
}
/*#description div a.logo {
background: url(../images/logo-footer.gif) no-repeat;
display: block;
height: 30px;
width: 175px;
margin: 0 0 10px;
}
*/
#description div span {
padding-bottom: 5px;
color:#ffe680;
display: block;
font-size: 11px;
line-height: 20px;
text-shadow: 1px 1px #C3A33B;
}
#description div span a {
color: #ffe680;
text-decoration: none;
text-shadow: 1px 1px #C3A33B;
}
#description p {
color: #ffe680;
font-size: 13px;
line-height: 20px;
margin: 20px 0;
text-align: justify;
text-shadow: 1px 1px #C3A33B;
}
#description p a {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
}
#footer div.navigation {
color: #ffe680;
font-size: 14px;
line-height: 20px;
width: 338px;
margin: 0 auto 20px;
text-shadow: 0 1px 0 #C3A33B;
}
#footer div.navigation a {
color: #ffe680;
padding: 0 15px;
text-decoration: none;
text-shadow: 1px 1px 0 #C3A33B;
}
#footer div.navigation a:hover {
color: #FFFFAC;
}
/*------------------------------ For IE6 ------------------------------*/
#background {
_height: 1440px;
min-height: 100%;
}
#featured a.button {
_top: 299px;
}
#blogs {
_height: 620px;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
_top: 620px;
}
I know this is a lot, and I'm not asking for anyone to look through the entirety of the code and provide me with completely revamped code that I can use right off the bat. I could really just use some help figuring out an algorithm to put into place for creating these randomly generated images on the page.
Any help that can be provided is very much appreciated! Thank you all!
I ended up creating an iframe and pulling the photos from E-bay's site regardless. Couldn't create live image pulls due to built-in security, so I had to go ahead and use images manually in a DB.
Also created an href redirect to the owner's ebay sales page, which worked out when it came to overall sales of the shirts / products, etc.
I'm trying to accomplish the following layout:
I want a centered Brain with four square links. The "Polaroids" one the left and the right should appear if you are hovering over the right part of the navigation button. So if you hover over the first like in the picture, the first polaroid left up corner should appear.
I tried the following div structure:
.html,
body {
height: 100%;
}
.title {
font-family: lato;
}
.main-content {
width: 100%;
float: left;
background-color: #fefdf9;
height: 100%;
}
.container {
height: 100%;
width: 100%;
margin: 0px auto;
}
.page {
width: 100%;
float: left;
padding: 0px 0px 0px 0px;
}
.top-left {
background-color: #fefdf9;
width: 35%;
float: left;
padding: 0px 0px 0px 0px;
min-height: 1px;
}
.top-middle {
background-color: #fefdf9;
width: 30%;
float: left;
padding: 0px 0px 0px 0px;
}
.top-right {
background-color: #fefdf9;
width: 35%;
float: left;
padding: 0px 0px 0px 0px;
min-height: 1px;
}
.content {
width: 100%;
float: left;
height: auto;
padding-top: 8px;
}
.footer {
background-color: #383838;
text-align: center;
float: left;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
margin: auto;
}
.FooterText {
FONT-SIZE: 26px;
FONT-FAMILY: "Lato Bold";
color: rgb(255, 79, 78);
}
.header {
width: 40%;
float: left;
max-height: 60px;
}
.header-top {
width: 100%;
float: left;
line-height: 0;
font-family: "Lato Thin";
}
.header-bot {
width: 100%;
height: 4%;
display: inline;
font-family: "Lato Black";
font-size: 30px;
margin-top: -5px;
}
.Left {
width: 37%;
min-height: 1px;
float: left;
white-space: nowrap;
}
.left > div {
height: 50px;
width: 100px;
background: #555;
display: inline-block;
margin: 10px;
}
.Middle {
width: 26%;
float: left;
margin: auto;
height: 580px;
}
.Right {
width: 37%;
min-height: 1px;
float: left;
}
#h1 {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
max-height: 100%;
image-rendering: crisp-edges;
}
#Willkommenstext {
font-size: 18px;
text-align: justify;
}
.News {
position: relative;
width: 40%;
padding-left: 20%
}
.News img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.News p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.Kontakt {
position: relative;
width: 40%;
padding-left: 25%;
margin-top: -15%;
}
.Kontakt img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.Kontakt p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.Kalender {
position: relative;
width: 40%;
padding-left: 10%
}
.Kalender img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.Kalender p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.Anfahrt {
position: relative;
width: 40%;
padding-left: 5%;
margin-top: -15%;
}
.Anfahrt img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.Anfahrt p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.left1 {
width: 10%;
background-color: white;
min-height: 1px;
}
.left2 {
width: 10%;
background-color: white;
min-height: 1px;
}
body {
background: #F1F1F1;
padding: 0;
margin: 0;
font-size: small;
}
ul.square-menu {
font-size: 0;
list-style-type: none;
list-style: none;
padding: 0;
font-family: "Kavoon", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
width: 400px;
margin: 40px auto;
}
ul.square-menu li {
float: left;
margin: 0px;
}
ul.square-menu li a {
display: block;
text-decoration: none;
padding: 80px 60px;
color: white;
font-weight: normal;
font-size: 150%;
width: 60px;
height: 20px;
text-align: center;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.1s ease-in;
-ms-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}
ul.square-menu li a.slink-x {
background-image: url(../images/NavLeftUp.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a.slink-y {
background-image: url(../images/NavRightUp.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a.slink-z {
background-image: url(../images/NavLeftDown.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a.slink-a {
background-image: url(../images/NavRightDown.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a:hover {
font-size: 26px;
a -moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-moz-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main-content">
<div class="container">
<div class="page">
<div class="top-left">
</div>
<div class="top-middle">
<div class="header">
<div class="header-top" style="display=" inline="">
<h1>Test Header</h1>
</div>
<div class="header-bot">
<h2>Test Underline</h2>
</div>
</div>
</div>
<div class="top-right">
</div>
</div>
<div class="content">
<div class="Left">
<div class="News">
<p>News</p>
<img src="./images/news.jpg">
</div>
<div class="Kontakt">
<p>News 2</p>
<img src="./images/news.jpg">
</div>
</div>
<div class="Middle">
<ul class="square-menu">
<li>
Home
</li>
<li>
About
</li>
<li>
News
</li>
<li>
Contact
</li>
<br style="clear:both;" />
</ul>
<table id="Willkommenstext" width="420" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae fringilla neque, a elementum ligula. Proin arcu velit, euismod a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae fringilla neque, a elementum ligula.
Proin arcu velit, euismod a.</td>
</tr>
</tbody>
</table>
</div>
<div class="Right">
<div class="Kalender">
<p>Kalender</p>
<img src="./images/news.jpg">
</div>
<div class="Anfahrt">
<p>Anfahrt</p>
<img src="./images/news.jpg">
</div>
</div>
<div class="footer">
<table width="50%" align="center">
<tbody>
<tr>
<td>BildLogo</td>
<td>Impressum</td>
<td>About</td>
<td>Kontakt</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The result is this:
I am a ABSOLUTE Beginner and managed to get to this point, so i wont stop^^ As far as I understood I can not change the boxes visibility with css and hover because my divs are not nested.
I stumbled upon javascript and jquery for this, but this looks like kinda too complicated to get it working without learning the language.
Is there a way to change the div structure so i can hide the Polaroids with css?
I would be very thankful for a solution to this, I am kinda stuck since a few days. If there is no other way than java/jquery i would take that also :D
Thank you very much my friends! :)