im using Bootstrap 4. I have container with div which is outside of container on right side. Is it possible to do the same with a picture div? I did it with pseudo-element :after and "another" background color. (If you don't understand what i want to achieve
body {
overflow-x: hidden;
}
.box {
background-color: #F0F6FB;
padding: 120px 20px;
margin-right: 0;
margin-left: auto;
margin-top: -125px;
position: relative;
border-radius: 50px 0px 0px 50px;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 80%;
right: -3000px;
background: #F0F6FB;
z-index: -1;
}
.box-image {
background: url(https://images5.alphacoders.com/456/456536.jpg);
height: 230px;
border-radius: 0px 50px 50px 0px;
margin-top: 60px;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
position: relative;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<div class="container">
<div class="box-image"> </div>
<div class="box">
</div>
</div>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You can use container-fluid only for the image..
I have edited the code.
body {
overflow-x: hidden;
}
.box {
background-color: #F0F6FB;
padding: 120px 20px;
margin-right: 0;
margin-left: auto;
margin-top: -125px;
position: relative;
border-radius: 50px 0px 0px 50px;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 80%;
right: -3000px;
background: #F0F6FB;
z-index: -1;
}
.box-image {
background: url(https://images5.alphacoders.com/456/456536.jpg);
height: 230px;
border-radius: 0px 50px 50px 0px;
margin-top: 60px;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
position: relative;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<div class="container-fluid">
<div class="box-image"> </div>
</div>
<div class="container">
<div class="box">
</div>
</div>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Hope this could help:
body {
overflow-x: hidden;
}
.box {
background-color: #F0F6FB;
padding: 120px 20px;
margin-right: 0;
margin-left: auto;
margin-top: -125px;
position: relative;
border-radius: 50px 0px 0px 50px;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 80%;
right: -3000px;
background: #F0F6FB;
z-index: -1;
}
.box-image {
background: url(https://images5.alphacoders.com/456/456536.jpg);
height: 230px;
border-radius: 0px 50px 50px 0px;
margin-top: 60px;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
position: relative;
width: 80%;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<div class="box-image"> </div>
<div class="container">
<div class="box">
</div>
</div>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
body {
overflow-x: hidden;
}
.box {
background-color: #F0F6FB;
padding: 120px 20px;
margin-right: 0;
margin-left: auto;
margin-top: -125px;
position: relative;
border-radius: 50px 0px 0px 50px;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 80%;
right: -3000px;
background: #F0F6FB;
z-index: -1;
}
.box-image {
background: url(https://images5.alphacoders.com/456/456536.jpg);
height: 230px;
border-radius: 0px 50px 50px 0px;
margin-top: 60px;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
position: relative;
}
.box-image:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 80%;
left: -3000px;
background: #FF0000;
z-index: 1;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<div class="container">
<div class="box-image"> </div>
<div class="box">
</div>
</div>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Related
I'm trying to make stopwatch and I want to put these 3 buttons in a circle but responsive. I have already make a circle that is responsive now I just want to add 3 buttons inside the circle under the timer.
Here is the code: https://jsfiddle.net/obh0mru4/1/
See my result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stop Watch</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container mt-5 h-position-relative">
<div>
<h1 class="title">Stop Watch</h1>
</div>
<div class="circle mt-5">
<div>
<h1 id="hour" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="msec" class="circleContent">00</h1>
</div>
</div>
<div class="h-position-absolute h-tl">
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="reset()">Reset</button>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</html>
body {
background: #000428;
background: -webkit-linear-gradient(to right, #004e92, #000428);
background: linear-gradient(to right, #004e92, #000428);
}
.title {
text-align: center;
color: #fff;
}
.circle {
margin: 0 auto;
width: 350px;
height: 350px;
line-height: 320px;
border-radius: 50%;
text-align: center;
border: 10px solid #666;
border-style: double;
}
.circleContent {
display: inline-block;
color: #fff;
font-size: 40px;
width: 60px;
}
.circleContent-span {
color: #fff;
font-size: 40px;
}
.h-position-relative {
position: relative;
}
.h-position-absolute {
position: absolute;
}
.h-tl {
top: smth;
left: smth;
}
You will have to fiddle around with the numbers to get exactly what you want, but this is a start:
.h-tl {
top: 275px;
left: 50%;
transform: translateX(-50%);
}
What it does is place the buttons vertically at 275px.
It also places the left hand side horizontally to the center, but you don't want that so you move it back 50% of it's own width. (This is a common 'trick', you can remove the translate once to see what it exactly does).
This will put your buttons under your digits
Im playing around with bootstrap and i've come up against something I am struggling to find an answer to.
I want to put a 'Login' on the bottom right of the screen, near the fold. Below is my code:
img{
position: absolute;
bottom: 40%;
left: 50%;
transform:translateX(-40%);
z-index: 2;
}
.leftside, .rightside {
height: 50vh;
width: 100%;
}
#media screen and (min-width:768px)
{
.leftside, .rightside {
height: 100vh;
}
}
.leftside {
background:#20639B;
}
.rightside {
}
.home-btn {
position: absolute;
bottom: 40%;
left: 50%;
transform:translateX(-50%);
z-index: 2;
font-size: 1.6em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="homepage.css">
</head>
<body>
<img src="Bird.png" alt="hummingbird">
<div class="row no-gutters">
<div class="col-md-6 no-gutters">
<div class="leftside">
</div>
</div>
<div class="col-md-6 no-gutters">
<div class="rightside d-flex justify-content-center align-items-center">
<h2>Mini Blog Project</h2>
<button class="btn btn-lg btn-secondary float-right home-btn">Login</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
Currently the button sits centred on the right box, which is my second option. My first would be to have it sit within the right panel, near the bottom right. If I move the button outiside of the right div, i can make the button go down to the right, but it adds a row that breaks the effect.
any help would be appreciated.
img{
position: absolute;
bottom: 40%;
left: 50%;
transform:translateX(-40%);
z-index: 2;
}
.leftside, .rightside {
height: 50vh;
width: 100%;
}
#media screen and (min-width:768px)
{
.leftside, .rightside {
height: 100vh;
}
}
.leftside {
background:#20639B;
}
.rightside {
position: relative;
}
.home-btn {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 2;
font-size: 1.6em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="homepage.css">
</head>
<body>
<img src="Bird.png" alt="hummingbird">
<div class="row no-gutters">
<div class="col-md-6 no-gutters">
<div class="leftside">
</div>
</div>
<div class="col-md-6 no-gutters">
<div class="rightside d-flex justify-content-center align-items-center">
<h2>Mini Blog Project</h2>
<button class="btn btn-lg btn-secondary float-right home-btn">Login</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
I've used animate property in my jquery file for top property but it's not working. Do you know what the reason is?
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="font awsome/FontAwesome.Pro.5.11.2.Web/css/all.min.css">
<script src="font awsome/FontAwesome.Pro.5.11.2.Web/js/all.min.js"></script>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=" top-back">
<img src="images/Untitled-2.png" alt="">
</div>
<div class=" main-back" >
<div class="container">
<div class="row">
<div class="col-4">
<div class="row">
<div class="col-12 ">
<div class="blue">
<img class="magic" src="images/magic.png" alt="" style="position: absolute; left: 4.5%;">
<ul>
<li style="left: 25%; top: 5px" class="pics1"><img src="images/face1.png" alt="" >Facelift surgery</li>
<li style="left: 25%; top: 200px" class="pics2"><img src="images/face2.png" alt="">Lip Augmentation</li>
<li style="left: 25%; top: 390px" class="pics3"><img src="images/face3.png" alt="">Botox Injections</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-8">
<div class="row white-box">
<div class="col-5">
<div class="">
<h1>Facelift Surgery</h1>
<p>Aromatherapy has a very beneficial effect on the human body and promotes maximum relaxation. The use of aroma oils in the process of massage enhances its effect, relieves fatigue.
</p>
<button>Make an appointment</button>
</div>
</div>
<div class="col-7 face">
<img src="images/face.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-back">
<img src="images/Untitled-3.png" alt="">
</div>
<script src="script.js"></script>
</body>
</html>
/* CSS Document */
body{
margin: 0
}
.top-back img{
width: 100%;
padding: 0 !important;
position: relative;
top: 10px
}
.main-back{
background-color: #f3e5d8;
height: 600px
}
.bottom-back img{
position: relative;
top: -10px;
width: 100%
}
.white-box{
background-color: #fff9f3;
border-radius: 30px;
position: relative;
top: 108px;
height: 450px
}
.face img{
width: 94.5%;;
position: absolute;
top: -124px;
right: 23px;
}
.blue{
background-color:#2d3663;
border-radius: 30px;
position: relative;
top: -4px;
width: 78%
}
.blue ul{
text-align: center;
text-decoration: none;
cursor: pointer;
color: white;
list-style-type: none;
padding: 0;
height: 596px
}
.blue li{
padding: 15px 0;
position: absolute
}
.blue img{
display: block;
margin: auto;
width: 90%;
margin-bottom: 10px
}
.white-box h1 {
color: #cd8274;
margin-top: 40px
}
.white-box p{
color: #474e75;
margin: 40px 0;
line-height: 29px;
font-size: 20px;
}
$(document).ready(function(){
$('.pics2').hover(function(){
$('.magic').animate({top: "195px"});
});
$('.pics1').hover(function(){
$('.magic').animate({top: "0"});
});
$('.pics3').hover(function(){
$('.magic').animate({top: "384px"});
})
});// JavaScript Document`
i finally found the reason... the CDN of jquery must not be the first one. i changed the position of that and it worked
Console shows me $(...).animate is not a function
This is the reason
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
Remove it and everything will work. This version of jQuery jquery-3.3.1.slim.min.js is shorter (slim) and doesn't support animate function.
Use the full one instead.
<script
src="https://code.jquery.com/jquery-3.5.0.js"
integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
crossorigin="anonymous"></script>
I want to create a split screen Bootstrap 4 page and put an image in the center overlapping the two columns. I have created two equal columns but I have no idea how to place the image to overlap them.
I have tried position:absolute and float:left but it doesn't help. Thank you for your help!
Expected:
Photo
html,
body {
height: 100%;
margin: 0;
}
body {
overflow-x: hidden;
}
col {
height: 100vh;
}
img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<img src="https://imgur.com/Qk5Qa9M.jpg" class="mx-auto d-block" style="width:auto">
<div class="row h-100">
<div class="col" style="background-color:blue">
Left
</div>
<div class="col" style="background-color:red">
Right
</div>
</div>
</body>
</html>
this is solving your problem:
html,
body {
height: 100%;
margin: 0;
}
body {
overflow-x: hidden;
}
col {
height: 100vh;
}
img {
position: absolute;
bottom: 0; /* i deleted top:0; */
left: 50%; /* this and below code for excellent centered */
transform:translateX(-50%);
z-index:2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<img src="https://picsum.photos/400/500">
<div class="row h-100">
<div class="col" style="background-color:blue">
Left
</div>
<div class="col" style="background-color:red">
Right
</div>
</div>
</body>
</html>
also, i deleted class and style attribute from img tag. because they unnecessary.
Add z-index: 1; in your img css
img {
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
add simply z-index to in your img class
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)
html,
body {
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
col {
height: 100vh;
}
img {
position: absolute;
top: 15%;
bottom: 0;
left: 0;
right: 0;
z-index: 1001;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<img src="https://imgur.com/Qk5Qa9M.jpg" class="mx-auto d-block" style="width:auto">
<div class="row h-100">
<div class="col" style="background-color:blue">
Left
</div>
<div class="col" style="background-color:red">
Right
</div>
</div>
</body>
</html>
I'm essentially creating a "sliding-door" animation with the words "HELLO" in the middle, that will split in half as the doors open. The text on the left has letters pushed right up to the edge of the left "door"/div, while the text on the right has a tiny little gap on the left (the "LO!"). I checked with the dev console, and don't see any padding, border, or margin that could be causing this. It's obviously not a big deal, but how can I push the letter "L" in "LO!" flush up against the edge of the div/door container that it's in?
html, body {
height: 100%;
width: 100%; }
.container {
border: 1px solid black; }
.doors {
height: 100vh;
width: 50vw;
border: 1px solid blue;
position: absolute;
display: inline-flex;
align-items: center; }
#left-door {
background-color: #1c1b1a;
left: 0;
transition: all 1s;
justify-content: flex-end; }
#right-door {
background-color: #f9d73e;
right: 0;
transition: all 1s;
justify-content: flex-start; }
.slide-right {
margin-right: -100%; }
.slide-left {
margin-left: -100%; }
.door-text {
font-family: 'Lato', san-serif;
height: 100px;
width: 50%;
font-size: 4em;
line-height: 100px;
font-weight: 900; }
#text-left {
text-align: right;
color: #f9d73e; }
#text-right {
text-align: left;
color: #1c1b1a; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Portfolio</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="./home.css">
</head>
<body>
<div id="left-door" class='doors'>
<h1 id="text-left" class="door-text">HEL</h1>
</div>
<div id="right-door" class='doors'>
<h1 id="text-right" class="door-text">LO!</h1>
</div>
<div class="container">
<h1>this is the body</h1>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="./home.js"></script>
</html>
The letter "L" is taking up it's normal space I think. You could correct the small gap manually with a negative indent, like this: text-indent: -5px;
html, body {
height: 100%;
width: 100%; }
.container {
border: 1px solid black; }
.doors {
height: 100vh;
width: 50vw;
border: 1px solid blue;
position: absolute;
display: inline-flex;
align-items: center; }
#left-door {
background-color: #1c1b1a;
left: 0;
transition: all 1s;
justify-content: flex-end; }
#right-door {
background-color: #f9d73e;
right: 0;
transition: all 1s;
justify-content: flex-start; }
.slide-right {
margin-right: -100%; }
.slide-left {
margin-left: -100%; }
.door-text {
font-family: 'Lato', san-serif;
height: 100px;
width: 50%;
font-size: 4em;
line-height: 100px;
font-weight: 900; }
#text-left {
text-align: right;
color: #f9d73e; }
#text-right {
text-align: left;
color: #1c1b1a;
text-indent: -5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Portfolio</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="./home.css">
</head>
<body>
<div id="left-door" class='doors'>
<h1 id="text-left" class="door-text">HEL</h1>
</div>
<div id="right-door" class='doors'>
<h1 id="text-right" class="door-text">LO!</h1>
</div>
<div class="container">
<h1>this is the body</h1>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="./home.js"></script>
</html>