CSS Broken Height values in my site after implementing position:absolute - html

Im honestly not sure what the heck happened when I changed the position from relative to absolute. Most of my elements were in absolute already. But changing the header, footer, and main section messed up the heights and visibility. Im not sure what to do. Im not even sure what to look for [for solutions] so Stack Overflow is my last resort.
My site for reference: https://rosesystem.neocities.org/index.html
No matter what % value I put in, the height doesnt change for the footer and the main box.
The CSS and The HTML:
background-image:url(Backgrounds/roses.gif);
Font-family: "Courier New", monospace;
}
.all {
margin-left: 25%;
margin-right: 25%;
margin-top: 2%;
align-items: center;
align-content: center;
justify-content: center;
height: 110%;
position: relative;
}
a {
color: red;
text-decoration: none;
}
a:hover {
color: darkred;
}
#top {
color: white;
justify-content: center;
font-size: 35px;
background-image:url(Backgrounds/rouge.JPG);
background-position: center;
background-size: fill;
border: 4px red solid;
display: flex;
align-items: center;
align-content: center;
padding: 5px;
width: 100%;
animation: mymove 5s infinite;
position: absolute;
}
#booty {
background-image:url(https://64.media.tumblr.com/6382d38a81b616031c469d56a09d88b4/7faacc6c2b3eb254-76/s500x750/fe9ff85c4a3590a3701990dd6182b40706df862e.gifv); /*background*/
color: white; font-size:20px; /*text*/
border: 4px red solid; /*border*/
justify-content: center; align-items: center; align-content: center; /*content position*/
padding-top: 20px; margin-top: 12.5%!important; margin-bottom: 1%; margin: 20%; position: absolute; /*container position*/
padding: 5px; width: 60%; height: 200%; /*dimensions*/
animation: mymove 5s infinite;
}
#keyframes mymove {
0% {border-color: red;}
50% {border-color: darkred;}
100% {border-color: red}
}
#feet {
background-image:url(Backgrounds/rouge.JPG);
color: white; font-size: 20px;
Border: 4px red solid;
Padding: 5px; width: 60%; height: 100%;
margin-top: 85%!important;margin-bottom: 5%!important; margin: 20%; /*container position*/
animation: mymove 5s infinite;
position: absolute;
}
.sidebar {
Border: 4px red solid;
animation: mymove 5s infinite;
background-color: black;
height: 100%
float: left;
margin-left: none;
margin-right: 82%!important;
overflow: hidden;
margin-top: 12.5%;
position: absolute;
left: 0;
top: 0;
padding: 5px;
padding-top: 20px!important;
align-items: center;
align-content: center;
justify-content: center;
}
.sidebar a {
display: block;
padding-top: 10px;
font-size: 20px;
background-color: #540101;
}
#otherside {
background-color: black;
color: white; font-size: 20px;
Border: 4px red solid; Padding: 5px;
position: absolute;
animation: mymove 5s infinite;
margin-left: 84% ;
width: 16.2%;
margin-top: 12.5%;
height: 100%;
}
#othersidetext {
background-color: #540101;
text-align: center;
color: red;
}
#othersideimg {
Border: 4px red solid;
height: auto; width: 93%;
animation: mymove 5s infinite;
margin-top: 4.5%;
}
#countbox {
background-image:url(Backgrounds/rouge.JPG);
color: white; font-size: 20px;
Border: 4px red solid; Padding: 5px;
position: absolute;
animation: mymove 5s infinite;
margin-left: 84%;
width: 16.2%;
margin-top: 49.5%;
height: 7%;
}
#blinkiebox {
background-color: black;
color: white; font-size: 20px;
Border: 4px red solid; Padding: 5px;
position: absolute;
animation: mymove 5s infinite;
margin-left: 84%;
width: 16.2%;
margin-top: 38.7%;
height: 35%;
overflow: hidden;
}
#blinkies {
width: 103%;
margin-left: 84%;
height: auto;
}
hr {
border-color: red;
border-style: solid;
border-width: 2px;
width: 106%;
margin-left: -5%;
animation: mymove 5s infinite;
}
</style>
<body>
<!-- everything box -->
<div class="all">
<!-- title box -->
<div id="top"> The Rose System </div>
<!-- main box -->
<div id="booty">
yes i'm redoing the index page again shh<br>
test<br>test<br>ok<br>now<br>here<br>Is<br>placeholder<br>text<br>i<br>hope<br>you<br>enjoy<br>
<img src="Roses/groupofroses.gif" alt="group of pretty roses with a butterfly" width="40%" height="auto"><br>
</div>
<!-- footer box -->
<div id="feet"> <marquee> || site by achrya || Feb 2022-Forever ||</marquee> </div>
<!-- sidebar box -->
<div class="sidebar">
<img src="Roses/groupofroses.gif" alt="group of pretty roses with a butterfly" width="75%" height="auto">
<hr>
<img src="Roses/rosedivider2.GIF" alt="horizontal rose vine that divides a section" width="97%" height="auto">
<hr>
Alter List
<hr>
Blog
<hr>
General [TW: Flashing]
<hr>
Links
<hr>
<img src="Roses/rosedivider2.GIF" alt="horizontal rose vine that divides a section" width="97%" height="auto" padding-bottom="15px">
<hr>
<img src="Roses/groupofroses.gif" alt="group of pretty roses with a butterfly" width="75%" height="auto">
</div>
<!-- image box -->
<div id=otherside>
<div id="othersidetext"> Zombie: </div>
<hr>
<img src="https://c.tenor.com/8ustcfbXeAcAAAAM/anime-excited.gif" id="othersideimg" alt="a gif of the system host, zombie. from one of her source medias">
</div>
<!-- count box -->
<div id="countbox">Alter Count: 13?</div>
<!-- Blinkie Box -->
<div id="blinkiebox">
<img src="Blinkies/Guestbook.gif" id="blinkies" padding-top="5%">
<hr>
<img src="Blinkies/dicesurvivor.PNG" id="blinkies">
<hr>
<img src="Blinkies/achrya.gif" id="blinkies" width="110%!important" height="auto">
<hr>
<img src="Blinkies/osdid.gif" id="blinkies">
</div>
</div>


When you use height: 100%; on your Footer, that basically means to get a 100% of height of the nearest parent with absolute or relative position. In your case it's an <div class="all" element.
The problem that you have is that <div class="all" element has a height of 0.
You can choose one of these options to fix the issue:
Add height to your all element
.all {
height: 100vh;
}
Make your all element also absolute, and then it takes the height automatically
.all {
position: absolute;
width: 50%;
}

Related

How to bring text on the card?

<div class="row">
<div class="col-lg-12">
<div class="dev-container">
<p> Venkat </p>
</div>
</div>
</div>
</section>
#dev {
background-color: black;
padding: 7% 15%;
text-align: center;
}
.dev-container {
display:grid;
place-items: center;
position: relative;
height: 150px;
width: 100%;
background: #191919;
border-radius: 10px;
overflow:hidden;
}
.dev-container::before{
content: '';
width: 100%;
height: 300px;
left: 10px;
top: 70px;
position:absolute;
background: linear-gradient(#00e5ff, #b400fb, #ff0000, #ffbf00, #80ff00, #00ffbf, #0080ff, #ff00ff);
animation: animate 5s linear infinite;
}
#keyframes animate{
0% { transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.dev-container::after{
content: '';
position: absolute;
padding: 50px 50px;
text-decoration: none;
color: #FFE816;
font-size: 2em;
text-transform: uppercase;
font-family: Poppins;
letter-spacing: 4px;
background: #191919;
inset: 3px;
border-radius: 5px;
}
I want my text in the Html to visible on the card but i can't give over-flow as visible because gradient animation is also visible, so is there any way to make my text visible on the card also make the card responsible to the screen size.
I tried to give bootstrap class d-sm-none but after giving the class it disappears even in the large devices.

How do I get the content centered when In absolute positioning?

So as said above, I have (for fun) recreated a website (hologram.io), because I'm new to CSS, and just wanted to see what I can do myself without help... But I can't figure out how I can position the whole first section which is absolute (-> On top of an Image) center, center. So vertical and horizontal, So that on bigger screens it always stays perfectly in the center of the menu... On the other sections which are not absolute, I used display: flex, justify-content: center and align-items center, which works perfectly... On the screenshots I have included, you can see the problem... Also, will include the code. It looks a bit messy, but should be fine haha...
Here you can see the noncentered Absolute item
Here you can see the flex items which are perfectly centered on every screensize and
And here for Refernce is the hologram website...
#font-face {
font-family: Robert Sans;
src: url(RobertSans-Regular.ttf);
}
#navtextonly li {
list-style-type: none;
display: inline;
padding: 15px;
text-align: center;
}
.listitem:hover {
cursor: pointer;
color: #4e6cff;
}
#hologramlogo {
margin-top: 20px;
margin-bottom: 20px;
margin-right: 0px;
padding-right: 0px;
}
nav {
background-color: rgb(255, 255, 255);
}
body {
margin: 0px;
font-family: Robert Sans;
}
#navbarouter {
display: flex;
align-items: center;
justify-content: center;
}
#navtextonly {
white-space: nowrap;
}
#mainmenuwobtnlogo {
margin-right: 100px;
}
ul {
font-size: 16px;
}
#buttonsmenu1 {
background-color: white;
border: 1px solid #4e6cffce;
padding: 12px 23px 12px 23px;
border-radius: 25px;
margin-right: 15px;
-webkit-box-shadow: 2px 2px 15px 1px #999999;
box-shadow: 2px 2px 15px 1px #999999;
}
#buttonsmenu1:hover {
border-color: #111;
cursor: pointer;
}
#buttonsmenu2 {
background-color: #4e6cff;
padding: 12px 23px 12px 23px;
color: white;
border-radius: 25px;
-webkit-box-shadow: 2px 2px 15px 1px #999999;
box-shadow: 2px 2px 15px 1px #999999;
}
#buttonsmenu2:hover {
background-color: #788fff;
color: white;
cursor: pointer;
}
.buttonsmenuouter {
margin-left: 25px;
}
#hamburgernav {
display: none;
}
#backgroundverlauf {
height: 800px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.mainheading {
font-size: 64px;
white-space: nowrap;
font-weight: 400;
}
#h1top,
#h1bottom {
margin: 0px;
padding: 0px;
}
article {
color: rgb(255, 255, 255);
max-width: 550px;
}
#ellipse {
position: absolute;
top: 0px;
left: 630px;
}
#drohnepng {
position: absolute;
top: -50px;
left: 880px;
height: 80px;
}
#cartpng {
position: absolute;
top: 80px;
left: 585px;
height: 250px;
}
#rollerpng {
position: absolute;
top: 140px;
left: 825px;
height: 440px;
}
#content1 {
position: absolute;
top: 250px;
left: 12%;
}
#outerouter {
max-width: 1300px;
}
#glowh1 {
background: linear-gradient(
-60deg,
#904e95,
#904e95,
#e73c7e,
#ee7752,
#4e6cff,
white
);
background-size: 600%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: animate 10s linear infinite;
}
#keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 600%;
}
}
#paragraph {
width: 390px;
color: rgb(199, 199, 199);
font-size: 20px;
margin-bottom: 30px;
}
#emailwithsubmit {
display: flex;
}
.emailfeld {
width: 100%;
padding: 18px 23px 18px 23px;
border-radius: 25px 26px 26px 25px;
border-width: 0px;
border: 1px red solid;
}
#submitbtn {
padding: 18px 35px 18px 35px;
border-radius: 25px 25px 25px 25px;
color: white;
font-weight: 600;
border-width: 0px;
background-image: linear-gradient(90deg, #00a6ff, #7831ca, #fe17c0);
position: relative;
left: -60px;
}
#mainpart2,
#mainpart3 {
display: flex;
align-items: center;
justify-content: center;
margin: 100px 60px 100px 60px;
}
#mainpart2-3outer {
}
#card {
margin-left: 60px;
margin-right: 100px;
height: 280px;
/* -webkit-animation: fadein 3.2s both;
-moz-animation: fadein 3.2s both;
-o-animation: fadein 3.2s both;
animation: fadein 3.2s both; */
animation: float2 6s ease-in-out infinite;
}
#keyframes float2 {
0% {
transform: translatey(0px);
}
50% {
transform: translateX(-10px);
}
100% {
transform: translatey(0px);
}
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
-webkit-transform: translateX(-25px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
#-moz-keyframes fadein {
0% {
opacity: 0;
-moz-transform: translateX(-50px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
#-0-keyframes fadein {
0% {
opacity: 0;
-o-transform: translateX(-50px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
#keyframes fadein {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#ellipse {
-webkit-animation: fade 5s both;
-moz-animation: fade 5s both;
-o-animation: fade 5s both;
animation: fade 5s both;
}
#-webkit-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-0-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#cartpng,
#drohnepng,
#rollerpng {
/* -webkit-animation: fadein 3.2s both;
-moz-animation: fadein 3.2s both;
-o-animation: fadein 3.2s both;
animation: fadein 3.2s both;
transform: translatey(0px); */
animation: float 6s ease-in-out infinite;
}
#keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-50px);
}
100% {
transform: translatey(0px);
}
}
#mainh-1,
#mainp-1 {
max-width: 280px;
}
#mainh-2,
#mainp-2 {
max-width: 280px;
}
.main1h,
.main1p,
.main2h,
.main2p {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#mainh-3,
#mainp-3 {
max-width: 280px;
}
#mainh-4,
#mainp-4 {
max-width: 280px;
}
#mainh-1,
#mainh-2,
#mainh-3,
#mainh-4 {
margin: 0px;
padding: 0px;
}
#textmainpart2 {
margin-right: 60px;
}
.main2h1 {
margin-bottom: 40px;
}
.contentmainpart3-1 {
max-width: 475px;
margin-left: 60px;
}
.contentmainpart3-2 {
margin-right: 60px;
}
#beforefootercentered {
text-align: center;
margin-bottom: 75px;
}
.beforefootercolumncontent {
display: flex;
flex-direction: row;
justify-content: center;
gap: 100px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 50px;
}
.beforefootericons {
height: 66px;
width: 66px;
}
#beforefootercolumncontent1,
#beforefootercolumncontent2,
#beforefootercolumncontent3 {
max-width: 280px;
text-align: center;
}
#list2banner {
display: flex;
flex-direction: row;
margin-top: 20px;
}
#list1bannerouter {
max-width: 725px;
}
.footerbanner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-image: linear-gradient(90deg, #7831ca, #00a5ff);
margin: 0px 190px 0px 190px;
border-radius: 10px;
padding-left: 30px;
padding-top: 25px;
padding-right: 30px;
padding-bottom: 50px;
color: white;
position: relative;
top: 100px;
}
.footerbanner h2 {
font-size: 40px;
font-weight: 400;
margin-bottom: 10px;
}
#list1banner {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
#list1banner li:before {
content: "✓";
padding-right: 5px;
}
#btn1,
#btn2 {
border-radius: 25px;
padding: 10px 20px 10px 20px;
}
#btn1 {
margin-right: 20px;
background-color: #111;
border-width: 0px;
}
#btn2 {
background-image: transparent;
border: 1px solid white;
}
#pfeil {
margin-left: 5px;
}
#mainfooter {
height: 600px;
background-color: #0a1435;
}
#mainfooterupper {
height: 100px;
background-color: #0a1435;
display: none;
}
.item1 {
margin-right: 20px;
}
#placehold {
position: absolute;
top: 3100px;
left: 50%;
transform: translate(-50%, -50%);
color: rgb(255, 255, 255);
font-size: 70px;
}
#media only screen and (max-width: 1350px) {
html,
body {
overflow-x: hidden;
}
body {
position: relative;
}
#navtextonly {
font-size: 14px;
}
li {
padding-right: 20px;
}
#mainmenuwobtnlogo {
margin-left: 0px;
margin-right: 0px;
}
#navbarouter {
display: flex;
}
#hologramlogo {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 0px;
width: 120px;
}
.buttonsmenuouter {
margin-left: 25px;
font-size: 14px;
margin-right: 0px;
}
#buttonsmenu1,
#buttonsmenu2 {
padding: 9px 17px 9px 17px;
}
#backgroundverlauf {
height: 800px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
}
#media only screen and (max-width: 990px) {
html,
body {
overflow-x: hidden;
}
body {
position: relative;
}
#navtextonly {
display: none;
}
#navbarouter {
margin-left: 20px;
margin-right: 20px;
display: flex;
justify-content: space-between;
}
#hologramlogo {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
.buttonsmenuouter {
margin-left: 0px;
}
#hamburgernav {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
display: inline;
}
#backgroundverlauf {
height: 800px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.mainheading {
font-size: 50px;
}
#paragraph {
font-size: 19px;
}
}
#media only screen and (max-width: 570px) {
.mainheading {
font-size: 30px;
}
#paragraph {
font-size: 16px;
}
#content1 {
position: absolute;
top: 175px;
}
article {
color: rgb(255, 255, 255);
max-width: 500px;
display: flex;
flex-direction: column;
margin-right: 20px;
}
#floatingimages {
display: none;
}
#paragraph {
width: 300px;
color: rgb(199, 199, 199);
font-size: 16px;
margin-bottom: 30px;
}
#backgroundverlauf {
height: 500px;
}
.emailfeld {
width: 80%;
padding-bottom: 20px;
padding: 13px 20px 13px 20px;
border-radius: 25px 26px 26px 25px;
border-width: 0px;
border: 1px red solid;
}
#submitbtn {
width: 87%;
position: absolute;
left: 10px;
top: 280px;
padding-bottom: 20px;
padding: 13px 20px 13px 20px;
border-radius: 25px 26px 26px 25px;
border-width: 0px;
border: 1px red solid;
/*
padding: 13px 30px 13px 30px;
border-radius: 25px 25px 25px 25px;
color: white;
font-weight: 600;
margin-left: 0px;
border-width: 0px;
background-image: linear-gradient(90deg, #00a6ff, #7831ca, #fe17c0);*/
}
#emailwithsubmit {
display: flex;
gap: 13px;
flex-direction: column;
align-items: center;
}
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles2.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Index2</title>
</head>
<div>
<nav>
<div id="navbarouter">
<img
id="hologramlogo"
src="610f51dabc2bd752a968dfac_Hologram Logo Black Text.svg"
alt="Logo"
width="130px"
/>
<ul id="navtextonly">
<li class="listitem">Cellular IoT</li>
<li class="listitem">Why Hologram</li>
<li class="listitem">Resources</li>
<li class="listitem">Plans</li>
<li class="listitem">Jobs</li>
<li class="listitem">Store</li>
<span class="buttonsmenuouter">
<li id="buttonsmenu1">Contact Sales</li>
<li id="buttonsmenu2">Sign in</li>
</span>
</ul>
<div id="hamburgernavouter">
<img id="hamburgernav" src="hamburgernav.svg" alt="hamburgernav" />
</div>
</div>
</nav>
<div id="outerouterouter">
<img
src="background1.png"
id="backgroundverlauf"
alt="backgroundverlauf"
/>
<div id="outerouter">
<div id="content1">
<article>
<h1 class="mainheading" id="h1top">Internet everywhere.</h1>
<p class="mainheading" id="h1bottom">For every<span id="glowh1">thing</span>.</p>
<p id="paragraph">Spend less time monitoring your IoT deployments and more time innovating. Hologram's cellular platform enables you to connect and manage any device, anywhere in the world.</p>
<div id="emailwithsubmit">
<input type="email" class="emailfeld" autocomplete="email" maxlength="256" name="Email" data-name="Email" placeholder="E-Mail-Adresse" id="email" data-validation="email required email length" required="" data-validation-event="keyup change" data-validation-length="max256">
<input type="submit" value="Get started" data-wait="Please wait..." class="c-button is--gradient w-button disabled" disabled="disabled" id="submitbtn">
</div>
</article>
<div id="floatingimages">
<img class="sideimages" id="ellipse" src="backgroundellipse.png" alt="ellipse">
<img class="sideimages" id="drohnepng" src="drohne.png" alt="drohne">
<img class="sideimages" id="cartpng" src="cart.png" alt="cart">
<img class="sideimages" id="rollerpng" src="roller.png" alt="roller">
</div>
</div>
</div>
</div>
<div id="mainpart2-3outer">
<div id="mainpart2">
<div id="cardcontainer">
<img id ="card" src="card.png" alt="card">
</div>
<div id="textmainpart2">
<h1 class="main2h1"> Testüberschrift: global IoT connectivity platform</h1>
<div class="main1h">
<h2 id="mainh-1">One global SIM card</h2>
<h2 id="mainh-2">Automatic carrier switching</h2>
</div>
<div class="main1p">
<p id="mainp-1">Connect to 470+ networks in 200 countries using a single hardware-agnostic SIM card or eSIM eUICC chip. </p>
<p id="mainp-2">Hologram SIMs automatically switch between local carriers to ensure you have top performance and never lose service.</p>
</div>
<div class="main2h">
<h2 id="mainh-3">Flexible, scalable pricing</h2>
<h2 id="mainh-4">Connectivity tools for your team</h2>
</div>
<div class="main2p">
<p id="mainp-3">No contracts, quotas, or negotiations. Activate, change, or pause plans anytime via our Hologram Dashboard or APIs.</p>
<p id="mainp-4">Collaboratively manage your fleet with ease via our easy-to-use Dashboard or our modern REST API.</p>
</div>
</div>
</div>
<div id="mainpart3">
<div class="contentmainpart3-1">
<img src="hyper.svg" alt="hyper">
<h1>Testüberschrift2: flexibility and coverage with Hyper</h1>
<p>Future-proof your SIMs and scale faster globally with Hyper, Hologram’s eUICC SIMs and platform. Hyper provides over-the-air, updatable access to Hologram’s full portfolio of IoT connectivity partners and profiles.</p>
<p>What is Hyper? --></p>
</div>
<div class="contentmainpart3-2">
<img src="image maincontent3.png" alt="ballwiththingsmainpart3right" height= "570px">
</div>
</div>
</div>
<div id="beforefootercentered">
<h1>Scaling connectivity has never been so easy</h1>
<p>The simplest way to get your IoT deployment connected worldwide.</p>
</div>
<div class="beforefootercolumncontent">
<div id="beforefootercolumncontent1">
<img src="antenne.svg" loading="lazy" alt="cell tower icon" class="beforefootericons">
<h3 class="">No hassles or headaches</h3>
<p class="">Focus on your product and data — not connectivity infrastructure, negotiations, and pricing.</p>
</div>
<div id="beforefootercolumncontent2">
<img src="speedometer.svg" loading="lazy" alt="dashboard icon" class="beforefootericons">
<h3 class="">Ready to grow your business</h3>
<p class="">Manage global deployments from a single connectivity platform with pricing that scales as you do.</p>
</div>
<div id="beforefootercolumncontent3">
<img src="settings.svg" loading="lazy" alt="gear icon" class="beforefootericons">
<h3 class="">All the tools you need</h3>
<p class="">Our Hologram Dashboard, REST API, and supported hardware make integrating connectivity easy.</p>
</div>
</div>
<footer>
<div id="mainfooterupper"></div>
<div class="footerbanner">
<div id="list1bannerouter">
<h2>Try Hologram today.</h2>
<ul id="list1banner">
<li class="item1">Free Sim</li>
<li class="item1">1 MB/mo free</li>
<li>Connect and scale in days</li>
</ul>
</div>
<div id="list2banner">
<div id="btn1">Sign up free<img id="pfeil" src="pfeil.svg"></div>
<div id="btn2">Contact sales <img id="pfeil" src="pfeil.svg"></div>
</div>
</div>
<div id="mainfooter">
<h1 id="placehold">Footer Items Soon</h1>
</div>
</footer>
</main>
</body>
</html>

Use this to your container[absolute] element
.container{
position: absolute;
/* For Vertically center */
top: 50%;
transform: translateY(-50%);
/* For Horizontally center */
left: 50%;
transform: translateX(-50%);
}
If You're using height and width without positioning use this
.container{
--height: 100px;
height: var(--height);
/* Horizontally Center */
margin: auto;
/* Vertically Center */
margin-top: calc(50% - var(--height));
}

How do I align these HREF Buttons?

I am trying to make 2 button align (they are HREFs) on the right side of a div. I have tried many stuff but I am not sure how.
CSS:
.href-right-header-buttons {
position: unset;
color: #fff;
font-size: 26px;
letter-spacing: 2px;
padding-top: 34px;
padding-bottom: 34px;
padding-left: 6px;
padding-right: 6px;
overflow: hidden;
font-family: 'Roboto', sans-serif;
text-decoration: none;
right: 0;
top: 0;
animation: animheader;
animation-duration: 1.5s;
.div-header-gradient {
display: flex;
background: linear-gradient(#7700ff, #953bff);
height: 100px;
width: 100%;
margin-left: 0px;
overflow: hidden;
animation: animheader;
animation-duration: 1.5s;
flex-direction: row;
}
HTML:
<div class="div-header-gradient" style="z-index: 1000;">
<p class="text-header-title-white" style="z-index: 1000;">
Axxon
</p>
<a href="https://discord.com/oauth2/authorize?client_id=796339788235800577&scope=bot&permissions=267906127" class="href-right-header-buttons">
Invite Bot
</a>
<a href="#" class="href-right-header-buttons">
More Information
</a>
</div>
How this looks now:
How I want it to look:
So basically, I want it to move them both to the right side of the div and make them seperated.

Add an extra wrapper (I used the div in the HTML with the class "my-wrapper"):
<div class="div-header-gradient" style="z-index: 1000;">
<p class="text-header-title-white">
Axxon
</p>
<div class="my-wrapper">
<a href="https://discord.com/oauth2/authorize?client_id=796339788235800577&scope=bot&permissions=267906127" class="href-right-header-buttons">
Invite Bot
</a>
<a href="#" class="href-right-header-buttons">
More Information
</a>
</div>
</div>
And in the CSS, I have added align-items center (to center the X-axis) and justify-content: space-between to create the space between those two elements (the paragraph and my new div with the class wrapper):
.div-header-gradient {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(#7700ff, #953bff);
height: 100px;
width: 100%;
margin-left: 0px;
overflow: hidden;
animation: animheader;
animation-duration: 1.5s;
flex-direction: row;
}
You can check in this codepen: https://codepen.io/GiulioBadger/pen/XWjBwxr
Preview of the result:

Look for flex-grow and apply it on the p.
To make it work from your codePen CSS, I removed the justify-content: space-between on the flex container .div-header-gradient and the absolute positionnings of its child elements.
About the "ripple" effect on the links, I wrapped them with a div (one for each) to "contain" the animation. There is an additionnal CSS rule for them And it affected the position calculation in the JS. Notice the .closest("div") which targets that wrapper div.
let x = e.pageX - e.target.closest("div").offsetLeft;
let y = e.pageY - e.target.closest("div").offsetTop;
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
body {
display: flex;
flex-direction: column;
background-color: #141414;
position: center;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #121212;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.button {
position: relative;
padding: 12px 36px;
margin: 10px 0;
color: #738adb;
font-size: 26px;
letter-spacing: 2px;
border-radius: 100px;
background: #242424;
overflow: hidden;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
.div-header-gradient {
display: flex;
align-items: center;
/*justify-content: space-between;*/
background: linear-gradient(#7700ff, #953bff);
height: 100px;
width: 100%;
margin-left: 0px;
overflow: hidden;
animation: animheader;
animation-duration: 1.5s;
/*flex-direction: row;*/
}
.div-header-gradient p{
flex-grow: 1; /* Add this for the alignement */
}
.div-header-gradient>div{ /* Add this to contain the ripple effect on links */
position: relative;
overflow: hidden;
height: 100%;
display: flex;
align-content: center;
}
span {
position: absolute;
background: #fff;
transform: translate(-50%, -50%);
pointer-events: none;
border-radius: 50%;
pointer-events: none;
animation: ripple 0.6s linear;
z-index: 9999;
overflow: hidden;
}
.text-header-title-white {
color: #fff;
font-size: 70px;
font-family: Roboto, sans-serif;
margin: 1px;
/*position: absolute;*/
vertical-align: central;
overflow: hidden;
margin-left: 0.5%;
display: flex;
flex-direction: row;
}
.href-right-header-buttons {
/*position: absolute;*/
color: #fff;
font-size: 26px;
letter-spacing: 2px;
padding-top: 34px;
padding-bottom: 34px;
padding-left: 6px;
padding-right: 6px;
overflow: hidden;
font-family: 'Roboto', sans-serif;
text-decoration: none;
/*right: 0;
top: 0;*/
animation: animheader;
animation-duration: 1.5s;
}
#keyframes animheader {
from {
margin-top: -100px;
opacity: 0;
}
to {
margin: 0px;
opacity: 1;
}
}
#keyframes ripple {
0% {
width: 0px;
height: 0px;
opacity: 0.2;
}
100% {
width: 400px;
height: 400px;
opacity: 0;
}
}
<html>
<head>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="div-header-gradient" style="z-index: 1000;">
<p class="text-header-title-white">
Axxon
</p>
<div> <!-- a div to wrap each link -->
<a href="https://discord.com/oauth2/authorize?client_id=796339788235800577&scope=bot&permissions=267906127" class="href-right-header-buttons">
Invite Bot
</a>
</div>
<div> <!-- a div to wrap each link -->
<a href="#" class="href-right-header-buttons">
More Information
</a>
</div>
</div>
<script type="text/javascript">
const buttons = document.querySelectorAll('a');
buttons.forEach(btn => {
btn.addEventListener('mousedown', function(e) {
let x = e.pageX - e.target.closest("div").offsetLeft; // Changed
let y = e.pageY - e.target.closest("div").offsetTop; // Changed
let ripples = document.createElement('span');
ripples.style.left = x + 'px';
ripples.style.top = y + 'px';
this.appendChild(ripples);
setTimeout(() => {
ripples.remove()
}, 5000);
})
})
</script>
<script src="assets/js/particles.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>

.href-right-header-buttons {
position: unset;
color: #fff;
font-size: 26px;
letter-spacing: 2px;
padding-top: 34px;
padding-bottom: 34px;
padding-left: 6px;
padding-right: 6px;
overflow: hidden;
font-family: 'Roboto', sans-serif;
text-decoration: none;
right: 0;
top: 0;
animation: animheader;
animation-duration: 1.5s;
}
.div-header-gradient {
display: flex;
background: linear-gradient(#7700ff, #953bff);
height: 100px;
width: 100%;
margin-left: 0px;
overflow: hidden;
animation: animheader;
animation-duration: 1.5s;
flex-direction: row;
justify-content: space-between;
}
<div class="div-header-gradient" style="z-index: 1000;">
<p class="text-header-title-white" style="z-index: 1000;">
Axxon
</p>
<span class="left">
<a href="https://discord.com/oauth2/authorize?client_id=796339788235800577&scope=bot&permissions=267906127" class="href-right-header-buttons">
Invite Bot
</a>
<a href="#" class="href-right-header-buttons">
More Information
</a>
</span>
</div>

HTML5 - buttons not the same width

I'm trying to get my buttons to have the same width but for some reason, it's not working. What needs to be done in order to make sure that all buttons comply with these desired results?:
All buttons must have the same width
All buttons must NOT use the whole width of the page
have the same width
/*File download button*/
.buttonFileDownload_container {
text-align: center;
margin-bottom: 20px;
}
.buttonFileDownload {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
text-indent: 15px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* Download box shape */
.buttonFileDownload:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
width: 0;
height: 0;
margin-left: 6px;
margin-top: -140px;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonFileDownload:hover:before {
border-color: black;
}
.buttonFileDownload:hover:after {
border-top-color: black;
animation-play-state: running;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -14px;
opacity: 1;
}
0.001% {
margin-top: -30px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
<p>Hello World</p>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
Numbers description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Colours</u><br/>
Colours description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
Alphabet description</a>
</div>

All buttons must have the same width
All buttons must NOT use the whole width of the page
The main trick is to add a wrapper in the markup, a new CSS rule and set the buttonFileDownload to display: block.
.buttonFileDownload_wrapper { /* added rule */
display: inline-block;
}
.buttonFileDownload {
display: block; /* changed to block */
...
}
If you also want them centered, set the buttonFileDownload_wrapper's parent to text-align: center (in this case the body)
body {
text-align: center; /* added property */
}
Stack snippet
/*File download button*/
body {
text-align: center; /* added property */
}
.buttonFileDownload_wrapper { /* added rule */
display: inline-block;
}
.buttonFileDownload_container {
text-align: center;
margin-bottom: 20px;
}
.buttonFileDownload {
display: block; /* changed to block */
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
text-indent: 15px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* Download box shape */
.buttonFileDownload:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
width: 0;
height: 0;
margin-left: 6px;
margin-top: -140px;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonFileDownload:hover:before {
border-color: black;
}
.buttonFileDownload:hover:after {
border-top-color: black;
animation-play-state: running;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -14px;
opacity: 1;
}
0.001% {
margin-top: -30px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
<div class="buttonFileDownload_wrapper">
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
Numbers description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Colours</u><br/>
Colours description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
Alphabet description</a>
</div>
</div>

"width" is based on content if you don't set the width of the element. So either make all the content the same or set a width on the element.

You need to set the width of the element, otherwise its based on it's content length.
For instance:
/*File download button*/
.buttonFileDownload_container {
text-align: center;
margin-bottom: 20px;
}
.buttonFileDownload {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
text-indent: 15px;
min-width:250px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* Download box shape */
.buttonFileDownload:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
width: 0;
height: 0;
margin-left: 6px;
margin-top: -140px;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonFileDownload:hover:before {
border-color: black;
}
.buttonFileDownload:hover:after {
border-top-color: black;
animation-play-state: running;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -14px;
opacity: 1;
}
0.001% {
margin-top: -30px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
Numbers description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Colours</u><br/>
Colours description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
Alphabet description</a>
</div>

You should add a width to your container and width 100% on your buttons:
/*File download button*/
.buttonFileDownload_container {
text-align: center;
margin-bottom: 20px;
width: 400px;
}
.buttonFileDownload {
width: 100%;
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
text-indent: 15px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* Download box shape */
.buttonFileDownload:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
width: 0;
height: 0;
margin-left: 6px;
margin-top: -140px;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonFileDownload:hover:before {
border-color: black;
}
.buttonFileDownload:hover:after {
border-top-color: black;
animation-play-state: running;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -14px;
opacity: 1;
}
0.001% {
margin-top: -30px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
Numbers description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Colours</u><br/>
Colours description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
Alphabet description</a>
</div>

Why don't you only use 1 container with a specific with, lets say 200px and make the buttons width 100%?
.buttonFileDownload_container {
width: 200px;
text-align: center;
margin-bottom: 20px;
}
.buttonFileDownload {
width: 100%;
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
text-indent: 15px;
}
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
Numbers description</a>
<a href="#" class="buttonFileDownload"><u>Colours</u><br/>
Colours description</a>
<a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
Onomatopoeia description</a>
<a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
Alphabet description</a>
</div>

/*File download button*/
.buttonFileDownload_container {
text-align: center;
margin-bottom: 20px;
}
.buttonFileDownload {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
text-indent: 15px;
width:260px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* Download box shape */
.buttonFileDownload:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
width: 0;
height: 0;
margin-left: 6px;
margin-top: -140px;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonFileDownload:hover:before {
border-color: black;
}
.buttonFileDownload:hover:after {
border-top-color: black;
animation-play-state: running;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -14px;
opacity: 1;
}
0.001% {
margin-top: -30px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
Numbers description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Colours</u><br/>
Colours description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
Alphabet description</a>
</div>

Make a container . Set its width to the width you want for each button to have. Make width of all div inside it to 100%
Make width of all a tag inside that div to 100%
Simple
/*File download button*/
#container {
width: 200px;
}
#container > div {
width:100%;
}
#container > div > a {
width:100%;
}
.buttonFileDownload_container {
text-align: center;
margin-bottom: 20px;
}
.buttonFileDownload {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
text-indent: 15px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* Download box shape */
.buttonFileDownload:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
width: 0;
height: 0;
margin-left: 6px;
margin-top: -140px;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonFileDownload:hover:before {
border-color: black;
}
.buttonFileDownload:hover:after {
border-top-color: black;
animation-play-state: running;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -14px;
opacity: 1;
}
0.001% {
margin-top: -30px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
<div id="container">
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
Numbers description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Colours</u><br/>
Colours description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
Alphabet description</a>
</div>
<div>

Centrally divided layout with animation (ONLY CSS)

IMPORTANT NOTE: only CSS/HTML, but not javascript (client does not allow it)
recently started the homepage of my site and wanted to make a centrally divided layout. Want to place the logo on the middle and one picture on top of it with a button to lead to the page, and one below it with the same function.
The animation should be a hover over the buttons (or defined area around it) as seen in the comp I did here:
GIF ANIMATION OF WHAT IS INTENDED
Similar to what is intended: https://jsfiddle.net/vja85zgL/
* {
margin: 0px;
padding: 0px;
}
#wrapper {
width: 80%;
height: 200px;
margin: auto;
}
#wrapper:hover #left:not(:hover) {
width: 25%;
transition: width 1s linear;
}
#wrapper:hover #right:not(:hover) {
width: 25%;
transition: width 1s linear;
}
#left {
width: 50%;
height: 100%;
background-color: lightblue;
display: inline-block;
position: relative;
transition: width 1s linear;
}
#innerleft {
position: absolute;
top: 100px;
width: calc(100% - 4px);
text-align: center;
border: 2px solid black;
}
#right {
width: 50%;
height: 100%;
background-color: lightgrey;
display: inline-block;
position: relative;
transition: width 1s linear;
}
#innerright {
position: absolute;
top: 100px;
width: calc(100% - 4px);
text-align: center;
border: 2px solid black;
}
#right:hover {
width: 75%;
transition: width 1s linear;
}
#left:hover {
width: 75%;
transition: width 1s linear;
}
<div id="wrapper">
<div id="left">
<div id="innerleft">
TITLE 1
</div>
</div><div id="right">
<div id="innerright">
TITLE 2
</div>
</div>
</div>
As seen, if hovering over the button, the background image behind the button shows itself "fully" (no rescaling), the logo (showed as B) moves down to 25% and the button not hovered scales down in size and font size and the image behind it slides under it where the user cannot see it properly (the user cannot see it by scrolling down).
If hovered on the other button the animation goes to the other button and image background.
There should be a delay of 2 seconds before the layout comes back to the starting position
DETAILS:
NO JAVASCRIPT ALLOWED, client doesn't allow usage
Should be responsive, so no hovering on touch devices
The image must not resize or loose proportion
Full screen layout
Mouse simulates user.
Animation should return to initial position after 3 seconds if mouse is not hovering
Initial position is 50%-50% (almost, due to the logo which is 150x150px)
End position should be 75%-25%.
Have been loosing my mind the last 2 days wondering how to do it as I am a beginner at CSS but didn't find a way yet.
Any help would be appreciated!
Available code of what has been done already to the design (total mess...):
#business-top {
height:50%
width:100%
}
#business-button {
height:3em;
width:12em;
background-color:#2B2A2A;
border: .2em solid #ff7600;
border-radius:1.8em;
margin:auto;
margin-top:3em;
}
#logo-separator {
text-align:center;
}
.separator {
display: block;
position: relative;
padding: 0;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #ff7600;
border-bottom: 1px solid #ff7600;
}
#logo {
margin:auto;
max-width:150px;
display:inline-block;
overflow:hidden
margin-top:-75px
}
#photography-bottom {
height:50%
width:100%
}
#photography-button {
height:3em;
width:12em;
background-color:#2B2A2A;
border: .2em solid #ff7600;
border-radius:1.8em;
margin:auto;
margin-top:3em;
}
h1 {
color:#ff7600;
text-align:center;
font-size:1.4em;
vertical-align:middle;
line-height:2.2em
}
<div id="business-top"
<a href="www.lluisballbe.smugmug.com">
<div id="business-button">
<h1>BUSINESS</h1>
</div>
</a>
</div>
<div id="logo-separator">
<div class="separator"></div>
<div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"</div>
</div>
<div id="photography-bottom"
<a href="www.lluisballbe.smugmug.com">
<div id="photography-button">
<h1>PHOTOGRAPHY</h1>
</div>
</a>
</div>

If you increase area of buttons once hovered , then you may have some results in CSS only:
trick comes from pointer-events and pseudo to increase hoverable area
/* tricky part */
div {
width: 100%;
pointer-events: none;
overflow: hidden;
transition: 1.5s;
}
div:hover {/* will be catch by child with pointer-events auto */
flex: 3;
}
div:first-child {
background: turquoise;
}
div a {
pointer-events: auto;/* if a is hovered, so is its parent */
position: relative;/* this could be for the div parent if you want to cover its area */
padding: 5px;
border-radius: 0.25em;
border: 3px solid;
box-shadow: 2px 2px 5px;
color: #222;
background: #aaa;
}
div a:hover:before {/* increase size of button only once hovered */
content: '';
position: absolute;
top: -200px;/* coordonates used to increase pseudo size from its relative position parent. tune to your needs */
bottom: -200px;
width: 100%;
}
/* layout */
body,
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
div {
flex: 1;
}
hr {
width: 100%;
height: 5px;
background: red;
text-align: center;
}
hr:before {
content: url(http://dummyimage.com/50x50);
display: inline-block;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin-top: -25px;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
<div>
button style
</div>
<hr/>
<div>
button style
</div>
From your update snippet :
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
h1 {
margin: 0;
}
a {
display: inline-block;
}
#business-top {
display: flex;
flex: 1;
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
}
#business-button {
height: 3em;
width: 12em;
background-color: #2B2A2A;
border: .2em solid #ff7600;
border-radius: 1.8em;
margin: auto;
}
#logo-separator {
text-align: center;
}
.separator {
display: block;
position: relative;
padding: 0;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
flex: 0;
border-top: 1px solid #ff7600;
border-bottom: 1px solid #ff7600;
}
#logo {
margin: auto;
max-width: 150px;
display: inline-block;
overflow: hidden;
margin: -75px;
position: absolute;
}
#photography-bottom {
display: flex;
flex: 1;
width: 100%;
align-items: center;
justify-content: center;
}
#photography-button {
height: 3em;
width: 12em;
background-color: #2B2A2A;
border: .2em solid #ff7600;
border-radius: 1.8em;
margin: auto;
}
h1 {
color: #ff7600;
text-align: center;
font-size: 1.4em;
vertical-align: middle;
line-height: 2.2em
}
#business-top,
#photography-bottom {
pointer-events: none;
position: relative;
z-index: 1;
transition: 1s;
/* min-height: 200px; you ma want this to avoid logo and button to overlap */
}
#business-top a,
#photography-bottom a {
pointer-events: auto;
}
#business-top:hover,
#photography-bottom:hover {
flex: 3;
}
#business-top a:hover:before,
#photography-bottom a:hover:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div id="business-top">
<a href="www.lluisballbe.smugmug.com">
<div id="business-button">
<h1>BUSINESS</h1>
</div>
</a>
</div>
<div id="logo-separator">
<div class="separator"></div>
<div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"> </div>
</div>
<div id="photography-bottom">
<a href="www.lluisballbe.smugmug.com">
<div id="photography-button">
<h1>PHOTOGRAPHY</h1>
</div>
</a>
</div>
http://codepen.io/anon/pen/qbvgga