I need help designing my landing page please!

I wrote this code while watching a youtube video - Responsive Website Landing Page Design | Title (Creative Nature) - Only Using CSS & HTML - YouTube.

For some reason there are no breaks between the elements(headline, paragraph and the navigation bar) and the paragraph is written as a narrow column and is unreadable,

*That’s the HTML page:

<!DOCTYPE html>

<html land="en" dir="ltr">

    <head>

        <script src="https://kit.fontawesome.com/35552f1379.js" crossorigin="anonymous"></script>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>My Landing Page</title>

        <link rel="stylesheet" href="style.css">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">

    </head>

<body dir="ltr" style=>

    <section>

        <input type="checkbox" id="check">

        <header>

            <h2 style="color: white;"><span>Welcome, I'm Boaz Kaplan</span></h2><br>

            <p style="color: white;"><span>Thanks for visiting my website!</span></p><br>

            <div class="navigation">

                <a href="#">Contact</a>

                <a href="#">My Linkedin Page</a>

            </div>

            <label for="check">

                <i class="fas fa-bars menu-btn"></i>

                <i class="fas fa-times close-btn"></i>

            </label>

        </header>

        <div class="content">

            <div class="info">

                <p style="color: white;">A student for QA studies at INT college, experienced in the fields of customer service and sound engineering. I have good interpersonal relations, always tends to look at the "big picture", and sustains high work ethics. Looking for a first chance to prove myself in the field of quality assurance, highly motivated to learn and evolve as much as I can.</p>

                <img src="תמונת פרופיל.jpg" width="106" height="69">

            </div>

        </div>

        <div class="media-icons">

            <a href="#"><i class="fab fa-linkedin"></i></a>

        </div>

    </section>

</body>

</html>

*And that’s the CSS page:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Poppins", sans-serif;

}

section{

    position: relative;

    width: 100%;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    background: url(bg.jpg)no-repeat;

    background-size: cover;

    background-position: center;

}

header{

    position: relative;

    top: 0;

    width: 100%;

    padding: 30px 100px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

header .navigation{

color: #000;

background: #fff;

text-decoration: none;

font-weight: 500;

letter-spacing: 1px;

padding: 2px 15px;

border-radius: 20px;

transition: 0.3a;

transition-property: background;

}

header .navigation a:not(:last-child){

    margin-right: 30px;

}

header .navigation a:hover{

    background: #fff;

}

.content{

    max-width: 65px;

    margin: 60px 100px;

}

.content .info h2{

    color: #fff;

    font-size: 55px;

    text-transform: uppercase;

    font-weight: 800;

    letter-spacing: 2px;

    line-height: 60px;

    margin-bottom: 30px;

}

.content .info p{

    font-size: 16px;

    font-weight: 500;

    margin-bottom: 40px;

}

.media-icons{

    display: flex;

    justify-content: center;

    align-items: center;

    margin: auto;

}

.media-icons a{

    position: relative;

    color: #fff;

    font-size: 25px;

    transition: 0.3s;

    transition-property: transform;

}

.media-icons a:not(:last-child){

    margin-right: 60px;

}

.media-icons a:hover{

    transform: scale(1.5);

}

*I want to make a contact form and a hyper link to my linkedinpage with the icon that’s in there. can someone give me a few tips? Thank you!

Help someone?? It’s not supposed to be complicated

If you give the link to your code / codepen , you might get more help. Right now no one can see how it looks to fully understand what you’re talking/asking about.

That’s why i posted the code itself. How can i do what youv’e suggested?

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

I am assuming you used codepen for the other projects right?
If you place all of your code into a new codepen pen and share the link then we can see the issue much better and be able to help you.

  1. You have set the max-width on .content to 65px.

  2. You have set the color to white using inline styles on the paragraphs inside, which is the same as the default document background color (you can’t see white text on a white background).

1 Like

@lasjorg Thank you! that really helped:)

Can you adress the other points?

Not sure which other points you are referring to exactly.

If you are asking why the h2 and p elements are on the same line as the nav, then that is how it is coded. They are inside the same flexbox container. The elements are in the order you have placed them. Also, your content and the video doesn’t seem to match.


My suggestion would be to find some actual tutorials and not whatever that video is supposed to be. Coding a site with music playing and giving no information about what you are doing or why is not a tutorial. Nor does typing out what the person has written help you learn much. Find tutorials where the techniques used are explained and the site that is coded is just an example of the application of the techniques and not some template you just want to copy-paste.