enter image description hereThis is the html code i have written for the index.html or home page. I have used sass code to compile it into the css . I tried everything i could find on the internet related to how to get rid of white space but nothing helped and i don't want to use sticky footer or keep its position set to fixed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Dosis&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/main.css" />
<title>John | UI/UX Designer & Photographer</title>
</head>
<body>
<!--header-->
<header id="header-home">
<div class="container">
<nav id="main-nav">
<h2>the deck</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="header-content">
<h1>
I am John The
<span
class="txt-type"
data-wait="3000"
data-words='["Photographer", "Designer", "UI/UX Developer"]'
></span>
</h1>
<p class="lead">I specialize in UI and Photography</p>
View My Work
</div>
</div>
</header>
//These all the contents of the html page divided everything into sections A,B,C...respectively.
<!--SECTION A SPECIALIZE -->
<section id="home-a" class="text-center py-2">
<div class="container">
<h2 class="section-title">I SPECIALIZE IN</h2>
<div class="bottom-line"></div>
<p class="lead">
Photography as well as creating digital masterpieces and UI/UX layouts
for websites and mobile applications
</p>
<div class="specials">
<div>
<i class="fas fa-file-alt fa-2x"></i>
<h3>Concepting</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
<div>
<i class="fas fa-desktop fa-2x"></i>
<h3>UI/UX</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
<div>
<i class="fas fa-object-ungroup fa-2x"></i>
<h3>VISUAL DESIGN</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
<div>
<i class="fas fa-thumbs-up fa-2x"></i>
<h3>INTERACTION</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
</div>
</div>
</section>
<!--SECTION B STATS-->
<section id="home-b" class="text-center py-2">
<div class="stats">
<div>
<ul>
<li><i class="fas fa-users fa-3x"></i></li>
<li class="stats-title">Clients</li>
<li class="stats-numbers">100</li>
</ul>
</div>
<div>
<ul>
<li><i class="fas fa-award fa-3x"></i></li>
<li class="stats-title">Awards</li>
<li class="stats-numbers">3</li>
</ul>
</div>
<div>
<ul>
<li><i class="fas fa-hourglass-start fa-3x"></i></li>
<li class="stats-title">Hours Worked</li>
<li class="stats-numbers">3500</li>
</ul>
</div>
<div>
<ul>
<li><i class="fas fa-code-branch fa-3x"></i></li>
<li class="stats-title">Projects Completed</li>
<li class="stats-numbers">100</li>
</ul>
</div>
</div>
</section>
<!-- SECTION C MY CREATIVE PROCESS -->
<section id="home-c" class="text-center py-2">
<div class="container">
<h2 class="section-title">
MY CREATIVE PROCESS
</h2><div class="bottom-line"></div>
<p class="lead">All of my UI/UX and design projects are based off of a practiced
formula to get the result that I am looking for
</p>
<div class="process">
<div>
<i class="fas fa-file-alt fa-4x process-icon my-2">
<div class="process-step">1</div>
</i>
<div class="clear"></div>
<h3>DISCUSS THE PROJECT
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
<div>
<i class="fas fa-desktop fa-4x process-icon my-2">
<div class="process-step">2</div>
</i>
<div class="clear"></div>
<h3>BRAINSTORMING ^ CONCEPT
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
<div>
<i class="fas fa-object-ungroup fa-4x process-icon my-2">
<div class="process-step">3</div>
</i>
<div class="clear"></div>
<h3>UI/UX PLANNING
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
<div>
<i class="fas fa-thumbs-up fa-4x process-icon my-2">
<div class="process-step">4</div>
</i>
<div class="clear"></div>
<h3>INTERACTION
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
</div>
</div>
</section>
</div>
<!-- FOOTER -->
<footer id="main-footer">
<div class="footer-content container">
<p>Copyright © 2019. All Rights Reserved
</p>
<div class="social">
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin"></i>
</div>
</div>
</footer>
<script src="js/typewriter.js"></script>
</body>
</html>
I have used sass in the making of this website and all the code related to it is here.
#import "config";
#import "utilities";
#import "item_grid";
//GENERAL STYLES
* {
margin: 0;
padding: 0;
}
#main {
height: 100%;
}
body {
flex-direction: column;
margin: 0;
font-family: "Dosis", sans-serif;
line-height: 1.6;
}
a {
text-decoration: none;
color: $dark-color;
}
ul {
list-style: none;
}
h2,
h3,
h4 {
text-transform: uppercase;
}
img {
width: 100%;
}
//LOGO
#logo {
width: 70px;
height: 70px;
color: #fff;
text-transform: uppercase;
}
//MAIN NAV
#main-nav {
display: flex;
justify-content: space-between;
padding-top: 1rem;
ul {
display: flex;
}
li {
padding: 1rem 1.5rem;
}
a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
border-bottom: 3px transparent solid;
padding-bottom: 0.5rem;
transition: border-color 0.5s;
&:hover {
border-color: $medium-color;
}
&.current {
border-color: $main-color;
}
}
}
//HEADER
#header {
//HEADER HOME WHOLE
&-home {
background: $bg-image no-repeat center right / cover;
color: #fff;
//HEADER CONTENT
.header-content {
padding-top: 20%;
text-align: center;
h1 {
font-size: 4rem;
line-height: 1.2;
}
}
}
// HEADER INNER PAGES CONTENT
&-inner {
background: $bg-image no-repeat 20% 30% / cover;
height: 5.5rem;
border-bottom: 3px solid $main-color;
}
}
//HOME SECTIONS
#home {
//HOME SECTION A
&-a {
padding-top: 100px;
width: 100%;
height: 20rem;
.container {
padding-left: 0;
padding-right: 0;
}
.specials {
margin-top: 1rem 0;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(4, 1fr);
.fas {
color: $main-color;
padding-bottom: 0.8rem;
}
}
}
//HOME SECTION B
&-b {
height: 300px;
.container {
height: 100%;
padding: 0;
margin: 0;
}
.stats {
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
li {
padding-top: 2rem;
line-height: 1;
&.stats-title {
font-size: 2rem;
font-weight: bold;
}
&.stats-numbers {
font-size: 1.5rem;
font-weight: bold;
}
}
div {
padding: 2rem 0;
margin: 0;
&:nth-child(odd) {
background: $light-color;
}
&:nth-child(even) {
background: $medium-color;
}
}
}
}
&-c {
margin-top: 50px;
height: 500px;
.container {
padding-left: 0;
padding-right: 0;
}
.process {
display: grid;
grid-gap: 3rem;
grid-template-columns: repeat(4, 1fr);
text-align: center;
&-step {
position: absolute;
top: 0;
right: 0;
font-size: 28px;
background: $main-color;
border-radius: 50%;
height: 15px;
width: 15px;
line-height: 15px;
padding: 1rem;
transition: all 1s;
}
//PROCESS ICON
&-icon {
border-radius: 50%;
background: $dark-color;
color: #fff;
padding: 2rem;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
position: relative;
transition: all 1s;
&:hover {
background: $main-color;
width: 90px;
height: 90px;
line-height: 90px;
.process-step {
background: $dark-color;
}
}
}
}
}
}
// FOOTER
#main-footer {
background: $dark-color;
color: #fff;
height: 6rem;
.footer-content {
display: flex;
justify-content: space-between;
height: 6rem;
align-items: center;
}
.social .fab {
margin: 1rem;
border: 2px #fff solid;
border-radius: 50%;
height: 20px;
width: 20px;
line-height: 20px;
text-align: center;
padding: 0.5rem;
&:hover {
background: $main-color;
}
}
}
config.scss code
//VARIABLES
$website-width:1280px;
$main-color:#ffbc00;
$light-color: #f4f4f4;
$medium-color:#ccc;
$dark-color:#333;
$bg-image:url('../images/main.jpg');
//SET TEXT COLOR FUNCTION
#function set-text-color($color) {
#if(lightness($color) > 50 ) {
#return #000 ;
}
#else {
#return #fff;
}
}
utilities.scss code :
.container {
max-width: $website-width;
height: 100vh;
padding: 0 350px;
margin: auto;
overflow: hidden;
}
//BUTTONS
%btn-shared {
display: inline-block;
padding: 0.8rem 2rem;
transition: all 0.5s;
border: none;
cursor: pointer;
}
.btn {
&-main {
#extend %btn-shared;
color: #333;
background-color: $main-color;
}
&-light {
#extend %btn-shared;
color: #333;
background-color: $light-color;
}
&-dark {
#extend %btn-shared;
color: #f4f4f4;
background-color: $dark-color;
}
}
button[class^='btn-']:hover,
a[class^='btn-']:hover,
input[class^='btn-']:hover {
background-color: $main-color;
}
// ABOUT BACKGROUNDS
.bg {
&-main {
background: $main-color;
color: set-text-color($main-color);
}
&-dark {
background: $dark-color;
color: set-text-color($dark-color);
}
&-light {
background: $light-color;
color: set-text-color($light-color);
}
&-medium {
background: $medium-color;
color: set-text-color($medium-color);
}
}
.lead {
font-size: 1.3rem;
margin-bottom: 2rem;
}
.text-center {
text-align: center;
}
//PADDING
.py {
&-1 {
padding: 1rem 0;
}
&-2 {
padding: 2rem 0;
}
&-3 {
padding: 3rem 0;
}
&-4 {
padding: 4rem 0;
}
}
//MARGIN
.my {
&-1 {
margin: 1rem 0;
}
&-2 {
margin: 2rem 0;
}
&-1 {
margin: 3rem 0;
}
&-1 {
margin: 4rem 0;
}
}
.section-title {
font-size: 2rem ;
display: block;
padding-bottom: 0.5rem;
text-align: center;
font-weight: 100;
text-transform: uppercase;
}
.bottom-line {
height: 2px;
width: 3rem;
background: $main-color;
display: block;
margin: 0 auto 1rem auto;
}
The code related to item_grid.scss is completely unrelated to this page. Thank you for the help.
Have you tried this :
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
Related
I building my own web page, and I was planning to place a timeline, I've investigated and found one that I want to take as a model, however, I only want to put two cards, but when I comment the rest of the cards, it gets misconfigured and loses its shape, placing itself the second card below the first when I want it to be next to it, how can I put it right next to it without affecting the rest of the structure?
/* Media Queries */
#mixin mq-xs {
#media (min-width: 320px) {
#content;
}
}
#mixin mq-sm {
#media (min-width: 480px) {
#content;
}
}
#mixin mq-md {
#media (min-width: 720px) {
#content;
}
}
#mixin mq-lg {
#media (min-width: 1000px) {
#content;
}
}
$background: #f7f7f7;
$box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
$border: 1px solid rgba(191, 191, 191, 0.4);
$items: 5;
$rows: ceil($items/2);
/* Card sizing */
$card-height: 400px;
$card-width: 450px;
$inner-margin: 15px;
$number-size: 35px;
$stagger: 180px;
$outer-margin: 90px;
$marker-size: 9px;
/* Colors */
$steps: #46b8e9;
$colors: #46b8e9,
#3ee9d1,
#ce43eb,
#4d92eb;
$timeline: #bdbdbd;
/* Calculations */
$container-height: $rows * ($card-height + $outer-margin) + $stagger;
$container-width: $card-width*2 + $outer-margin*3;
$head-height: $number-size + 50;
$body-height: $card-height - $head-height;
$marker-dist: $card-width + $outer-margin/2 - $marker-size/2;
/* Placeholders */
#include mq-lg {
%arrow {
position: absolute;
content: "";
width: 0;
height: 0;
}
%marker {
position: absolute;
content: "";
width: $marker-size;
height: $marker-size;
background-color: $timeline;
border-radius: $marker-size;
box-shadow: 0px 0px 2px 8px $background;
}
}
/* Some Cool Stuff */
$counter: $items - $rows + 2;
#for $i from 1 through $rows {
.demo-card:nth-child(#{$i*2-1}) { order: $i }
.demo-card:nth-child(#{$i*2}) { order: $counter }
$counter: $counter + 1;
}
/* Border Box */
* {
box-sizing: border-box;
}
/* Fonts */
#timeline {
padding: 100px 0;
background: $background;
border-top: $border;
border-bottom: $border;
.logo
{
width: 60px;
border-radius: 10px;
}
h1 {
text-align: center;
font-size: 3rem;
font-weight: 200;
margin-bottom: 20px;
}
p.leader {
text-align: center;
max-width: 90%;
margin: auto;
margin-bottom: 45px;
}
.demo-card-wrapper {
position: relative;
margin: auto;
#include mq-lg {
display: flex;
flex-flow: column wrap;
width: $container-width;
height: $container-height;
margin: 0 auto;
}
&::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
border-left: $border;
#include mq-lg {
border-left: 1px solid $timeline;
}
}
}
.demo-card {
position: relative;
display: block;
margin: 10px auto 80px;
max-width: 94%;
#include mq-sm {
max-width: 60%;
box-shadow: $box-shadow;
}
#include mq-md {
max-width: 40%;
}
#include mq-lg {
max-width: $card-width;
height: $card-height;
margin: $outer-margin;
margin-top: $outer-margin/2;
margin-bottom: $outer-margin/2;
&:nth-child(odd) {
margin-right: $outer-margin/2;
.head::after {
#extend %arrow;
border-left-width: 15px;
border-left-style: solid;
left: 100%;
}
.head::before {
#extend %marker;
left: $marker-dist + 1;
}
}
&:nth-child(even) {
margin-left: $outer-margin/2;
.head::after {
#extend %arrow;
border-right-width: 15px;
border-right-style: solid;
right: 100%;
}
.head::before {
#extend %marker;
right: $marker-dist - 1;
}
}
&:nth-child(2) {
margin-top: $stagger;
}
}
.head {
background-color: black;
position: relative;
display: flex;
align-items: center;
color: #fff;
font-weight: 400;
.number-box {
display: inline;
float: left;
margin: $inner-margin;
padding: 10px;
font-size: $number-size;
line-height: $number-size;
font-weight: 600;
background: rgba(0, 0, 0, 0.17);
}
h2 {
text-transform: uppercase;
font-size: 1.3rem;
font-weight: inherit;
letter-spacing: 2px;
margin: 0;
padding-bottom: 6px;
line-height: 1rem;
#include mq-sm {
font-size: 165%;
line-height: 1.2rem;
}
span {
display: block;
font-size: 0.6rem;
margin: 0;
#include mq-sm {
font-size: 0.8rem;
}
}
}
}
.body {
background: #fff;
border: $border;
border-top: 0;
padding: $inner-margin;
#include mq-lg {
height: $body-height;
}
p {
font-size: 14px;
line-height: 18px;
margin-bottom: $inner-margin;
}
img {
display: block;
width: 100%;
}
}
#for $i from 1 through $items {
&--step#{$i} {
$color: nth($colors, ((($i - 1) % 4) + 1));
background-color: $color;
.head::after {
border-color: $color;
}
}
}
}
}
<section id=timeline>
<h1>A Flexbox Timeline</h1>
<p class="leader">All cards must be the same height and width for space calculations on large screens.</p>
<div class="demo-card-wrapper">
<div class="demo-card demo-card--step1">
<div class="head">
<div class="number-box">
<span><img src="../../assets/img/-.png" class="logo"></span>
</div>
<h2><span class="small">- (2022)</span> -</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step2">
<div class="head">
<div class="number-box">
<span><img src="../../assets/img/-.png" class="logo"></span>
</div>
<h2><span class="small">-</span> -</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step3">
<div class="head">
<div class="number-box">
<span>03</span>
</div>
<h2><span class="small">Subtitle</span> Adaptation</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step4">
<div class="head">
<div class="number-box">
<span>04</span>
</div>
<h2><span class="small">Subtitle</span> Consistency</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step5">
<div class="head">
<div class="number-box">
<span>05</span>
</div>
<h2><span class="small">Subtitle</span> Conversion</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
</div>
</section>
This is my first webpage ever and I'm very new to this. I've been googling but I can't find a solution to this problem.
I've tried messing around with positioning and or adding containers but I can't get my footer to stay under my page. When resizing, it moves up and collides with all the content on the page
Forgive my code, but it's all over the place with media queries and comments from trying random things out.
Any guidance or pointers are appreciated!
(Also I know this is a "code dump and fix my problem" but my structure is pretty bad and maybe the problem could be elsewhere other than the footer and main content)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*html, body {*/
/* height: 100%;*/
/*}*/
/*.wrapper {*/
/* min-height: 100%;*/
/*}*/
.wrapper {
position:relative;
min-height: 100vh;
}
/*.content-wrap {*/
/* padding-bottom: 348px;*/
/*}*/
/*------------------- background ------------------------*/
.background-container{
background-size: 40px 40px;
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
position: relative;
font-family: 'Titillium Web', sans-serif;
/*padding-bottom: 348px;*/
}
/*------------------- nav ------------------------*/
nav {
display: flex;
padding: 2% 6%;
align-items: center;
justify-content: space-between;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a {
color: black;
text-decoration: none;
font-size: 17px;
font-weight: 600;
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 2px;
background: black;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after {
width: 100%;
}
.fa-solid {
display: none;
}
/*------------------- main ------------------------*/
main {
background-size: 40px 40px;
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
/*height stuff i found to calc height of main*/
height: calc( 100vh - 161px);
align-items: center;
justify-content: center;
font-family: 'Titillium Web', sans-serif;
}
.title{
display: flex;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
font-weight: 700;
margin-bottom: 100px;
padding-top: 100px;
}
.grid-ish {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: .3fr .3fr;
grid-template-areas:
"spotify discord"
"tracker idk";
grid-gap: 3rem;
margin: auto;
width: 50%;
}
.spotify {
grid-area: spotify;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
}
.spotify h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.discord {
grid-area: discord;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 21em;
}
.discord h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.tracker {
grid-area: tracker;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 18em;
}
.tracker h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.idk {
grid-area: idk;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 15em;
}
.idk h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
#media(max-width: 700px){
/*------ display none ------*/
/*------ nav ------*/
nav img {
display: none;
}
.nav-links ul li{
display: block;
}
html, body {
/*still dunno how this solves my overflow*/
/*but oh well*/
overflow-x:hidden;
}
.nav-links{
position: absolute;
background: #e9d138;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
transition: 1s;
z-index: 2;
}
nav .fa-xmark{
display: block;
color: black;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
nav .fa-bars{
display: block;
color: black;
margin: 38px 20px 0 0;
font-size: 30px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
/*------ main ------*/
main {
height: 100%;
}
}
#media(max-width: 1000px){
/*------ display none ------*/
/*------ main ------*/
main {
height: 100%;
}
}
/*------------------- footer ------------------------*/
.footer-container {
position: relative;
bottom: 0;
left: 0;
right: 0;
background: white;
background-size: 40px 40px;
/*background-color: gray;*/
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
display: flex;
margin-top:auto;
z-index: -11;
/*margin-top: -348px;*/
/*clear: both;*/
}
.footer{
width: 80%;
text-align: center;
margin: 0 auto;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 4rem;
}
.footer1{
padding-top: 6rem;
}
.footer2{
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
}
.footer2 a{
text-decoration: none;
color: black;
margin-left: 2rem;
transition: .5s;
}
.footer2 a:hover{
transform: translate(0, -5px);
}
.footer3{
display: flex;
align-items: center;
justify-content: center;
margin: 3rem 0 0;
}
.footer3 a{
margin: 0 2rem;
text-decoration: none;
color: black;
font-size: 30px;
transition: .5s;
}
.footer3 a:hover{
transform: translate(0, -5px);
}
#media(max-width: 700px){
.footer1{
padding-top: 30px;
}
.footer3{
margin: 2rem 0 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.2/css/fontawesome.min.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=Titillium+Web&display=swap" rel="stylesheet">
<link href="styles3.css" rel="stylesheet">
</head>
<body>
<!------------------------------- nav ------------------------------->
<div class="wrapper">
<div class= "content-wrap">
<div class="background-container">
<nav>
<img src="assets/logo.png">
<div class="nav-links" id="navLinks">
<i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PROJECTS</li>
<li>WHAT I'VE BEEN UP TO</li>
</ul>
</div>
<i class="fa-solid fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<!------------------------------- main content ------------------------------->
<main>
<h1 class="title">Projects</h1>
<div class="grid-ish">
<div class="spotify">
<h2>Spotify Playlist -> Youtube Downloader</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?<br> <br>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Itaque, facere iste, eligendi ipsa rerum
voluptas officia ullam eius iusto eaque.</p>
</div>
<div class="discord">
<h2>Discord Bot</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?</p>
</div>
<div class="tracker">
<h2>Financial Tracker</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate
alias ducimus animi, voluptatem quaerat? Aliquam, fuga, distinctio! Modi
veritatis quam quisquam molestias eveniet temporibus incidunt dolorem
quaerat obcaecati tempora possimus, aperiam, qui.</p>
</div>
<div class="idk">
<h2>Haven't Decided</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis
placeat, dolores maxime, assumenda aspernatur repellendus? Officiis
maxime obcaecati nisi maiores. ipsum dolor sit amet, consectetur
adipisicing elit. Eligendi</p>
</div>
</div>
</main>
</div>
<!------------------------------- footer ------------------------------->
<footer>
<div class= "footer-container">
<div class="footer">
<div class="footer1">
<h2>Luca Henderson</h2>
</div>
<div class="footer2">
Home
About
Projects
What I've Been Up To
</div>
<div class="footer3">
<i class="fab fa-linkedin"></i>
<i class="fab fa-github"></i>
<i class="fab fa-angellist"></i>
</div>
</div>
</div>
</footer>
</div>
<!--<-------------JavaScript for Toggle Menu------------>
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right ="0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>
I did some changes to your code in the css you have to put fit content as height instead of a hard coded height that's why your content keep overflowing and cover the footer.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*html, body {*/
/* height: 100%;*/
/*}*/
/*.wrapper {*/
/* min-height: 100%;*/
/*}*/
.wrapper {
position:relative;
min-height: 100vh;
}
/*.content-wrap {*/
/* padding-bottom: 348px;*/
/*}*/
.content-wrap{
height: fit-content;
}
/*------------------- background ------------------------*/
.background-container{
background-size: 40px 40px;
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
position: relative;
font-family: 'Titillium Web', sans-serif;
/*padding-bottom: 348px;*/
}
/*------------------- nav ------------------------*/
nav {
display: flex;
padding: 2% 6%;
align-items: center;
justify-content: space-between;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a {
color: black;
text-decoration: none;
font-size: 17px;
font-weight: 600;
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 2px;
background: black;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after {
width: 100%;
}
.fa-solid {
display: none;
}
/*------------------- main ------------------------*/
main {
background-size: 40px 40px;
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
/*height stuff i found to calc height of main*/
/*height: calc( 100vh - 161px); this is not needed*/
align-items: center;
justify-content: center;
font-family: 'Titillium Web', sans-serif;
}
.title{
display: flex;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
font-weight: 700;
margin-bottom: 100px;
padding-top: 100px;
}
.grid-ish {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: .3fr .3fr;
grid-template-areas:
"spotify discord"
"tracker idk";
grid-gap: 3rem;
margin: auto;
width: 50%;
height: fit-content;
}
.spotify {
grid-area: spotify;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
}
.spotify h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.discord {
grid-area: discord;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 21em;
}
.discord h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.tracker {
grid-area: tracker;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 18em;
}
.tracker h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.idk {
grid-area: idk;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 15em;
}
.idk h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
#media(max-width: 700px){
/*------ display none ------*/
/*------ nav ------*/
nav img {
display: none;
}
.nav-links ul li{
display: block;
}
html, body {
/*still dunno how this solves my overflow*/
/*but oh well*/
overflow-x:hidden;
}
.nav-links{
position: absolute;
background: #e9d138;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
transition: 1s;
z-index: 2;
}
nav .fa-xmark{
display: block;
color: black;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
nav .fa-bars{
display: block;
color: black;
margin: 38px 20px 0 0;
font-size: 30px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
/*------ main ------*/
main {
height: 100%;
}
}
#media(max-width: 1000px){
/*------ display none ------*/
/*------ main ------*/
main {
height: 100%;
}
}
/*------------------- footer ------------------------*/
.footer-container {
position: relative;
bottom: 0;
left: 0;
right: 0;
background: white;
background-size: 40px 40px;
/*background-color: gray;*/
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
display: flex;
margin-top:auto;
z-index: -11;
/*margin-top: -348px;*/
/*clear: both;*/
}
.footer{
width: 80%;
text-align: center;
margin: 0 auto;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 4rem;
}
.footer1{
padding-top: 6rem;
}
.footer2{
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
}
.footer2 a{
text-decoration: none;
color: black;
margin-left: 2rem;
transition: .5s;
}
.footer2 a:hover{
transform: translate(0, -5px);
}
.footer3{
display: flex;
align-items: center;
justify-content: center;
margin: 3rem 0 0;
}
.footer3 a{
margin: 0 2rem;
text-decoration: none;
color: black;
font-size: 30px;
transition: .5s;
}
.footer3 a:hover{
transform: translate(0, -5px);
}
#media(max-width: 700px){
.footer1{
padding-top: 30px;
}
.footer3{
margin: 2rem 0 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.2/css/fontawesome.min.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=Titillium+Web&display=swap" rel="stylesheet">
<link href="css.css" rel="stylesheet">
</head>
<body>
<!------------------------------- nav ------------------------------->
<div class="wrapper">
<div class= "content-wrap">
<div class="background-container">
<nav>
<img src="assets/logo.png">
<div class="nav-links" id="navLinks">
<i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PROJECTS</li>
<li>WHAT I'VE BEEN UP TO</li>
</ul>
</div>
<i class="fa-solid fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<!------------------------------- main content ------------------------------->
<main>
<h1 class="title">Projects</h1>
<div class="grid-ish">
<div class="spotify">
<h2>Spotify Playlist -> Youtube Downloader</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?<br> <br>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Itaque, facere iste, eligendi ipsa rerum
voluptas officia ullam eius iusto eaque.</p>
</div>
<div class="discord">
<h2>Discord Bot</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?</p>
</div>
<div class="tracker">
<h2>Financial Tracker</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate
alias ducimus animi, voluptatem quaerat? Aliquam, fuga, distinctio! Modi
veritatis quam quisquam molestias eveniet temporibus incidunt dolorem
quaerat obcaecati tempora possimus, aperiam, qui.</p>
</div>
<div class="idk">
<h2>Haven't Decided</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis
placeat, dolores maxime, assumenda aspernatur repellendus? Officiis
maxime obcaecati nisi maiores. ipsum dolor sit amet, consectetur
adipisicing elit. Eligendi</p>
</div>
</div>
</main>
</div>
<!------------------------------- footer ------------------------------->
<footer>
<div class= "footer-container">
<div class="footer">
<div class="footer1">
<h2>Luca Henderson</h2>
</div>
<div class="footer2">
Home
About
Projects
What I've Been Up To
</div>
<div class="footer3">
<i class="fab fa-linkedin"></i>
<i class="fab fa-github"></i>
<i class="fab fa-angellist"></i>
</div>
</div>
</div>
</footer>
</div>
<!--<-------------JavaScript for Toggle Menu------------>
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right ="0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 2 years ago.
I have 3 columns in my footer (f-box). I want them to have equal height. I don't want to use flexbox for this one. I am trying to achieve the result using - display:table on my container of the boxes and make display:table-cell for every box. But it doesn't work. Why? How to do it with this display: table method
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700;800&family=Quantico:wght#400;700&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans", sans-serif;
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Quantico", sans-serif;
margin-bottom: 20px;
}
p {
font-size: 15px;
color: #666;
line-height: 26px;
margin-bottom: 15px;
}
a {
font-family: "Quantico", sans-serif;
text-decoration: none;
color: #111;
}
ul {
list-style: none;
}
img {
width: 100%;
display: block;
}
/* Theme */
.container {
margin: auto;
max-width: 1500px;
padding: 0 15px;
}
.logo {
font-size: 30px;
padding: 20px 0;
float: left;
margin: 0;
}
.main-color {
color: #009603;
}
.btn {
display: inline-block;
text-transform: uppercase;
background: #009603;
color: #fff;
padding: 14px 30px;
font-weight: 700;
}
/* Nav */
nav {
overflow: hidden;
text-transform: uppercase;
}
nav ul {
float: right;
}
nav ul li {
float: left;
margin-right: 32px;
position: relative;
}
nav ul li a {
display: block;
padding: 31px 8px;
font-weight: 700;
}
nav ul li a:after {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: #009603;
content: "";
opacity: 0;
transition: all 0.3s;
}
nav ul li.active a:after {
opacity: 1;
}
nav ul li:hover > a:after {
opacity: 1;
}
/* Showcase */
#showcase {
background: url("../img/bg.jpg") no-repeat center center/cover;
height: 900px;
}
#showcase .showcase-content {
color: #fff;
text-align: center;
padding-top: 300px;
}
#showcase .showcase-content h2 {
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
}
#showcase .showcase-content p {
margin-bottom: 30px;
line-height: 30px;
color: #fff;
}
/* Features */
#features {
padding-bottom: 60px;
}
#features .container {
margin-top: -70px;
max-width: 1400px;
overflow: hidden;
}
#features .box {
background: #fff;
float: left;
max-width: 30%;
margin: 0 15px 30px 15px;
padding: 10px 10px 18px 10px;
box-shadow: 0px 10px 25px rgba(206, 206, 206, 0.5);
text-align: center;
}
#features .box img {
margin-bottom: 28px;
}
#features .box h3 {
color: #191039;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
font-size: 30px;
}
/* Footer */
footer {
padding-top: 70px;
overflow: hidden;
background-color: #000;
}
footer .container {
max-width: 1400px;
display: table;
}
footer .f-box {
display: table-cell;
float: left;
max-width: 33.3%;
margin-bottom: 30px;
padding: 0 15px;
}
footer .logo {
padding-top: 0;
color: #fff;
text-transform: uppercase;
float: none;
}
footer p {
color: #c4c4c4;
margin-bottom: 20px;
}
footer .social i {
color: #fff;
margin-right: 20px;
}
footer h5 {
color: #fff;
text-transform: uppercase;
font-size: 20px;
font-weight: 700px;
margin-bottom: 35px;
padding-top: 5px;
}
footer img {
float: left;
width: calc(33.33% - 5px);
margin-right: 5px;
}
footer form {
position: relative;
}
footer input {
width: 100%;
height: 50px;
font-size: 15px;
color: #c4c4c4;
padding-left: 20px;
border: 1px solid #009603;
background: transparent;
}
footer form button {
font-size: 18px;
color: #fff;
background: #009603;
height: 50px;
width: 50px;
border: none;
position: absolute;
right: 0;
top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pacocha | Garden Projects</title>
<link rel="stylesheet" href="css/style.css" />
<script
src="https://kit.fontawesome.com/1685e275a4.js"
crossorigin="anonymous"
></script>
</head>
<body>
<header>
<nav>
<div class="container">
<a href="index.html">
<h1 class="logo"><i class="fas fa-leaf main-color"></i> Pacocha</h1>
</a>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
</nav>
<div id="showcase">
<div class="container">
<div class="showcase-content">
<h2>Garden Projects</h2>
<p>
We have the best home improvement projects, expert advice, and DIY
home improvement ideas for your home. <br />
You can create your dream home with smart planning and the right
home improvement contractors.
</p>
About Us
</div>
</div>
</div>
</header>
<!-- Features -->
<section id="features">
<div class="container">
<div class="box">
<img src="img/feat1.jpeg" alt="" />
<h3>Gardening</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
magnam reprehenderit aspernatur neque nam ipsum enim, vitae minus
totam voluptates.
</p>
</div>
<div class="box">
<img src="img/feat2.jpg" alt="" />
<h3>Decorating</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
magnam reprehenderit aspernatur neque nam ipsum enim, vitae minus
totam voluptates.
</p>
</div>
<div class="box">
<img src="img/feat3.jpg" alt="" />
<h3>Ideas</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
magnam reprehenderit aspernatur neque nam ipsum enim, vitae minus
totam voluptates.
</p>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="f-box">
<h1 class="logo"><i class="fas fa-leaf main-color"></i> Pacocha</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione
corporis nostrum ex perferendis! Adipisci, molestias.
</p>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="f-box">
<h5>Instagram</h5>
<img src="img/insta1.jpg" alt="" />
<img src="img/insta2.jpg" alt="" />
<img src="img/insta3.jpg" alt="" />
</div>
<div class="f-box">
<h5>Subscribe</h5>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Necessitatibus, vel?
</p>
<form action="">
<input type="email" placeholder="Email" />
<button type="submit"><i class="fa fa-send"></i></button>
</form>
</div>
</div>
</footer>
</body>
</html>
you just need this css
footer {
padding: 70px 0;
}
footer .f-box {
display: table-cell;
float: none;
width: 33.3%;
margin-bottom: 30px; /*the margin property is not applicable to display:table-cell elements.*/
padding: 0 15px;
}
and it will behave like this - equal column height
I'm working on school project...So i'm building web site. But I have problem, after implementing laptop and lock simbol into HTML code CSS is ignoring any changes of float or margin in elements placed after those two simbols.. Any type of help will be apreachiated.
Whole project folder - Google drive link
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="stil.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Thasadith" rel="stylesheet">
</head>
<body>
<header>
<div class="container"> <img src="slike/glava.jpg" alt="Snow" style="width:100%;">
<div class="top-left">Logo</div>
<div class="top-right">
<div class="nav"> SERVICES PORTFOLIO ABOUT CONTACT </div>
</div>
<div class="centered">
<p>Welcome To Our Studio!</p>
<h1>IT'S NICE TO MEET YOU</h1>
<button onclick="myFunction()" id="myBtn">TELL ME MORE</button>
</div>
</div>
</header>
<div class="services">
<div class="main" id="section1"></div>
<h2>SERVICES</h2>
<h6>Lorem ipsum dolor sit amet consectetur.</h6>
<div class="services_slike">
<article> <span><i class="fas fa-laptop"> </i> </span>
<h3>Responsive Design</h3>
<h7>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</h7>
</article>
<article> <span> <i class="fas fa-lock"></i> </span>
<h3>Web Security</h3>
<h7>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</h7>
</article>
</div>
</div>
<div class="main" id="section2">
<h8>PORTFOLIO</h8>
</div>
<!--<div class="main" id="section3">
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
Click Me to Smooth Scroll to Section 2 Below
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="section4">
<h2>Section 5</h2>
Click Me to Smooth Scroll to Section 1 Above
</div>-->
</body>
</html>
and CSS
#charset "utf-8";
top-right {
position: fixed;
top: 0;
width: 100%;
overflow: hidden;
background-color: #333;
}
nav {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
}
.nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: 'Lato', sans-serif;
}
.nav a:hover {
color: #E0CD36;
}
.nav a.active {
color: #E0CD36;
}
.container {
position: relative;
text-align: center;
color: white;
}
/* Top left text */
.top-left {
position: absolute;
top: 8px;
left: 150px;
font-family: 'Courgette', cursive;
font-size: 50px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 130px;
float: right;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
headder {
width: 98%;
padding: 1%;
float: right;
}
button {
background-color: #FEC503;
padding: 2%;
color: white;
width: 25%;
border: none;
}
p {
font-family: 'Lato', sans-serif;
font-size: 50px;
}
h1 {
font-family: 'Lato', sans-serif;
font-size: 70px;
}
html {
scroll-behavior: smooth;
}
h2 {
text-align: center;
font-size: 50px;
font-family: 'Lato', sans-serif;
}
h6 {
font-size: 20px;
color: #777777;
text-align: center;
margin-top: -1%;
font-family: 'Thasadith', sans-serif;
}
span {
font-size: 100px;
margin-left: 28%;
}
h3 {
margin-left: 24%;
font-family: 'Lato', sans-serif;
}
h7 {
color: #777777;
margin-top: -1%;
text-align: center;
}
article {
width: 30%;
float: left;
margin-left: 15%;
}
h8 {
font-family: 'Lato', sans-serif;
margin-top: 10px;
font-size: 50px;
}
.services_slike {
width: 100%;
}
Look, in your html code in blocks article there element have h7. HTML didn't have that element. It has only h1, h2, h3, h4, h5 and h6. Here is right code.
<article> <span><i class="fas fa-laptop"> </i> </span>
<h3>Responsive Design</h3>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</h6>
</article>
<article> <span> <i class="fas fa-lock"></i> </span>
<h3>Web Security</h3>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</h6>
</article>
Am I right understand you?
From Float on w3school for no float you can set none for float.
example :float: none;
and same as float, you can set none for every margin
margin-left:none;
if is not set for you, you can set !important for that style.
I have a little problem with bootstrap, I test lot of possibility for resolve my problem, but I dont found the good..
I have a footer. The footer is in the container for align with the bootstrap grid. I would like to put the width contact block at 100% at the right.Currently it is blocked against the container.
the block are perfectly align, i have just this problem
Curently:
Final result :
(See my code in full view)
#charset 'UTF-8';
#import url('https://fonts.googleapis.com/css?family=Lato:300,400,900|Merriweather:400,400i,700i');
.accompagnement {
height: 550px;
background: #fafafa;
}
.accompagnement__titre {
font-family: Merriweather, serif;
font-size: 30px;
font-weight: 400;
line-height: 240px;
position: relative;
color: #aba08c;
}
.accompagnement__titre:after {
position: absolute;
right: 40%;
bottom: 70px;
width: 200px;
height: 1px;
content: ' ';
background: #aba08c;
}
.accompagnement__informations {
background: white;
background-clip: content-box;
}
.accompagnement__image {
width: 100%;
height: 210px;
background: url('../assets/img/spot-of-light-1145368.jpg') no-repeat center center;
}
.accompagnement__texte {
line-height: 26px;
padding: 30px 30px;
}
.accompagnement__texte > h2 {
font-size: 24px;
color: #8b3d61;
}
.accompagnement__texte > p {
font-weight: 300;
}
.valign {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.set-relative {
position: relative;
}
.svg-button {
/**
Gestion du :Hover des SVG
*/
}
.svg-button-gauche,
.svg-button-droite {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
fill: #5e5f78;
}
.svg-button-gauche {
left: -60px;
}
.svg-button-droite {
right: -60px;
}
.svg-button-fleche {
fill: none;
stroke: #ccc;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
.svg-button-contour {
fill: #ccc;
}
.svg-button-gauche:hover .svg-button-fleche,
.svg-button-droite:hover .svg-button-fleche {
stroke: red;
}
.svg-button-gauche:hover .svg-button-contour,
.svg-button-droite:hover .svg-button-contour {
fill: red;
}
footer {
position: relative;
background: #e5e3e8;
}
footer ul {
margin: 50px 0 140px 0;
color: #5e5f78;
}
footer ul li {
font-weight: 300;
line-height: 25px;
}
footer ul li:first-child {
font-family: Merriweather, serif;
font-weight: 400;
line-height: 30px;
}
footer ul li a {
text-decoration: none;
color: inherit;
}
footer ul li a:hover {
color: inherit;
}
.footer {
font-size: 13px;
font-weight: 300;
padding: 30px 0;
color: #5e5f78;
border-top: 1px solid #fff;
}
.footer__copyright {
padding-left: 0;
}
.footer__appolo {
padding-right: 0;
text-align: right;
}
.footer__appolo > a {
display: inline-block;
text-decoration: none;
color: #5e5f78;
}
.footer__appolo > a:first-child:after {
margin: 0 15px;
content: '•';
}
.contacts {
position: absolute;
top: -20px;
right: 0;
height: 409px;
background: #fff;
background-clip: content-box;
}
.contacts > h2 {
font-family: Merriweather, serif;
font-size: 30px;
line-height: 30px;
position: relative;
margin-bottom: 55px;
color: #aba08c;
}
.contacts > h2:after {
position: absolute;
bottom: -30px;
left: 0;
width: 300px;
height: 1px;
content: ' ';
background: #aba08c;
}
.contacts__tel {
font-weight: 300;
line-height: 30px;
margin: 0 0 50px 0;
}
.contacts__permanence,
.contacts__disponibilite,
.contacts__lieu {
font-family: Merriweather, serif;
font-size: 14px;
font-weight: 400;
line-height: 30px;
margin: 0;
}
.contacts__adresse {
font-size: 14px;
font-weight: 300;
line-height: 20px;
margin: 0;
color: #5e5f78;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<section class="container-fluid accompagnement">
<div class="container">
<div class="row">
<div class="container">
<div class="row set-relative">
<div class="col-lg-4 accompagnement__informations">
<div class="accompagnement__image"></div>
<div class="accompagnement__texte">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis dignissimos fuga nobis, nulla, pariatur, quia quisquam reiciendis repellendus tempore vero voluptas voluptate voluptatibus. Alias ducimus impedit nostrum reprehenderit ut!</p>
</div>
</div>
<div class="col-lg-4 accompagnement__informations">
<div class="accompagnement__image"></div>
<div class="accompagnement__texte">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur doloribus ducimus eveniet molestiae? Amet delectus, distinctio harum incidunt, laborum libero minima minus molestias quam repudiandae suscipit ut veniam voluptatum.</p>
</div>
</div>
<div class="col-lg-4 accompagnement__informations">
<div class="accompagnement__image"></div>
<div class="accompagnement__texte">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cumque eligendi expedita id itaque minus modi neque nostrum odio omnis provident quam quas quasi quisquam ratione repellendus, sapiente similique voluptas.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>SubMenu</li>
<li>SubMenu</li>
<li>SubMenu</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
</div>
<div class="row footer">
<p class="col-lg-6 footer__copyright">© 2017 Company</p>
<div class="col-lg-6 footer__appolo">
Plan
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 contacts">
<h2>Contacts</h2>
<p class="contacts__permanence">Blablabla</p>
<p class="contacts__disponibilite">Blablabla</p>
<p class="contacts__tel">Blablabla</p>
<p class="contacts__lieu">Blablabla</p>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
Thanks
If your block is inside a .container, you can't expand it outside the container, unless you make it position:absolute or something like this.
You could also change the .container in the footer into a .container-fluid, and then create 2 blocks inside for placing.
.container is made to be centered on devices > "xs".