I have an image that I am trying to scale as the screen size reduces. On desktop it work fine for resolution 1336 x 625 but as soon as the screen reduces to 500 X 625 the image does not scale properly and edges are cut down. I tried putting max-width and the position. Still it doesn't work. What I need to change to make it work.
Css code
* {
margin: 0;
padding: 0;
}
body {
font-family: "Montserrat",sans-serif;
background-color: #CCC;
}
.card-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 1000px;
}
.card {
width: 650px;
height: 400px;
background-color: #fff;
transform-style: preserve-3d;
position: relative;
border-radius: 15px;
transition: transform 1s;
}
.card-wrapper:hover .card {
transform: rotateY(180deg);
box-shadow: 1 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.card-front{
width: 100%;
height: 100%;
border-radius: 15px;
backface-visibility: hidden;
background: linear-gradient(white,white);
}
.up {
width: 30%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: right;
}
.up img {
position: absolute;
width: 60%;
height: 60%;
top: 5px;
right: 5px;
}
.up span {
text-transform: uppercase;
color: #0d5692;
}
.down {
position: absolute;
width: 70%;
height: 30%;
color: black;
top: 170px;
left: 5px;
}
.down-content {
display: flex;
align-items: center;
margin: 10px 0;
}
.person {
font-family: "Yu Gothic",UI-Semibold;
font-size: 12px;
color: rgb(102, 0, 51);
padding-left: 20px;
}
.designation {
font-family: "Yu Gothic",UI-Semibold;
font-size: 10px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.address {
font-family: "Arial Nova Light";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.phone {
font-family: "Arial Nova Light";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.card-back {
transform: rotateY(180deg);
position: absolute;
top:0;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 15px;
background: linear-gradient(white,white);
}
.back-up {
width: 40%;
height: 40%;
}
.back-up img {
position: absolute;
width: 60%;
height: 60%;
top: 5px;
right: 5px;
}
.back-down {
position: absolute;
width: 100%;
height: 60%;
color: black;
top: 140px;
left: 5px;
}
.back-designation {
font-family: "Meiryo";
font-size: 10px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.back-person {
font-family: "Meiryo UI";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.back-address {
font-family: "Meiryo";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.back-phone {
font-family: "Meiryo";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet"
/>
<link rel="stylesheet" href="style-Origional.css" />
<title>Business Card</title>
</head>
<body>
<div class="card-wrapper">
<div class="card">
<div class="card-front">
<div class="up">
<img src="images/logo.png" />
<!-- <h4><span>AWS Architect</span></h4> -->
</div>
<div class="down">
<div class="person down-content">
<div>
<h2> Jarich Vansteenberge </h2>
</div>
</div>
<div class="designation down-content">
<div>
<h2> Manager </h2>
<h2> Technology & Innovation </h2>
<h2> Information & Digital Solutions </h2>
</div>
</div>
<div class="address down-content">
<div>
<p> Astrazeneca K.K. </p>
<p> Grand Front Osaka Tower B 3-1,</p>
<p> Ofuka-chu, Kita-ku, Osaka 530-0011, Japan </p>
</div>
</div>
<div class="phone down-content">
<div>
<p> Mobile +81-80-6222-4967 </p>
<p> E-mail jarich.vansteenberge#astrazeneca.com </p>
</div>
</div>
</div>
</div>
<div class="card-back" >
<div class="back-up">
<img src="images/logo.png" width="150"/>
<!-- <h4><span>AWS Architect</span></h4> -->
</div>
<div class="back-down">
<div class="back-designation down-content">
<div>
<h2> インフォメーション＆デジタルソリューションズ本部 </h2>
<h2> テクノロジーとイノベーション </h2>
<h2> マネージャー </h2>
</div>
</div>
<div class="back-person down-content">
<div>
<h2> バンステーンベルグ ジャリコ </h2>
</div>
</div>
<div class="back-address down-content">
<div>
<p> アストラゼネカ </p>
<p> グランフロント大阪タワーB 3-1,</p>
<p> 大阪市北区大深法律事務所530-0011 </p>
</div>
</div>
<div class="back-phone down-content">
<div>
<p> 携帯電話番号 +81-80-6222-4967 </p>
<p> E-mail jarich.vansteenberge#astrazeneca.com </p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.responsive {
width:100%;
height:auto;
}
you can add these class to the image and it will work fine
Related
below is the code for both html and css. Please I really need help with this issue and I want a solution why the scrolling effect is not working after i tried using html{
scroll-behavior: smooth;
}.....I have tried also to use some java script short codes but it is still not working. I have designed it to scroll to a specific part of the page after clicking on the menu headings
<html lang="en">
<head>
<title> Anetin Super Structures</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="images/logo (1).png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<!--home section-->
<section id="coverphoto">
<img src="images/logomah.png" class="logo">
<div class="banner-text">
<h1 class="heading">Anetin Super Structures</h1>
<p class="paragraph">Engineering your dreams with us</p>
<div class="banner-btn">
<span></span> Find Out
<span></span> Read More
</div>
</div>
</section>
<div id="sideNav">
<nav>
<ul>
<li>HOME</li>
<li>FEATURES</li>
<li>SERVICES</li>
<li>TESTIMONIALS</li>
<li>ABOUT US</li>
</ul>
</nav>
</div>
<div id="menuBtn">
<img src="/images/menu-button.png" id="menu" >
</div>
<!--features sections-->
<section id="features">
<div class="title-text">
<p>FEATURES</p>
<h1>Why Choose Us</h1>
</div>
<div class="feature-box">
<div class="features">
<h1>Experienced Stuff</h1>
<div class="features-desk">
<div class="features-icon">
<i class="fa fa-shield"></i>
</div>
<div class="features-text">
<p>How we do it! On large scale construction our Architects normally manages the job with a construction manager and a design engineer supervising it.</p>
</div>
</div>
<h1>Pre Booking Online</h1>
<div class="features-desk">
<div class="features-icon">
<i class="fa fa-check-square-o"></i>
</div>
<div class="features-text">
<p>How we do it! On large scale construction our Architects normally manages the job with a construction manager and a design engineer supervising it.</p>
</div>
</div>
<h1>Affordable Cost</h1>
<div class="features-desk">
<div class="features-icon">
<i class="fa fa-usd"></i>
</div>
<div class="features-text">
<p>In every services that we offer we also make sure that they have affordable costs with quality work</p>
</div>
</div>
</div>
<div class="features-img">
<img src="images/feature.jpeg" >
</div>
</div>
</section>
<!--services section-->
<section id="services">
<div class="title-text">
<p>SERVICES</p>
<h1>We Provide Better</h1>
</div>
<div class="service-box">
<div class="single-service">
<img src="images/buildingN.jpeg">
<div class="overlay"></div>
<div class="service-descrip">
<h3>Construction</h3>
<hr>
<p></p>
</div>
</div>
<div class="single-service">
<img src="images/electrical eng.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Electrical Engineering</h3>
<hr>
<p></p>
</div>
</div>
<div class="single-service">
<img src="images/Painting.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Wall Painting</h3>
<hr>
<p>We pair you up with the ideal artist for your project. From wall paintings to wall art ideas for your office or homes - the ideas are endless.</p>
</div>
</div>
<div class="single-service">
<img src="images/pumblingN.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Pumbling</h3>
<hr>
<p> We install, check, and replace fixtures in your home or commercial property to ensure that you obtain high-quality service and materials. Toilets, kitchen and bathroom sinks etc.</p>
</div>
</div>
<div class="single-service">
<img src="images/engineeringdrawings.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Engineering Drawings</h3>
<hr>
<p></p>
</div>
</div>
<div class="single-service">
<img src="images/roofing.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Roofing</h3>
<hr>
<p>Custom Roofs, Ceiling, Material, Installation, Supply and Manufacturing by our professional engineers</p>
</div>
</div>
</div>
</section>
<!--end of services section-->
<!--testimonial section-->
<section id="testimonial">
<div class="title-text">
<p>TESTIMONIALS</p>
<h1>What Client Says</h1>
</div>
<div class="testimonial-row">
<div class="testimonial-column">
<div class="user">
<img src="images/tatenda.jfif">
<div class="user-info">
<h4>TATENDA CHIKOMA <i class="fa fa-twitter"></i></h4>
<small>#taibo87</small>
</div>
</div>
<p>To say we're happy would be an understatement. When Anetin Team builds a home for you, they'll build it with care as if they were doing it for themselves and their families. Anetin Team would definitely be the one to build our next home in Southley Park, Harare.</p>
</div>
<div class="testimonial-column">
<div class="user">
<img src="images/nyasha.jfif">
<div class="user-info">
<h4> NYASHA MUGANHIRE<i class="fa fa-twitter"></i></h4>
<small>#nyaash_16!</small>
</div>
</div>
<p>I love this company. Very easy to talk to them and they really know how to save money and do quality stuff. Anetin Super Structures were great to work with, they did a complete remodel of our kitchen and two bathrooms providing best ceiling fitting and repairing the damaged water system. </p>
</div>
<div class="testimonial-column">
<div class="user">
<img src="images/lorraine.jpg">
<div class="user-info">
<h4>LORRAINE MHASHU <i class="fa fa-twitter"></i></h4>
<small>#lolo30_</small>
</div>
</div>
<p>If you need a new roof please do yourself a favour and get in touch with Anetin Super Structures. I can't say enough how awesome it was working with Anetin, they made the entire roofing beautifully i'm always grateful. </p>
</div>
</div>
</section>
<!--end of testimonial section-->
<!--footer section-->
<section id="footer">
<img src="images/brick layering.jpg" class="footer-img">
<div class="title-text">
<p>CONTACT</p>
<h1>Visit Shop Today</h1>
</div>
<div class="footer-row">
<div class="footer-left">
<h1>Opening Hours</h1>
<p><i class="fa fa-clock-o"></i>Monday to Friday - 8am to 5pm</p>
<p><i class="fa fa-clock-o"></i>Saturday and Sunday - 9am to 3pm</p>
</div>
<div class="footer-right">
<h1>Get In Touch</h1>
<p>7329 Limpopo Rd Zimre Park, Zimbabwe<i class="fa fa-map-marker"></i></p>
<p>anetinsuperstructures#gmail.com</p>
<p><i class="fa fa-phone"></i>+263 77 448 7726</p>
</div>
</div>
<div class="social-links">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube-play"></i>
<p>© 2022 Anetin Super Structures. All Rights Reserved</p>
</div>
</section>
<!--end of footer section-->
<script>
var menuBtn = document.getElementById("menuBtn")
var sideNav = document.getElementById("sideNav")
var menu = document.getElementById("menu")
sideNav.style.right== "-250px"
menuBtn.onclick= function(){
if(sideNav.style.right== "-250px"){
sideNav.style.right= "0";
menu.src="/images/cancel.png";
}
else{
sideNav.style.right="-250px";
menu.src="/images/menu-button.png"
}
}
</script>
</body>
</html>
/*CSS*/
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
html{
scroll-behavior: smooth;
}
#coverphoto{
background: linear-gradient(rgba(0,0,0,0.5),#967300),url(../images/cover.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.logo{
width: 140px;
position: absolute;
top: 4%;
left: 10%;
}
.banner-text{
text-align: center;
color: #fff;
padding-top: 180px;
}
.banner-text h1{
font-size: 130px;
font-family: 'Kaushan Script', cursive;
animation: anim 2s;
}
.banner-text p{
font-size: 20px;
font-style: italic;
font-weight: 100;
animation: anim 1.5s .5s backwards;
}
#keyframes anim{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.banner-btn{
margin: 70px auto;
animation: anim 2s .8s backwards;
}
.banner-btn a{
width: 150px;
text-decoration: none;
display: inline-block;
margin: 0 10px;
padding: 12px 0;
color: #fff;
border: .5px solid #fff;
position: relative;
z-index: 1;
transition: color .5s;
}
.banner-btn a span{
width: 0%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
z-index: -1;
transition: .5s;
}
.banner-btn a:hover span{
width: 100%;
}
.banner-btn a:hover{
color: black;
}
#sideNav{
width: 250px;
height: 100vh;
position: fixed;
right: -250px;
top: 0;
background: #967300;
z-index: 2;
transition: .5s;
}
nav ul li{
list-style: none;
margin: 50px 20px;
color: #fff;
cursor: pointer;
}
nav ul li a {
text-decoration: none;
}
#menuBtn{
width: 30px;
height: 25px;
background: #967300;
text-align: center;
position: fixed ;
right: 50px;
top: 30px ;
border-radius: 3px;
z-index: 3;
cursor: pointer;
}
.menu-btn img{
width: 20px;
margin-top: 15px;
}
#media screen and (max-width: 770px) {
.banner-text h1{
font-size: 44px;
}
.banner-btn a{
display: block;
margin: 20px auto;
}`enter code here`
}
/* features*/
#features{
width: 100%;
padding: 70px 0;
}
.title-text{
text-align: center;
padding-bottom: 70px;
}
.title-text p{
margin: auto;
font-size: 20px;
color: #ddb01d;
font-weight: bold;
position: relative;
z-index: 1;
display: inline-block;
}
.title-text p::after{
content: '';
width: 50px;
height: 35px;
background: linear-gradient(#ddb01d, #fff) ;
position: absolute;
top: -20px;
left: 0;
z-index: -1;
transform: rotate(10deg);
border-top-left-radius: 35px;
border-bottom-right-radius: 35px;
}
.title-text h1{
font-size: 50px;
}
.feature-box{
width: 80%;
margin:auto ;
display: flex;
flex-wrap: wrap ;
align-items: center;
text-align: center;
}
.features{
flex-basis: 50%;
}
.features-img{
margin: auto;
flex-basis: 50%;
}
.features-img img{
width: 70%;
border-radius: 10px;
}
.features h1{
text-align: left;
margin-bottom: 10px;
font-weight: 100;
color: #967300;
}
.features-desk{
display: flex;
align-items: center;
margin-bottom: 40px;
}
.features-icon .fa{
width: 50px;
height: 50px;
font-size: 30px;
line-height: 50px;
border-radius: 8px;
color: #967300;
border: 1px solid #967300;
}
.features-text p{
padding: 0 20px;
text-align: initial;
}
#media screen and (max-width: 770px) {
.title-text h1{
font-size: 35px;
}
.features{
flex-basis: 100%;
}
.features-img{
flex-basis: 100%;
}
.features-img img{
width: 100%;
}
}
#services{
width: 100%;
padding: 70px 0;
background: #efefef;
}
.service-box{
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-around ;
margin: auto;
}
.single-service{
flex-basis: 48%;
text-align: center;
border-radius: 7px;
margin-bottom: 20px;
color: #fff;
position: relative;
}
.single-service img{
width: 100%;
border-radius: 7px;
}
.overlay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
border-radius: 7px;
cursor: pointer;
background: linear-gradient(rgba(0,0,0,0.5), #967300);
opacity: 0;
transition: 1s;
}
.single-service:hover .overlay{
opacity: 1;
}
.service-descrip{
bottom: 0;
left: 50%;
width: 80%;
position:absolute;
transform: translateX(-50%);
opacity: 0;
transition: 1s;
}
hr{
background: #fff;
height:2px ;
border: 0;
margin: 15px auto;
width: 60%;
}
.service-descrip p{
font-size: 14px;
}
.single-service:hover .service-descrip{
bottom: 40%;
opacity: 1;
}
#media screen and (max-width: 770px) {
.single-service{
flex-basis: 100%;
margin-bottom: 30px;
}
.service-descrip p{
font-size: 12px;
}
hr{
margin: 5px auto;
}
.single-service:hover .service-descrip{
bottom: 25% !important;
}
}
#testimonial{
width: 100%;
padding: 70px 0;
}
.testimonial-row{
width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.testimonial-column{
flex-basis: 28%;
padding: 10px ;
margin-bottom: 30px;
border-radius: 5px ;
box-shadow: 0 10px 20px 3px #00968814;
cursor: pointer;
transition: transform .5s;
}
.testimonial-column p{
font-size: 14px;
}
.user{
display: flex;
margin: 2px 0px;
align-items: center;
}
.user img{
width: 40px;
margin-right: 20px;
border-radius: 3px;
}
.user-info .fa{
margin-left: 10px;
color: #27c0ff;
font-size: 20px;
}
.user-info small{
color: #009688;
}
.testimonial-column:hover{
transform: translateY(-7px);
}
#media screen and (max-width: 770px){
.testimonial-column{
flex-basis: 100%;
}
}
#footer{
padding: 100px 0 20px;
background: #efefef;
position: relative;
}
.footer-row{
width: 80%;
margin: 0 auto;
display: flex ;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-left, .footer-right{
padding: 10px;
margin-bottom: 20px ;
flex-basis: 45% ;
}
.footer-right{
text-align: right;
}
.footer-row h1{
margin: 10px 0;
}
.footer-row p{
line-height: 35px;
}
.footer-left .fa, .footer-right .fa{
font-size: 20px;
color: #967300;
margin: 10px;
}
.footer-img{
max-width: 370px;
opacity: 0.1;
position:absolute;
left: 50%;
top: 35%;
transform: translate(-50%, -50%);
}
.social-links{
text-align: center;
}
.social-links .fa{
height: 40px;
width: 40px;
font-size: 20px;
line-height: 40px;
border: 1px solid #967300;
margin: 40px 5px 0;
transition: .5s;
}
.social-links .fa:hover{
background: #967300;
color: #fff;
transform: translateY(-7px);
cursor: pointer;
}
.social-links p{
font-size: 12px;
margin-top: 20px;
}
#media screen and (max-width: 770px){
.footer-left, .footer-right{
flex-basis: 100%;
font-size: 14px;
}
.footer-img{
top: 25%;
}
}
I think you must ad scroll-behavior: smooth; to body selector!
You can try this:
// anhor
const menuBtn = document.getElementById("menuBtn");
menuBtn?.addEventListener('click', function(e) {
e.preventDefault();
const target = document.getElementById("some-selector");
target.scrollIntoView({ behavior: "smooth", block: "start" });
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Im trying to remove some whitespace from the bottom of my website.
I tried to adjust the .product overflow to hidden but that didnt work.
image of the whitespace im trying to remove
here's my code:
https://jsfiddle.net/w7zemk0d/
Any help would be appreciated :)
The problem is that the last div is being sized using the height of the elements and assumes that the three plan cards are underneath each other, because of that the "prices" div takes up so much vertical space.
If you remove the absolute positioning and switch to a flex layout for the div, there is no gap at the bottom anymore:
body {
overflow-x: hidden;
overflow-y: auto;
background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
}
#header {
font-family: quicksand;
font-size: 25px;
position: relative;
left: 105px;
top: -80px;
color: white;
}
#header-div {
width: 2000px;
height: 75px;
box-shadow: 5px 5px 8px rgb(128, 128, 128);
background-color: rgb(255, 202, 103);
position: relative;
top: -10px;
left: -10px;
}
#header-img {
position: relative;
top: -12px;
left: 5px;
}
#email {
overflow-x: auto !important;
overflow-y: auto !important;
margin: 20px;
width: 500px;
height: 32px;
border: 1px solid black;
border-radius: 5px;
font-family: quicksand;
font-size: 20px;
}
#email-div {
margin: 20px;
text-align: center;
}
#email-label {
font-family: quicksand;
font-size: 20px;
}
#g-btn {
width: 150px;
height: 30px;
background-color: rgb(255, 194, 81);
font-family: quicksand;
font-size: 18px;
border: none;
border-radius: 5px;
}
#g-btn:hover {
animation-name: button-animation;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes button-animation {
100% {
background-color: rgb(255, 216, 143);
}
}
#nav-links {
position: relative;
left: 1050px;
top: -123px;
display: flex;
flex-direction: column;
}
#nav-links li {
display: inline;
font-family: quicksand;
font-size: 20px;
}
#nav-links a {
color: white;
text-decoration: none;
word-spacing: 5px;
}
#features {
text-align: center;
}
.features-text {
font-family: quicksand;
font-size: 25px;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
left: 60px;
top: -35px;
}
#padlock {
position: relative;
top: 35px;
left: -400px;
}
#padlock-text {
top: -90px;
}
#p-header {
position: relative;
top: -60px;
left: -235px;
}
#location {
position: relative;
left: -400px;
top: -10px;
}
#location-text {
position: relative;
top: -145px;
left: 80px;
}
#l-header {
position: relative;
top: -120px;
left: -200px;
}
#mobile {
position: relative;
left: -400px;
top: -65px;
}
#mobile-text {
position: relative;
top: -200px;
left: 160px;
}
#m-header {
position: relative;
top: -185px;
left: -230px;
}
.header-text {
font-family: quicksand;
font-size: 30px;
}
#video {
display: flex;
justify-content: center;
position: relative;
top: -150px;
}
/* Start Of Danger Zone */
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid black;
border-radius: 5px;
width: 350px;
font-family: quicksand;
margin: 10px;
background-color: white;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.product li {
list-style: none;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
border-radius: 5px;
text-transform: uppercase;
font-weight: bolder;
}
.button {
width: 100px;
height: 30px;
background-color: rgb(252, 189, 17);
border: none;
border-radius: 5px;
margin: 10px;
font-family: quicksand;
color: white;
font-size: 20px;
position: relative;
top: -15px;
}
.price {
font-size: 30px;
margin: 10px;
}
#prices{
display:flex;
width: fit-content;
max-width:100%;
margin: auto;
}
.perks {
position: relative;
top: -15px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FCC: VPN Product Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
<div id="main">
<div id="header-div">
<nav id="nav-bar">
<img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
<div id="header">Prive9000 VPN Service</div>
<div id="nav-links">
<ul>
<li> Features <span class="middot"> ·</span> </li>
<li> Pricing <span class="middot"> ·</span> </li>
<li> Mobile App </li>
</ul>
</div>
</nav>
</div>
<div id="email-div">
<form action="https://www.freecodecamp.org/email-submit)." id="email-form">
<label for="email" id="email-label"> Please Enter Your Email: <br>
<input id="email" type="email" placeholder=" Enter Your Email" required> <br>
</label>
<button type="submit" id="g-btn">GET STARTED</button>
</form>
</div>
<div id="features">
<img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
<h2 class="header-text" id="p-header">Privacy Ensured</h2>
<p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
<img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
<h2 class="header-text" id="l-header">Change Your Location</h2>
<p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
<img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
<h2 class="header-text" id="m-header">For All Platforms</h2>
<p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Start Of Danger Zone-->
<div id="prices">
<div class="product" id="free">
<div class="level">Free Plan</div>
<div class="price">Free</div>
<ul class="perks">
<li>No Payments; 100% Free</li>
<li>Connect To Over 20+ Countries</li>
<li>Ads Included</li>
<li>Doesn't Allow Country Swap</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="paid-monthly">
<div class="level">Monthly Paid Plan</div>
<div class="price">$100</div>
<ul class="perks">
<li>$100 per Month</li>
<li>Connect To Over 100+ Countries</li>
<li>Ads Included</li>
<li>Allows Country Swap For Netflix Only</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="yearly-paid">
<div class="level">Yearly Paid Plan</div>
<div class="price">$800</div>
<ul class="perks">
<li>$800 per Year</li>
<li>Connect To ALL Countries</li>
<li>Ad Free</li>
<li>Allows Country Swap For All Platfroms</li>
</ul>
<button class="button">Select</button>
</div>
</div>
</div>
<!--End Of Danger Zone-->
</div>
</body>
</html>
Your problem is not that you are using absolute positioning, it is because you aren't using absolute positioning. Change relative to absolute on #paid-monthly and #paid-yearly and you should be all set. You'll also need to change top: for both of them as indicated. This will preserve your staggered cards.
body {
overflow-x: hidden;
overflow-y: auto;
background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
background-size:cover;
}
#header {
font-family: quicksand;
font-size: 25px;
position: relative;
left: 105px;
top: -80px;
color: white;
}
#header-div {
width: 2000px;
height: 75px;
box-shadow: 5px 5px 8px rgb(128, 128, 128);
background-color: rgb(255, 202, 103);
position: relative;
top: -10px;
left: -10px;
}
#header-img {
position: relative;
top: -12px;
left: 5px;
}
#email {
overflow-x: auto !important;
overflow-y: auto !important;
margin: 20px;
width: 500px;
height: 32px;
border: 1px solid black;
border-radius: 5px;
font-family: quicksand;
font-size: 20px;
}
#email-div {
margin: 20px;
text-align: center;
}
#email-label {
font-family: quicksand;
font-size: 20px;
}
#g-btn {
width: 150px;
height: 30px;
background-color: rgb(255, 194, 81);
font-family: quicksand;
font-size: 18px;
border: none;
border-radius: 5px;
}
#g-btn:hover {
animation-name: button-animation;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes button-animation {
100% {
background-color: rgb(255, 216, 143);
}
}
#nav-links {
position: relative;
left: 1050px;
top: -123px;
display: flex;
flex-direction: column;
}
#nav-links li {
display: inline;
font-family: quicksand;
font-size: 20px;
}
#nav-links a {
color: white;
text-decoration: none;
word-spacing: 5px;
}
#features {
text-align: center;
}
.features-text {
font-family: quicksand;
font-size: 25px;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
left: 60px;
top: -35px;
}
#padlock {
position: relative;
top: 35px;
left: -400px;
}
#padlock-text {
top: -90px;
}
#p-header {
position: relative;
top: -60px;
left: -235px;
}
#location {
position: relative;
left: -400px;
top: -10px;
}
#location-text {
position: relative;
top: -145px;
left: 80px;
}
#l-header {
position: relative;
top: -120px;
left: -200px;
}
#mobile {
position: relative;
left: -400px;
top: -65px;
}
#mobile-text {
position: relative;
top: -200px;
left: 160px;
}
#m-header {
position: relative;
top: -185px;
left: -230px;
}
.header-text {
font-family: quicksand;
font-size: 30px;
}
#video {
display: flex;
justify-content: center;
position: relative;
top: -150px;
}
/* Start Of Danger Zone */
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid black;
border-radius: 5px;
width: 350px;
font-family: quicksand;
margin: 10px;
background-color: white;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.product li {
list-style: none;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
border-radius: 5px;
text-transform: uppercase;
font-weight: bolder;
}
.button {
width: 100px;
height: 30px;
background-color: rgb(252, 189, 17);
border: none;
border-radius: 5px;
margin: 10px;
font-family: quicksand;
color: white;
font-size: 20px;
position: relative;
top: -15px;
}
.price {
font-size: 30px;
margin: 10px;
}
.perks {
position: relative;
top: -15px;
}
#paid-monthly {
position: relative;
left: 380px;
top: -282px;
}
#yearly-paid {
position: relative;
left: 759px;
top: -565px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FCC: VPN Product Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
<div id="main">
<div id="header-div">
<nav id="nav-bar">
<img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
<div id="header">Prive9000 VPN Service</div>
<div id="nav-links">
<ul>
<li> Features <span class="middot"> ·</span> </li>
<li> Pricing <span class="middot"> ·</span> </li>
<li> Mobile App </li>
</ul>
</div>
</nav>
</div>
<div id="email-div">
<form action="https://www.freecodecamp.org/email-submit)." id="email-form">
<label for="email" id="email-label"> Please Enter Your Email: <br>
<input id="email" type="email" placeholder=" Enter Your Email" required> <br>
</label>
<button type="submit" id="g-btn">GET STARTED</button>
</form>
</div>
<div id="features">
<img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
<h2 class="header-text" id="p-header">Privacy Ensured</h2>
<p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
<img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
<h2 class="header-text" id="l-header">Change Your Location</h2>
<p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
<img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
<h2 class="header-text" id="m-header">For All Platforms</h2>
<p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Start Of Danger Zone-->
<div id="prices">
<div class="product" id="free">
<div class="level">Free Plan</div>
<div class="price">Free</div>
<ul class="perks">
<li>No Payments; 100% Free</li>
<li>Connect To Over 20+ Countries</li>
<li>Ads Included</li>
<li>Doesn't Allow Country Swap</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="paid-monthly">
<div class="level">Monthly Paid Plan</div>
<div class="price">$100</div>
<ul class="perks">
<li>$100 per Month</li>
<li>Connect To Over 100+ Countries</li>
<li>Ads Included</li>
<li>Allows Country Swap For Netflix Only</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="yearly-paid">
<div class="level">Yearly Paid Plan</div>
<div class="price">$800</div>
<ul class="perks">
<li>$800 per Year</li>
<li>Connect To ALL Countries</li>
<li>Ad Free</li>
<li>Allows Country Swap For All Platfroms</li>
</ul>
<button class="button">Select</button>
</div>
</div>
</div>
<!--End Of Danger Zone-->
</body>
</html>
body {
overflow-x: hidden;
overflow-y: auto;
background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
}
#header {
font-family: quicksand;
font-size: 25px;
position: relative;
left: 105px;
top: -80px;
color: white;
}
#header-div {
width: 2000px;
height: 75px;
box-shadow: 5px 5px 8px rgb(128, 128, 128);
background-color: rgb(255, 202, 103);
position: relative;
top: -10px;
left: -10px;
}
#header-img {
position: relative;
top: -12px;
left: 5px;
}
#email {
overflow-x: auto !important;
overflow-y: auto !important;
margin: 20px;
width: 500px;
height: 32px;
border: 1px solid black;
border-radius: 5px;
font-family: quicksand;
font-size: 20px;
}
#email-div {
margin: 20px;
text-align: center;
}
#email-label {
font-family: quicksand;
font-size: 20px;
}
#g-btn {
width: 150px;
height: 30px;
background-color: rgb(255, 194, 81);
font-family: quicksand;
font-size: 18px;
border: none;
border-radius: 5px;
}
#g-btn:hover {
animation-name: button-animation;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes button-animation {
100% {
background-color: rgb(255, 216, 143);
}
}
#nav-links {
position: relative;
left: 1050px;
top: -123px;
display: flex;
flex-direction: column;
}
#nav-links li {
display: inline;
font-family: quicksand;
font-size: 20px;
}
#nav-links a {
color: white;
text-decoration: none;
word-spacing: 5px;
}
#features {
text-align: center;
}
.features-text {
font-family: quicksand;
font-size: 25px;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
left: 60px;
top: -35px;
}
#padlock {
position: relative;
top: 35px;
left: -400px;
}
#padlock-text {
top: -90px;
}
#p-header {
position: relative;
top: -60px;
left: -235px;
}
#location {
position: relative;
left: -400px;
top: -10px;
}
#location-text {
position: relative;
top: -145px;
left: 80px;
}
#l-header {
position: relative;
top: -120px;
left: -200px;
}
#mobile {
position: relative;
left: -400px;
top: -65px;
}
#mobile-text {
position: relative;
top: -200px;
left: 160px;
}
#m-header {
position: relative;
top: -185px;
left: -230px;
}
.header-text {
font-family: quicksand;
font-size: 30px;
}
#video {
display: flex;
justify-content: center;
position: relative;
top: -150px;
}
/* Start Of Danger Zone */
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid black;
border-radius: 5px;
width: 350px;
font-family: quicksand;
margin: 10px;
background-color: white;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.product li {
list-style: none;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
border-radius: 5px;
text-transform: uppercase;
font-weight: bolder;
}
.button {
width: 100px;
height: 30px;
background-color: rgb(252, 189, 17);
border: none;
border-radius: 5px;
margin: 10px;
font-family: quicksand;
color: white;
font-size: 20px;
position: relative;
top: -15px;
}
.price {
font-size: 30px;
margin: 10px;
}
.perks {
position: relative;
top: -15px;
}
#paid-monthly {
position: absolute;
left: 380px;
top: 1285px;
}
#yearly-paid {
position: absolute;
left: 759px;
top: 1400px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FCC: VPN Product Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
<div id="main">
<div id="header-div">
<nav id="nav-bar">
<img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
<div id="header">Prive9000 VPN Service</div>
<div id="nav-links">
<ul>
<li> Features <span class="middot"> ·</span> </li>
<li> Pricing <span class="middot"> ·</span> </li>
<li> Mobile App </li>
</ul>
</div>
</nav>
</div>
<div id="email-div">
<form action="https://www.freecodecamp.org/email-submit)." id="email-form">
<label for="email" id="email-label"> Please Enter Your Email: <br>
<input id="email" type="email" placeholder=" Enter Your Email" required> <br>
</label>
<button type="submit" id="g-btn">GET STARTED</button>
</form>
</div>
<div id="features">
<img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
<h2 class="header-text" id="p-header">Privacy Ensured</h2>
<p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
<img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
<h2 class="header-text" id="l-header">Change Your Location</h2>
<p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
<img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
<h2 class="header-text" id="m-header">For All Platforms</h2>
<p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Start Of Danger Zone-->
<div id="prices">
<div class="product" id="free">
<div class="level">Free Plan</div>
<div class="price">Free</div>
<ul class="perks">
<li>No Payments; 100% Free</li>
<li>Connect To Over 20+ Countries</li>
<li>Ads Included</li>
<li>Doesn't Allow Country Swap</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="paid-monthly">
<div class="level">Monthly Paid Plan</div>
<div class="price">$100</div>
<ul class="perks">
<li>$100 per Month</li>
<li>Connect To Over 100+ Countries</li>
<li>Ads Included</li>
<li>Allows Country Swap For Netflix Only</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="yearly-paid">
<div class="level">Yearly Paid Plan</div>
<div class="price">$800</div>
<ul class="perks">
<li>$800 per Year</li>
<li>Connect To ALL Countries</li>
<li>Ad Free</li>
<li>Allows Country Swap For All Platfroms</li>
</ul>
<button class="button">Select</button>
</div>
</div>
</div>
<!--End Of Danger Zone-->
</body>
</html>
I just started learning HTML and CSS. And I got a problem. Perhaps she is not worth attention, but still I ask for help. The problem is that the word "Hi" stubbornly does not want to be displayed in its block. And I don’t know how to remove the gap over the header. And sorry for the poor code architecture.
HTML:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
<h1 acolor>Hi</h1>
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="come">
<p class="color">
<h4></h4>
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
</div>
<main>
</main>
</div>
<footer>
<div class="footer"></div>
</footer>
</body>
</html>
CSS:
.header{
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer{
width: 1928px;
height: 534px;
background-color: #202326;
}
.body{
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all{
width: 1170px;
height: 700px;
}
.categ{
width: 273px;
height: 514px;
}
.cat{
width: 273px;
height: 50px;
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.mycat{
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com{
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color{
color: #000000;
}
.acolor{
color: black;
text-align: right ;
font-weight: 900;
}
h1 .acolor{
color: red;
}
.come{
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}
I slightly cleaned your code and needs good attention, no need to use p within h2 tags:
body {
margin: 0;
}
.header {
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer {
width: 1928px;
height: 534px;
background-color: #202326;
}
.body {
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all {
width: 1170px;
height: 700px;
}
.categ {
width: 273px;
height: 514px;
}
.cat {
width: 273px;
height: 50px;
background-color: #86b817;
margin-left: 391px;
font-weight: 900;
text-align: center;
font-size: 40px;
vertical-align: center;
}
.mycat {
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com {
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color {
color: #000000;
}
h1 .acolor {
color: red;
}
.come {
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
Hi
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"></p>
</div>
<div class="com">
<p class="color"></p>
</div>
<div class="come">
<p class="color">
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
<main>
</main>
<footer>
<div class="footer"></div>
</footer>
You can remove height for .cat class and remove margin for h1 tag as
.cat{
width: 273px;
/*height: 50px;*/
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.cat h1{
margin: 0;
}
.header{
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer{
width: 1928px;
height: 534px;
background-color: #202326;
}
.body{
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all{
width: 1170px;
height: 700px;
}
.categ{
width: 273px;
height: 514px;
}
.cat{
width: 273px;
/*height: 50px;*/
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.mycat{
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com{
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color{
color: #000000;
}
.acolor{
color: black;
text-align: right ;
font-weight: 900;
}
h1 .acolor{
color: red;
}
.come{
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}
.cat h1{
margin: 0;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
<h1 acolor>Hi</h1>
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="come">
<p class="color">
<h4></h4>
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
</div>
<main>
</main>
</div>
<footer>
<div class="footer"></div>
</footer>
</body>
</html>
So I am basically trying to get a scrolling parallax effect with multiple background images on my webpage. I will post a link to a website with a perfect example of what I am talking about (look at the first two background images on the webpage). Here is that link: https://www.wix.com/website-template/view/html/1885?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fportfolio-cv%2F1&bookName=&galleryDocIndex=0&category=portfolio-cv
The problem with my webpage however is that once you scroll down to a certain point, the first background image gets cut off (as it should) but the second background image scrolls too soon and leaves this "whitespace" where the background is revealed. I will give a jsfiddle link so you can see what I am talking about. You might have to expand the viewport on jsfiddle to see the first background image for some reason. Thanks in advance.
CSS:
body {
padding: 0;
margin: 0;
background-color: rgb(114, 129, 139);
overflow-x: hidden;
animation: fadein 1s;
}
a {
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
}
h1 {
line-height: 300px;
font-size: 90px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic,
"AppleGothic", sans-serif;
}
h2 {
position: relative;
bottom: 50px;
font-size: 60px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic,
"AppleGothic", sans-serif;
}
#p_in_first_div {
font-size: 20px;
line-height: 120px;
vertical-align: middle;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic,
"AppleGothic", sans-serif;
}
#first_bg_image {
display: inline-block;
position: relative;
width: 100%;
}
#first_bg_image::after {
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
background: url(http://pngimg.com/uploads/businessman/businessman_PNG6580.png);
background-position: 49em 0px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin-top: -1700px;
width: 120%;
height: 3100px;
opacity: 0.8;
pointer-events: none;
transform: scale(.80);
}
#second_bg_image {
display: inline-block;
position: relative;
width: 100%;
}
#second_bg_image::after {
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
background: url(https://image.freepik.com/free-photo/desktop-with-notebook-smartphone-coffee-and-laptop_1112-253.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin-top: 377px;
height: 1600px;
background-position: center;
z-index: -1;
opacity: 0.7;
transform: scale(1, 0.8);
}
#header_div {
width: 100%;
height: 70px;
box-shadow: 0px 1px 40px;
background-color: rgb(143, 0, 46);
}
#header_nav {
line-height: 70px;
word-spacing: 25px;
font-size: 13.4px;
}
#header_div_icon {
position: relative;
right: 50px;
vertical-align: middle;
width: 40px;
height: 40px;
}
#current_link_home {
color: rgb(190, 226, 231);
}
#first_body_div {
height: 690px;
width: 820px;
background-color: rgb(69, 72, 87);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
margin-bottom: 7%;
box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.5);
position: relative;
}
#icon_in_div {
margin-left: auto;
margin-right: auto;
display: block;
width: 100px;
height: 100px;
padding: 160px 0px 0px 0px;
}
#resume_button {
background-color: Transparent;
border: 2px solid rgb(79, 87, 170);
outline: none;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic,
"AppleGothic", sans-serif;
font-size: 18px;
display: block;
margin-left: auto;
margin-right: auto;
line-height: 45px;
width: 220px;
height: 45px;
transition-duration: 0.4s;
}
#professional_skills_div_1 {
width: 230px;
height: 15px;;
background-color: rgb(79, 87, 170);
}
#professional_skills_div_2 {
width: 230px;
height: 15px;
background-color: rgb(79, 87, 170);
}
#professional_skills_div_3 {
width: 230px;
height: 15px;
background-color: rgb(79, 87, 170);
}
#professional_skills_div_4 {
width: 430px;
height: 15px;
background-color: rgb(79, 87, 170);
}
#professional_skills_div_5 {
width: 280px;
height: 15px;
background-color: rgb(79, 87, 170);
}
#professional_skills_div_6 {
width: 480px;
height: 15px;
background-color: rgb(79, 87, 170);
}
#professional_skills_div_7 {
width: 480px;
height: 15px;
background-color: rgb(79, 87, 170);
}
#professional_skill_percentage_80 {
font-size: 15px;
font-family: Tahoma, Geneva, sans-serif;
text-align: left;
position: relative;
right: -20px;
top: -4px;
}
#professional_skill_percentage_60 {
font-size: 15px;
font-family: Tahoma, Geneva, sans-serif;
text-align: left;
position: relative;
right: 130px;
top: -3px;
}
.h2_line_heights {
line-height: 450px;
}
.other_links {
color: rgb(114, 129, 139);
}
.text_align {
text-align: center;
}
.text_color {
color: rgb(190, 226, 231);
}
.h2_subheadings_font {
font-size: 30px;
}
.h2_subheadings_positions {
position: relative;
top: -260px;
}
.professional_divs {
position: relative;
right: 32px;
height: 45px;
top: -210px;
width: 1400px;
margin-left: auto;
margin-right: auto;
}
.professional_outside_divs {
display: inline-block;
width: 35%;
}
.professional_paragraphs {
font-size: 15px;
font-family: Tahoma, Geneva, sans-serif;
text-align: right;
position: relative;
right: 40px;
top: -4px;
}
.professional_outside_skill_bar_divs {
width: 29%;
display: inline-block;
position: relative;
right: 1.5vw;
}
.professional_skill_percentages_50 {
font-size: 15px;
font-family: Tahoma, Geneva, sans-serif;
position: relative;
right: 180px;
top: -4px;
}
.professional_skill_percentage_90 {
font-size: 15px;
font-family: Tahoma, Geneva, sans-serif;
position: relative;
left: 70px;
top: -3px;
}
HTML:
<body lang="en-US">
<div id="first_bg_image">
<header>
<div id="header_div">
<nav class="text_align" id="header_nav">
<!--
image source:
https://scrapbookalphabet.blogspot.com/2011/08/wood-slat-png-free-scrapbook-letters.html?m=1
-->
<img id="header_div_icon"
src="https://3.bp.blogspot.com/-8Gdu_oKhrdM/Tk_5-lBzZII/AAAAAAAACIU/cw3CLnAXv5k/s1600/1Capital-Letter-C-Wood.png"
alt="Icon 1">
HOME
<a href="#prof_id" class="other_links" id="professional_link">
PROFESSIONAL
</a>
<a href="#exper_id" class="other_links" id="experience_link">
EXPERIENCE
</a>
<a href="portfolio_page.html" class="other_links" id="portfolio_link">
PORTFOLIO
</a>
<a href="#second_body_div" class="other_links" id="contact_link">
CONTACT
</a>
</nav>
</div>
</header>
<div class="text_align">
<h1 class="text_color">
I<span>'</span>m Chad Wilson<span>.</span>
</h1>
</div>
<div class="text_align">
<h2 class="text_color h2_subheadings_font">
Front End Web Developer
</h2>
</div>
</div>
<div id="second_bg_image">
<div id="first_body_div">
<img id="icon_in_div"
src="https://3.bp.blogspot.com/-8Gdu_oKhrdM/Tk_5-lBzZII/AAAAAAAACIU/cw3CLnAXv5k/s1600/1Capital-Letter-C-Wood.png"
alt="Icon 2">
<p class="text_align text_color" id="p_in_first_div">
Click the link below to download my resume.
</p>
<a href="https://drive.google.com/file/d/0B5NM_iPTWudsRzRzS094Ul9pMTQ/view?usp=sharing"
id="resume_button"
class="text_color text_align"
target="_blank">
Download Resume
</a>
</div>
<div class="text_align h2_line_heights" id="prof_id">
<h2 class="text_color">
<span>01</span> Professional
</h2>
</div>
<div class="text_align">
<h2 class="text_color h2_subheadings_font h2_subheadings_positions">
My Knowledge Level in Software
</h2>
</div>
<div class="professional_divs">
<div class="professional_outside_divs">
<p class="professional_paragraphs text_color">
Wordpress
</p>
</div>
<div class="professional_outside_skill_bar_divs">
<div id="professional_skills_div_1">
</div>
</div>
<div class="professional_outside_divs">
<p class="professional_skill_percentages_50 text_color">
50%
</p>
</div>
</div>
<div class="professional_divs">
<div class="professional_outside_divs">
<p class="professional_paragraphs text_color">
Drupal
</p>
</div>
<div class="professional_outside_skill_bar_divs">
<div id="professional_skills_div_2">
</div>
</div>
<div class="professional_outside_divs">
<p class="professional_skill_percentages_50 text_color">
50%
</p>
</div>
</div>
<div class="professional_divs">
<div class="professional_outside_divs">
<p class="professional_paragraphs text_color">
Wix
</p>
</div>
<div class="professional_outside_skill_bar_divs">
<div id="professional_skills_div_3">
</div>
</div>
<div class="professional_outside_divs">
<p class="professional_skill_percentages_50 text_color">
50%
</p>
</div>
</div>
<div class="professional_divs remove_bottom_bar">
<div class="professional_outside_divs">
<p class="professional_paragraphs text_color">
Photoshop
</p>
</div>
<div class="professional_outside_skill_bar_divs">
<div id="professional_skills_div_4">
</div>
</div>
<div class="professional_outside_divs">
<p class="text_color" id="professional_skill_percentage_80">
80%
</p>
</div>
</div>
<div class="professional_divs">
<div class="professional_outside_divs">
<p class="professional_paragraphs text_color">
Illustrator
</p>
</div>
<div class="professional_outside_skill_bar_divs">
<div id="professional_skills_div_5">
</div>
</div>
<div class="professional_outside_divs">
<p class="text_color" id="professional_skill_percentage_60">
60%
</p>
</div>
</div>
<div class="professional_divs remove_bottom_bar">
<div class="professional_outside_divs">
<p class="professional_paragraphs text_color">
Javascript
</p>
</div>
<div class="professional_outside_skill_bar_divs">
<div id="professional_skills_div_6">
</div>
</div>
<div class="professional_outside_divs">
<p class="text_color professional_skill_percentage_90">
90%
</p>
</div>
</div>
<div class="professional_divs remove_bottom_bar">
<div class="professional_outside_divs">
<p class="professional_paragraphs text_color">
HTML & CSS
</p>
</div>
<div class="professional_outside_skill_bar_divs">
<div id="professional_skills_div_7">
</div>
</div>
<div class="professional_outside_divs">
<p class="text_color professional_skill_percentage_90">
90%
</p>
</div>
</div>
</div>
JSFIDDLE link: https://jsfiddle.net/245uqz0p/
I think this link might help you.
w3school parallax effect
So I took use of the 'Sticky Footer' code which automatically places the footer below all of the content, my problem is that my content height is set to 1300 pixels, meaning if you have a screen with a height more than 1300 pixels the footer will not appear at the bottom of the screen but rather below the content.
Here's my code:
#import 'https://fonts.googleapis.com/css?family=PT+Mono';
body {
font-family: 'PT Mono', monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
#content {
height: 1300px;
width: 100%;
}
html, #wrapper {
max-width: 100%;
min-height: 100%;
min-width: 960px;
margin: 0 auto;
width: 100%;
}
#wrapper {
position: relative;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
#verr {
}
.boi:active,
.iob:active {
top: 2px;
}
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
right: 10px;
}
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
text-align: right;
margin-right: 10px;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<div id="manyarms">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~" style="width:310px; height:250px;">
<p style="color: #6458b7;" id="verr">Here comes a very special boi!</p>
</div>
<div id="sensible">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" style="width:310px; height:250px;">
<p style="color:#6458b7;">He loves to pose for photos!</p>
</div>
</div>
</div>
<div id="footer">
© Hecc
</div>
</body>
</html>
I apologize if my wording makes this problem difficult to visualize.
Any help is greatly appreciated!
Your question is a little ambiguous - I think you are asking "how do I fix my footer to the bottom of the screen (window), not below the content?".
You can use position fixed for that.
article {
height: 1300px;
}
footer {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
background: lightpink;
padding: 0 1rem;
}
<body>
<article>
<p>This is the page content</p>
</article>
<footer>
<p>I am a fixed footer</p>
</footer>
</body>