I have created this web page using html, CSS and bootstrap, everything is okay on large and medium screen, but when I restore-down to small screen (col-12 and col-sm-12) the features and services sections blend, I tried everything I don't know how to fix it.
here is some code, I hope it is clear for you guys:
* {
padding: 0;
margin: 0;
font-family: "Lucida Fax", sans-serif;
}
body {
overflow-x: hidden;
}
.header .content-box {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/Webz.jpeg);
background-position: center;
background-size: cover;
width: 100%;
height: 100vh;
}
.menu {
display: inline-flex;
}
.menu button {
width: 75px;
height: 35px;
}
.menu img {
width: 147px;
height: 147px;
cursor: pointer;
margin-top: 1px;
}
.menu button {
background: #ff4d73;
font-size: 16px;
color: #fff;
border: 0;
position: absolute;
right: 70px;
top: 40px;
cursor: pointer;
}
.menu button .fa {
margin-right: 7px;
}
.banner-text {
color: whitesmoke;
margin: 14%;
text-align: center;
}
.banner-text h2 {
font-size: 37px;
}
.banner-text p {
font-size: 15px;
margin: 25px;
}
.banner-text a {
border: 1px solid #ff4d73;
padding: 7px;
color: white;
text-decoration: none;
display: block;
width: 100px;
margin: auto;
background: #ff4d73;
transition: .70s;
}
.banner-text a:hover {
background: transparent;
}
.service .content-box {
background: whitesmoke;
width: 100%;
height: 100vh;
}
h1 {
text-align: center;
padding-top: 100px;
}
.service h1::after {
content: '';
background: #ff4d73;
display: block;
height: 3px;
width: 190px;
margin: 21px auto 50px;
}
.services .icon {
font-size: 37px;
margin: 21px auto;
height: 55px;
width: 55px;
border: 1px solid #ff4d73;
border-radius: 50%;
color: #ff4d73;
}
.services p {
font-size: 12px;
margin-top: 10px;
color: #777;
padding: 20px;
}
.services span {
color: #ff4d73;
}
h3 {
font-size: medium;
}
.services .col-md-3:hover {
background: #ff4d73;
cursor: pointer;
color: #fff;
box-shadow: -5px 5px 10px 0 rgba(0, 0, 0, 0.4);
transition: 0.5s;
}
.services .col-md-3:hover p {
color: #fff;
}
.services .col-md-3:hover span {
color: #fff;
}
.services .col-md-3:hover .icon {
border: 1px solid #fff;
color: #fff;
}
li {
padding-left: 35px;
}
.features .content-box {
background: white;
width: 100%;
height: 100vh;
}
.features h2 {
margin: 49px;
padding-top: 111px;
}
.features h2::after {
content: '';
background: #ff4d73;
display: block;
height: 3px;
width: 150px;
margin: 13px 7px 51px;
}
.features ul {
margin-left: 5px;
margin-top: 33px;
list-style-type: none;
}
.features ul li {
position: relative;
line-height: 33px;
font-size: 13px;
}
.features ul li::before {
content: '';
height: 7px;
width: 7px;
background: #ff4d73;
transform: rotate(45deg);
margin-right: 19px;
display: inline-block;
}
img {
height: 57%;
width: 85%;
margin-top: 29%;
}
.footer .content-box {
background: whitesmoke;
width: 100%;
height: 100vh;
}
.footer h1::after {
content: '';
background: #ff4d73;
display: block;
height: 3px;
width: 190px;
margin: 21px auto 50px;
}
.form-control {
margin: 17px;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
::placeholder {
font-size: 12px;
}
.contact-form button {
border: none !important;
background: #ff4d73 !important;
box-shadow: none !important;
border-radius: 0;
margin-left: 27px;
}
.contact-info .follow {
background-color: #fff;
padding: 8px;
margin: 11px;
}
.contact-info .fa {
margin: 10px;
padding-right: 20px;
font-size: 20px;
font-weight: bold;
color: #ff4d73 !important;
}
.copyright {
text-align: center;
font-size: 15px;
}
.fa-heart-o {
color: red;
font-size: 17px;
}
.footer hr {
margin-top: 217px;
background: #ff4d73;
}
.form-group label {
display: block;
}
.features {
position: relative;
top: 100%;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- Service Section -->
<section class="service d-block">
<div class="content-box">
<div class="container">
<h1>Our Services</h1>
<div class="row services d-block">
<div class="col-md-3 col-sm-12 col-12 text-center">
<div class="icon">
<i class="fa fa-renren"></i>
</div>
<h3>Brand <span>Activation</span></h3>
<p>
Subscribe to our Youtube channel to watch more videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
</p>
</div>
<div class="col-md-3 col-12 text-center">
<div class="icon">
<i class="fa fa-user"></i>
</div>
<h3>Employee <span>Activity</span></h3>
<p>
Subscribe to our Youtube channel to watch more videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
</p>
</div>
<div class="col-md-3 col-12 text-center">
<div class="icon">
<i class="fa fa-meetup"></i>
</div>
<h3>Event <span>Organizer</span></h3>
<p>
Subscribe to our Youtube channel to watch nmore videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
</p>
</div>
<div class="col-md-3 col-12 text-center">
<div class="icon">
<i class="fa fa-video-camera"></i>
</div>
<h3>Video <span>Production</span></h3>
<p>
Subscribe to our Youtube channel to watch nmore videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features d-block">
<div class="content-box">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-12">
<h2>Features Are</h2>
<ul>
<li>Some Text Some Text Some Text Some Text.</li>
<li>Some Text Some Text Some Text Some Text. </li>
<li>Some Text Some Text Some Text Some Text Some Text.</li>
<li>Some Text Some Text Some Text Some Text Some Text.</li>
<li>Some Text Some Text Some Text Some Text.</li>
</ul>
</div>
<div class="col-md-6 col-sm-12 col-12">
<img src="img/Webz2.jpeg" alt="Picture">
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Your content is bigger than 100vh, but you are limiting the container to that size. That is the overlapping reason.
.content-box {
height: 100vh;
}
Related
I'm new to HTML and CSS. I have a project due on Friday and I don't understand how to make my page look the same in all browsers and resolutions. I will leave my CSS and HTML code, so if anyone is kind enough to help me figure it out I'd really appreciate it. We did some simple designs before but I was trying new things out and I guess what I did looks good on like bigger displays but on smaller ones the elements are just messed up.
body{
font-family: 'Playfair Display';
font-size: 20px;
}
.figure1{
float:right;
clear: both;
padding-bottom: 150px;
padding-left: 450px;
padding-right: 8px;
background-color: #D1C45E;
width: 500px;
height: 600px;
}
.figure2{
float:left;
clear: both;
padding-top: 250px;
padding-bottom: 50px;
padding-right: 450px;
padding-left: 8px;
background-color: #D1C45E;
width: 400px;
height: 400px;
}
.imgMe {
position: absolute;
left: 770px;
top: 65px;
}
.navbar {
overflow: hidden;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 10px 12px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: #D1C45E;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #D1C45E;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #D1C45E;
}
.dropdown:hover .dropdown-content {
display: block;
}
h1{
display: inline;
float: none;
padding-left: 140px;
font-size: 80px;
font-weight: 700;
line-height: 1.2;
}
h3{
display: block;
float: none;
padding-top: 350px;
padding-left: 340px;
text-transform: uppercase;
color: #d5c455;
font-size: 20px;
}
h2{
display: block;
float: right;
position: relative;
left: 1030px;
bottom: 650px;
text-transform: uppercase;
font-size: 42px;
}
button {
margin: 20px;
outline: none;
}
.custom-btn {
width: 130px;
height: 40px;
padding: 10px 25px;
border: 2px solid #000;
font-family: 'Lato', sans-serif;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
position: relative;
left: 395px;
font-weight: bold;
font-style: italic;
}
.btn-1 {
transition: all 0.3s ease;
}
.btn-1:hover {
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
}
br {
display: inline-block;
content: "";
margin-top: 35%;
}
.pText{
display: block;
float: right;
position: absolute;
left: 930px;
top: 1500px;
line-height: 40px;
}
a{
all: revert;
text-decoration: none;
color: black;
}
html {
scroll-behavior: smooth;
}
#down {
margin-top: 100%;
padding-bottom: 25%;
}
footer {
text-align: center;
padding: 40px;
background-color: #D1C45E;
color: white;
display: block;
position: absolute;
top: 2100px;
left: 0px;
width: 1823px;
height: 100px;
}
.socials{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.copyright{
text-align: left;
display: inline;
position: absolute;
bottom: 0px;
left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Janko's homepage </title>
<link href="assets/CSS/project1.css" rel="stylesheet" type="text/css">
<link rel="icon" href="assets/media/home.png">
</head>
<body>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">
<img src="assets/media/menu.png" alt="an image of a dropdown menu" height="50" width="50">
</button>
<div class="dropdown-content">
Education
Personal
Résumé
</div>
</div>
</div>
<section>
<figure class="figure1">
<img class="imgMe" src="assets/media/janko-image.png" title="Janko " alt="An image of me" width="950" height="815">
</figure>
<h3> Web designer & developer </h3>
<h1> I'm Janko </h1>
<button class="custom-btn btn-1">About me</button>
</section>
<section>
<br>
<figure class="figure2">
<div id="down">
<h2> About me </h2>
</div>
<p class="pText"> I'm a 19 year old Web developer and designer from Croatia. I specialise in HTML and Java. I'm interested in finding a fullstack developer job. The mission of this site is to showcase my web-developing and designing abilities to my potential employers, my professors and viewers who might take inspiration from my website. Not to mention all the feedback I can get will most definitely help me form my webdesign style in the future.</p>
</figure>
<br>
</section>
<section>
<br>
<footer>
<ul class="socials">
<li><img src="assets/media/instagram.png" alt="instagram icon" height="60" width="60"></li>
<li><img src="assets/media/email.png" alt="mail icon" height="60" width="60"></li>
<li><img src="assets/media/facebook.png" alt="facebook icon" height="55" width="60"></li>
</ul>
<p class="copyright"> Copyright © Janko 2022</p>
</footer>
</section>
</body>
</html>
https://sagarj2021.github.io/first-website/
This is my website but it only open fullscreen in destop of my laptop. It does not open in fullscreen in smartphones destop as well as in normal search. (Actully in smartphone right side is 50% of white blank color). I dont know how to fix this issue..
I have given my code also,
so please can you help mi ?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.hero {
height: 100vh;
width: 100%;
background-color: black;
background-size: cover;
background-position: center;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 45px;
padding-left: 8%;
padding-right: 8%;
}
.logo {
color: white;
font-size: 35px;
letter-spacing: 1px;
cursor: pointer;
}
span {
color: red;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 25px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
text-transform: capitalize;
}
nav ul li a:hover {
color: red;
transition: .4s;
}
.btn {
background-color: red;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 25px;
border-radius: 30px;
transition: transform .4s;
}
.btn:hover {
transform: scale(1.2);
}
.content {
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
}
h1 {
color: white;
margin: 20px 0px 20px;
font-size: 75px;
}
h3 {
color: white;
font-size: 25px;
margin-bottom: 50px;
}
h4 {
color: #fcfc;
letter-spacing: 2px;
font-size: 20px;
}
.newslatter form {
width: 380px;
max-width: 100%;
position: relative;
}
.newslatter form input:first-child {
display: inline-block;
width: 100%;
padding: 14px 130px 14px 15px;
border: 2px solid #f9004d;
outline: none;
border-radius: 30px;
}
.newslatter form input:last-child {
position: absolute;
display: inline-block;
outline: none;
border: none;
padding: 10px 30px;
border-radius: 30px;
background-color: #f9004d;
color: white;
box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
top: 6px;
right: 6px;
}
.about {
width: 100%;
padding: 100px 0px;
background-color: #191919;
}
.about img {
height: auto;
width: 430px;
}
.about-text {
width: 550px;
}
.main {
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.about-text h2 {
color: white;
font-size: 75px;
text-transform: capitalize;
margin-bottom: 20px;
}
.about-text h5 {
color: white;
letter-spacing: 2px;
font-size: 22px;
margin-bottom: 25px;
text-transform: capitalize;
}
.about-text p {
color: #fcfc;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.service {
background: #101010;
width: 100%;
padding: 100px 0px;
}
.title h2 {
color: white;
font-size: 75px;
width: 1130px;
margin: 30px auto;
text-align: center;
}
.box {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.card {
height: 365px;
width: 335px;
padding: 20px 35px;
background: #191919;
border-radius: 20px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
}
.card i {
font-size: 50px;
display: block;
text-align: center;
margin: 25px 0px;
color: #f9004d;
}
h5 {
color: white;
font-size: 23px;
margin-bottom: 15px;
}
.pra p {
color: #fcfc;
font-size: 16px;
line-height: 27px;
margin-bottom: 25px;
}
.card .button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 9px 22px;
border-radius: 30px;
transition: .4s;
}
.card .button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.contact-me {
width: 100%;
height: 290px;
background: #191919;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.contact-me p {
color: white;
font-size: 30px;
font-weight: bold;
margin-bottom: 25px;
}
.contact-me .button-two {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
.contact-me .button-two:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
footer {
position: relative;
width: 100%;
height: 400px;
background: #101010;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer p:nth-child(1) {
font-size: 30px;
color: white;
margin-bottom: 20px;
font-weight: bold;
}
footer p:nth-child(2) {
color: white;
font-size: 17px;
width: 500px;
text-align: center;
line-height: 26px;
}
.social {
display: flex;
}
.social a {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: #f9004d;
border-radius: 50%;
margin: 22px 10px;
color: white;
text-decoration: none;
font-size: 20px;
}
.social a:hover {
transform: scale(1.3);
transition: .3s;
}
.end {
position: absolute;
color: #f9004d;
bottom: 35px;
font-size: 14px;
}
<!--Sagar personal website-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="personalprofile.css">
<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&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/34d51c031e.js" crossorigin="anonymous"></script>
<title>Personal website</title>
</head>
<body>
<div class="hero">
<nav>
<h2 class="logo">Portfo<span>lio</span></h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Blog
</nav>
<div class="content">
<h4>hello, my name is</h4>
<h1>Sagar<span>Jadhav</span></h1>
<h3>I'm a Web Developer.</h3>
<div class="newslatter">
<form action="">
<input type="email" name="email" id="mail" placeholder="Enter Your Email">
<input type="submit" name="submit" value="Let start">
</form>
</div>
</div>
</div>
<!---About section start-->
<section class="about">
<div class="main">
<img src="#" alt="">
<div class="about-text">
<h2>About Me</h2>
<h5>Developer & Designer</h5>
<p>
I am a front-end web developer. I can provide clean code and pixel perfect design. I also make the website more & more interactive with web animations. I can provide clean code and pixel perfect design. I also make the website more & more interactive
with web animations. A responsive design makes your website accessible to all users, regardless of their devices.
</p>
<button type="button">Let's Talk</button>
</div>
</div>
</section>
<!--Service section start-->
<div class="service">
<div class="title">
<h2>Our Services</h2>
</div>
<div class="box">
<div class="card">
<i class="fas fa-bars"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-user"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-bell"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
<!--Contact Me-->
<div class="contact-me">
<p>For any help.</p>
<a class="button-two" href="#">Contact Me</a>
</div>
<!--Footer start-->
<footer>
<p>Sagar Jadhav</p>
<p>For coding and syber security related update follow my blog chennal - please click on the link below to follow me:
</p>
<div class="social">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-linkedin"></i>
</div>
<p class="end">CopyRight By Sagar Jadhav</p>
</footer>
</body>
</html>
Replace this code in your code
.title h2 {
color: white;
font-size: 75px;
width: 130px;
margin: 30px auto;
text-align: center;
}
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 3 years ago.
I was wondering how I can get my footer to stay at the bottom. Sorry I am still new to this and still learning. If you guys see anything in my code I could do better on just let me know. I was messing around with the positioning a lot. I think the next website I design I will be using flexbox lol. If anyone has any suggestions or some tips for me to do better please let me know. I tried making the body relative and made the footer absolute with bottom set to 0 but that didn't work
#font-face{
font-family: 'HeadingFont';
src: url(../fonts/KaushanScript-Regular.otf);
font-style: normal;
}
body{
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
background: #ffffff;
box-sizing: border-box;
}
/* global */
.container{
width: 100%;
margin: 5px 0 15px 0;
overflow-x: hidden;
}
#wrapper{
padding: 60px 155px ;
}
ul{
text-align: left;
list-style-type: square;
}
.button_1{
height: 38px;
background: #e8491d;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
}
/* header */
header{
background: #35424a;
color: #ffffff;
padding: 30px 10px 0 20px;
min-height: 70px;
border-bottom: #eB491d 3px solid;
}
header #branding{
float: left;
font-family: 'HeadingFont' , 'Times New Roman', Times, serif;
font-size: 0.9rem;
}
header #branding h1{
margin: 0;
}
.navbar a{
color: white;
padding-right: 20px;
}
.navbar{
padding-right: 20px;
}
.side-nav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
right: 0;
background: #35424a;
opacity: 0.9;
overflow-x: hidden;
padding-top: 70px;
transition: 0.5s;
}
.side-nav a{
padding: 20px 30px 20px 10px;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.side-nav .btn-close{
position: absolute;
top: 20px;
left: -50px;
font-size: 36px;
margin-left: 50px;
padding: 10px;
}
.fas{
float: right;
font-size: 30px;
}
header .highlight, header .current a{
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #cccccc;
transition: all 0.3s ease;
font-weight: bold;
}
/*Slider*/
.slider-inner{
width: 90%;
height:400px;
position:relative;
overflow:hidden;
float:left;
padding:3px;
}
.slider-inner img{
display:none;
width:100%;
height:500px;
}
.slider-inner img.active{
display:inline-block;
}
.prev,.next{
float:left;
margin-top:130px;
cursor: pointer;
}
.prev{
position:relative;
margin-right:-45px;
z-index:100;
}
.next{
position:relative;
margin-left:-45px;
z-index:100;
}
/*Homepage packages*/
#boxes{
margin-top: 20px;
}
#boxes .box{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#boxes .bronze{
color: #cd7f32; /*Bronze*/
text-align: center;
}
#boxes .silver{
color: #C0C0C0; /*silver*/
}
#boxes .gold{
color: #CFB53B; /*Gold*/
}
/*Gallery Page*/
#gallery{
max-width: 90%;
padding: 50px;
}
.image{
border-radius: 5px;
width: 70%;
background: #35424a;
margin: 0 auto;
padding: 50px;
}
.image img{
width: 200px;
padding: 10px;
}
.image img:hover{
transform: scale(1.2);
}
/*Contact Page*/
form {
border-radius: 5px;
background: #35424a;
color: white;
width:70%;
padding: 50px;
margin: 0 auto;
}
#contact{
width: 90%;
}
input[type=text], [type=email], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 30px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
width: 100px;
}
.submit:hover{
color: black;
background: rgb(60, 255, 0);
transition: all 0.9s ease;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
#contact{
padding: 50px;
line-height: 3em;
}
/*footer*/
footer{
width: 100%;
height: 30px;
padding: 10px;
color: white;
background-color: #e8491d;
text-align: center;
}
/*Media Queries*/
#media only screen and (max-width: 940px){
#wrapper{
padding: 0;
margin: 0;
}
#boxes .box{
float: left;
text-align: center;
width: 100%;
padding: 5px;
}
header{
padding: 10px;
}
header nav{
margin: 0;
float: left;
}
.image{
width: 450px;
margin: 0 auto;
}
#gallery{
width: 100%;
}
#contact{
padding-left: 10px;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width">
<title>photagraphy - Welcome</title>
<link rel="stylesheet" href="./css/style.css">
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="jqslider/js/main.js"></script>
<script src="https://kit.fontawesome.com/01fc06f1b4.js" crossorigin="anonymous"></script>
<script src="navigation.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1> <span class="highlight">Jamie's</span> photagraphy</h1>
</div>
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
×
Home
Gallery
Contact Us
</div>
</div>
</header>
<div id="wrapper">
<div class="container">
<div class="slider-outer">
<img src="jqslider/images/arrow-left.png" class="prev" alt="Prev">
<div class="slider-inner">
<img src="jqslider/images/image1.jpg" class="active">
<img src="jqslider/images/image2.jpg">
<img src="jqslider/images/image3.jpg">
<img src="jqslider/images/image4.jpg">
</div>
<img src="jqslider/images/arrow-right.png" class="next" alt="Next">
</div>
</div>
<section id="boxes">
<div class="container">
<div class="box">
<h3 class="bronze">Bronze</h3>
<ul>
<li>Full Day coverage of your wedding.</li>
<li>Unlimited Photographers time on Wedding day.</li>
<li>Includes 2 hour Engagement session or subtract $200 if not needed. Includes 25 Digital Photos, two 8x10s and three 5x7s.</li>
<li>1 hour Bridal Portrait session with 1 16x20 Canvas and 8x8 photo book with 10 sides or subtract $200 if not needed.</li>
<li> Video of photos from Engagement session and Bridal Session to use on your wedding day.</li>
</ul>
</div>
<div class="box">
<h3 class="silver">Silver</h3>
<ul>
<li>
Up to 8 hours photography for pre-wedding, wedding, and reception photographs.
</li>
<li>
Includes 1 hour Engagement session with 1 16x20 print and 2 8x10 prints. (Subtract $100 if not needed)
</li>
<li>
1 hour Bridal Portrait session with 1 16x20 and 2 8x10 custom prints. (Subtract $100 if not needed)
</li>
<li>
OPTION - Engagement Session and Bridal Session or COPY OF 200 DIGITAL PHOTOS of your choice.
</li>
<li>
Online proofs.
</li>
</ul>
</div>
<div class="box">
<h3 class="gold">Gold</h3>
<ul>
<li>Up to 6 Hours of photography for pre-wedding, wedding, and reception photographs. (ask about additional time)</li>
<li>Online proofs.</li>
<li>Two photographers</li>
<li>One 16x20 Print!</li>
<li>Four 8x10s, Eight 5x7s, 10 4x6s</li>
<li>Custom Hard Cover Photo Book.</li>
<li>15 full format images of your choice, copyright free.</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<p>Created by Justin Hamilton. Copyright © 2019</p>
</footer>
</body>
</html>
I Use:
.footer{
width: 100%;
height: 4rem;
bottom: 0;
left: 0;
position: absolute;
}
Your Css had:
footer{
width: 100%;
height: 30px;
padding: 10px;
color: white;
background-color: #e8491d;
text-align: center;
}
You can make your footer fixed
make sure you add z-index value so that other element don't overlaps the footer.
footer {
position: fixed;
bottom: 0;
width: 100%;
z-index: 5;
}
Making your footer position: fixed will help you achieve this. You may have to watch out for other elements near the bottom colliding and overlapping. You can use margins to help with that. Also, using a high z-index will prevent other elements from being displayed over top of it.
You can read more about fixed positioning here.
#font-face {
font-family: 'HeadingFont';
src: url(../fonts/KaushanScript-Regular.otf);
font-style: normal;
}
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
background: #ffffff;
box-sizing: border-box;
}
/* global */
.container {
width: 100%;
margin: 5px 0 15px 0;
overflow-x: hidden;
}
#wrapper {
padding: 60px 155px;
}
ul {
text-align: left;
list-style-type: square;
}
.button_1 {
height: 38px;
background: #e8491d;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
}
/* header */
header {
background: #35424a;
color: #ffffff;
padding: 30px 10px 0 20px;
min-height: 70px;
border-bottom: #eB491d 3px solid;
}
header #branding {
float: left;
font-family: 'HeadingFont', 'Times New Roman', Times, serif;
font-size: 0.9rem;
}
header #branding h1 {
margin: 0;
}
.navbar a {
color: white;
padding-right: 20px;
}
.navbar {
padding-right: 20px;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
right: 0;
background: #35424a;
opacity: 0.9;
overflow-x: hidden;
padding-top: 70px;
transition: 0.5s;
}
.side-nav a {
padding: 20px 30px 20px 10px;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.side-nav .btn-close {
position: absolute;
top: 20px;
left: -50px;
font-size: 36px;
margin-left: 50px;
padding: 10px;
}
.fas {
float: right;
font-size: 30px;
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
transition: all 0.3s ease;
font-weight: bold;
}
/*Slider*/
.slider-inner {
width: 90%;
height: 400px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
}
.slider-inner img {
display: none;
width: 100%;
height: 500px;
}
.slider-inner img.active {
display: inline-block;
}
.prev,
.next {
float: left;
margin-top: 130px;
cursor: pointer;
}
.prev {
position: relative;
margin-right: -45px;
z-index: 100;
}
.next {
position: relative;
margin-left: -45px;
z-index: 100;
}
/*Homepage packages*/
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#boxes .bronze {
color: #cd7f32;
/*Bronze*/
text-align: center;
}
#boxes .silver {
color: #C0C0C0;
/*silver*/
}
#boxes .gold {
color: #CFB53B;
/*Gold*/
}
/*Gallery Page*/
#gallery {
max-width: 90%;
padding: 50px;
}
.image {
border-radius: 5px;
width: 70%;
background: #35424a;
margin: 0 auto;
padding: 50px;
}
.image img {
width: 200px;
padding: 10px;
}
.image img:hover {
transform: scale(1.2);
}
/*Contact Page*/
form {
border-radius: 5px;
background: #35424a;
color: white;
width: 70%;
padding: 50px;
margin: 0 auto;
}
#contact {
width: 90%;
}
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 30px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
width: 100px;
}
.submit:hover {
color: black;
background: rgb(60, 255, 0);
transition: all 0.9s ease;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
#contact {
padding: 50px;
line-height: 3em;
}
/*footer*/
footer {
width: 100%;
height: 30px;
padding: 10px;
color: white;
background-color: #e8491d;
text-align: center;
position: fixed;
bottom: 0;
}
/*Media Queries*/
#media only screen and (max-width: 940px) {
#wrapper {
padding: 0;
margin: 0;
}
#boxes .box {
float: left;
text-align: center;
width: 100%;
padding: 5px;
}
header {
padding: 10px;
}
header nav {
margin: 0;
float: left;
}
.image {
width: 450px;
margin: 0 auto;
}
#gallery {
width: 100%;
}
#contact {
padding-left: 10px;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width">
<title>photagraphy - Welcome</title>
<link rel="stylesheet" href="./css/style.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="jqslider/js/main.js"></script>
<script src="https://kit.fontawesome.com/01fc06f1b4.js" crossorigin="anonymous"></script>
<script src="navigation.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1> <span class="highlight">Jamie's</span> photagraphy</h1>
</div>
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
×
Home
Gallery
Contact Us
</div>
</div>
</header>
<div id="wrapper">
<div class="container">
<div class="slider-outer">
<img src="jqslider/images/arrow-left.png" class="prev" alt="Prev">
<div class="slider-inner">
<img src="jqslider/images/image1.jpg" class="active">
<img src="jqslider/images/image2.jpg">
<img src="jqslider/images/image3.jpg">
<img src="jqslider/images/image4.jpg">
</div>
<img src="jqslider/images/arrow-right.png" class="next" alt="Next">
</div>
</div>
<section id="boxes">
<div class="container">
<div class="box">
<h3 class="bronze">Bronze</h3>
<ul>
<li>Full Day coverage of your wedding.</li>
<li>Unlimited Photographers time on Wedding day.</li>
<li>Includes 2 hour Engagement session or subtract $200 if not needed. Includes 25 Digital Photos, two 8x10s and three 5x7s.</li>
<li>1 hour Bridal Portrait session with 1 16x20 Canvas and 8x8 photo book with 10 sides or subtract $200 if not needed.</li>
<li> Video of photos from Engagement session and Bridal Session to use on your wedding day.</li>
</ul>
</div>
<div class="box">
<h3 class="silver">Silver</h3>
<ul>
<li>
Up to 8 hours photography for pre-wedding, wedding, and reception photographs.
</li>
<li>
Includes 1 hour Engagement session with 1 16x20 print and 2 8x10 prints. (Subtract $100 if not needed)
</li>
<li>
1 hour Bridal Portrait session with 1 16x20 and 2 8x10 custom prints. (Subtract $100 if not needed)
</li>
<li>
OPTION - Engagement Session and Bridal Session or COPY OF 200 DIGITAL PHOTOS of your choice.
</li>
<li>
Online proofs.
</li>
</ul>
</div>
<div class="box">
<h3 class="gold">Gold</h3>
<ul>
<li>Up to 6 Hours of photography for pre-wedding, wedding, and reception photographs. (ask about additional time)</li>
<li>Online proofs.</li>
<li>Two photographers</li>
<li>One 16x20 Print!</li>
<li>Four 8x10s, Eight 5x7s, 10 4x6s</li>
<li>Custom Hard Cover Photo Book.</li>
<li>15 full format images of your choice, copyright free.</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<p>Created by Justin Hamilton. Copyright © 2019</p>
</footer>
</body>
</html>
#container {
position: relative;
min-height: 100vh;
}
#content {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="container">
<div id="content">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
My problem is that when I check the page on the internet with Chrome on macOS it doesn't show background-images from CSS stylesheet. However, when I check it in Coda 2 everything works fine. Moreover it works when I open page in Chrome when I open the html file. Can you just tell what the problem might be, cause I've tried nearly everything?
http://avelitest.epizy.com/index.html
P.S.
I think the problem is somewhere in CSS cause at first it was working fine.
CODA 2
CHROME
html, body {
cursor: url(file:///htdocs/img/aperture3.png), auto !important;
}
body {
margin: 0 auto;
max-width: 100%;
}
a:link, a:visited, a:hover, a:active {
}
* {
box-sizing: border-box;
margin: 0%;
padding: 0%;
font-family: "Darker Grotesque" !important;
}
/*--------------- hero section --------------- */
.video-container {
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
}
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
.video-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #1b1b1b;
opacity: 0.8;
}
.header {
position: absolute;
top: 50%;
left: 40%;
transform: translate( -60%, 100%);
}
.header h1 {
color: #d3ae87;
font-size: 80px !important;
display: inline;
transform: translate;
text-align: center !important;
padding-right: -200px;
}
#media(max-width: 900px) {
.header {
left: 50%;
}
.header h1 {
font-size: 34px !important;
text-align: center;
}
}
a:hover {
text-decoration: none;
}
/*--------------- navigation --------------- */
.nav {
width: 100%;
height: 80px;
position: fixed;
z-index: 2;
}
.nav.scrolled {
width:100%;
background-color: #161616 !important;
transition: background-color 500ms linear;
}
.nav #brand {
float: left;
display: block;
margin-left: 1.5%;
line-height: 80px;
font-weight: bold;
text-transform: uppercase;
font-size: 40px;
}
.nav #brand a {
color: #fff;
font-family: Poppins !important;
transition: all 500ms ease-out;
}
.nav #brand a:hover {
text-decoration: none;
}
.nav #menu {
float: left;
right: 40px;
position: fixed;
}
.nav #menu li {
padding-left: 40px;
display: inline-block;
font-weight: lighter !important;
text-transform: uppercase;
font-size: 14px;
line-height: 80px;
position: relative;
transition: all 500ms ease-out;
}
.nav #menu li a {
font-family: sans-serif !important;
color: rgb(156, 156, 156);
transition: all 500ms ease-out;
}
.nav #menu li a:hover {
text-shadow: 0 0 2px #d3bc97, 0 0 5px #d3bc97, 0 0 8px #d3bc97, 0 0 10px #d3bc97, 0 0 12px #d3bc97, 0 0 15px #d3bc97;
color: white;
text-decoration: none;
transition: all 500ms ease-out;
-webkit-filter: drop-shadow(0px 0px 20px #d3bc97) ;
filter: drop-shadow(0px 0px 20px #d3bc97) ;
}
#toggle {
position: absolute;
right: 40px;
top: 20px;
font-weight: 300;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
z-index: 2;
width: 30px;
height: 30px;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
}
.close-btn {
position: absolute;
right: 30px;
font-weight: 300;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
z-index: 2;
top: -2px;
line-height: 80px;
}
.countdown {
text-decoration: none;
font-weight: 400;
filter: drop-shadow (0px 0px 5px #f24333);
-webkit-filter: drop-shadow(0px 0px 5px #f24333) ;
text-shadow: 0 0 2px #f24333, 0 0 5px #f24333, 0 0 8px #f24333, 0 0 10px #f24333;
-webkit-text-shadow:0 0 2px #f24333, 0 0 5px #f24333, 0 0 8px #f24333, 0 0 10px #f24333;
color:white !important;
}
#resize {
z-index: 2;
top: 0px;
position: fixed;
background: #0f0f0f;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
}
#resize #menu {
height: 90px;
position: absolute;
left: 45%;
transform: translateX(-40%);
text-align: center;
display: table-cell;
vertical-align: center;
}
#resize #menu li {
display: block;
text-align: center;
padding: 10px 0;
font-size: 50px;
text-transform: uppercase;
min-height: 50px;
font-weight: bold;
transition: all 0.3s ease-out;
}
#resize li:nth-child(1) {
margin-top: 140px;
}
#resize #menu li a {
color: #fff;
}
#resize #menu li a:hover {
text-decoration: none;
}
#resize.active {
visibility: visible;
opacity: 1;
}
#media(max-width: 900px) {
#toggle {
visibility: visible;
opacity: 1;
margin-top: 6px;
margin-right: 4px;
}
nav #brand {
margin-left: 10px;
}
#resize ul li a {
font-size: 15px;
font-family: "Poppins" !important;
font-weight: lighter !important;
color: rgb(156, 156, 156) !important;
transition: all 500ms ease-out;
}
nav #menu {
display: none;
}
}
#media(min-width: 900px) {
#resize {
visibility: hidden !important;
}
}
/*--------------- about section starts --------------- */
.content {
position: absolute;
margin-top: 100vh;
width: 100%;
}
section {
padding: 140px 0;
}
.section-index {
color: #d3ae87;
font-weight: bolder;
font-size: 20px;
font-family: 'Poppins' !important;
}
.section-heading {
color: grey;
text-transform: uppercase;
letter-spacing: 4px;
font-size: 18px;
}
.section-subheading {
color: grey;
margin: 10px 0;
}
.section-info {
font-size: 24px;
color: grey;
}
.more {
margin: 40px 0;
}
button {
background: none;
border: .3pt solid rgba(184, 140, 93, 0.7);
text-transform: uppercase !important;
font-size: 12px !important;
letter-spacing: 2px;
padding: 18px 36px;
color: black;
}
#btn a {
text-decoration: none !important;
color: black;
}
#btn {
min-height: 50px;
padding: 0 30px;
border-radius: 0;
font-size: 12px;
text-transform: uppercase;
font-family: 'Poppins' !important;
}
/*--------------- services section starts --------------- */
.services {
background: #161616;
}
.service {
margin: 30px 0;
}
.icon ion-icon {
font-size: 36px;
color: #d3ae87;
}
.icon ion-icon:hover {
text-shadow: 0 0 2px #d3bc97, 0 0 5px #d3bc97, 0 0 8px #d3bc97, 0 0 10px #d3bc97, 0 0 12px #d3bc97, 0 0 200px #d3bc97;
filter: drop-shadow (0px 0px 5px #d3bc97);
-webkit-filter: drop-shadow(0px 0px 5px #d3bc97) ;
transition: 1s ease-in-out;
}
.icon-title {
font-size: 28px;
margin-bottom: 4px;
color: rgb(182, 182, 182);
font-weight: lighter;
}
/*--------------- our team section starts --------------- */
#txt {
display: inline !important;
font-size: 15px;
overflow: hidden;
}
.row{
padding-right: 7%;
}
.team-member, .team-img {
position: relative;
}
.team-img {
background: grey;
height: 400px;
width: 300px;
}
.members {
margin: 0% -15%;
}
.team-title {
margin: 20px 0px;
margin-right: -200px;
}
.team-title h5 {
font-size: 28px;
}
.team-title span {
font-size: 20px;
}
.team-member {
overflow: visible;
.team-one {
background: url ("file:///htdocs/img/FEDOR.jpg") no-repeat 50% 50%;
background-size: cover;
}
.team-two {
background: url ("file:///htdocs/img/ANDREI.jpg") no-repeat 50% 50%;
background-size: cover;
}
.team-three {
background: url ("file:///htdocs/img/ILJA.jpg") no-repeat 50% 50%;
background-size: cover;
}
/*--------------- newsletter section starts --------------- */
.newsletter {
padding: 140px 0;
background: #161616;
background: url(file:///htdocs/img/subcribe.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.newsletter input {
text-transform: uppercase;
}
.newsletter .news-data {
max-width: 650px;
margin: 0 auto;
text-align: center;
position: relative;
}
.newsletter h1 {
color: #fff;
float: center;
position: center !important;
margin-bottom: 40px;
}
.newsletter .form-control {
float: center;
position: center !important;
height: 50px;
border-color: #fff;
border-radius: 0 !important;
}
.form-control:focus {
box-shadow: none !important;
border: none !important;
}
::placeholder {
letter-spacing: 4px;
}
.newsletter .btn {
min-height: 50px;
padding: 0 30px;
border-radius: 0;
background: #000;
color: #fff;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
font-family: Poppins !important;
}
/*--------------- contact section starts here --------------- */
#contact-form {
margin: 5% 0;
}
.contact .icon-title {
margin-top: 10px;
color: #000;
}
#contact-form ul {
list-style: none;
margin-bottom: 40px;
border-radius: 0;
}
#contact-form li:last-of-type {
border-bottom: none;
}
#contact-form label {
display: block;
font-size: 22px;
color: rgb(97, 97, 97);
}
#contact-form input, #contact-form textarea {
width: 100%;
padding: 5px;
border: none;
resize: vertical;
background: transparent;
color: #101010;
font-weight: bolder;
}
input:focus {
outline: none !important;
border: none !important;
}
textarea:focus {
outline: none !important;
border: none !important;
}
.textarea {
border-bottom: 1px solid #c9c9c9;
}
#media(max-width: 900px) {
#contact-form {
margin: 5% 0;
width: 98%;
}
}
/*--------------- footer section starts here --------------- */
.footer {
background: #161616;
}
#media, #address, #mail {
text-align: center !important;
}
#mail a:hover {
text-decoration: none;
}
#media a:link, a:hover, a:visited {
color:white;
}
.footer .container {
padding: 160px 0;
}
.footer li, p, h4 {
font-size: 24px !important;
}
.footer h4 {
font-weight: lighter;
color: #fff;
}
.footer p {
color: grey;
font-weight: lighter;
}
.footer li {
font-weight: lighter;
color: #fff;
padding-left: 20px;
font-size: 18px !important;
}
#media ul {
list-style: none;
}
#media ul li {
display: inline-block;
}
#media(max-width: 900px) {
.footer .container {
width: 92% !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="PRODUCTION SHORT DESCRIPTION"/>
<meta name="keywords" content="AVELI PRODUCTION, VIDEO PRODUCTION, MUSIC VIDEOS, FILMS COMPANY, VIDEO EDITING, VFX COMPANY, AVELI, aveli, filming crew">
<title>AVELI PRODUCTION</title>
<!-- stylesheet -->
<link rel="stylesheet" href="stylesheets/style.css">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Darker+Grotesque:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- icons -->
<script type="module" src="https://unpkg.com/ionicons#4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
<!-- for on scroll animations -->
<link rel="stylesheet" href="https://cdn.rawgit.com/daneden/animate.css/v3.1.0/animate.min.css">
<script src="https://cdn.rawgit.com/matthieua/WOW/1.0.1/dist/wow.min.js"></script>
</head>
<body>
<!--------------- team section starts here --------------->
<a id="team"></a>
<section class="team">
<div id="teamstar">
<div class="container-fluid">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2 section-index wow fadeInUp" data-wow-delay="0.3s" style="margin-right: -1.000em;">03</div>
<div class="col-md-8 section-heading wow fadeInUp" data-wow-delay="0.4s" style="margin-left:-5.000em; margin-bottom: 3.000em;">Our Founders</div>
</div>
<div class="row members">
<div class="col-md-4"></div>
<div class="col-md-3 wow fadeInUp" data-wow-delay="0.5s" style="margin-left: -110px; margin-right: 7px;">
<div class="team-member">
<div class="team-img team-one"></div>
</div>
<div class="team-title">
<h5>Fedir Hostryi</h5>
<span>Founder/Film&SMM Area</span>
</div>
</div>
<div class="col-md-3 wow fadeInUp" data-wow-delay="0.6s" style="margin-right: 7px;">
<div class="team-member">
<div class="team-img team-two"></div>
</div>
<div class="team-title">
<h5>Andrii Donetskyi</h5>
<span>Co-founder/Film Area</span>
</div>
</div>
<div class="col-md-3 wow fadeInUp" data-wow-delay="0.7s" style="margin-right:-1000px;">
<div class="team-member">
<div class="team-img team-three"></div>
</div>
<div class="team-title">
<h5>Illia Ivantsov</h5>
<span>Co-founder/SMM Area</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!--------------- team section ends here --------------->
<!--------------- newsletter section starts here --------------->
<section class="newsletter">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="news-data">
<div class="section-subheading">
<h1 class="wow fadeInUp" data-wow-delay="0.3s">Subscribe to our newsletter</h1>
</div>
<div class="input-group wow fadeInUp" data-wow-delay="0.4s">
<input type="email" class="form-control" placeholder="Enter your email">
<span class="input-group-btn">
<button class="btn" type="submit">Subscribe</button>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!--------------- newsletter section ends here --------------->
<!--------------- contact section starts here --------------->
<a id="contact"></a>
<section class="contact">
<div class="container-fluid">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2 section-index wow fadeInUp" data-wow-delay="0.3s">04</div>
<div class="col-md-8 section-heading wow fadeInUp" data-wow-delay="0.4s">Contact us</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-6 icon-title wow fadeInUp" data-wow-delay="0.5s">We’re here to help and answer any question you might have. We look forward to hearing from you 🙂</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-6">
<form action="mailto:aveliproduction#gmail.com" name="contact-form" id="contact-form" method="POST">
<ul>
<li class="wow fadeInUp" data-wow-delay="0.6s">
<label for="contact-name">Name :</label>
<div class="textarea">
<input type="text" name="contact-name" id="contact-name" value="" required>
</div>
</li>
<br>
<li class="wow fadeInUp" data-wow-delay="0.7s">
<label for="contact-email">E-mail :</label>
<div class="textarea">
<input type="email" name="contact-email" id="contact-email" value="" required>
</div>
</li>
<br>
<li class="wow fadeInUp" data-wow-delay="0.8s">
<label for="contact-project">Message :</label>
<div class="textarea">
<textarea name="contact-project" id="contact-project" rows="6" required></textarea>
</div>
</li>
</ul>
<button type="submit" name="contact-submit" id="contact-submit" class="send wow fadeInUp" data-wow-delay="0.9s">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!--------------- footer starts here --------------->
<div class="footer">
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-4 wow fadeInUp" data-wow-delay="0.3s" id="address">
<p>Workarea</p>
<h4>Warszawa</h4>
<h4>Zlota Tower</h4>
<h4>postal code: 00-165</h4>
<br><br>
</div>
<div class="col-md-4 wow fadeInUp" data-wow-delay="0.4s" id="media">
<ul>
<li>
<a href="//www.facebook.com/fedor.hostryy">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li>
<a href="//www.facebook.com/fedor.hostryy">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li>
<a href="//www.facebook.com/fedor.hostryy">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
<li>
<ion-icon name="logo-youtube"></ion-icon>
</li>
</ul>
<br><br>
</div>
<div class="col-md-4 wow fadeInUp" data-wow-delay="0.5s" id="mail">
<p>Feel Free to Contact Us</p>
<h4>aveliproduction#gmail.com</h4>
<br><br>
</div>
</div>
</div>
</div>
</div>
<!--------------- footer ends here --------------->
</div>
</div>
<script>
// audio starts here
var audio = document.getElementById("bckgmusic");
audio.autoplay = true;
audio.loop = true;
audio.volume = 0.1;
audio.load();
document.addEventListener('keydown', function(e) {
if (e.keyCode == 113) {
document.getElementById('bckgmusic').pause();
}
});
document.addEventListener('keydown', function(e) {
if (e.keyCode == 112) {
document.getElementById('bckgmusic').play();
}
});
</script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
// navigation starts here
$("#toggle").click(function() {
$(this).toggleClass('on');
$("#resize").toggleClass("active");
});
$("#resize ul li a").click(function() {
$(this).toggleClass('on');
$("#resize").toggleClass("active");
});
$(".close-btn").click(function() {
$(this).toggleClass('on');
$("#resize").toggleClass("active");
});
$(function () {
$(document).scroll(function () {
var $nav = $(".nav");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
new WOW().init();
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
</script>
</body>
</html>
May be you should add the images inside the html file. That would work
Well, the problem is you are mentioning file src like this
file:///htdocs/img/ILJA.jpg
but chrome will not recognize it so it is unable to fetch the image for you. So you need to specify the exact path from the root means directory followed by subdirectory and followed by file name for example in windows you have to use C:\xampp\htdocs\img but you are using it like just htdocs\img
But Coda can recognize it because it is a web development application. And it will know how to get the image just from the subdirectory
I took a look at your site you have a subdirectory called img if you want to mention file name with full url you can do like this http://avelitest.epizy.com/img/your_file_name.jpg this will show the correct output
For example, you can check this link
http://avelitest.epizy.com/img/FEDOR.jpg
and this link will display all images within img directory http://avelitest.epizy.com/img/
Despite having position fixed and no transform properties, my "hero" div always moves with the page. I want it to stay put
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css:
*
{
margin: 0;
padding: 0;
}
header
{
background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color:white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover{
border: 1px solid white;
}
.logo img
{
width: 150px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1{
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button
{
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one{
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two{
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover{
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2{
height: 1000px;
background-color: red;
}
Full HTML:
<html>
<head>
<title>Summer Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class ="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class ="bro">
</div>
</div>
</div>
</header>
<!--particles js file -->
<!-- <h1> TEST </h1> -->
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</div>
<div id=page_2>
</div>
</body>
</html>
There just seems to be problem with your closing tags incorrectly nested. There needs to another closing div before the closing header tag. The snippet shows the hero in a fixed position:
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css: * {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1 {
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button {
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one {
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two {
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2 {
height: 1000px;
background-color: red;
}
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class="bro">
</div>
</div>
</div>
</div>
</header>
<div id=page_2>
</div>
Use position:inherit
You are using fixed and I think that is causing your issue.
Inherit won’t move, absolute stacks, fixed scrolls with page, static is default.