So, I have a question if anyone knows the answer. Im working on my portfolio and found a Codepen I would like to use for my photography page. The only problem is, the pen Im using goes PAST the footer and I would like the footer to move further down the page with each batch of images I add. Ive added an example of the error Im running into, along with the CSS that is being used for the footer. I will also add the full CSS. I've been trying to figure this out on my own, but any help would be very awesome. Thanks.
@charset "utf-8";
/* CSS Document */
body {
background-color: #fff;
margin: 0 auto;
width: 100%;
height: auto;
}
header {
background-color: #020557;
height: 100px;
width: 100%;
}
header h1 {
color: #ffffff;
font-size: 50px;
font-family: "Oswald", Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
padding-left: 20px;
line-height: 100px;
}
/*------Navigation------*/
.nav {
background-color: #efefef;
text-align: left;
width: 100%;
height: auto;
}
.nav ul {
background: #efefef;
font-family: "Oswald", Arial, Helvetica, sans-serif;
list-style: none;
position: relative;
display: inline-block;
padding: 0 25px;
margin: 0 auto;
width: auto;
}
.nav ul:after {
content: "";
clear: both;
display: block;
}
.nav ul li {
display: inline-block;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul li:hover {
background: #020557;
transition: 0.2s ease-in-out;
}
.nav ul li:hover a {
color: #fff;
}
.nav ul li a {
display: block;
padding: 5px 22.25px;
color: #020557;
text-decoration: none;
}
.nav ul ul {
display: none;
text-align: left;
}
.nav ul ul {
background: #020557;
padding: 0;
position: absolute;
top: 100%;
z-index: 99;
}
.nav ul ul li {
display: block;
border-top: 1px solid #fff;
position: relative;
z-index: 99;
}
.nav ul ul li a {
padding: 5px 22.25px;
color: #fff;
}
.nav ul ul li a:hover {
background: #000000;
transition: 0.25s ease-in-out;
}
footer {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
left: 0;
background: #020557;
}
footer p {
color: #ffffff;
font-family: "Oswald", Arial, Helvetica, Sans-serif;
font-size: 10px;
text-align: center;
}
.carousel {
margin-left: 25%;
margin-right: 25%;
}
ul.slides {
display: block;
position: relative;
height: 600px;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
ul.slides input {
display: none;
}
.slide-container {
display: block;
}
.slide-image {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
transition: all .7s ease-in-out;
}
.slide-image img {
width: auto;
min-width: 100%;
height: 100%;
}
.carousel-controls {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 999;
font-size: 100px;
line-height: 600px;
color: #fff;
}
.carousel-controls label {
display: none;
position: absolute;
padding: 0 20px;
opacity: 0;
transition: opacity .2s;
cursor: pointer;
}
.slide-image:hover + .carousel-controls label{
opacity: 0.5;
}
.carousel-controls label:hover {
opacity: 1;
}
.carousel-controls .prev-slide {
width: 49%;
text-align: left;
left: 0;
}
.carousel-controls .next-slide {
width: 49%;
text-align: right;
right: 0;
}
.carousel-dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
z-index: 999;
text-align: center;
}
.carousel-dots .carousel-dot {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
opacity: 0.5;
margin: 10px;
}
input:checked + .slide-container .slide-image {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .carousel-controls label {
display: block;
}
input#img-1:checked ~ .carousel-dots label#img-dot-1,
input#img-2:checked ~ .carousel-dots label#img-dot-2,
input#img-3:checked ~ .carousel-dots label#img-dot-3,
input#img-4:checked ~ .carousel-dots label#img-dot-4,
input#img-5:checked ~ .carousel-dots label#img-dot-5,
input#img-6:checked ~ .carousel-dots label#img-dot-6,
input#img-7:checked ~ .carousel-dots label#img-dot-7,
input#img-8:checked ~ .carousel-dots label#img-dot-8,
input#img-9:checked ~ .carousel-dots label#img-dot-9,
input#img-10:checked ~ .carousel-dots label#img-dot-10,
input#img-11:checked ~ .carousel-dots label#img-dot-11,
input#img-12:checked ~ .carousel-dots label#img-dot-12 {
opacity: 1;
}
input#img-1:checked ~ .carousel-dots label#img-dot-1,
input#img-2:checked ~ .carousel-dots label#img-dot-2,
input#img-3:checked ~ .carousel-dots label#img-dot-3,
input#img-4:checked ~ .carousel-dots label#img-dot-4,
input#img-5:checked ~ .carousel-dots label#img-dot-5,
input#img-6:checked ~ .carousel-dots label#img-dot-6,
input#img-7:checked ~ .carousel-dots label#img-dot-7,
input#img-8:checked ~ .carousel-dots label#img-dot-8 {
opacity: 1;
}
input#img-1:checked ~ .carousel-dots label#img-dot-1,
input#img-2:checked ~ .carousel-dots label#img-dot-2,
input#img-3:checked ~ .carousel-dots label#img-dot-3,
input#img-4:checked ~ .carousel-dots label#img-dot-4,
input#img-5:checked ~ .carousel-dots label#img-dot-5,
input#img-6:checked ~ .carousel-dots label#img-dot-6,
input#img-7:checked ~ .carousel-dots label#img-dot-7,
input#img-8:checked ~ .carousel-dots label#img-dot-8,
input#img-9:checked ~ .carousel-dots label#img-dot-9,
input#img-10:checked ~ .carousel-dots label#img-dot-10,
input#img-11:checked ~ .carousel-dots label#img-dot-11 {
opacity: 1;
}
input#img-1:checked ~ .carousel-dots label#img-dot-1,
input#img-2:checked ~ .carousel-dots label#img-dot-2,
input#img-3:checked ~ .carousel-dots label#img-dot-3,
input#img-4:checked ~ .carousel-dots label#img-dot-4,
input#img-5:checked ~ .carousel-dots label#img-dot-5,
input#img-6:checked ~ .carousel-dots label#img-dot-6,
input#img-7:checked ~ .carousel-dots label#img-dot-7,
input#img-8:checked ~ .carousel-dots label#img-dot-8,
input#img-9:checked ~ .carousel-dots label#img-dot-9,
input#img-10:checked ~ .carousel-dots label#img-dot-10,
input#img-11:checked ~ .carousel-dots label#img-dot-11 {
opacity: 1;
}
input:checked + .slide-container .nav label { display: block; }
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: #555;
background: #e5e5e5;
}
.gallery {
width: 100%;
margin: 5%;
padding: 5%;
}
.gallery > div {
position: relative;
float: left;
padding: 5px;
}
.gallery > div > img {
transition: .1s transform;
transform: translateZ(0); /* hack */
}
.gallery > div:hover {
z-index: 1;
}
.gallery > div:hover > img {
transform: scale(1.5,1.5);
}
.cf:before, .cf:after {
display: table;
content: "";
line-height: 0;
}
.cf:after {
clear: both;
}
1 Correct answer
Have you looked at Adobe Portfolio? It's free with qualifying Creative cloud plans. Portfolio is hosted on Adobe's servers so there's nothing more to buy. The layout themes are responsive to fit mobile, tablet and desktops. The online site builder is simple to use, no coding skills required. And it ties in with your Lightroom Collections/Albums. So from start to finish, you can have your Portfolio site up and running in 30 minutes or less.
...
4
Replies
AdChoices