I'm coding my first website but unfortunately there is some unwanted empty space at the bottom that won't go away.
I've checked a lot of solves but they don't seem to be working. Could somebody please take a look at the code (linked below) and let me know what I'm doing wrong?
i can see this problem in all my html, usually if my html has content the problem doesn't but it reappears when i resize the screen with "inspect element" tool of any browser. As I said before, I tried a lot of solutions, even deleting whole lines of code to try to find the solution but I don't get anything...
/* General */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-decoration: none;
}
.bodyBg {
background-image: url(../img/bg/bgMain.jpg);
background-position: center;
background-attachment: fixed;
}
/* HEADER*/
.headerMain {
text-align: center;
font-style: italic;
background-color: rgb(30, 3, 68);
font-size: 1.5rem;
overflow: hidden;
position: sticky;
top: 0;
z-index: 100;
}
/* NAV */
.logoNavDiv {
display: flex;
justify-content: center;
margin: -3% auto -4% auto;
}
.logoNavImg {
width: 50%;
height: auto;
}
.navMain {
background-color: rgb(30, 3, 68);
height: auto;
padding-top: 0.5%;
padding-bottom: 0.5%;
}
.navUl {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}
.navLi {
list-style: none;
margin-right: 2%;
}
.navLiMobile {
display: none;
}
.navLink:hover {
color: rgb(185, 13, 13);
font-weight: 600px;
}
.navLink {
color: white;
}
/* FOOTER */
.foot {
background-color: rgb(53, 7, 119);
display: flex;
justify-content: center;
}
.footBox {
padding-top: 0.5%;
display: flex;
flex-direction: column;
}
.footIconBox {
display: flex;
justify-content: center;
list-style: none;
}
.footIconLi {
padding-left: 2%;
}
.footIcons {
width: 50px;
height: auto;
}
.footText {
color: white;
text-align: center;
}
/* Noticias.hmtl */
.mainContainerNoticias {
display: grid;
grid-template-columns: 0.5fr 1fr 0.5fr;
grid-template-rows: repeat(3, auto);
grid-template-areas:
"header header header"
"main main main"
"footer footer footer"
;
}
.headerNoticiasGrid {
grid-area: header;
}
.mainNoticiasGrid {
grid-area: main;
background-image: url(../img/bg/bgSec.jpg);
}
.footerNoticiasGrid {
grid-area: footer;
}
/* TOP Section */
.noticiasTopSection {
margin: 0;
}
.noticiasCatUl {
display: flex;
border: 1px rgba(0, 0, 0, 0.048) solid;
justify-content: center;
margin-bottom: 1%;
}
.noticiasCatLi {
list-style: none;
padding: 2%;
font-size: 1.5rem;
}
.noticiasCatLink {
text-decoration: none;
color: black;
}
.noticiasCatLink:hover {
color: rgb(185, 13, 13);
font-weight: 600px;
border: none;
}
/* MID SECTION */
.noticiasMidSection {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.noticiasArtMain {
display: flex;
max-width: 23em;
height: auto;
border: 1px rgba(0, 0, 0, 0.048) solid;
background-color: rgba(0, 0, 0, 0.11);
border-radius: 8px;
margin: 1%;
overflow: hidden;
}
.noticiasArtImgDiv {
width: 100%;
}
.noticiasArtImg {
width: 100%;
height: 13em;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.noticiasArtDiv {
width: 100%;
height: auto;
overflow: hidden;
color: black;
}
.noticiasArtDiv:hover {
color: red;
}
.noticiasArtH3 {
font-size: 1.4em;
font-weight: 600;
padding-bottom: 0.5rem;
text-align: center;
}
.noticiasArtP {
line-height: 1rem;
font-size: 1rem;
font-weight: 400;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
}
<!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">
<title>PCNEWS-Guias/Trucos</title>
<link rel="shortcut icon" href="img/icons/icono.png" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="bodyBg">
<div class="mainContainerNoticias bg22">
<!-- HEADER -->
<header class="headerMain headerNoticiasGrid">
<div class="logoNavDiv">
<a href="index.html">
<img src="img/icons/logo.svg" alt="logotipo" class="logoNavImg">
</a>
</div>
<nav class="navMain">
<ul class="navUl">
<li class="navLi navLiMobile"><a class="navLink" href="index.html">Inicio</a></li>
<li class="navLi"><a class="navLink" href="noticias.html">Noticias</a></li>
<li class="navLi"><a class="navLink" href="reviews.html">Reviews</a></li>
<li class="navLi"><a class="navLink" href="guias.html">Guias</a></li>
<li class="navLi"><a class="navLink" href="contacto.html">Contacto</a></li>
</ul>
</nav>
</header>
<!-- MAIN -->
<main class="mainNoticiasGrid">
<section class="NoticiasTopSection">
<ul class="noticiasCatUl">
<li class="noticiasCatLi">TODO</li>
<li class="noticiasCatLi">NOTICIAS</li>
<li class="noticiasCatLi">ARTICULOS</li>
</section>
<section class="noticiasMidSection">
<article class="noticiasArtMain">
<a href="">
<div class="noticiasArtImgDiv">
<img src="img/noticias/new1.jpg" alt="GTX-3090-TI" class="noticiasArtImg">
</div>
<div class="noticiasArtDiv">
<h3 class="noticiasArtH3">Mineros están rematando sus tarjetas gráficas, pero muchas
tienen
chips
</h3>
<p class="noticiasArtP">Usuarios que compraron algunas de estas tarjetas descubrieron que las tarjetas fueron
modificadas en algún momento</p>
</div>
</a>
</article>
<article class="noticiasArtMain">
<a href="">
<div class="noticiasArtImgDiv">
<img src="img/noticias/new2.jpg" alt="Fall Guys" class="noticiasArtImg">
</div>
<div class="noticiasArtDiv">
<h3 class="noticiasArtH3">Tras el cambio a free-to-play, Fall Guys vive su mejor momento desde 2020
</h3>
<p class="noticiasArtP">El videojuego gratuito de Mediatonic la rompe en Twitch y Steam a pesar de desaparecer de la misma</p>
</div>
</a>
</article>
<article class="noticiasArtMain">
<a href="">
<div class="noticiasArtImgDiv">
<img src="img/noticias/new3.jpg" alt="GoreMagala" class="noticiasArtImg">
</div>
<div class="noticiasArtDiv">
<h3 class="noticiasArtH3">Publican nuevo trailer de Monster Hunter Rise con Astalos y Gore Magala
</h3>
<p class="noticiasArtP">Es momento de que conozcas cómo te harán sufrir estos iconicos enemigos de antiguas entregas</p>
</div>
</a>
</article>
</main>
<!-- Footer -->
<footer class="foot footerNoticiasGrid">
<div class="footBox">
<ul class="footIconBox">
<li class="footIconLi"> <a href="https://www.instagram.com/lucasdxvid/" target="_blank">
<img src="img/icons/instagram.svg" alt="instagram" class="footIcons"> </a>
</li>
<li class="footIconLi"> <a href="https://www.reddit.com/user/Athloner44" target="_blank">
<img src="img/icons/reddit.svg" alt="reddit" class="footIcons"> </a>
</li>
<li class="footIconLi"> <a href="https://www.youtube.com/channel/UCy_yWEbpB7axwSH3Qlthcnw"
target="_blank">
<img src="img/icons/youtube.svg" alt="youtube" class="footIcons"> </a>
</li>
</ul>
<div>
<p class="footText">www.PCNEWS.com y el logotipo son marcas registradas. Derechos Reservados ©
ATHL.COM
S de R.L. de C.V. </p>
</div>
</div>
</footer>
</div>
</body>
</html>
I can help! The problem is the height of your body, which can be solved with the following CSS:
body {
min-height: 100%;
}
Then to give the appearance of no empty space, you can position your footer element all the way at the base of the page, like so:
footer {
position: fixed;
bottom: 0;
width: 100%;
}
Related
I'm having trouble getting my grid to display the way i want and i can't see what i've done wrong. Please take a look at this for me.
It was displaying correctly when i was using background-image url() in css but i needed to use image tags because they need to be hyperlinks and i'm pretty sure this was the only way. When i use img tags the pictures were now displaying in their full size and i couldnt get them back to the right scale. and when i wrapped them in anchor tags they stopped displaying in the correct order.
Here's my code
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
p {
margin: 0;
font-size: 1.8rem;
}
body {
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.5;
}
header {
display: flex;
width: 100%;
justify-content: space-between;
background-color: darkgrey;
padding-right: 5%;
}
header h1 {
background-color: blue;
padding: 1px;
min-width: 20%;
color: yellow;
}
nav {
display: flex;
text-decoration: underline darkblue;
width: 60%;
align-items: center;
justify-content: space-around;
}
nav li {
display: inline;
justify-content: flex-end;
padding-left: 8%;
color: yellow;
}
.heroBanner {
background-image: url("../images/02-hero-bg.jpg");
background-size: cover;
height: 200px;
position: relative;
}
#page-section {
width: 100%;
}
#title {
position: absolute;
bottom: 10%;
right: 10%;
background-color: blue;
color: yellow;
}
/* Put my about stuff here */
#about {
display: flex;
padding: 3%;
}
#about p {
align-items: stretch;
color: yellow;
}
#about-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#about-2 {
width: 80%;
padding-left: 3%;
background-image: url(/my-work/images/Portfolio-avatar.png);
background-size:contain;
background-position: center;
}
#work {
height: 1200px;
display: flex;
padding: 3%;
}
#work-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#work-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'one one'
'two three'
'four five'
}
.pics {
position: relative;
}
.pic-title {
position: absolute;
bottom: 15%;
background-color: blue;
color: yellow;
}
#big {
grid-area: one;
object-fit: contain;
margin: 10px;
border: solid 4px darkblue;
}
#pic1 {
grid-area: two;
object-fit: contain;
width: 25%;
margin: 10px;
border: solid 4px darkblue;
}
#pic2 {
grid-area: three;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic3 {
grid-area: four;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic4 {
grid-area: five;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#picture1, #picture2, #picture3, #picture4, #picture5 {
object-fit: cover;
}
#contact {
display: flex;
width: 100%;
display: flex;
padding: 3%;
}
#work-2 {
width: 75%;
}
#contact-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#contact-2 {
width: 80%;
}
#contact-2 ul {
display: flex;
list-style: none;
display: flex;
text-decoration: underline darkblue;
width: 80%;
align-items: center;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en-gb">
<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">
<title>Lorenzo Francis-Walker // Junior Web Developer</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- main logo / nav -->
<header>
<h1>Lorenzo Francis-Walker</h1>
<nav>
<li>About me</li>
<li>Work</li>
<li>Contact Me</li>
</nav>
</header>
<!-- hero banner -->
<section class="heroBanner">
<h2 id="title">Room4Renzo</h2>
</section>
<main class="page-wrapper">
<!-- about me -->
<section class="page-section" id="about">
<div id="about-1">
<h2>About Me</h2>
</div>
<div id="about-2">
<p>My love for computers comes from a fairly young age and is greater than my current experience. I was given an
old PC by a friend that soon stopped working. He had another one that worked but soon after giving that to me
, it too stopped working. I found a pdf of how to build computers for dummies on my phone and used what i had
learned to combine the two PC's parts into one case, and it worked. I had always been interested in technology
but this is where my love for understanding computers and how they work. Once you learn about different types
of hardware theres not many places to go. ie networking, coding, etc. fortunately for me, the depth of the
limited options are vast, so there is alot left for me to learn and I never want my journey to end.</p>
</div>
</section>
<!-- portfolio container -->
<section class="page-section" id="work">
<div id="work-1">
<h2>Work</h2>
</div>
<div id="work-2">
<a href="" target="_blank">
<div id="big" class="pics">
<img src="./images/02-run-buddy.jpg" id="picture1" alt="" class="grid-column-span-2">
<div class="pic-title">
<h2>Run Buddy</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic1" class="pics">
<img src="./images/02-portfolio-1.jpg" id="picture2" alt="">
<div class="pic-title">
<h2>LED Wall</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic2" class="pics">
<img src="./images/02-portfolio-2.jpg" id="picture3" alt="">
<div class="pic-title">
<h2>Calculator</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic3" class="pics">
<img src="./images/02-portfolio-3.jpg" id="picture4" alt="">
<div class="pic-title">
<h2>Pastel Puzzels</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic4" class="pics">
<img src="./images/02-portfolio-4.jpg" id="picture5" alt="">
<div class="pic-title">
<h2>Surf Report</h2>
<p>Languages Used</p>
</div>
</div>
</a>
</div>
</section>
<!-- contact -->
<section class="page-section contact" id="contact">
<div id="contact-1">
<h2>Contact Me</h2>
</div>
<div id="contact-2">
<ul>
<li>Email: Lorenzo.afw#gmail.com</li>
<li>Github: Room4Renzo </li>
</ul>
</div>
</section>
</main>
</body>
</html>
i tried manually resizing, using object-fit as i saw in another answer, i tried different amount of columns for the grid, same for the rows. i can;t find where my mistake is. appreciate any help. Thanks
.page-wrapper {
grid-template-columns: 100%;
}
.middle-wrapper {
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding: 25px;
border: 3px solid #ffffff;
}
.main-page-content {
margin-bottom: 0.5rem;
padding: 0;
}
.title1 {
font-family: tahoma;
font-size: 20px;
text-align: center;
margin-bottom: 2rem;
}
p {
margin: 1rem 0 2rem;
}
.callout {
background: rgba(238, 238, 238, 0.395);
border-radius: var(--elem-radius);
box-shadow: rgb(95, 95, 95);
display: flex;
flex-direction: column;
gap: 1rem;
margin: 2rem 0;
padding: 2rem;
text-align: left;
}
.boxed {
border: 1px solid rgb(78, 78, 78) ;
padding: 1rem;
width: 37em;
margin-left: auto;
margin-right: auto;
}
.textinrect {
word-spacing: 100px;
}
.sidebar {
grid-area: sidebar;
padding-top: 3rem;
max-width: 200px;
}
.list {
list-style: none;
padding-left: 0.5em;
}
.sidebar-heading {
color: Black;
font-size: 18px;
font-family: tahoma;
letter-spacing: 1.5px;
margin-left: 7px;
}
.subject-header {
color: rgba(0, 0, 0, 0.749);
font-size: 14px;
font-family: tahoma;
letter-spacing: 1px;
}
.subject {
margin-bottom: 1em;
}
.toggle {
margin-bottom: 15px;
}
.sub-topic {
color: black;
}
.toggle1 {
padding-top: 1em;
}
.toggle0 {
list-style: none;
padding-left: 1.5em ;
}
a {
text-decoration: none;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="fortest.css">
</head>
<body>
<div class="page-wrapper">
<div class="main-wrapper">
<div class="middle-wrapper">
<article class="main-page-content">
<h2 class="title1">How to create an HTML website</h2>
<div class="section1">
<p>1. Nav Bar</p>
<div class="callout">
<div class="boxed">
<div class="textinrect">
Yourwebsitename home about page3
</div>
</div>
</div>
</div>
</article>
</div>
<aside class="sidebar">
<nav class="sidebar-inner">
<p class="sidebar-heading">Subjects</p>
<div>
<ol class="list">
<li class="subject">
<a href="#">
<h5 class="subject-header">Subject1</h5>
</a>
</li>
<li class="toggle">
<details>
<summary>
All the school sunjects
</summary>
<ol class="toggle0">
<li class="toggle1">
<a class="sub-topic" href="#">The molecular mass and power</a>
</li>
<li class="toggle1">
<a class="sub-topic" href="#">the molecular mass and power</a>
</li>
</ol>
</details>
</li>
<li class="toggle">
<details>
<summary>
Not all school subjects
</summary>
</details>
</li>
</ol>
</div>
</nav>
</aside>
</div>
</body>
</html>
My goal is that the sidebar stays on the side at the very beginning of the document on the left side of the main text. For some reason it says down below the main section. I know this is a matter of position but I can not find the correct position. I would deeply appreciate any answer that you may give.
Try this,
#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
/*position: fixed;*/ //remove it
}
#content {
float: left; // change right to left
width: 564px;
padding-top: 30px;
}
I defined an image width as 100%, though, when I change to a 320 px display it doesn't use all the width.
I tried using vw, putting the exact width size of the display. But it never works, it only works if I put a larger width.
My code is in this Github repository, with html and css files: https://github.com/JoeyBeckWheeler/Projeto-Everest
.banner{
width: 100%;
height: 60vh;
background-image: url('../imagens/bg-2.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
}
Snippet:
#import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
font-family: 'Raleway', sans-serif;
}
body {
background-color: #878A8C;
color: #fff;
}
.banner {
width: 100%;
height: 60vh;
background-image: url('https://github.com/JoeyBeckWheeler/Projeto-Everest/tree/main/Assets/imagens/bg-2.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
}
.slogan {
text-align: center;
margin-top: 15px;
background-color: rgba(0, 0, 0, 0.3);
padding: 15px;
border-bottom: white 2px solid;
}
/* Talvez eu tenha que arrumar no responsivo */
.menu {
display: flex;
justify-content: flex-end;
margin-right: 30px;
}
.menu-list,
a {
display: flex;
list-style-type: none;
text-decoration: none;
color: white;
margin: 15px 15px 0 0;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
/* */
.title {
margin: 15vh;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.infos {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
margin-bottom: 50px;
}
#Plans-section {
margin: 50px 50px 50px 50px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
padding: 1vh;
border: 5px solid rgba(0, 0, 0, 0.7);
}
.card-item {
margin: 15px 15px 15px 15px;
}
.subtitle {
background-color: #3B5159;
padding: 0.5em;
color: white;
text-align: center;
}
#About-Us-section {
margin: 50px 50px 50px 50px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
background-color: #878A8C;
padding: 1vh;
border: 7px solid rgba(0, 0, 0, 0.7);
line-height: 2;
}
.about-title {
text-align: center;
}
footer {
background-color: #283940;
height: 80px;
text-align: center;
line-height: 80px;
}
#media screen and (min-width:320px) and (max-width:375px) {
.menu {
display: flex;
justify-content: flex-end;
margin-right: 35px;
}
#Plans-section {
width: 80vw;
}
.images {
height: 100px;
width: 200px;
}
}
<!DOCTYPE html>
<html lang="pt-br">
<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="./Assets/CSS/style.css">
<title>Projeto</title>
</head>
<body>
<header class="banner">
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">Início</li>
<li class="menu-item">Planos</li>
<li class="menu-item">Sobre nós</li>
</ul>
</nav>
<div class="title">
<div class="titulo">
<h1> Corretora Everest </h1>
<p class="slogan"><b><em>Te ajudamos a chegar alto </em></b></p>
</div>
</div>
</header>
<div class="infos">
<main>
<section id="Plans-section">
<div class="card-item">
<img class="images" src="./Assets/imagens/card_01.png" alt="">
<p class="subtitle">Plano Star</p>
</div>
<div class="card-item">
<img class="images" src="./Assets/imagens/card_03.jpg" alt="">
<p class="subtitle">Plano Diamond</p>
</div>
<div class="card-item">
<img class="images" src="./Assets/imagens/card_05.jpg" alt="">
<p class="subtitle"> Plano Magic</p>
</div>
</section>
<section id="About-Us-section">
<article>
<header class="about-title">
<h2>Sobre nós</h2>
</header>
<ul class="info-text">
<li style="margin-left: 15px; ;">
<p>Investimos o seu dinheiro como se fosse <b>nosso</b></p>
</li>
<li style="margin-left:15px;">
<p>Com planos de investimentos personalizados te ajudamos a <b>chegar alto!</b></p>
</li>
<li style="margin-left: 15px; ;">
<p>Nosso time conta apenas com especialistas da área</p>
</li>
</ul>
</article>
</section>
</main>
</div>
<footer>
<p>Copyright © 2022</p>
</footer>
</body>
</html>
You are now banned from margin. Find other ways of spacing elements. Consider using padding and gap instead.
Use outline: 1px solid red on everything to find overflowing elements.
Also, avoid setting harsh width/height, especially with viewport units, try using min-height, max-width, etc.
Sign up for Kevin Powell's Conquering Responsive Layouts course.
I hope this example sets you on the right path, stop using CSS to shoot yourself in the foot.
#import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
font-family: 'Raleway', sans-serif;
outline: 1px solid red;
}
body {
background-color: #878A8C;
color: #fff;
}
.banner {
width: 100%;
min-height: 60vh;
background-image: url('https://github.com/JoeyBeckWheeler/Projeto-Everest/tree/main/Assets/imagens/bg-2.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
}
.slogan {
text-align: center;
margin-top: 15px;
background-color: rgba(0, 0, 0, 0.3);
padding: 15px;
border-bottom: white 2px solid;
}
/* Talvez eu tenha que arrumar no responsivo */
.menu {
display: flex;
justify-content: flex-end;
}
.menu-list,
a {
display: flex;
list-style-type: none;
text-decoration: none;
color: white;
padding: 15px 15px 0 0;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
/* */
.title {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.infos {
display: flex;
justify-content: center;
align-items: center;
}
#Plans-section {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
padding: 1vh;
border: 5px solid rgba(0, 0, 0, 0.7);
}
.card-item {
margin: 15px 15px 15px 15px;
}
.subtitle {
background-color: #3B5159;
padding: 0.5em;
color: white;
text-align: center;
}
#About-Us-section {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
background-color: #878A8C;
padding: 1vh;
border: 7px solid rgba(0, 0, 0, 0.7);
line-height: 2;
}
.about-title {
text-align: center;
}
footer {
background-color: #283940;
height: 80px;
text-align: center;
line-height: 80px;
}
#media screen and (min-width:320px) and (max-width:375px) {
.menu {
display: flex;
justify-content: flex-end;
margin-right: 35px;
}
#Plans-section {
width: 80vw;
}
.images {
height: 100px;
width: 200px;
}
}
<!DOCTYPE html>
<html lang="pt-br">
<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="./Assets/CSS/style.css">
<title>Projeto</title>
</head>
<body>
<header class="banner">
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">Início</li>
<li class="menu-item">Planos</li>
<li class="menu-item">Sobre nós</li>
</ul>
</nav>
<div class="title">
<div class="titulo">
<h1> Corretora Everest </h1>
<p class="slogan"><b><em>Te ajudamos a chegar alto </em></b></p>
</div>
</div>
</header>
<div class="infos">
<main>
<section id="Plans-section">
<div class="card-item">
<img class="images" src="./Assets/imagens/card_01.png" alt="">
<p class="subtitle">Plano Star</p>
</div>
<div class="card-item">
<img class="images" src="./Assets/imagens/card_03.jpg" alt="">
<p class="subtitle">Plano Diamond</p>
</div>
<div class="card-item">
<img class="images" src="./Assets/imagens/card_05.jpg" alt="">
<p class="subtitle"> Plano Magic</p>
</div>
</section>
<section id="About-Us-section">
<article>
<header class="about-title">
<h2>Sobre nós</h2>
</header>
<ul class="info-text">
<li>
<p>Investimos o seu dinheiro como se fosse <b>nosso</b></p>
</li>
<li>
<p>Com planos de investimentos personalizados te ajudamos a <b>chegar alto!</b></p>
</li>
<li>
<p>Nosso time conta apenas com especialistas da área</p>
</li>
</ul>
</article>
</section>
</main>
</div>
<footer>
<p>Copyright © 2022</p>
</footer>
</body>
</html>
:root {
--primary-color: #10b929ff;
--background-light-grey: #696969;
--background-dark-grey: #2f2f2f;
}
body {
background: var(--background-light-grey);
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.navbar {
background: var(--background-dark-grey);
padding: 1em;
font-family: 'Josefin Sans', sans-serif;
//position: fixed;
}
footer {
background: #2f2f2f;
}
nav {
display: none;
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top:0;
background-color: var(--background-dark-grey);
height: 100%;
padding: 2em;
ul.primary-nav {
margin-top: 5em;
}
li {
a{
color: white;
text-decoration: none;
display: block;
padding: .5em;
text-align: right;
font-size: 30px;
&:hover{
font-weight: bold;
}
}
}
}
.mobile-menu-exit{
float: right;
margin: .5em;
cursor: pointer;
}
nav.menu-btn {
display: block;
}
.website-logo {
display: flex;
place-content: space-between;
}
.mobile-menu{
cursor: pointer;
width: 2em;
//max-width: 10%;
}
#media only screen and (max-width: 400px){
nav{
width: 44%;
padding-right: 30px;
}
}
#media only screen and (max-width: 768px){
.mobile-menu{
cursor: pointer;
width: 2em;
max-width: 10%;
}
.website-logo {
display: flex;
place-content: space-between;
img{
width: 200px;
}
}
.mobile-menu-exit{
float: right;
margin: .5em;
cursor: pointer;
max-width: 10%;
}
}
a {
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section {
padding: 10em 0em 5em 0em;
}
.hero {
text-align: center;
//padding-bottom: 160px;
}
.hero-image{
background-image: url("https://am3pap006files.storage.live.com/y4pNuJohtpUdzBTZoc4fAQHlLNdeLvEQERim4Rs1KspeWQaKszREazNg4Ljnl7YTmkR6Sgsa4MUN4kB4aAf-vbbEuFnP9EPp2tAExe-dH_9o45qLndBetYu64mzC8r1Ynb8pOgWBAoqfzUL6lgg-Oue0OCqK6PPNliLbVrv6A3Yhuqalg__GtCNUkfzHJbwEuEtMWtpMjsvc_zHKMDeI1jNt5lG7eLxLiR5TluSAml-UuQ/IMG_0560.jpg?psid=1&width=720&height=486");
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
background-size: cover;
text-align: center;
padding-bottom: 160px;
}
.centre-col {
color: white;
h1 {
text-transform: uppercase;
font-weight: 600;
font-size: 3em;
resize: horizontal;
margin-bottom: 10px;
}
h3 {
font-weight: 200;
font-size: 1.2em;
margin-bottom: 20px;
}
.primary-cta {
background: var(--primary-color);
padding: .6em 1.3em;
text-decoration: none;
border-radius: 5em;
display: inline-block;
font-size: 1.5em;
}
}
.instagram-feed {
padding-top: 00px;
padding-bottom: 10px;
z-index: 0;
}
.eapps-link img {
display:none !important;
}
.club-vision-values {
background: var(--background-light-grey);
z-index: 1;
top: 40%;
padding-top: 0px;
text-align: center;
color: white;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 10px;
padding-bottom: 20px;
margin-top: 10px;
position: relative;
}
.the-coaches{
padding: 20px;
ul{
max-width: 500px;
//padding-top: 10px;
display: gird;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
}
.coach-list {
column-count: 2;
max-width: 500px;
margin: auto;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
max-width: 800px;
margin: auto;
text-align: center;
background: var(--primary-color);
color: white;
margin-bottom: 40px;
h1 {
margin: 4px;
margin-top: 10px;
}
p {
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 8px;
//padding-top: 3px;
}
}
#media only screen and (min-width: 768px){
.coach-list {
column-count: 2;
max-width: 800px;
margin: auto;
}
}
#media only screen and (min-width: 1080px){
.coach-list {
display: inline;
max-width: 2600px;
display: flex;
justify-content: center;
}
.the-coaches{
padding: 20px;
padding-bottom: 40px;
margin: auto;
ul {
max-width: 2200px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 40px;
padding-right: 40px;
}
}
.card {
margin: 10px;
}
}
.footer{
margin:0;
padding: 0;
box-sizing: border-box;
}
.footer-container{
max-width: 1670px;
margin:auto;
}
.footer-col {
color: white;
width: 20%;
padding: 0 35px;
}
.footer-col h4{
font-size: 18px;
margin-bottom: 20px;
position: relative;
}
.about-us {
line-height: 25px;
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: var(--primary-color);
height: 2px;
box-sizing: border-box;
width: 50px;
}
.row
{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
padding: 60px;
}
.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
color: #24262b;
background-color: #ffffff;
}
/*responsive*/
#media(max-width: 767px){
.footer-col{
width: 50%;
margin-bottom: 30px;
}
}
#media(max-width: 574px){
.footer-col{
width: 100%;
}
}
<!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">
<title>New Era Boxing</title>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="navbar">
<div class="website-logo">
<img id="logo" class="logo" src="Images/logo.svg" alt="The club logo">
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open Navigation">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Exit Navigation">
<ul class="primary-nav">
<li>Classes</li>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<section class="hero-image">
<div class="container">
<!-- <img src="images/raul.JPG" alt="Raul"> -->
<div class="centre-col">
<h1>First-class boxing training<br>
for youths and adults alike</h1>
<h3>We provide a supportive and inclusive training environment</h3>
<div class="hero-cta">
View our timetable
</div>
</div>
</div>
</div>
</section>
<section class="instagram-feed">
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-a2b6cbed-0090-4fd3-9a99-b6ce405f0cbf"></div>
</section>
<section class="club-vision-values">
<div>
<h2>Our Club</h2>
<p>New-Era Boxing Club was formed in 2011 by Mark Bebbington and focuses on teaching core values as well as providing first class training for youths and adults alike</p>
</div>
<div>
<h2>Our Vision</h2>
<p>Our vision is to create opportunities for members through boxing, education and personal development in doing so we will provide a supportive and inclusive training environment.</p>
</div>
<div>
<h2>Our Values</h2>
<p>New Era Boxing emphasises the core value of Equality, Integrity, Compassion, Resilience and Humility at the heart of the clubs activities.</p>
</div>
</section>
<section class="the-coaches">
<div class="coach-list">
<ul class="left">
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-container">
<div class="row">
<div class="footer-col">
<h4>Phone Us</h4>
<ul>
<li>07830 085132</li>
</ul>
</div>
<div class="footer-col">
<h4>Email Us</h4>
<ul>
<li class="email">neweraboxing#hotmail.co.uk</li>
</ul>
</div>
<div class="footer-col">
<h4>About Us</h4>
<ul>
<li class="about-us"><a href="#">
FAQs
</a></li>
<li class="about-us"><a href="#">
Club Partners
</a></li>
<li class="about-us"><a href="#">
Timetable
</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
<i class="fab fa-facebook-f"></i></i>
<i class="fab fa-instagram"></i></i>
<i class="fab fa-twitter"></i></i>
<i class="fab fa-whatsapp"></i></i>
</div>
</div>
</div>
</div>
</footer>
<script>
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn');
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn');
})
</script>
</body>
</html>
I am viewing my website in the Developer tools but whenever I try to view it in a mobile resolution below 400px wide it seems to add this unwanted padding to the right side. Sometimes this disappears, but other times it just stays there. Is this a common issue and are there any suggestions on how to fix this please?
enter image description here
I created a footer that I would like to reproduce on my site, after many tests here is the best result obtained:
The image of the footer I would like to make : https://i.imgur.com/QpmoreU.png
How can I match the image on my site please? I have tried so many things that I don't even understand what I'm doing so if you have any explanations and help I'd be delighted...
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.topbar {
height: 80px;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
font-size: 21px;
}
.topbar nav a:hover, .topbar nav a.active {
color: #94C8D0;
}
.header-logo {
padding: 0px 20px;
cursor: pointer;
width: 25vh;
}
.login {
display: flex;
justify-content: end;
flex-direction: row-reverse;
}
.login_btn {
margin: auto 25px auto;
background-color: #EEEEEE;
color: #3b3b3b;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.header_title {
text-align: center;
color: #ffffff;
font-family: 'Inter', sans-serif;
font-weight: 1000;
font-size: 72px;
word-spacing: 0px;
margin: 0px;
padding: 0px;
letter-spacing: normal;
line-height: 72px;
}
.header_second_title {
text-align: center;
color: #9F9F9F;
font-family: 'Inter';
font-size: 30px;
margin: 16px 0px 0px;
padding: 0px;
line-height: 36px;
font-weight: 500;
}
.container {
display: flex;
justify-content: center;
flex-direction: row;
}
.invite_btn {
font-size: 24px;
font-family: 'Inter';
background-color: #1A9BB6;
color: #ffffff;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
.support_btn {
font-size: 24px;
font-family: 'Inter';
background-color: #EEEEEE;
color: #282828;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr .6fr .6fr 1fr;
grid-template-areas: "logo product resources business"
"social . . design";
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
justify-content: end;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 1em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
}
<!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">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Premium
Support
<div class="login">
Login<i class="fas fa-sign-in-alt"></i>
</div>
</div>
</nav>
</header>
<div class="circuit">
<h1 class="header_title">The Perfect <br>Discord Music Bot.</h1>
<h2 class="header_second_title">Poseidon is the only Discord bot you'll ever need!</h2>
<div class='container'>
Invite
Support
</div>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord
ID</span></div> <!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
I just add a new class as .links and fix your Products Resources and Business you can check it, and change a little bit about right bottom edge text, give footer relative and text to absoulte right:0 bottom : 0 and make text smaller. Hope helps.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: flex;
height: 20%;
background-color: black;
color: white;
padding-top:3em;
position:relative;
justify-content:space-between;
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
justify-content: end;
}
.links{
display:flex;
flex-direction:column;
justify-content:space-between;
height:50%;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
padding-bottom:2rem;
width:40%;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.right-side{
width:60%;
display:flex;
}
.right-side div{
margin-right:2em;
}
.right-side div b{
display:inline-block;
padding-bottom:1em;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 0.7em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
position:absolute;
bottom:0;
left:1em;
cursor: pointer;
}
.design {
grid-area: design;
position:absolute;
right:0;
bottom:0;
font-size: 1em;
text-align: right;
}
<!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">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<div class="right-side">
<div>
<b>Product</b>
<ul class="links">
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
</div>
<div>
<b>Resources</b>
<ul class="links">
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
</div>
<div>
<b>Business</b>
<ul class="links">
<li>Contact</li>
</ul>
</div>
</div>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord ID</span></div> <!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
How about trying this one? I have kept the codes relevant to the footer part only.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr 1fr 1fr 1.3fr;
grid-template-areas: "logo product resources business" "social . . design";
align-items: flex-start;
}
#footer ul {
margin-top: .5rem;
}
#footer ul li {
list-style: none;
padding-top: 5%;
font-size: 1rem;
line-height: 1px;
margin-top: 10px;
}
.flex {
display: flex;
justify-content: end;
}
#footer ul li a {
color: rgb(22, 145, 176);
text-decoration: none;
font-size: .7rem;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: .65em;
color: rgb(97, 97, 97);
}
.product {
grid-area: product;
font-size: 20px;
}
.resources {
grid-area: resources;
font-size: 20px;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
align-self: end;
}
<!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">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord
ID</span></div>
<!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
Hope this solves your problem!