Question 358518 in Html Question posted in
Some basic documentation can be found here.

How can I achieve this with html and css?

I am creating a portfolio website for myself but i am a beginner in web dev. I wanted to create a section in my page at the bottom where the "start a project" box in the picture will be my about section and rest will be used as my footer for links and copyrights.

enter image description here

It looks like this currently. i just need a background that is underneath the about section and starts from middle to the bottom and no margins for the background.

<section id="about">
    <div class="abt-content">
        <h2 class="abt-title">About Me 
            <i class="fa-regular fa-lightbulb"></i>
        </h2>
        <p class="abt-desc"></p>
    
</div>
</section>

#about {
    margin-left: 70px;
    margin-right: 5%;
    margin-bottom: 20%;
    padding: 80px 0px;
}

.abt-content {
    background-color: #232946;
    padding: 50px 0px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 12px;

}

.abt-title {
    color: #fffffe;
    text-align: center;
    margin-bottom: 10px;
    font-family: montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 35px;
    font-weight: 700;
}[enter image description here](https://i.stack.imgur.com/dUTIz.png)
Tags:

2

Answers


  1. 0

    So what I did is remove the margin-left and margin-right and replaced it with padding. I put padding-right and padding-left to be the same, it kind of acts like margin except you can put background without it cutting off like margin. Next I put a little padding-top like the picture and then padding-bottom is 100% which means 100% the height of the page.

    I hope this helps!

    #about {
  /*  margin-left: 70px;
    margin-right: 5%;*/
    margin-bottom: 20%;
    margin-top: 80px;
    padding-right:50px;
    padding-left:50px;
    padding-top: 50px;
    padding-bottom:100%;
    background:blueviolet;
}

.abt-content {
    background-color: #232946;
    padding: 50px 0px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 12px;

}

.abt-title {
    color: #fffffe;
    text-align: center;
    margin-bottom: 10px;
    font-family: Montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 35px;
    font-weight: 700;
}
    <section id="about">
    <div class="abt-content">
        <h2 class="abt-title">About Me 
            <i class="fa-regular fa-lightbulb"></i>
        </h2>
        <p class="abt-desc"></p>
    
</div>
</section>
    Login or Signup to reply.
  2. 0 
    To achieve the desired background that starts from the middle of the page and extends to the bottom with no margins, you can use absolute positioning. Here's how you can modify your CSS:


#about {
    position: relative; /* Add relative positioning */
    margin-left: 70px;
    margin-right: 5%;
    margin-bottom: 20%;
    padding: 80px 0px;
}

.abt-content {
    position: absolute; /* Add absolute positioning */
    background-color: #232946;
    padding: 50px 0px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    left: 50%; /* Position in the middle */
    transform: translateX(-50%); /* Adjust to center horizontally */
    width: 90%; /* Adjust width as per your design */
    bottom: 0; /* Position at the bottom */
    margin-bottom: 0; /* Remove bottom margin */
}

.abt-title {
    color: #fffffe;
    text-align: center;
    margin-bottom: 10px;
    font-family: montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 35px;
    font-weight: 700;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search