Page layout

yusufabaguben0561720 · February 19, 2023, 8:53pm

If you run this code you will get a page that has no margins or padding and continent are everywhere. Whatever I do it does not affect the layout of the page.

what I want is a header with different colour to the main body which managed to achieve.

The Right circle will take you-to the index.html, but positioning are off so are the the three columns.

the codes are below, could you pleae assist me in understanding this part please?

Thank you

Welcome

I aspire to become
Frontend engineer

Coding like poetry should be short and concise.

Clean code always looks like it was written by someone who cares.

    <section class="row">
        <blockquote class="column">
            <p class="mb-0">Of course, bad code can be cleaned up</p>
        </blockquote>
    </section>


    <footer>
        <p>Emil: [email protected]</p>
    </footer>
</body>

CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body html{
font-family: sans-serif;
background-color: rgba(182, 198, 205, 0.5);
max-width: 1000px;
background-size: cover;

}

#banner{
background-color: rgb(46, 43, 64, 0.8);
height: 100px;
width: 100%;

}

.fa-3x{
color: rgb(244, 110, 86);
padding-left: 50%;

}
.fa {
color: tomato;
padding-left: 15px;
padding-top: 15px;
}

h1{
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
padding: 20px 30px;
margin: 100px;
border: 3px tomato dashed;
width: 600px;
margin: 30px auto;
border-radius: 30px;
font-size: 50px;
color: tomato;
box-shadow: 12px;
animation-duration: 8s;
animation-name: slidein;
animation-iteration-count: 1;
background-color: olive;
}

@keyframes slidein {
0%{
margin-left: 0%;
}

50% {
    margin-left: 120px;
}

100% {
    margin-left: 0%;
}

}

.column{
float: left;
flex: 33.33%;
height: 200px;
padding: 10px;
margin: 30px;
background-color: rgb(46, 43, 64, 0.8);
text-align: center;
font-size: medium;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

footer{
padding-top: 490px;
text-align: center;
}

.mb-0{
color: aliceblue;
}

superpugn0 · February 20, 2023, 6:25am

Hi! Can you please send the entire HTML code? Thank you!

yusufabaguben0561720 · February 20, 2023, 1:34pm

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Welcome</title>
        <link rel="stylesheet" href=".//style.css">
        <link rel="stylesheet" href="font-6/css/all.css">
    </head>
    <body> 
        <header id="banner">
            <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
            <h1>I aspire to become <br> Frontend engineer</h1>
        </header>
           <a href="./Index.html"><i class="fa-regular fa-circle-right fa-3x"></i></a>
        </li>
        <section class="row">
                <blockquote class="column">
                    <p class="mb-0">Coding like poetry should be short and concise.</p>
                </blockquote>
        </section>
        <section class="row">
            <blockquote class="column">
                <p class="mb-0">Clean code always looks like it was written by someone who cares.</p>
            </blockquote>
        </section>

        <section class="row">
            <blockquote class="column">
                <p class="mb-0">Of course, bad code can be cleaned up</p>
            </blockquote>
        </section>
   

        <footer>
            <p>Emil: [email protected]</p>
        </footer>
    </body>
</html>

superpugn0 · February 20, 2023, 3:46pm

First problem: the margin.

Please write:

body {
margin: 0px;
}

Works.

Next question?

yusufabaguben0561720 · February 20, 2023, 6:16pm

Thank you, Next question - I have icon circle which i want to place in the middle of the page equally the three column to be below icon

superpugn0 · February 20, 2023, 8:21pm

Like so?

<section id="circle-section">
  <div id="circle"></div>
</section>

#circle-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#circle {
  margin: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
}

yusufabaguben0561720 · February 20, 2023, 11:04pm

Thank you so much I am learning more in part of the code that do my head in.

now, how do i get the column and the header ( olive color bground) and the three column to sit top and bottom of the circle icon.

i tried to play with the margins but it only sits in the same position as it is now.

superpugn0 · February 21, 2023, 6:29am

Hi! No problem, I’m happy to help. So, for the color, here the code:

#banner, .column {
  background-color: #808000;
}

For the position question, unfortunately, I don’t understand what do you mean. Can you make a draw, maybe with paint, to explain me?

Thanks

yusufabaguben0561720 · February 21, 2023, 10:00pm

thank you, here is the sketch of what I want to webpage looking like

on the background image how do i make the image starts from below the header and ends before the footer? is this done through margin as well.

superpugn0 · February 22, 2023, 6:38am

Hi! If you want to set a background image, you’ll need to create a container first. You can use a <main> element for this purpose and put all your content in, except for the header and the footer. Then, you can add the image using CSS. Check out the code below for an example.

<!DOCTYPE html>
<html>
<head>
  <title>Basic Web Page</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" >
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <header id="banner">
    <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
    <h1>I aspire to become <br> Frontend engineer</h1>
  </header>
  <main>
    <a href="./Index.html"><i class="fa-regular fa-circle-right fa-3x"></i></a>
    <section class="row">
      <blockquote class="column">
        <p class="mb-0">Coding like poetry should be short and concise.</p>
      </blockquote>
    </section>
    <section class="row">
      <blockquote class="column">
        <p class="mb-0">Clean code always looks like it was written by someone who cares.</p>
      </blockquote>
    </section>
    <section class="row">
      <blockquote class="column">
        <p class="mb-0">Of course, bad code can be cleaned up</p>
      </blockquote>
    </section>
    <section id="circle-section">
      <div id="circle"></div>
    </section>
  </main>
  <footer>
    <p>Emil: [email protected]</p>
  </footer>
</body>
</html>

main {
  background-image: url("https://i.postimg.cc/6QkN7VM9/background-image.jpg");
  background-size: cover;
  background-position: center;
}

Next question?

yusufabaguben0561720 · February 22, 2023, 1:17pm

You are a legend. i will apply those changes after work. I will definitely will have more questions coming you way :smiley

yusufabaguben0561720 · February 22, 2023, 10:15pm

Next question I have applied the main element and included the Image and everything, when I resize the image everything stays in one place and not get adjusted according to the size of the page.

superpugn0 · February 23, 2023, 6:22am

Hi! Yes you have to apply some responsive techniques like flexbox. For example, put all your blockquotes into one section element and apply flexbox.

<body>
  <header id="banner">
    <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
    <h1>I aspire to become <br> Frontend engineer</h1>
  </header>
  <main>
    <a href="./Index.html"><i class="fa-regular fa-circle-right fa-3x"></i></a>
    
    <section class="row">
      <blockquote class="column">
        <p class="mb-0">Coding like poetry should be short and concise.</p>
      </blockquote>
      <blockquote class="column">
        <p class="mb-0">Clean code always looks like it was written by someone who cares.</p>
      </blockquote>
      <blockquote class="column">
        <p class="mb-0">Of course, bad code can be cleaned up</p>
      </blockquote>
    </section>
    <section id="circle-section">
      <div id="circle"></div>
    </section>
  </main>
  <footer>
    <p>Emil: [email protected]</p>
  </footer>
</body>

.row {
  display:flexbox;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

But, First I suggest you to learn about flexbox so that you can understand these properties

Page layout

I aspire to become Frontend engineer

I aspire to become
Frontend engineer