The imagine above shows the browser in a smartphone size and thus the stretched space at the right caused by the overlapped divs in blue and red that I put below.
My main aim here was to get these divs to also shrink together with the screen but when I tried using flex properties, it disoriented whenever the page was reduced from desktop size.
Also, I tried percentages but placing the divs at a position after using percentage to size proved rather abortive.
The codes for the the image are found below.
Much help would be appreciated.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Acadera Renewed</title>
<link rel="stylesheet" href="Acadera Imp.css">
</head>
<body>
<div class="head_section">
<div id="top_layout">
<center>
<ul>
<li><a>Home</a></li>
<li><a>Pages</a></li>
<li> <a>Services</a></li>
<li><a>Gallary</a></li>
<li><a>Blog</a></li>
<li><a>Contact</a></li>
<li><a>About</a></li>
<li><input type="text" placeholder="Search"></input></li>
</ul>
</center>
</div>
<h1>WELCOME TO ACADERA</h1>
<p>We bring you the best there is to offer</p>
<center><input type="button" class= "btn" value="GET STARTED" ></input></center>
<div class="lower_section">
<center>
<ul class="two">
<li id="lower"><a href="" class="lower">Akan</a></li>
<li id="lower"><a href="" class="lower">Uwem</a></li>
<li id="lower"><a href="" class="lower">Itoro</a></li>
</ul>
</center>
</div>
</div>
<div class="contain">
<div class="box red"> </div>
<div class="box blue"></div>
</div>
</body>
</html>
CSS
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body{
background-color: white;
overflow: auto;
background-attachment: scroll;
min-width: 100%;
}
.head_section{
position: relative;
z-index: 1;
height: 32rem;
width: 100%;
background-color: black;
}
.head_section::before{
content: "";
z-index: -1;
position: absolute;
height: 32rem;
width: 100%;
color: black;
background-image: url(image/pexels-birgit-held-1046125.jpg);
background-position: center;
background-attachment: fixed;
background-size: cover;
opacity: 0.6;
}
/*
#top_layout{
padding:5px 0 5px 0;
text-align: center;
justify-content: center;
} */
ul{
margin: auto 0px;
padding: 0px;
list-style: none;
display: table;
width: 80%;
text-align: center;
/* background-color: red; */
}
.two{
margin: auto 0px;
padding-bottom: 40px;
list-style: none;
display: table;
width: 80%;
text-align: center;
top: 0px;
}
li{
display: table-cell;
position: relative;
padding: 5px 10px 5px 12px;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.15em;
display: inline-block;
position: relative;
/* background-color: blue; */
}
#lower{
display: table-cell;
padding: 10px 13px 40px 15px;
/* background-color: blue; */
text-transform: uppercase;
font-size: 15px;
letter-spacing: 0.15em;
position: relative ;
/* padding-top: 50px; */
position: 0;
}
a{
padding: 5px 10px;
color: white;
text-decoration: none;
top: 0px;
/* background-color: grey; */
margin-bottom: 20px;
}
a:hover{
color: yellow;
cursor: pointer;
}
a:after{
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: yellow;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0px;
}
a:hover:after{
width: 100%;
left: 0;
}
#media screen and (max-height:300px){
ul{
margin-top: 40px;
}
}
#lower:hover{
color: yellow;
cursor: pointer;
}
a .lower{
margin-left: 60px;
}
.lower:after{
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: rgb(249, 253, 6);
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0px;
}
.lower:hover:after{
width: 65%;
left: 18%;
}
#media screen and (max-height:300px){
.two{
margin-top: 40px;
}
}
h1{
text-align: center;
justify-content: center center;
font-size: 50px;
font-weight: 900;
padding: 150px 5px 5px 5px;
background:linear-gradient(to left, yellow, white);
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
}
p{
background-color: white;
text-align: center;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
}
.btn{
border: none;
background-color: darkgoldenrod;
color: white;
border-radius: 25px;
width: 110px;
height: 30px;
font-size: 12px;
font-weight: 600;
justify-content: center center;
margin: auto;
outline: none;
}
.btn:hover{
background-color: yellow;
color: rgb(15, 12, 12);
cursor: pointer;
}
.lower_section{
bottom: 0;
z-index: 1;
height: 100px;
width: 100%;
position: absolute;
/* padding-top: 40px;
padding-bottom: 40px; */
/* justify-content: center;
text-align: center center; */
}
.lower_section::before{
content: "";
z-index: -1;
bottom: 0;
height:120px;
width: 100%;
text-align: center;
position: absolute;
background-color: black;
filter: brightness(0%);
opacity:0.5;
align-items: center;
justify-content: center center;
}
/* .sub_lower{
margin-top: -15px;
position: relative;
width: 85%;
height: 50px;
color: yellow;
background-color: yellow;
content: "";
z-index: 1;
text-align: center;
justify-content: space-around;
} */
.sub_lower a{
display: inline-flex;
position: relative;
width: 20px;
height: 20px;
margin:2px;
padding-right:100px;
padding-left: 100px;
color: white;
background-color: grey;
text-align: center;
justify-content: center;
justify-items: center center;
}
.contain{
position: relative;
max-width: 300px;
/* height: fit-content; */
}
/* #media only screen and (min-device-width:400px)
{
.box{
max-width: 400px;
}
} */
.box{
display: flex;
flex-shrink: initial;
width: 300px;
height: 300px;
position: absolute;
}
.red{
z-index: 1;
background-color: red;
}
.blue{
z-index: 2;
background-color: blue;
top: 200px;
left: 200px;
}
ADDED:
#media screen and (max-width:576px){
.contain{
max-width: unset;
}
.blue{
left: unset;
right: 0;
}
}
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body{
background-color: white;
background-attachment: scroll;
min-width: 100%;
}
.head_section{
position: relative;
z-index: 1;
height: 32rem;
width: 100%;
background-color: black;
}
.head_section::before{
content: "";
z-index: -1;
position: absolute;
height: 32rem;
width: 100%;
color: black;
background-image: url(image/pexels-birgit-held-1046125.jpg);
background-position: center;
background-attachment: fixed;
background-size: cover;
opacity: 0.6;
}
/*
#top_layout{
padding:5px 0 5px 0;
text-align: center;
justify-content: center;
} */
ul{
margin: auto 0px;
padding: 0px;
list-style: none;
display: table;
width: 80%;
text-align: center;
/* background-color: red; */
}
.two{
margin: auto 0px;
padding-bottom: 40px;
list-style: none;
display: table;
width: 80%;
text-align: center;
top: 0px;
}
li{
display: table-cell;
position: relative;
padding: 5px 10px 5px 12px;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.15em;
display: inline-block;
position: relative;
/* background-color: blue; */
}
#lower{
display: table-cell;
padding: 10px 13px 40px 15px;
/* background-color: blue; */
text-transform: uppercase;
font-size: 15px;
letter-spacing: 0.15em;
position: relative ;
/* padding-top: 50px; */
position: 0;
}
a{
padding: 5px 10px;
color: white;
text-decoration: none;
top: 0px;
/* background-color: grey; */
margin-bottom: 20px;
}
a:hover{
color: yellow;
cursor: pointer;
}
a:after{
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: yellow;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0px;
}
a:hover:after{
width: 100%;
left: 0;
}
#media screen and (max-height:300px){
ul{
margin-top: 40px;
}
}
#lower:hover{
color: yellow;
cursor: pointer;
}
a .lower{
margin-left: 60px;
}
.lower:after{
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: rgb(249, 253, 6);
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0px;
}
.lower:hover:after{
width: 65%;
left: 18%;
}
#media screen and (max-height:300px){
.two{
margin-top: 40px;
}
}
h1{
text-align: center;
justify-content: center center;
font-size: 50px;
font-weight: 900;
padding: 150px 5px 5px 5px;
background:linear-gradient(to left, yellow, white);
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
}
p{
background-color: white;
text-align: center;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
}
.btn{
border: none;
background-color: darkgoldenrod;
color: white;
border-radius: 25px;
width: 110px;
height: 30px;
font-size: 12px;
font-weight: 600;
justify-content: center center;
margin: auto;
outline: none;
}
.btn:hover{
background-color: yellow;
color: rgb(15, 12, 12);
cursor: pointer;
}
.lower_section{
bottom: 0;
z-index: 1;
height: 100px;
width: 100%;
position: absolute;
/* padding-top: 40px;
padding-bottom: 40px; */
/* justify-content: center;
text-align: center center; */
}
.lower_section::before{
content: "";
z-index: -1;
bottom: 0;
height:120px;
width: 100%;
text-align: center;
position: absolute;
background-color: black;
filter: brightness(0%);
opacity:0.5;
align-items: center;
justify-content: center center;
}
/* .sub_lower{
margin-top: -15px;
position: relative;
width: 85%;
height: 50px;
color: yellow;
background-color: yellow;
content: "";
z-index: 1;
text-align: center;
justify-content: space-around;
} */
.sub_lower a{
display: inline-flex;
position: relative;
width: 20px;
height: 20px;
margin:2px;
padding-right:100px;
padding-left: 100px;
color: white;
background-color: grey;
text-align: center;
justify-content: center;
justify-items: center center;
}
.contain{
position: relative;
max-width: 300px;
/* height: fit-content; */
}
/* #media only screen and (min-device-width:400px)
{
.box{
max-width: 400px;
}
} */
.box{
display: flex;
flex-shrink: initial;
width: 300px;
height: 300px;
position: absolute;
}
.red{
z-index: 1;
background-color: red;
}
.blue{
z-index: 2;
background-color: blue;
top: 200px;
left: 200px;
}
#media screen and (max-width:576px){
.contain{
max-width: unset;
}
.blue{
left: unset;
right: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Acadera Renewed</title>
<link rel="stylesheet" href="Acadera Imp.css">
</head>
<body>
<div class="head_section">
<div id="top_layout">
<center>
<ul>
<li><a>Home</a></li>
<li><a>Pages</a></li>
<li> <a>Services</a></li>
<li><a>Gallary</a></li>
<li><a>Blog</a></li>
<li><a>Contact</a></li>
<li><a>About</a></li>
<li><input type="text" placeholder="Search"></input></li>
</ul>
</center>
</div>
<h1>WELCOME TO ACADERA</h1>
<p>We bring you the best there is to offer</p>
<center><input type="button" class= "btn" value="GET STARTED" ></input></center>
<div class="lower_section">
<center>
<ul class="two">
<li id="lower">Akan</li>
<li id="lower">Uwem</li>
<li id="lower">Itoro</li>
</ul>
</center>
</div>
</div>
<div class="contain">
<div class="box red"> </div>
<div class="box blue"></div>
</div>
</body>
</html>
Related
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
css single or multiple line vertical align
(8 answers)
Closed 10 months ago.
I've included the JSFiddle below.You have to shrink the size to about 670px to see the issue. What I am trying to fix are the flexbox items at the bottom of the page where the footer says "call xxx-xxx-xxxx". It is hard to see because the background image isn't loaded on the JSFiddle, but when the screen shrinks, the text "to schedule a consultation" pushes into the white background. Initially I used the line height trick, making it equal to the container height, so it vertically centers my first line of text but pushes the second line 100px down off the footer. What I am going for is to make both lines of text center vertically together instead of 100px apart.
https://jsfiddle.net/4m7pysqb/
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">
<title>DLGTreecare - Home</title>
<link rel="icon" href="images/favicon-16x16.png">
<link rel="Stylesheet" href="DLGtreecare.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome#1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#400;500&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="dlg.js"></script>
</head>
<body>
<div class="header">
<div class="heroimagecontainer">
<img class="heroimage" src="images/heroimage.jpg">
</div>
<div class="redbar">
</div>
<div class="orangebar">
</div>
</div>
<div class="wrapper">
<div class="logowrapperdiv">
<div class="logoarea"> <p class="dlg">DLG Tree Care </p> <img class="logo" src="images/logotransparent.png"> </div>
<p class="undertree">Professional Tree Services</p>
</div>
<!-- https://drive.google.com/file/d/1YcJmJO-7mKo1er338P4AQ9Kn6HohaJsy/preview
https://drive.google.com/uc?export=view&id=1YcJmJO-7mKo1er338P4AQ9Kn6HohaJsy
-->
<div class= maincontent>
<p class="intro">PROVIDING THE "518" WITH ALL YOUR TREE CARE NEEDS!</p>
<iframe class="videointro" src="https://drive.google.com/file/d/1YcJmJO-7mKo1er338P4AQ9Kn6HohaJsy/preview" allow="autoplay"></iframe>
<div> </div>
<div class="phonebar"> Call 518-407-9500 for a free estimate!</div>
<div class="messagebuttontext"> Or message us on
<a class="messagebutton" href="https://m.me/DLGTreeCare">
<span style=color:orange>Facebook!</span>
<i class="fa fa-facebook-messenger fa-1x" aria-hidden="true"></i>
</a></div>
<div class="clearfix"></div>
</div>
<h2>Services</h2>
<h6>(Click images to see "before and after")</h6>
<div class="services">
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Tree Removal</p><p class="servicedescription ">Removing dead or unwanted trees is sometimes a must, using the proper skills this can be done safely</p>
<img class="toggleon" src = "images/beforeafter/treeremovalflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Tree Trimming</p><p class="servicedescription ">Having your trees trimmed properly is important and can help maintain healthy future growth</p>
<img class="toggleon" src = "images/beforeafter/treetrimmingflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Stump Grinding</p><p class="servicedescription">By grinding the stump of the tree we are able to totally remove the stump in order to grow grass or replant something new</p>
<img class="toggleon" src = "images/beforeafter/stumpgrindingflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Hedge Trimming</p><p class="servicedescription ">From big to small, we have the tools and expertise for all your needs</p>
<img class="toggleon" src = "images/beforeafter/hedgetrimmingflip300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Fruit Tree Pruning</p><p class="servicedescription">From big to small, we have the tools and expertise for all your needs</p>
<img class="toggleon" src = "images/beforeafter/fruittreeflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Wood & Brush Removal</p><p class="servicedescription">From big to small, we have the tools and expertise for all your needs</p>
<img class="toggleon" src = "images/beforeafter/treeremovalflip300x400.png">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Lot Clearing</p><p class="servicedescription">We can turn any wooded lot into an open usable space for the building of Homes, Businesses, etc.</p>
<img class="toggleon" src = "images/beforeafter/lotclearingflip300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Cabling & Bracing</p><p class="servicedescription">Large branches and/or weak crotches sometimes can split under their own weight, cabling can keep this from happening without damaging the tree</p>
<img class="toggleon" src = "images/beforeafter/cablingbracingflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Storm Damage</p><p class="servicedescription">We're available 24/7 for any tree related emergencies</p>
<img class="toggleon" src = "images/beforeafter/stormdamageflip_300x400.jpg">
</div>
</div>
<h2>See more of our work</h2>
<div class="gallery">
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized95FB95IMG951628801998990.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/FB95IMG951628860144118.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/FB_IMG_1628860108712.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized_20210319_094919.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized_20210325_104241.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized_20210322_131140.jpg"></div>
</div>
<div class="flex-container">
<div class="flex-item">Serving the 518 area</div><div class="flex-item">Call 518-407-9500 to schedule a consultation.</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
/* base red */
--base-red: 10;
/* base yellow */
--base-yellow: 60;
/* base green */
--base-green: 99;
/*base blue*/
--base-blue: 200;
/* colors */
--brown-normal: hsla(17, 42%, 41%, 100%);
--brown-normal: hsla(17, 42%, 41%, 100%);
--red-light: hsla(var(--base-red), 100%, 75%, 100%);
--red-normal: hsla(var(--base-red), 100%, 45%, 100%);
--red-darker: hsla(var(--base-red), 100%, 35%, 100%);
--yellow-light: hsla(var(--base-yellow), 50%, 75%, 100%);
--yellow-normal: hsla(var(--base-yellow), 50%, 50%, 100%);
--yellow-darker: hsla(var(--base-yellow), 50%, 35%, 100%);
--green-light: hsla(var(--base-green), 50%, 75%, 100%);
--green-normal: hsla(var(--base-green), 50%, 50%, 100%);
--green-darker: hsla(var(--base-green), 50%, 35%, 100%);
--blue-light: hsla(var(--base-blue), 50%, 75%, 100%);
--blue-normal: hsla(var(--base-blue), 50%, 50%, 100%);
--blue-darker: hsla(var(--base-blue), 50%, 35%, 100%);
}
#font-face {
font-family: TreeHuggerMedium-lEqZ;
src: url(TreeHuggerMedium-lEqZ.ttf);
}
body {
min-height: 100vh;
max-height: 195.625rem;
background-image: url("images/stump.jpg");
background-color: white;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
margin: auto;
}
div.header {
min-width: 320px;
text-align: center;
height: 300px;
}
div.heroimagecontainer {
height: 210px;
width: inherit;
}
img.heroimage {
height: 100%;
width: 100%;
object-fit: cover;
}
div.redbar {
width: inherit;
background-color: var(--red-normal);
height: 20px;
}
div.orangebar {
width: inherit;
background-color: orange;
height: 70px;
}
div.logowrapperdiv {
min-width: 320px;
max-width: 1000px;
position: relative;
height: auto;
margin: auto;
top: -50px;
}
div.logoarea {
border-bottom-style: solid;
border-color: white;
border-width: 5px;
min-width: 320px;
max-width: 525px;
margin: auto;
height: 92px;
color: white;
position: relative;
}
img.logo {
max-width: 36.5%;
top: -188px;
display: block;
left: 17%;
position: relative;
overflow: visible;
z-index: 105;
object-fit: contain;
}
p.dlg {
font-family: Roboto Slab;
position: relative;
max-width: 525px;
min-width: 320px;
font-size: 3.9em;
font-weight: 500;
text-align: center;
white-space: pre;
top: 20px;
}
.undertree {
font-family: Roboto Slab;
font-weight: 500;
max-width: 525px;
color: white;
text-align: center;
height: 50px;
margin: auto;
margin-top: 0;
padding-bottom: 40px;
letter-spacing: 0.10em;
font-size: 2.16em;
position: relative;
top: 0px;
}
.wrapper {
margin: auto;
min-width: 320px;
max-width: 1000px;
background-image: linear-gradient(var(--brown-normal), orange);
padding-top: 50px;
border-radius: 0px 0px 5px 5px;
}
.maincontent {
min-width: 320px;
text-align: center;
height: auto;
color: white;
position: relative;
margin-bottom: 25px;
padding: 15px;
}
.intro {
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.7em;
color: white;
text-align: center;
padding-bottom: 25px;
min-width: 300px;
max-width: 1000px;
}
.videointro {
min-width: 300px;
min-height: 225px;
position: relative;
display: block;
border-style: solid;
border-width: 2px;
border-color: white;
border-radius: 5px;
margin: auto;
}
.phonebar {
font-family: Roboto Slab;
font-weight: 400;
text-align: center;
position: relative;
float: left;
min-width: 295px;
max-width: 550px;
margin: 25px 0px 0px 20px;
font-size: 1.7em;
border: 1px solid white;
padding: 5px;
border-radius: 15px;
}
.phonebar a {
color: orange;
text-decoration: none;
}
.messagebutton {
display: inline-block;
text-align: center;
color: orange;
position: relative;
margin: auto;
text-decoration: none;
}
.messagebuttontext {
min-width: 295px;
max-width: 550px;
color: white;
position: relative;
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.7em;
display: block;
float: right;
border: 1px solid white;
border-radius: 15px;
margin: 25px 20px 0px 0px;
padding: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
/*code for photo galley */
h2 {
font-family: Roboto Slab;
font-weight: 400;
text-align: center;
font-size: 5em;
color: white;
margin: 50px auto;
position: relative;
}
h6 {
font-size: 2em;
font-family: Roboto Slab;
font-weight: 400;
text-align: center;
color: white;
position: relative;
margin: 10px auto;
}
button {
appearance: button;
background-color: white;
color: red;
cursor: pointer;
font-weight: 500;
border-color: white;
z-index: 101;
top: 30px;
left: 0px;
position: relative;
border-radius: 5px;
height: 25px;
width: 25px;
margin: 0 auto;
border-width: 1px;
transition: transform .3s linear;
}
.buttonrotate {
transform: rotate(90deg);
}
.services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
width: auto;
height: auto;
margin: auto;
}
.servicenode {
position: relative;
width: 300px;
margin: auto;
margin-bottom: 25px;
}
.servicenode img {
display: block;
margin-left: auto;
margin-right: auto;
width: 300px;
height: 200px;
object-fit: none;
border: 1px solid red;
border-radius: 8px;
transition: 0.1s object-position ease;
position: relative;
}
.servicetitle {
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.4em;
vertical-align:top;
display:inline-block;
color: white;
width: 100%;
position: relative;
text-align: center;
margin-bottom: 10px;
}
.servicedescription {
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.2em;
color: white;
z-index: 100;
transition-property: opacity, border-radius;
transition-duration: .4s;
transition-timing-function: linear;
opacity: 0;
margin: auto;
width: 298px;
position: absolute;
display: block;
background: rgba(0,0,0, 0.6);
left: 0;
right: 0;
border-radius: 8px 8px 8px 8px;
text-align: center;
user-select: none; /* supported by Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
pointer-events: none;
}
.servicedescriptionshow {
position: absolute;
display: block;
width: 298px;
left: 0;
right: 0;
border-radius: 8px 8px 0px 0px;
text-align: center;
opacity: 1;
}
.toggleon {
object-position: top;
cursor: pointer;
}
.toggleoff {
object-position: bottom;
cursor: pointer;
}
/* Gallery stuff */
.gallery {
display: grid;
grid-template-columns: repeat(2, minmax(320px, auto));
width: auto;
height: auto;
margin: auto;
}
.gallerynode {
color: white;
text-align: center;
position: relative;
margin: auto;
border-width: 1px;
border-style: solid;
border-color: white;
height: 490px;
}
.galleryimg {
object-fit: cover;
width: 490px;
height: 490px;
}
/* footer stuff */
.footer {
height: 5vh;
width: 100%;
background-color: white;
position: relative;
margin-top: 100px;
bottom: 0;
border-style: solid;
border-color: red;
border-width: 3px;
border-radius: 0px 0px 5px 5px;
}
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 10px;
}
.flex-item {
-ms-flex-preferred-size: 33%;
flex-basis: 50%;
background-color: orange;
padding: 5px;
height: 100px;
color: white;
font-weight: bold;
font-size: 1.5em;
text-align: center;
border: 1px solid #333;
box-sizing: border-box;
line-height: 100px;
}
.flex-item a {
color: white;
}
/* media queries */
#media screen and (max-width: 1000px) {
div.maincontent {
height: auto;
}
.messagebuttontext {
float: none;
margin: 20px auto;
}
.phonebar {
float: none;
margin: 20px auto;
}
.gallery {
grid-template-columns: repeat(1, minmax(320px, auto));
}
.flex-item {
font-size: 1em;
}
}
#media screen and (max-width: 545px) {
div.logoarea {
width: 420px;
}
p.dlg {
font-size: 3em;
top: 35px;
}
img.logo {
left: 17%;
top: -130px;
}
.undertree {
font-size: 1.6em;
}
}
#media screen and (max-width: 500px) {
.gallerynode {
height: 320px;
}
.galleryimg {
object-fit: cover;
width: 320px;
height: 320px;
margin: auto;
}
}
#media screen and (max-width: 485px) {
div.logoarea {
width: 320px;
}
img.logo {
top: -86px;
left: 16%
}
p.dlg {
font-size: 2.6em;
top: 42px;
}
}
#media screen and (max-width: 354px) {
p.dlg {
font-size: 2.6em;
top: 42px;
}
.undertree {
font-size: 1.39em;
}
img.logo {
top: -86px;
}
.maincontent {
padding: 8px;
}
}
JS
$(document).ready(function(){
$(".servicenode > img").click(function(){
$(this).toggleClass('toggleon toggleoff');
});
$(".mybutton").click(function() {
$(this)
.siblings(".servicedescription")
.toggleClass('servicedescriptionshow');
$(this).toggleClass('buttonrotate');
});
});
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));
}
I'm trying to create a hover effect where words appear over the hero section when the mouse hovers over it. If you uncomment the code at the bottom of the CSS file you will see that the code works just fine. The only problem is the backround picture dispears and turns completely white. I don't know how to fix it.
Uncomment the code all the way at the bottom of the CSS to see what I'm talking about
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh Sans", sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 555;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
}
#navbar__logo {
background-color: #ff8d02;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
#trade {
background-color: #0045f2;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
position: relative;
font-size: 13px;
bottom: 6px;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
background: linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
color: #fff;
transition: all 0.3s ease;
}
.navbar__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
border-radius: 4px;
transition: all 1s ease;
}
.navbar__links:hover {
color: #ff7802;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
/* Hero Section */
.hero {
padding: 50px 0;
background-image: url(./images/brooke-cagle-g1Kr4Ozfoac-unsplash.jpg);
background-size: cover;
overflow: hidden;
position: relative;
background-position: top;
display: flex;
flex-direction: column;
}
.hero__heading {
color: #fff;
font-size: 100px;
margin-left: 30px;
text-shadow: 2px 2px 8px #000000c4;
}
.orange {
color: rgb(255, 89, 0);
}
.main__btn {
margin: 0 auto;
margin-top: 3rem;
}
.main__btn a {
color: #fff;
text-decoration: none;
z-index: 2;
position: relative;
padding: 10px 20px;
font-size: 1.8rem;
}
.button__color {
background: -webkit-linear-gradient(to right, #1e5dff, rgb(255, 89, 0) );
background: linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
}
/*
.hero_two {
position: relative;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
opacity: 0;
transition: all 0.25s ease;
}
.hero_two > * {
transform: translateY(20px);
transition: all 0.25s ease;
}
.hero_two:hover {
opacity: 1;
}
.hero_two:hover {
transform: translateY(0);
} */
<!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">
<title>Pigeon</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
Pigeon<small id="trade">TRADE</small>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
About
</li>
<li class="navbar__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<div class="hero_two hero" id="home">
<div class="hero__container">
<div class="image__overlay">
<div class="hero__content">
<h1 class="hero__heading">Get started <br>making your <span class="orange">online <br>business</span> today!</h1>
</div>
</div>
</div>
<div class="main__btn">
<button class="button button__color">Explore</button>
</div>
</div>
```
The problem is that you are overwriting the background-image property value from .hero when you add background: rgba(0, 0, 0, 0.6); for .hero_two
Use instead background-color: rgba(0, 0, 0, 0.6);
The property background is a shorthand for all background properties including background-image.
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.
Read more here -> background property
See below
EDIT after comments:
You are using two classes on the SAME element. If you write some styles for hero_two it will overwrite the styles for hero. because you are selecting the same element.
If I understand correctly, you want to show an 'overlay' and make the text appear when hovering. You can use a pseudo-element for that ( :after in this case) and some tweaks in your css styling. ( Remove the hero_two classname because it's useless )
/* Hero Section */
.hero {
padding: 50px 0;
background-image: url("https://via.placeholder.com/150");
background-size: cover;
overflow: hidden;
position: relative;
background-position: top;
display: flex;
flex-direction: column;
}
.hero__heading {
color: #fff;
font-size: 100px;
margin-left: 30px;
text-shadow: 2px 2px 8px #000000c4;
}
.orange {
color: rgb(255, 89, 0);
}
.main__btn {
margin: 0 auto;
margin-top: 3rem;
}
.main__btn a {
color: #fff;
text-decoration: none;
z-index: 2;
position: relative;
padding: 10px 20px;
font-size: 1.8rem;
}
.button__color {
background: -webkit-linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
background: linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
}
.hero:after {
content: "";
position: absolute;
background-color: rgba(255, 255, 255, 0.6);
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
.hero * {
transform: translateY(20px);
transition: all 0.25s ease;
opacity: 0;
}
.hero:hover * {
transform: translateY(0px);
color: #ffffff;
opacity: 1;
}
.hero:hover:after {
opacity: 1;
}
<div class="hero_two hero" id="home">
<div class="hero__container">
<div class="image__overlay">
<div class="hero__content">
<h1 class="hero__heading">Get started <br>making your <span class="orange">online <br>business</span> today!</h1>
</div>
</div>
</div>
<div class="main__btn">
<button class="button button__color">Explore</button>
</div>
</div>
Next time please share only relevant code ( eg. navbar has nothing to do with this ) and take the time to make a code snippet like the one above that reproduces your problem. ( For images, please use a placeholder as we cannot use your own images 'cause we don't have them )
happy coding.
Demo site here.
When it is in large screen, apply button has too much space. I want to make it flex: space-around
When it starts to shrink, each div is not aligned evenly. (Again, flex: space-round will be nice)
full sass:
body {
font-family: 'Lato', sans-serif;
}
.errors {
color: red;
font-size: 70%;
}
.mainContainer {
background-color: #EAEDF1;
}
.banner {
position: relative;
color: white;
}
.banner .topLeft {
position: absolute;
top: 8px;
left: 16px;
font-size: 1.5vw;
}
.banner .centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4.5vw;
}
.banner img {
width: 100%;
height: 400px;
object-fit: cover;
}
.banner i {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
position: absolute;
bottom: 10%;
left: 50%;
cursor: pointer;
}
.banner .arrowDown {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.bodyContainer {
padding: 20px 10px 10px 10px;
}
.bodySelf {
background-color: white;
}
.filter {
display: flex;
flex-wrap: wrap;
background-color: #f9fafa;
padding: 20px;
}
.filter .inputComponent {
min-width: 150px;
max-width: 200px;
}
.filter .inputComponent input {
width: 100%;
height: 27px;
}
.filter .dorpdownComponent {
min-width: 110px;
max-width: 200px;
}
.filter .applyButtonContainer {
width: 100px;
}
.filter .keywordMain {
flex-grow: 3;
padding-right: 20px;
padding-bottom: 10px;
}
.filter .launchpadMain {
flex-grow: 4;
padding-right: 20px;
padding-bottom: 10px;
}
.filter .minYearMain {
flex-grow: 2;
padding-right: 20px;
padding-bottom: 10px;
}
.filter .maxYearMain {
flex-grow: 2;
padding-right: 20px;
}
.filter .applyButtonMain {
flex-grow: 1;
padding-right: 20px;
}
.filter select {
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
-webkit-border-radius: 0;
border-radius: 0;
appearance:none;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 3px;
border: 1px solid #ccc;
padding: 8px;
width: 100%;
}
.filter select option {
background-color: white;
color: white;
}
.filter .applyButton {
height: 30px;
width: 100px;
font-weight: 600;
color: white;
background-color: #2dbaba;
}
In your css
.filter{
justify-content: space-around;
}
.filter .applyButtonMain {
//flex-grow: 1; //remove it
padding-right: 20px;
}
.filter .applyButtonContainer {
//width: 100px; //remove this too
}
Not final answer, may need edit base on OP reply
.filter > div {
flex-basis: 0;
flex-grow: 1;
}
Demo (run and check in full page mode):
.filter select {
-moz-appearance: none;
/* Firefox */
-webkit-appearance: none;
/* Safari and Chrome */
-webkit-border-radius: 0;
border-radius: 0;
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 3px;
border: 1px solid #ccc;
padding: 8px;
width: 100%;
}
.filter select option {
background-color: white;
color: white;
}
.filter {
display: flex;
flex-wrap: wrap;
background-color: #f9fafa;
padding: 20px 10px;
/* one */
}
.filter > div {
flex-basis: 0;
flex-grow: 1;
padding: 0 10px 10px 10px;
min-width: 110px;
}
.filter .inputComponent input {
width: 100%;
height: 27px;
}
.filter .applyButton {
height: 30px;
width: 100%;
font-weight: 600;
color: white;
background-color: #2dbaba;
}
<div class="filter">
<div class="inputComponent keywordMain">
<div class="labelText">Keywords</div>
<input placeholder="eg Falcon">
</div>
<div class="dorpdownComponent launchpadMain">
<div class="labelText">Launch Pad</div>
<select>
<option value="">Any</option>
<option value="kwajalein_atoll">Kwajalein Atoll</option>
<option value="ccafs_slc_40">Cape Canaveral Air Force Station Space Launch Complex 40</option>
<option value="stls">SpaceX South Texas Launch Site</option>
</select>
</div>
<div class="dorpdownComponent minYearMain">
<div class="labelText">Min Year</div>
<select>
<option value="">Any</option>
<option value="2017">2017</option>
</select>
</div>
<div class="dorpdownComponent maxYearMain">
<div class="labelText">Max Year</div>
<select>
<option value="">Any</option>
<option value="2006">2006</option>
</select>
</div>
<div class="applyButtonContainer applyButtonMain">
<div> </div>
<button class="applyButton">Apply</button>
</div>
</div>
I have a particular page on my website (http://thefloodplains.com/TheFloodSharkMain.html) whereby I have 6 DIV boxes that I want to be clickable to take users to other areas of the site. So far I've been able to wrap the header text I have within the DIVs with links. However, I have been unable to wrap the DIVs, themselves, in links. Every time I put an a href="..." around the DIV boxes, nothing happens. This might have to do with the fact that images have been overlain on top of the DIVs, but I'm not exactly sure.
Additionally, since I want the DIVs to have links and be clickable, I would like them to fade a certain color (with translucent opacity) when hovered over. Basically, I want the boxes on this page to act the exact same as they do on my front page: .
What makes this hard is that I'm positioning it in a different area of the page, and the original code doesn't seem to work in this case. I've tried most everything I can think of without having to entirely retry and tear down all the code I've been using. As it stands, I cannot get the hover actions or links around the DIVs to react at all.
The code I have been working with to fade each DIV to a specified color (in this case an orange-yellow shade) looks like this:
.block:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.block:hover:after {
opacity: .5;
}
Here's the overall CSS I'm working with
h2 {
padding-bottom: 20px;
font-size: 40px;
margin-bottom: 10px;
color:#FF8B6F;
text-decoration-color: #FF8B6F;
}
h4.shoe {
font-size:36px;
font-style: bold;
text-align:center;
font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
text-decoration-color: #00A5D1;
color: #00A5D1;
}
a {
border-bottom: dashed 1px;
text-decoration-color: #FF8B6F;
border-bottom: 1px dashed #FF8B6F;
text-decoration: none;
}
u {
border-bottom: 1px dashed #00A5D1;
text-decoration: none;
}
u:hover {
Color: #FF8B6F;
border-bottom: solid 2px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
max-width: 960px;
width: 100%;
padding-top: 15px;
}
.block {
flex: 0 0 33.1%;
height: 300px;
background-color: #00A5D1;
background-position: center center; /* center the image in the div */
background-size: cover; /* cover the entire div */
background-repeat: no-repeat;
background-size: 100%;
border: 1px solid #FF8B6F;
/* align-items: center;
justify-content: center; */
text-align: center;
}
/* .block:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.block:hover:after {
opacity: .5;
} */
x {
margin: auto;
text-align: center;
font-size: 85px;
font-family: 'Gentium Basic', Verdana, 'Slabo 27px', 'Vollkorn', serif;
padding: 6px;
margin: 6px;
text-decoration-color:#00A5D1;
color:#00A5D1;
border-bottom: 2px solid #FFE097;
}
hr {
border: none;
height: 2px;
color: black;
background-color: #FFE097;
margin-bottom: 33px;
}
p {
color: black;
text-align: left;
width: 100%;
max-width: 90%;
margin-left: auto;
margin-right: auto;
font-family: 'Buenard', Garamond, 'EB Garamond';
}
hr.two {
margin-bottom: 16px;
}
ul {
padding-bottom: 0px;
margin-bottom: 6px;
padding-top: 12px;
}
br {
padding-bottom: 6px;
}
li.pad {
padding-bottom: 6px;
margin-bottom: 6px;
}
div {
color: #00A5D1;
padding-top: 14px;
}
df {
text-decoration: inherit;
text-decoration: none;
}
.Row
{
display: table;
width: 100%; /*Optional*/
max-width: 960px;
table-layout: fixed; /* Optional*/
border-spacing: 10px; /* Optional */
margin-left: auto;
margin-right: auto;
}
a.none {
text-decoration: none;
}
.blockx {
background-image: url('DownloadMusic2.png');
}
.blockx:hover {
background-color: #FFE097;
}
.blockx:after {
display: block;
background: #FFE097;
opacity: 0;
}
.blockx:hover:after {
opacity: .5;
}
.blocky {
background-image: url('EPKIcon2.png');
background-position: center center;
}
.blocky:hover {
background-color: #FFE097;
}
.blockz {
background-image: url('StreamAudio.png');
}
.blocka {
background-image: url('VideoStream.png');
background-position: center center;
}
.blockb {
background-image: url('ContactIcon.png');
}
.blockc {
background-image: url('Handshake2.png');
}
And here is the HTML of the web page:
<body>
<a class="btn" href="http://thefloodplains.com/"></a>
<center><x>The FloodShark</x></center>
<br>
<center><df href="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/02/FloodShark-cropped-William-Luo.jpg" style="text-decoration: none;"><img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/02/FloodShark-cropped-William-Luo-1024x585.jpg" style="margin-top: 0px; margin-bottom: 2px; padding-bottom: 6px" alt="floodshark-cropped-william-luo" width="856" height="480" class="alignnone size-large wp-image-228" padding-bottom="2px;" /></img></df></center>
<hr>
<p><b>The FloodShark:</b> A Florida-based producer/composer turned carnivorous, fresh-water tolerant, cold-blooded, cartilaginous predator surfing the sonic waves with an eclectic musical style</p>
<center><div class="container flex-container">
<div class="block blockx"><a href="TheFloodSharkDownloads.html"><h4 class='shoe'><u>Downloads</u></h4></div></a>
<div class="block blocky"><a href="EPK.html"><h4 class='shoe'><u>EPK</u></h4></div></a>
<div class="block blockz"><h4 class='shoe'><u>Stream Audio</u></h4></div>
<div class="block blocka"><h4 class='shoe'><u>Stream Video</u></h4></div>
<div class="block blockb"><h4 class='shoe'><u>Contact</u></h4></div>
<div class="block blockc"><h4 class='shoe'><u>Contribute / Support</u></h4></div>
</div></center>
<br>
</body>
So basically I want to be able to use the boxes as is, but I would like to make it so that the entire DIV box for each box is a link, as well as fades to a shade of a specified color when hovered over. Thank you in advance for any and all advice!
Try this html markup. Donot try to add anchors inside anchor ! it doesn't work.
Also you have missed styles for hover on blockz, blocka, blockb and blockc. That is why no hover effect is shoeing on them.
See updated fiddle https://jsfiddle.net/owvs550p/4/
<a class="btn" href="http://thefloodplains.com/"></a>
<center>
<x>The FloodShark</x>
</center>
<br>
<center>
<df href="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/02/FloodShark-cropped-William-Luo.jpg" style="text-decoration: none;"><img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/02/FloodShark-cropped-William-Luo-1024x585.jpg" style="width:100%;margin-top: 0px; margin-bottom: 2px; padding-bottom: 6px" alt="floodshark-cropped-william-luo" width="856" height="480" class="alignnone size-large wp-image-228" padding-bottom="2px;" /></img>
</df>
</center>
<hr>
<p><b>The FloodShark:</b> A Florida-based producer/composer turned carnivorous, fresh-water tolerant, cold-blooded, cartilaginous predator surfing the sonic waves with an eclectic musical style</p>
<center>
<div class="container flex-container">
<a href="TheFloodSharkDownloads.html" class="block" title="Free downloads of The FloodShark's discography">
<div class="block blockx">
<h4 class='shoe'><u>Downloads</u></h4>
</div>
</a>
<a href="EPK.html" class="block" title="EPK">
<div class="block blocky">
<h4 class='shoe'><u>EPK</u></h4>
</div>
</a>
<a href="" class="block">
<div class="block blockz">
<h4 class='shoe'><u>Stream Audio</u></h4>
</div>
</a>
<a class="block" href="https://www.youtube.com/channel/UCrcvj6Q-V4S-xad_Y_gPTFw/videos">
<div class="block blocka">
<h4 class='shoe'><u>Stream Video</u></h4>
</div>
</a>
<a href="Contact-Social.html" class="block">
<div class="block blockb">
<h4 class='shoe'><u>Contact</u></h4>
</div>
</a>
<a href="Contribute-Support.html" class="block">
<div class="block blockc">
<h4 class='shoe'><u>Contribute / Support</u></h4>
</div>
</a>
</div>
</center>
<br>
CSS
h2 {
padding-bottom: 20px;
font-size: 40px;
margin-bottom: 10px;
color:#FF8B6F;
text-decoration-color: #FF8B6F;
}
h4.shoe {
font-size:36px;
font-style: bold;
text-align:center;
font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
text-decoration-color: #00A5D1;
color: #00A5D1;
}
a {
border-bottom: dashed 1px;
text-decoration-color: #FF8B6F;
border-bottom: 1px dashed #FF8B6F;
text-decoration: none;
}
u {
border-bottom: 1px dashed #00A5D1;
text-decoration: none;
}
u:hover {
Color: #FF8B6F;
border-bottom: solid 2px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
max-width: 960px;
width: 100%;
padding-top: 15px;
}
.block {
flex: 0 0 33.1%;
height: 300px;
background-color: #9100ff;
background-position: center center; /* center the image in the div */
background-size: cover; /* cover the entire div */
background-repeat: no-repeat;
background-size: 100%;
border: 1px solid #FF8B6F;
/* align-items: center;
justify-content: center; */
text-align: center;
}
/* .block:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.block:hover:after {
opacity: .5;
} */
x {
margin: auto;
text-align: center;
font-size: 85px;
font-family: 'Gentium Basic', Verdana, 'Slabo 27px', 'Vollkorn', serif;
padding: 6px;
margin: 6px;
text-decoration-color:#00A5D1;
color:#00A5D1;
border-bottom: 2px solid #FFE097;
}
hr {
border: none;
height: 2px;
color: black;
background-color: #FFE097;
margin-bottom: 33px;
}
p {
color: black;
text-align: left;
width: 100%;
max-width: 90%;
margin-left: auto;
margin-right: auto;
font-family: 'Buenard', Garamond, 'EB Garamond';
}
hr.two {
margin-bottom: 16px;
}
ul {
padding-bottom: 0px;
margin-bottom: 6px;
padding-top: 12px;
}
br {
padding-bottom: 6px;
}
li.pad {
padding-bottom: 6px;
margin-bottom: 6px;
}
div {
color: #00A5D1;
padding-top: 14px;
}
df {
text-decoration: inherit;
text-decoration: none;
}
.Row
{
display: table;
width: 100%; /*Optional*/
max-width: 960px;
table-layout: fixed; /* Optional*/
border-spacing: 10px; /* Optional */
margin-left: auto;
margin-right: auto;
}
a.none {
text-decoration: none;
}
.blockx {
background-image: url('DownloadMusic2.png');
}
.blockx:hover {
background-color: #FFE097;
}
.blockx:after {
display: block;
background: #FFE097;
opacity: 0;
}
.blockx:hover:after {
opacity: .5;
}
.blocky {
background-image: url('EPKIcon2.png');
background-position: center center;
}
.blocky:hover {
background-color: #FFE097;
}
.blockz {
background-image: url('StreamAudio.png');
}
.blocka {
background-image: url('VideoStream.png');
background-position: center center;
}
.blockb {
background-image: url('ContactIcon.png');
}
.blockc {
background-image: url('Handshake2.png');
}
EDIT
Add the following styles for the hover effect to work properly
.block {
position: relative;
}
.block:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.block:hover:after {
opacity: 0.5;
}