CODEWITHSUNDEEP
htmlcssfooter
KalypsoTek
KalypsoTek

Reputation: 45

Create a correctly aligned footer

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.sstatic.net/lRNEj.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">
        <a href="#"><img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html"></a>
        <nav>
            <div class="middle">
                <a href="invite.html">Invite</a>
                <a href="commands.html">Commands</a>
                <a href="documentation.html">Documentation</a>
                <a href="premium.html">Premium</a>
                <a href="support.html">Support</a>
                
                <div class="login">
                    <a href="" class="login_btn">Login<i class="fas fa-sign-in-alt"></i></a>
                </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'>
            <a href="#" class="invite_btn">Invite</a>
            <a href="#" class="support_btn">Support</a>
            </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">&#169; Poseidon Bot 2012 - All Rights Reserved.</div>
        </div>
        <ul class="product">
            <li><b>Product</b></li>
            <li><a href="#">Invite</a></li>
            <li><a href="#">Commands</a></li>
            <li><a href="#">Premium</a></li>
        </ul>
        <ul class="resources">
            <li><b>Resources</b></li>
            <li><a href="#">Docs</a></li>
            <li><a href="#">Provacy</a></li>
            <li><a href="#">Refunds</a></li>
        </ul>
        <ul class="business">
            <li><b>Business</b></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="design">
            designed with <span style="color: red;">&#10084;</span> by <span style="color: #00e09d;">My Discord
                ID</span></div> <!-- Javascript clickable text // add js function -->
        <div class="social">
            <a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" /></a>
            <a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" /></a>
            <a href="/"><img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" /></a>
        </div>
    </div>
</body>

</html>

Upvotes: 0

Views: 76

Answers (2)

Saumya Prakash Mishra
Saumya Prakash Mishra

Reputation: 161

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">&#169; Poseidon Bot 2012 - All Rights Reserved.</div>
    </div>
    <ul class="product">
      <li><b>Product</b></li>
      <li><a href="#">Invite</a></li>
      <li><a href="#">Commands</a></li>
      <li><a href="#">Premium</a></li>
    </ul>
    <ul class="resources">
      <li><b>Resources</b></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Provacy</a></li>
      <li><a href="#">Refunds</a></li>
    </ul>
    <ul class="business">
      <li><b>Business</b></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <div class="design">
      designed with <span style="color: red;">&#10084;</span> by <span style="color: #00e09d;">My Discord
                ID</span></div>
    <!-- Javascript clickable text // add js function -->
    <div class="social">
      <a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" /></a>
      <a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" /></a>
      <a href="/"><img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" /></a>
    </div>
  </div>
</body>

</html>

Hope this solves your problem!

Upvotes: 1

Ali Barış Zengin
Ali Barış Zengin

Reputation: 286

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">&#169; Poseidon Bot 2012 - All Rights Reserved.</div>
        </div>
        <div class="right-side">
          <div>
            <b>Product</b>
            <ul class="links">

                <li><a href="#">Invite</a></li>
                <li><a href="#">Commands</a></li>
                <li><a href="#">Premium</a></li>
            </ul>
          </div>
          <div>
            <b>Resources</b>
            <ul class="links">

                <li><a href="#">Docs</a></li>
                <li><a href="#">Provacy</a></li>
                <li><a href="#">Refunds</a></li>
            </ul>
          </div>
          <div>
            <b>Business</b>
            <ul class="links">

                <li><a href="#">Contact</a></li>
            </ul>
          </div>
        </div>
        <div class="design">
            designed with <span style="color: red;">&#10084;</span> by <span style="color: #00e09d;">My Discord ID</span></div> <!-- Javascript clickable text // add js function -->
        <div class="social">
            <a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" /></a>
            <a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" /></a>
            <a href="/"><img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" /></a>
        </div>
    </div>
</body>

</html>

Upvotes: 1

Related Questions