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');
});
});
Related
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>
EDITED JSFIDDLE
The goal to display a transition upward height when the button is hovered, but this line of CSS .btn-position:hover ~ .bg-transit { height: 430px !important;} seems it expands downwards instead upward. Is there a way to transition UPWARD?
I dont want to add any JS to it.
HTML
<div class="career-wrapper-positions">
<div class="section-positions">
<div class="position-wrap">
<div class="position-box" id="video_interpreter">
<div class="employees"><img src="http://staging.svrs.com/assets/images/careers2018/position-lady1-1.png" alt="SVRS | Video Interpreter positions"></div>
<div class="position-tited-top-bg"></div>
<div class="position-box-info">
<div class="position-header"><h5 class="h5-careers18">CUSTOMER SERVICES</h5></div>
<div class="position-subheader" id="subheader1">positions</div>
<div class="position-p">Individually, passionate about the work. Collectively, the largest sales workforce in the world.</div>
<div class="btn-position">
<button onclick="location.href='#'" class="position-btn" id="btn1-position">Apply now</button></div>
<div class="bg-transit"></div>
</div>
</div>
</div>
</div>
CSS
.section-positions { margin: 0 auto; width: 100%; }
.position-header { text-align: center; }
.position-header p { margin-top: 0; }
.position-wrap { height: 525px; position: absolute; z-index: 10; width: 100%; text-align: center; display: flex; margin-top: 175px; }
.position-box { width: 209px !important; height: 330px; display: block; margin: 20px; background-color: #231f20; z-index: 2;}
.position-tited-top-bg { width: 209px !important; height: 20px; background-color: #231f20; -webkit-transform: skew(0deg, 2deg); transform: skew(0deg, 2deg); margin-top: -15px; position: relative;z-index: -2; }
.position-header { height: 15px;color:#ffbb11; font-size: 22px; font-family:'Source Sans Pro', sans-serif; font-weight: 400; }
.position-subheader { color: #ffbb11; margin-top: 10px; font-family:'Source Sans Pro', sans-serif;}
.position-p { color: #fff; padding: 0 10px 0 10px; font-family:'Source Sans Pro', sans-serif; font-size: 14px; margin-top: 10px; line-height: 20px; }
.position-btn { background-color: #ffbb11; width: 150px; height: 41px; border: none; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; margin-top: 50px; }
.position-box-info { padding-top: 10px; }
/* this is the button to trigger a new height size transition of the background box */
.bg-transit { width: 209px !important; height: 338px; display: block; background-color: #ff0000; z-index: -1; position: relative; top: -280px; transition-property: height; transition-duration: 0.5s;}
.btn-position:hover ~ .bg-transit { height: 430px !important;}
.position-btn:hover { background-color: #231f20 !important; color: #ffbb11 !important; border: #9c7002 solid 1px; }
.employees { position: absolute; margin-top: -210px; width: 207px; margin-left: 5px; z-index: 9999;}
.position-btn:hover ~ .position-box-info selects all siblings .position-box-info that come after a .position-btn:hover. Since .position-box-info is actually the parent of the .position-btn element, nothing gets selected. In fact, you can't select a parent from a child, so you either have to add a class with javascript or change your HTML.
Also, you seem to miss a </div> closing tag.
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;
}
I have 2 problems.
I have 2 images at the bottom of my page, and when the browser size shrinks, the images don't resize and get cut off, I have tried have tried to use width: 100% and height: auto. I have tried a media query I found, but nothing seems to be working, I'm pretty new to HTML and CSS so maybe its a problem with my HTML code, I will post it to the bottom for you guys to check out.
Second problem is, I have managed to have my footer element always stick to the bottom of the page regardless of the height of the page, however when the browser size shrinks, the footer is transparent and lies on top of the images, which is obviously ugly. I want the footer to always remain a certain distance away from all other elements and stick to the bottom.
I hope you can help, Thanks :)
body {
font-family: Rajdhani;
color: white;
width: 100%;
height: 100%;
}
/* ============== NAV BAR =================*/
#media (max-width: 992px) {
.navbar-collapse li a {
color: black;
padding: 300px;
}
}
.nav>li>a:focus,
.nav>li>a:hover {
background-color: transparent !important;
color: #CCCCCC;
border-bottom: 3px solid #FFFFFF;
padding-bottom: 5px;
}
.dropdown-menu li,
.dropdown-menu a {
padding: 5px 0px 5px 0px;
margin: 0px;
color: white;
background-color: white;
}
.logo {
width: 7em;
}
.navbar {
font-family: Rajdhani;
}
.collapse .navbar-collapse {
background: black;
}
.navbar-toggle .icon-bar {
background-color: #fff;
margin-top: 5.5em;
}
li a {
color: white;
margin-top: 2.5em;
font-size: 1.5em;
}
#divider1 {
padding: 0px;
margin: 0px;
}
#divider2 {
padding: 0px;
margin: 0px;
}
/* ============== SLIDE 1 =================*/
#slide1 {
background: url(dojo.jpg) 50% 0 no-repeat fixed;
background-size: cover;
height: 450px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
min-height: 100%;
position: relative;
}
/* ============== SLIDE 2 =================*/
#slide2 {
background-color: #fff;
color: #333333;
height: 1150px;
margin: 0 auto;
overflow: hidden;
padding-top: 15px;
position: relative;
padding-bottom: 200px;
}
.headers h1 {
color: white;
display: block;
margin-top: 90px;
font-family: Rajdhani;
text-align: center;
font-size: 80px;
}
.headers2 {
text-align: center;
font-family: Rajdhani;
}
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
width: 85%;
}
.aboutcontent {
font-family: Rajdhani;
margin: 0px 100px 0px 100px;
font-size: 20px;
text-align: center;
}
#aboutimages {
text-align: center;
display: flex;
justify-content: center;
}
.aboutimages1 {
width: 300px;
height: 375px;
margin: 40px 10px 0px 0px;
}
.aboutimages2 {
width: 300px;
height: 375px;
margin: 40px 0px 0px 10px;
}
/* ============== CONTACT BAR =================*/
#contact {
position: absolute;
font-family: Rajdhani;
font-size: 1em;
text-align: center;
bottom: 0;
width: 100%;
height: 260px;
}
#info {
width: 100%;
}
.logo2 {
width: 7em;
padding-bottom: 0.5em;
}
<div id="slide2">
<div class="headers2">
<h2><strong>GOSPORT & FAREHAM'S HOME OF CHAMPIONS!</strong></h2>
<hr>
</div>
<div class="aboutcontent">
<p>CONTENT</p>
<p>CONTENT</p>
</div>
<div id="aboutimages">
<img class="aboutimages1" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<img class="aboutimages2" src="https://listaka.com/wp-content/uploads/2015/07/baby-boy-wearing-hat.jpg">
</div>
<div id="contact">
<div id="info">
<footer>
<hr>
<img class="logo2" src="#"><br> CONTACT INFO <br> CONTACT INFO <br> CONTACT INFO <br> CONTACT INFO <br>
<i class="fab fa-facebook-square fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
<i class="fas fa-envelope fa-2x"></i>
</footer>
</div>
</div>
</div>
I apologise for the mass of code, im not quite sure what it is thats wrong, so thought id try provide enough info. Thanks guys ::)
It will cut off due to the following reason
Parent Property - overflow:hidden;
Child Property - width:300px; (It's in px)
Pixel value will force your image to stay rigid and your hidden overflow will not let your image to grow outside the container.
Solution:
Let's keep overflow:hidden; as it is but add media-query to it
Variations you can try with media-query
As I have shown, you can get 2 images one over another
You can remove px value from your width, and change it with % value
body {
font-family: Rajdhani;
color: white;
/* width: 100%; */
height: 100%;
}
/* ============== NAV BAR =================*/
#media (max-width: 992px) {
.navbar-collapse li a {
color: black;
padding: 300px;
}
}
.nav>li>a:focus,
.nav>li>a:hover {
background-color: transparent !important;
color: #CCCCCC;
border-bottom: 3px solid #FFFFFF;
padding-bottom: 5px;
}
.dropdown-menu li,
.dropdown-menu a {
padding: 5px 0px 5px 0px;
margin: 0px;
color: white;
background-color: white;
}
.logo {
width: 7em;
}
.navbar {
font-family: Rajdhani;
}
.collapse .navbar-collapse {
background: black;
}
.navbar-toggle .icon-bar {
background-color: #fff;
margin-top: 5.5em;
}
li a {
color: white;
margin-top: 2.5em;
font-size: 1.5em;
}
#divider1 {
padding: 0px;
margin: 0px;
}
#divider2 {
padding: 0px;
margin: 0px;
}
/* ============== SLIDE 1 =================*/
#slide1 {
background: url(dojo.jpg) 50% 0 no-repeat fixed;
background-size: cover;
height: 450px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
min-height: 100%;
position: relative;
}
/* ============== SLIDE 2 =================*/
#slide2 {
background-color: #fff;
color: #333333;
height: 1150px;
margin: 0 auto;
overflow: hidden;
padding-top: 15px;
position: relative;
padding-bottom: 200px;
}
.headers h1 {
color: white;
display: block;
margin-top: 90px;
font-family: Rajdhani;
text-align: center;
font-size: 80px;
}
.headers2 {
text-align: center;
font-family: Rajdhani;
}
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
width: 85%;
}
.aboutcontent {
font-family: Rajdhani;
margin: 0px 100px 0px 100px;
font-size: 20px;
text-align: center;
}
#aboutimages {
text-align: center;
display: flex;
justify-content: center;
}
.aboutimages1 {
width: 300px;
height: 375px;
margin: 40px 10px 0px 0px;
}
.aboutimages2 {
width: 300px;
height: 375px;
margin: 40px 0px 0px 10px;
}
/* ============== CONTACT BAR =================*/
#contact {
position: absolute;
font-family: Rajdhani;
font-size: 1em;
text-align: center;
bottom: 0;
width: 100%;
height: 260px;
}
#info {
width: 100%;
}
.logo2 {
width: 7em;
padding-bottom: 0.5em;
}
#media screen and (max-width: 621px) {
#aboutimages {
flex-direction: column;
}
#info {
margin-top: 60px;
}
.aboutimages1 {
margin: auto;
}
.aboutimages2 {
margin: auto;
}
}
<div id="slide2">
<div class="headers2">
<h2><strong>GOSPORT & FAREHAM'S HOME OF CHAMPIONS!</strong></h2>
<hr>
</div>
<div class="aboutcontent">
<p>CONTENT</p>
<p>CONTENT</p>
</div>
<div id="aboutimages">
<img class="aboutimages1" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<img class="aboutimages2" src="https://listaka.com/wp-content/uploads/2015/07/baby-boy-wearing-hat.jpg">
</div>
<div id="contact">
<div id="info">
<footer>
<hr>
<img class="logo2" src="#"><br> CONTACT INFO <br> CONTACT INFO <br> CONTACT INFO <br> CONTACT INFO <br>
<i class="fab fa-facebook-square fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
<i class="fas fa-envelope fa-2x"></i>
</footer>
</div>
</div>
</div>
I'm trying to create the image in the link with only html and css. There are a number of elements that would need to "stack" on top of one another.
I am having a difficult time understanding inheritance, nesting, etc. Here's the code I've written so far:
.heart {
position: relative;
margin-top: 20px;
background-color: #000000;
opacity: .8;
width: 65px;
height: 30px;
border-radius: 15px;
display: inline;
}
.box {
margin: 75px auto;
position: relative;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
display: flex;
}
.thumbnail_image {
position: absolute;
float: left;
display: inline-block;
top: 0px;
left: 0px;
}
.text_container {
top: 60px;
left: 200px;
right: 100px;
width: 400px;
height: 338px;
position: relative;
display: flex;
}
h1 {
font-color: #ffffff !important;
text-transform: uppercase;
font-size: 60px;
font-family: Montserrat;
font-weight: 700;
line-height: 1.1;
text-align: left;
}
<div class="box">
<div class="heart">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
</div>
My concern is how to properly place the heart dialog, the text container, and the image overlay. I seem to be misunderstanding proper inheritance syntax or structure.
Use position:absolute; on heart dialog, text container, and image overlay elements and then position them correctly with the left and right properties.
Absolute positioning and z-index are the key words involved in stacking images with HTML and CSS.
I went ahead and mocked up your image with some html/css to give you an idea of implementation.
Z-index is not relevant in this particular example since you only require one layer above the base, which is automatically given to you with absolute positioning, however if you had multiple layers you would need to set the z-index to a number value where lower numbered z-indexes appear at the bottom and higher z-indexes appear at the top.
Here's my code, hope it helps:
body {
background-color: grey;
}
.container {
position:fixed;
height: 500px;
width: 700px;
background-image: url(http://i.stack.imgur.com/MS8X8.png);
background-position: 46% 52%;
background-size: 150%
}
.hearts {
position: absolute;
background-color: rgba(149, 165, 166,.5);
color: white;
right: 40px;
top: 15px;
padding: 15px 25px 15px 25px;
border-radius: 15px
}
.blue {
width: 550px;
height: 500px;
background-color: rgb(102,173,255);
float: right;
}
h1, h5 {
position: absolute;
font-family: sans-serif;
color: white;
text-transform: uppercase;
}
#quote {
left: 200px;
top: 30px;
font-size: 60px;
}
#attr {
left: 200px;
top: 450px;
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "main.css">
</head>
<body>
<div class = "container">
<div class = "hearts">423</div>
<div class = "blue">
<h1 id = "quote">don't you <br> think that <br> if i were </br>wrong,<br> i'd know it?</h1>
<h5 id = "attr">-Sheldon Cooper</h5>
</div>
</div>
</body>
</html>
Understanding the stacking order
In your case, the natural stacking order will do the job; this is nicely explained over on the MDN. The main thing to understand is that elements will overlap those that come before them in the markup. This is better explained with a simple example:
div {
position: absolute;
background: red;
height: 100px;
width: 100px;
top: 0;
left: 0;
}
.two {
background: blue;
top: 10px;
left: 20px;
}
.three {
background: green;
top: 20px;
left: 40px;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
With that out of the way...
Let's make these!
Feel free to jump to the complete example at the end of this answer!
Want to use some pedantic semantics?
A <blockquote> element to wrap everything together in a semantic container.
A <nav> element to contain the back and forward navigation
A <cite> element that contains the name of the person quoted
Our markup now looks like this:
<blockquote>
<p>Don't You think that if I were wrong, I'd know it?</p>
<cite>Sheldon Cooper</cite>
<a href="#" class="love-counter">
<3 123
</a>
<nav>
Previous
Next
</nav>
</blockquote>
The CSS
Main background image and color
These can be placed as a background on the blockquote itself. You can use background-size to ensure that the image always has the same dimensions. (It will obviously distort images which have an incorrect size)
blockquote {
background: #18a0ff url(image-url) no-repeat;
background-size: 170px 490px;
}
Add the transparent grey background and quotation character
This can be added with a absolutely positioned before pseudo-element of blockquote. The element is stretched out with left / right / bottom along with a width that matches the image. The transparent grey overlay and transparent text is provided by rgba color.
blockquote:before {
content: '\201C';
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding-top: 30px;
font-size: 2.4em;
text-align: center;
background: rgba(0,0,0,0.7);
width: 170px;
color: rgba(255,255,255,0.3);
}
Align the main quote text along with its citation
In order to incorporate smaller quotes, it could be more visually pleasing to vertically center the main text. We can use the display: flex property along with justify-content to easily achieve this; the flex-direction: column property stacks the main quote over the top of the citation. The blockquote is also given left and right padding to appropriately position it horizontally.
blockquote {
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 140px 0 200px;
}
Position the back / forward navigation and love counter
These are easily located with position: absolute along with the appropriate left / right / bottom / top properties. They will look something like this:
.love-counter {
position: absolute;
right: 20px;
top: 20px;
}
nav {
position: absolute;
left: 0px;
bottom: 20px;
}
Complete example
Compatibility: IE 11+ and all modern browsers.
You might consider a javascript method to shrink the font size for larger quotes.
#import url(https://fonts.googleapis.com/css?family=Passion+One:400,700);
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
blockquote {
background: #18a0ff url(http://i.stack.imgur.com/e3nDc.jpg) no-repeat;
background-size: 170px 490px;
height: 490px;
color: #FFF;
font-family: 'Passion One', cursive;
font-size: 4.2em;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 140px 0 200px;
font-weight: 400;
line-height: 1;
width: 650px;
text-transform: uppercase;
}
blockquote p {
margin: 0;
margin-top: 0.75em;
}
cite {
font-size: 0.25em;
font-weight: 400;
margin-top: 2em;
}
cite:before {
content: '\2014 '
}
blockquote:before {
content: '\201C';
font-size: 2.4em;
padding-top: 30px;
text-align: center;
background: rgba(0, 0, 0, 0.7);
width: 170px;
color: rgba(255, 255, 255, 0.3);
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.love-counter {
color: #FFF;
text-decoration: none;
font-size: 0.2em;
position: absolute;
right: 20px;
top: 20px;
font-family: helvetica;
font-weight: bold;
background: rgba(0, 0, 0, 0.2);
padding: 0 10px;
border-radius: 10px;
height: 30px;
line-height: 30px;
min-width: 60px
}
nav {
position: absolute;
left: 0px;
bottom: 20px;
font-size: 0;
width: 170px;
text-align: center;
}
nav a:before,
nav a:after {
font-size: 36px;
width: 50%;
display: inline-block;
color: #FFF;
}
nav a:first-child:before {
content: '<';
}
nav a:last-child:after {
content: '>';
}
.x-large {
background-image: url(http://i.stack.imgur.com/qWm5m.jpg);
}
.x-large p {
font-size: 0.62em;
}
<blockquote>
<p>Don't You think that if I were wrong, I'd know it?</p>
<cite>Sheldon Cooper</cite>
<3 123
<nav>
Previous
Next
</nav>
</blockquote>
<h2>Larger quote</h2>
<blockquote class="x-large">
<p>Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.</p>
<cite>Albert Einstein</cite>
<3 123
<nav>
Previous
Next
</nav>
</blockquote>
html,
body,
box,
thumbnail_image,
overlay,
h1,
h3,
h6,
p,
body {
width: 100%;
padding-bottom: 25px;
}
input {
font-family: "Roboto";
position: absolute;
top;
25.5px;
font-weight: 700;
font-size: 14px;
color: #fff;
background-color: transparent;
text-align: right;
border-width: 0;
width: 100%;
margin: 0 0 .1em 0;
}
.heart_button {
position: absolute;
top: 25.5px;
right: 55px;
}
heart_button:hover,
heart_button:active,
heart_button:focus {
color: #dd0239;
}
.heart_background {
position: absolute;
top: 20px;
right: 20px;
background-color: #000000;
opacity: .1;
width: 65px;
height: 30px;
border-radius: 15px;
}
.box {
margin: 30px auto;
position: relative;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
}
.quote_image {
position: absolute;
opacity: .1;
top: 62px;
left: 51px;
}
.image_overlay {
background-color: #282a37;
width: 170px;
height: 490px;
position: absolute;
float: left;
}
.thumbnail_image {
position: absolute;
float: left;
opacity: .12;
display: inline-block;
top: 0px;
left: 0px;
}
.text_container {
left: 200px;
width: 400px;
height: 338px;
position: absolute;
}
h1 {
color: #fff;
text-transform: uppercase;
font-size: 60px;
font-family: Montserrat;
font-weight: 700;
line-height: 1.1;
text-align: left;
}
.author_name {
position: absolute;
left: 206px;
bottom: 0px;
}
h3 {
font-family: Open Sans;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
text-align: left;
color: #fff;
}
p {
font-family: "Roboto";
font-weight: 700;
font-size: 14px;
color: #fff;
text-align: center;
}
h6 {
font-family: Open Sans;
font-weight: light;
font-size: 22px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}
html {
background: linear-gradient(209deg, #E5ECEF 40%, #BBC2C5 100%) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#footer {
clear: both;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="box">
<div class="heart_button">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457311522/little_heart_jle1j3.png">
</div>
<div class="heart_background">
</div>
<div class="image_overlay">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
<div class="author_name">
<h3> - Sheldon Cooper </h3>
</div>
<div class="quote_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457314397/quotations_image_wfwimc.png">
</div>
</div>
</body>
<footer>
<div>
<h6>A Project by Charles Bateman</h6>
</div>
</footer>