Website folding in

Hi
I need help with the website I was trying to create, the html & style.css is below, when I minimize the page (website) it folds in when I make the images weight:100% the layout of the page changes.

I like the website page as it is but I want the website to look professional.

html code

<!DOCTYPE html>
<html>
<head>
    <title>Learners Corner</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
    <header>
        <nav>
            <h1 class="logo">Learners Corner</h1> 
            <ul>
                <li><a href="#top">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
        <div class="background-image">
            <img src="background.png" width="50%" alt="Background Image">
        </div>
    
        <h1>Simplifying Learning</h1>
        <h2>Making learning fun & accessible to all</h2>
        <p>Innovative solutions for all grade learners through <br>past exam papers and animated study material & games</p>
    </header>

    <main>
        
        <section id="services">
            <h2>Our Services</h2>
            <div class="services-container">
                <div class="service">
                    <img src="exampaper.png" alt="Service 1">
                    <h3>test papers</h3>
                    <p>Past exam papers for all different grades.</p>
                </div>
                <div class="service">
                   <img src="sdhool.png" alt="service2">

                    <h3>animated study guides</h3>
                    <p>Standard CAPS study guides & fun easy to understand animated study guides.</p>
                </div>
                <div class="service">
                    <img src="game.jpg" alt="Service 3">
                    <h3>games</h3>
                    <p>Our games are based on the current CAPS curriculum & test papers.</p>
                </div>
        </section>

        <section id="about">
            <h2>About Us</h2>
            <p>Simplify learning for grades 3 to 12 with practice papers and gaming through Learners Corner, a WhatsApp Chatbot. South African households and pupils widely use WhatsApp.
                Practice papers build confidence and enable students to track their own progress. Study guides are presented in gaming format, enhancing student engagement.
                Games are 2D and correspond to specific chapters in the study guide. Access the games and practice papers through WhatsApp, with additional downloads from the play store or website.
            </p>
            <img src="child.jpg" width="100%" alt="a child">
        </section>

        <section id="contact">
            <h2>Get in Touch</h2>
            <p>Get in touch with us today! Our team is here to answer any questions you may have and help you with your studies. Simply fill out the form below with your name, email, and message, and we'll be in touch shortly. We are excited to hear from you and help you pass all of your subjects!</p>
            <form action="submit_form.php" method="post">
                <input type="text" name="name" placeholder="Your Name">
                <input type="email" name="email" placeholder="Your Email">
                <textarea name="message" placeholder="Your Message"></textarea>
                <button type="submit">Submit</button>
            </form>
        </section>
    </main>

    
</body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth; 
}

body {
    font-family: "poppons", sans-serif;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    background-image: linear-gradient(to right,rgba(58, 5, 94, 0.253), rgb(58, 5,94));
    
}

header {
    background-color: linear-gradient(to right,rgba(43, 5, 68, 0.856), rgb(58, 5,94));;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    height: 100vh;
    text-align: center;
}

.background-image {
    margin-right: 70px;
    background-size: cover;
    padding:  40px;
    border-radius: 30%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 95vh;
    width: calc(100% - 70px);
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1; /* Change z-index to -1 */
}

header h1 {
    font-size: 85px;
    margin-top: 0;
    margin-bottom: 3rem;
    margin-left: 6rem;
    font-weight: 500;
}

header h2{
    font-size: 30px;
    margin-top: 6rem;
    margin: 0.5rem 0;
    margin-left: 16rem;
}

header p {
    font-size: 20px;
    margin: 0.5rem 0;
    margin-left: 16rem;
}

header a.acta {
    background-color: #fff;
    border: 1px solid #333;
    color: #333;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 60px;
    margin-top: 1rem;
    transition: all 0.2s;
}

.logo {
    font-family: 'Carter One', cursive;
    font-size: 50px;
    color: #fff;
    text-shadow: #141614;
    margin: 50px 0 0 40px;
    margin-top: 6rem;
    text-align: left;
    padding: 0;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: fixed;
    padding: 20px 7%;
    width: 100%;
    top: 0;
}

nav .logo {
    margin: 0;
    font-size: 2.5rem;
}

nav ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
    margin: 0;
      
}

nav ul li {
    margin-left: 39px;
    margin-right: 30px;
    
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
}

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 3rem 0;
    color: #fff;
}

section {
    width: 80%;
    text-align: center;
    margin: 2rem;
}

section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

section form {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4rem;
    margin-left: auto;
    margin-right: auto;
}

section input[type="text"],
section input[type="email"],
section textarea {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    border-radius: 5px;
    border: none;
    outline: none;
    background: #f2f2f2;
}

section button[type="submit"] {
    background-color: #00137e;
    color: #fff;
    padding: 1rem;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

section button[type="submit"]:hover {
    background-color: #fff;
    color: #333;
}

footer {
    background-color: #333;
    color: #fff;
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    text-align: center;
}

footer p {
    font-size: 1.5rem;
    margin: 0;
}

footer a {
    color: #fff;
    margin-left: 1rem;
    text-decoration: none;
}

@media only screen and (max-width: 600px) {
    header {
        flex-direction: column;
    }
    nav {
        flex-direction: column; 
    }
    main {
        flex-direction: column;
    }
    section {
        width: 100%;
    }
}

#services {
    padding: 4rem 0;
    text-align: center;
  }

  #services h2 {
    margin-bottom: 5rem;
  }

  .service {
    width: 30%;
    display: inline-block;
    padding: 0 1rem;
    text-align: center;
  }

  .service img {
    width: 100%;
    border-radius: 50%;
    margin-bottom: 1rem;
  }
  
  .service h3 {
    margin-bottom: 1rem;
  }
  
  .service p {
    font-size: 16px;
    color: #fff;
  }
  
  #about{
    line-height: 30px;
    padding: 50px 8%;
  }
  #about img{
    margin-top : 50px;
  }

  #contact{
    padding: 50px 7%;
    line-height: 30px;
  }
  #contact h2{
    margin-bottom: 2rem;
  }

Do you have this available on CodePen or something, so we can look at it?

I don’t have it I wish I did

I’ve edited your code 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 (').

Don’t think I understand the question.

Are you trying to create a hero image section? You seem to be mixing up images in the HTML with background images defined in the CSS.


You can create a Codepen account for free.

Hi partum

I tried CodePen but I can only add images on the pro assets is there any other free platform I can use.
Here is the link https://codepen.io/charm90/pen/vYQRxLp

thanks lasjorg I will check it out.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.