I have a problem. I am trying to make simple HTML-based website. I want to make the image and the white fields "full" the screen (width 100%) but it is somehow limited from both sides with some sort of margin. I am a fresh webguy so probably the solution is simple but so far I cannot find it.
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>ARSPOLSKA</title>
<link rel="stylesheet" href="css/styl.css" type="text/css">
</head>
<body>
<!-- ========= HEADER ========= -->
<div class="belka-menu">
<div class="limiter">
<div id="logo"></div>
<p>TECHNICZNE ZAOPATRZENIE PRZEMYSŁU</p>
<nav class="nawigacja">
<ul>
<li>REGULAMIN</li>
<li>KATALOG PRODUKTÓW</li>
<li>PROMOCJE</li>
<li>STRONA GŁÓWNA</li>
</ul>
</nav>
</div>
</div>
<!-- ====== HEADER ====== -->
<!-- ====== SLIDER ====== -->
<div class="slider-imitation"></div>
<!-- ====== SLIDER ====== -->
<!-- ====== ZAWARTOSC ====== -->
<div class="container-item">
<div id="item">
<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img1.jpg"/></div>
<div class="text">
Jesteśmy firmą handlową zajmującą się obsługą i zaopatrzeniem oraz wsparciem technicznym dla
działów utrzymania ruchu zakładów i firm.
</div>
</div>
<div id="item">
<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img4.jpg"/></div>
<div class="text">
Posiadamy zaplecze umożliwiające wykonanie prac związanych z obróbką, skrawaniem,
pracami związanymi ze spawaniem oraz szeroko pojętymi usługami.
</div>
</div>
<div id="item">
<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img3.jpg"/></div>
<div class="text">
Współpracujemy z największymi dystrybutorami dzięki temu otrzymują Państwo produkty najwyższej jakości w 100% oryginalne.
</div>
</div>
<div id="item">
<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img2.jpg"/></div>
<div class="text">
Jesteśmy w stanie dostosować się do potrzeb każdego przedsiębiorstwa.
</div>
</div>
</div>
<!-- ====== ZAWARTOSC ====== -->
<!-- ====== STOPKA ====== -->
<footer class="stopka">
<div class="limiter">
<div class="stopka-logo"></div>
<div class="stopka-info">
<h1>ARSPOLSKA Jóźkowicz i wspólnicy Sp. J.</h1>
<p>ul. Przemysłowa 14B</p>
<p>59-300 Lubin</p>
<p>NIP 692-250-43-38</p>
</div>
<div class="stopka-info">
<h1>KONTAKT</h1>
<p>tel: 515 012 162</p>
<p><b>kontakt#arspolska.com</b></p>
</div>
<div class="podstopka">Copyright © 2017 ARSPOLSKA Wszystkie prawa zastrzeżone.</div>
</div>
</footer>
<!-- ====== STOPKA ====== -->
</body>
</html>
/* ====== GLOBALNE ====== */
#font-face {
font-family: "Open Sans";
src: url('../OpenSans.ttf'), url('../OpenSans.eot');
/* IE */
}
body {
font-family: "Open Sans", Times, serif;
background-color: #f1f1f1;
}
h1 {
margin-top: 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
#logo {
background-image: url("../img/logo.png");
background-size: 90px;
height: 87px;
width: 133px;
z-index: 999999;
float: left;
background-repeat: no-repeat;
margin-top: 1px;
}
.limiter {
width: 1200px;
margin: auto;
}
.slider-imitation {
height: 586px;
width: 100%;
background-image: url(../img/1.png);
background-attachment: fixed;
background-position: center;
}
/* ====== MENU ====== */
.belka-menu p {
font-family: "Open Sans";
font-size: 15px;
color: #979797;
padding-top: 25px;
padding-left: 120px;
position: absolute;
}
.belka-menu {
position: fixed;
display: block;
width: 100%;
z-index: 99;
border-top: 5px solid #f05928;
background-color: #ffffff;
height: 90px;
right: 0;
top: 0;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
}
/* ====== NAWIGACJA ====== */
.nawigacja li {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
background-color: #fff;
text-align: center;
padding-top: 25px;
float: right;
}
.nawigacja li a {
color: #979797;
font-size: 16px;
font-family: "Open Sans";
}
.nawigacja li a:hover {
color: #f05928;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: color 0.5s;
text-decoration: none;
font-weight: bold;
}
/* ====== STOPKA ====== */
.stopka {
padding: 40px 0;
color: #999;
background-color: #fff;
border-top: 1px solid #e5e5e5;
margin-top: 40px;
clear: both;
text-align: left;
height: 200px;
}
.stopka-info {
display: block;
height: 100%;
margin: auto 20px;
max-width: 300px;
float: left;
line-height: 13px;
}
.stopka-logo {
background-image: url('../img/logo.png');
display: block;
height: 140px;
width: 140px;
max-height: 140px;
max-height: 140px;
float: left;
margin-right: 20px;
background-repeat: no-repeat;
}
.podstopka {
display: block;
background-color: #f05928;
height: 30px;
padding-top: 5px;
padding-left: 20px;
padding-right: 20px;
margin: auto;
clear: both;
color: #fff;
}
/*====== CONTAINER ======*/
.container-home {
width: 100%;
height: 200px;
background-color: #ffffff;
clear: both;
}
.container-item {
text-align: center;
height: 400px;
width: 100%;
display: block;
background-color: #ffff;
clear: both;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
}
#item {
border: 1px solid #e5e5e5;
background-color: #fff;
display: inline-block;
width: 250px;
height: 300px;
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin-top: 50px;
margin-left: 10px;
margin-right: 10px;
vertical-align: top;
}
h1 {
font-weight: bold;
color: #8e8e8e;
font-size: 14px;
}
#item:hover {
border: 2px solid #f05928;
-webkit-transition: -webkit-transform 4s;
/* Safari */
transition: transform 4s;
}
.text {
margin-top: 20px;
font-size: 13px;
text-align: center;
}
.foto img {
width: auto;
height: auto;
max-width: 220px;
max-height: 220px;
}
.box {
height: 100%;
padding-top: 25px;
padding-bottom: 25px;
margin-top: 50px;
}
You probably need to set your body margin. By default your browser has some margins (8px on Chrome) so the content will not appear behind the scrollbar.
body {
font-family: "Open Sans", Times, serif;
background-color: #f1f1f1;
margin: 0;
padding: 0;
border: 0;
}
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');
});
});
Basically, I have price table with corner ribbon. On the price table, I've slide up transition on hover. When I hover on price table, the corner ribbon displace. Have a look at my code. I want to make the corner ribbon sticky on hover with sliding transition.
CSS
.zoom:hover {
transition: transform .5s ease;
-webkit-transition: 0.3s;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transition: transform 300ms;
transform: translate3d(0, -1%, 0);
}
/* RIBBON CSS */
.container__wrapper {
left: 0px;
position: absolute;
top: 15px;
height: 141px;
width: 170px;
overflow: hidden;
}
.container__ribbon {
z-index: 100;
left: -60px;
position: absolute;
top: 40px;
height: 30px;
width: 230px;
transform: rotate(-45deg);
background-color: #FF0000;
display: flex;
align-content: center;
justify-content: center;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}
.container__ribbon h6 {
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #fff;
align-self: center !important;
font-weight: 400;
padding-top: 0.3em;
}
/*___________________________________________________________ */
/* css for package */
/* SCROLLBARR CSS */
.card {
border: 0 !important;
}
.scrollbar-dusty-grass::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #DAD8D9;
border-radius: 10px;
}
.scrollbar-dusty-grass::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.0);
background-image: -webkit-linear-gradient(330deg, #11A085 0%, #11A085 100%);
background-image: linear-gradient(120deg, #11A085 0%, #11A085 100%);
}
.bordered-cyan::-webkit-scrollbar-thumb {
box-shadow: none;
}
.square::-webkit-scrollbar-track {
border-radius: 0 !important;
}
.square::-webkit-scrollbar-thumb {
border-radius: 0 !important;
}
.thin::-webkit-scrollbar {
width: 6px;
}
.example-1 {
position: relative;
overflow-y: scroll;
height: 175px;
}
/* CAROUSEL */
.brderline {
margin-top: 1rem;
padding: .5rem;
border: 1px solid #11A085;
}
/* PACKAGES TITLE */
.packagetitle h4 {
color: #323232 !important;
font-size: 15px;
font-weight: 700;
}
.packagetitle h1 {
color: #323232 !important;
font-size: 35px;
font-weight: 800;
}
.pkpara {
font-family: 'Circular Std Book';
font-size: 25px;
color: #323232 !important;
font-weight: 100;
font-size: 20px;
}
/* PACKAGE BOX CSS */
/* .pk1 {
border: 1px solid #11A085;
} */
.tagimg {
position: absolute;
top: 2%;
left: 0;
width: 120px !important;
height: 120px;
}
.tagimg-r {
position: absolute;
top: 2%;
right: 0;
width: 120px !important;
height: 120px;
}
.pkg1 h5 {
font-size: 15px;
color: #11A085;
}
.pkg1 h2 {
font-size: 25px;
color: #323232;
font-weight: 700;
}
.pkg1 p {
font-size: 16px;
color: #8d8d8d;
text-decoration: line-through;
}
.pkg1 h1 {
color: #11A085;
font-size: 45px;
font-weight: 700;
margin-bottom: 1rem;
}
ul.pkg-items>li {
color: #323232;
list-style: none;
font-family: Circular Std Medium;
font-style: normal;
}
ul.pkg-items li::before {
content: "\2022";
color: #8d8d8d;
font-weight: bold;
display: inline-block;
width: 1.5rem;
}
.pkgbtn {
text-align: center;
margin: 2rem 0;
}
.innerpkgbtn {
padding: 20px 60px !important;
}
.pkg1 h6 {
font-size: 14px;
color: #8d8d8d;
}
.viewmre h4 {
padding: 1rem 0 !important;
font-size: 14px;
text-align: center;
}
.callnchat {
font-size: 16px;
text-align: center;
margin-bottom: 2rem;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.carousel.css">
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.theme.green.css">
<script src="<?php echo BASE_URL; ?>/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo BASE_URL; ?>/assets/js/owl.carousel.min.js" type="text/javascript"></script>
<div class="item brderline zoom">
<div class="pt-2 pb-2 pkg1">
<div class="pk1">
<div class="container__wrapper">
<div class="container__ribbon">
<h6>Free Delivery Rush</h6>
</div>
</div>
<!-- <img src="assets/img/badgeleft.png" class="tagimg">s -->
<h5 class="text-center">LOGO PACKAGE</h5>
<h2 class="text-center">BASIC <br> LOGO PACKAGE</h2>
<p class="text-center">$339</p>
<h1 class="text-center">$45.00</h1>
<div class="card example-1 square scrollbar-dusty-grass square thin">
<ul class="pkg-items">
<li>3 Custom Logo Design Concepts</li>
<li>1 Dedicated Designer</li>
<li>4 Revisions</li>
<li>2 hours TAT</li>
<li>Unique Design Guarantee</li>
<li>100% Unique Design Guarantee</li>
<li>100% Satisfaction Guarantee</li>
<li>100% Money Back Guarantee *</li>
<li>100% Ownership Rights</li>
</ul>
</div>
<div class="pkgbtn"><button type="button" class="btn innerpkgbtn">ORDER NOW</button></div>
<h6 class="text-center">$50 Additional For Expedited Services </h6>
<div class="viewmre">
<h4> VIEW DETAILS</h4>
</div>
<div class="callnchat">
<i class="fas fa-phone-square-alt"></i>1·866·268·1794
<i class="fas fa-comment-dots"></i>LIVE CHAT
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.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://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>
**
absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. -MDN
Since .container__wrapper is positioned absolute, make it so it is relative to a parent that is also positioned and moves on hover, for example, the .item class. See the snippet below:
.zoom:hover {
transition: transform .5s ease;
-webkit-transition: 0.3s;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transition: transform 300ms;
transform: translate3d(0, -1%, 0);
}
/* RIBBON CSS */
.container__wrapper {
left: 0px;
position: absolute;
top: 0px;
height: 141px;
width: 170px;
overflow: hidden;
}
.item {
position: relative;
}
.container__ribbon {
z-index: 100;
left: -60px;
position: absolute;
top: 40px;
height: 30px;
width: 230px;
transform: rotate(-45deg);
background-color: #FF0000;
display: flex;
align-content: center;
justify-content: center;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}
.container__ribbon h6 {
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #fff;
align-self: center !important;
font-weight: 400;
padding-top: 0.3em;
}
/*___________________________________________________________ */
/* css for package */
/* SCROLLBARR CSS */
.card {
border: 0 !important;
}
.scrollbar-dusty-grass::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #DAD8D9;
border-radius: 10px;
}
.scrollbar-dusty-grass::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.0);
background-image: -webkit-linear-gradient(330deg, #11A085 0%, #11A085 100%);
background-image: linear-gradient(120deg, #11A085 0%, #11A085 100%);
}
.bordered-cyan::-webkit-scrollbar-thumb {
box-shadow: none;
}
.square::-webkit-scrollbar-track {
border-radius: 0 !important;
}
.square::-webkit-scrollbar-thumb {
border-radius: 0 !important;
}
.thin::-webkit-scrollbar {
width: 6px;
}
.example-1 {
position: relative;
overflow-y: scroll;
height: 175px;
}
/* CAROUSEL */
.brderline {
margin-top: 1rem;
padding: .5rem;
border: 1px solid #11A085;
}
/* PACKAGES TITLE */
.packagetitle h4 {
color: #323232 !important;
font-size: 15px;
font-weight: 700;
}
.packagetitle h1 {
color: #323232 !important;
font-size: 35px;
font-weight: 800;
}
.pkpara {
font-family: 'Circular Std Book';
font-size: 25px;
color: #323232 !important;
font-weight: 100;
font-size: 20px;
}
/* PACKAGE BOX CSS */
/* .pk1 {
border: 1px solid #11A085;
} */
.tagimg {
position: absolute;
top: 2%;
left: 0;
width: 120px !important;
height: 120px;
}
.tagimg-r {
position: absolute;
top: 2%;
right: 0;
width: 120px !important;
height: 120px;
}
.pkg1 h5 {
font-size: 15px;
color: #11A085;
}
.pkg1 h2 {
font-size: 25px;
color: #323232;
font-weight: 700;
}
.pkg1 p {
font-size: 16px;
color: #8d8d8d;
text-decoration: line-through;
}
.pkg1 h1 {
color: #11A085;
font-size: 45px;
font-weight: 700;
margin-bottom: 1rem;
}
ul.pkg-items>li {
color: #323232;
list-style: none;
font-family: Circular Std Medium;
font-style: normal;
}
ul.pkg-items li::before {
content: "\2022";
color: #8d8d8d;
font-weight: bold;
display: inline-block;
width: 1.5rem;
}
.pkgbtn {
text-align: center;
margin: 2rem 0;
}
.innerpkgbtn {
padding: 20px 60px !important;
}
.pkg1 h6 {
font-size: 14px;
color: #8d8d8d;
}
.viewmre h4 {
padding: 1rem 0 !important;
font-size: 14px;
text-align: center;
}
.callnchat {
font-size: 16px;
text-align: center;
margin-bottom: 2rem;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.carousel.css">
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.theme.green.css">
<script src="<?php echo BASE_URL; ?>/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo BASE_URL; ?>/assets/js/owl.carousel.min.js" type="text/javascript"></script>
<div class="item brderline zoom">
<div class="pt-2 pb-2 pkg1">
<div class="pk1">
<div class="container__wrapper">
<div class="container__ribbon">
<h6>Free Delivery Rush</h6>
</div>
</div>
<!-- <img src="assets/img/badgeleft.png" class="tagimg">s -->
<h5 class="text-center">LOGO PACKAGE</h5>
<h2 class="text-center">BASIC <br> LOGO PACKAGE</h2>
<p class="text-center">$339</p>
<h1 class="text-center">$45.00</h1>
<div class="card example-1 square scrollbar-dusty-grass square thin">
<ul class="pkg-items">
<li>3 Custom Logo Design Concepts</li>
<li>1 Dedicated Designer</li>
<li>4 Revisions</li>
<li>2 hours TAT</li>
<li>Unique Design Guarantee</li>
<li>100% Unique Design Guarantee</li>
<li>100% Satisfaction Guarantee</li>
<li>100% Money Back Guarantee *</li>
<li>100% Ownership Rights</li>
</ul>
</div>
<div class="pkgbtn"><button type="button" class="btn innerpkgbtn">ORDER NOW</button></div>
<h6 class="text-center">$50 Additional For Expedited Services </h6>
<div class="viewmre">
<h4> VIEW DETAILS</h4>
</div>
<div class="callnchat">
<i class="fas fa-phone-square-alt"></i>1·866·268·1794
<i class="fas fa-comment-dots"></i>LIVE CHAT
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.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://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>
More on position's here.
THIS IS A RESPONSIVE DESIGN, MAKE SURE TO TURN ON TOGGLE DEVICE TOOLBAR ON YOUR BROWSER
I am trying to make a progress bar. First I want to increase the height of the transparent black background. I can't find a way to do that. I am confused. And secondly, I want to add spacing and align the 2nd and 3rd text properly.
/* progress bar */
.center {
height: 300px;
width: 100%;
position: absolute;
left: 50%;
margin-top: 140px;
transform: translate(-50%, -50%);
padding: 20px;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</section>
You can take advantage of the <br> element in your HTML.
Line break and tab elements can be used when you need a little more control over how the browser renders the text. The <BR> element is used to force a line break.
-W3.org
/* progress bar */
.center {
height: 300px;
width: 100%;
position: absolute;
left: 50%;
margin-top: 140px;
transform: translate(-50%, -50%);
padding: 20px;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<br>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<br>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<br>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
The Height: - I noticed a fixed height of 300px, and that you were centering the parent div by using margins and translations in your CSS. I went ahead and removed those margins and translations, also removed your absolute positioning. You can adjust your fixed height of 300px to expand the grey background. For this example, I made it 100 view height.
/* progress bar */
.center {
height: 100vh;
width: 100%;
padding: 20px;
position: relative;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<br>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<br>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<br>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
If I understood properly, what you want to increase the height is for that black bar containing your actual progress bar, right? If that's the case, I think this should work:
.skill-percentage {
height: x (here you place how much height you want);
}
That should give you the height that you want.
And, in order to add the spacing, you can take advantage of CSS padding or margin, depending on what you exactly need.
I'll give you a small snippet here so you can see exactly what I mean. Note that I modified a bit your HTML to fit what you wanted to do, but this may not be necessary on your original file.
/* progress bar */
* {
margin: 0;
padding: 0;
}
.center {
height: 500px;
width: 100%;
background-color: rgba(0, 0, 0, 0.678);
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 0;
}
/* skillbar languages */
.text-container {
display: flex;
width: 100%;
justify-content: space-between;
}
.text-container p {
padding: 0 40px; /* this is the one that changes the position of your text. Be carefull, you don't want this to change the position too much, just a bit, if you need to change the full position, better try something like grid, or modifying the flex */
}
.skillbar-html {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-html p {
margin: 10px;
}
.skillbar-html > div {
margin: 10px;
}
.skillbar-css {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-css p {
margin: 10px;
}
.skillbar-css > div {
margin: 10px;
}
.skillbar-javascript {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-javascript p {
margin: 10px;
}
.skillbar-javascript > div {
margin: 10px;
}
.skill_percentage{
height: 20px; /* this is the one that changes your height, now it's changing nothing, but you can modify the height by changing this value */
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<div class="skillbar-html">
<div class="text-container">
<p>HTML</p>
<p>90%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;">
</div>
</div>
</div>
<div class="skillbar-css">
<div class="text-container">
<p>CSS</p>
<p>70%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;">
</div>
</div>
</div>
<div class="skillbar-javascript">
<div class="text-container">
<p>JavaScript</p>
<p>50%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;">
</div>
</div>
</div>
</div>
</section>
at first im completly new to CSS and have a Question about my half working animation.
So I got an Container an this Container I wanted to slide from the Header to the normal Position but the Animation goes only the halfway and then its just starting spring without an animation to the normal Position.
Here is my CSS Code maybe you find anything I did wrong or something that I can do better to avoid those Problems.
And yeah I know my class name are not good, I just tried out CSS for the first time.
body{
font-family: 'Open Sans', sans-serif;
background-color: #f3f5f6;
padding-left: 100px;
padding-right: 100px;
}
.class-image{
width: 100%;
height: 500px;
object-fit: cover;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-radius: 10px 10px 0px 0px;
object-position: 30% 60%;
display: block;
}
.colorChange{
font-size: 20px;
font-weight: bold;
color: black;
}
.containerClass{
padding: 16px;
vertical-align: middle;
animation: example 2s linear;
width:85%;
position:absolute;
}
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
}
a{
color: #831D17;
text-decoration: none;
margin-left: 16px;
font-weight: 700;
}
a:hover{
font-weight:bolder;
color: white;
padding-left: 8px;
padding-right: 8px;
display: inline-block;
line-height: 200%;
font-size: 16px;
border-radius: 20px;
background-color: #333333;
text-decoration: none;
}
#keyframes example {
0% {
bottom:100vH
}
100% {
bottom: 0vH
}
}
.highlight{
color: black;
font-weight: bolder;
font-size: 48px;
}
.Fotoind{
background-color:#333333;
color: #D6D6D6;
font-weight: 600;
border-radius: 0px 0px 10px 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 16px;
}
.MapsContainer{
margin-top: 16px;
width: 100%; border-radius: 10px; overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
display: flex;
justify-content:space-between ;
}
.maps-right{
background-color:#333333;
color: #D6D6D6;
font-weight: 600;
border-radius: 0px 0px 0px 0px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 16px;
margin-left: 16px;
width: 30%;
}
.mapStyle{
border: 0;
height: 350px;
width: 70%;
}
.contentdown{
padding: 8px;
}
.legal{
margin-right: 16px;
}
<body>
<div class="navbar">
<h1 class="colorChange">Der Blaue Planet<br>
<span class="highlight"> Die Erde</span>
</h1>
<div>
google
Termin
Preise
Kalender
</div>
</div>
<div class="containerClass">
<img class="class-image" src="Bilder/4k.jpg">
<div class="Fotoind">
Individuelle Fotos
</div>
<div class="MapsContainer">
<iframe class="mapStyle" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2429.8384006473802!2d13.596700815695565!3d52.48206157980705!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a849b423ae37e9%3A0x1c91decc13ce5a24!2sMechthildstra%C3%9Fe%2053%2C%2012623%20Berlin!5e0!3m2!1sde!2sde!4v1633806883383!5m2!1sde!2sde"
allowfullscreen="" loading="lazy"></iframe>
<div class="maps-right">
Ein Fast proffesionelles Seiten Layout
</div>
</div>
<div class="contentdown">
<span class="legal"> Copyright von morgen </span> | Impressum | Datenschutz
</div>
</div>
</body>
I used margin-top instead of bottom property and it works fine.
#keyframes example {
0% {
margin-top: calc(-100vh - 100%);
}
100% {
margin-top: 0vh
}
}
I added this to jsfiddle. Link
I am trying to put the horizontal bar beneath the text title where is inside of the container <div> but the horizontal bar just effect in the width, but not moving up to the position...
I am hesitating that should I create one more div. I have been trying to move up the hr by top with vh or even margin, but that is not workable.
What I want is to move the hr below the title.
How I want the hr to move up
Original
.topcon {
background-color: #f6f5f5;
position: relative;
width: 250px;
height: 250px;
border: 15px;
padding: 50px;
margin: 180px auto 150px auto;
border-radius: 20px;
}
.pattern-card {
position: relative;
right: 50px;
border-radius: 20px 20px 0px 0px;
bottom: 50px;
}
.victor {
position: relative;
background-color: #ffffff;
border: 3px solid #ffffff;
border-radius: 50%;
display: inline-block;
margin-left: 50px;
margin-right: auto;
bottom: 110px;
width: 50%;
}
.user-name {
position: absolute;
width: 30%;
left: 20vh;
top: 40vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #2d3248;
font-size: 18px;
}
.user-age {
position: absolute;
width: 20%;
right: 15.5vh;
top: 40vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #969696;
font-size: 18px;
}
.user-location {
position: absolute;
width: 25%;
left: 22.5vh;
top: 45.5vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #969696;
}
hr {
border-top: 1px solid #969696;
width: 100%;
bottom: 50vh;
}
<div class="topcon">
<img class="pattern-card" src="images/bg-pattern-card.svg" alt="pattern card at the frame." />
<img class="victor" src="images/image-victor.jpg" alt="image for Victor" />
<p class="user-name">Victor Crest</p>
<p class="user-age">26</p>
<p class="user-location">London</p>
<hr /> 80K Followers 803K Likes 1.4K Photos
</div>
Try with this
hr{
border-top: 1px solid #969696;
margin-left: -50px;
width: 350px;
margin-top: -15px;
}
change the margin top and width and margin left according to your div width and height
You can also dismiss the horizontal ruler (line) entirely, and use CSS border-top. I tried and got this:
body {
font-family: "Open Sans", sans-serif;
}
body * {
box-sizing: border-box;
}
.card {
width: 300px;
height: 320px;
margin: 20px auto;
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
}
.card-header {
height: 105px;
background: #44d3d9;
}
.card-image {
margin-top: -50px;
}
.card-image img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 100px;
height: auto;
border: 4px solid #fff;
}
.card-content h2 {
font-size: 14px;
margin-bottom: 5px;
}
.card-content h2 span {
color: #6d6d6d;
padding-left: 6px;
}
.card-content .location {
margin: 0;
font-size: 13px;
color: #6d6d6d;
}
.card-footer {
display: flex;
margin-top: auto;
height: 90px;
border-top: 1px solid #efefef;
}
.card-footer > div {
flex-grow: 1;
display: flex;
flex-direction: column;
border-right: 1px solid #efefef;
}
.card-footer > div:last-child {
border-right: none;
}
.card-footer ul {
margin: auto 0;
padding: 0;
list-style-type: none;
}
.card-footer ul li {
color: #6d6d6d;
font-size: 11px;
}
.card-footer ul li.count {
color: #111111;
font-size: 16px;
font-weight: 600;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<div class="card">
<div class="card-header"></div>
<div class="card-image">
<img src="https://randomuser.me/api/portraits/men/91.jpg" alt="">
</div>
<div class="card-content">
<h2>Victor Crest <span>26</span></h2>
<p class="location">London</p>
</div>
<div class="card-footer">
<div>
<ul>
<li class="count">80K</li>
<li>Folowers</li>
</ul>
</div>
<div>
<ul>
<li class="count">803K</li>
<li>Likes</li>
</ul>
</div>
<div>
<ul>
<li class="count">1.4K</li>
<li>Photos</li>
</ul>
</div>
</div>
</div>