Design a Magazine Layout - Design a Magazine Layout

HTML-CSS
1

Tell us what’s happening:

I can’t figure out why the i keep failing test 5, 13, 14, and 15. I already set up classes for all of them and have set up the grid-template-areas but, it keep failing me .

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Magazine Layout</title>
<link rel="stylesheet" href="styles.css">

</head>

<body>
    <main class="magazine-cover">

        <header class="title">
        <h1>Culinary Curiosity</h1>
        </header>
       
            <section class="feature-article">
                <h2>Section 1</h2>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, ratione nemo. Non necessitatibus 
                    iusto officia suscipit harum reiciendis iure beatae fugit nobis earum, nostrum voluptatem reprehenderit.
                    Quisquam optio nemo dolorem at quo, repellat quis nostrum porro tenetur illum eveniet vero ducimus earum 
                    iusto repellendus veritatis?
                </p>
            </section>

            <section class="small-article1">
                <h3>Section 2</h3>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo a natus deleniti totam, perferendis amet unde. 
                    Atque dignissimos eaque, labore perferendis ut eos tenetur officiis?
                </p>
            </section>

            <section class="small-article2">
                <h3>Section 3</h3>
                <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur ad voluptates, deserunt enim minus 
                    laudantium perspiciatis adipisci itaque libero quia.
                </p>
            </section>
       
        <img 
        class="cover-image" 
        src="https://res.cloudinary.com/jerrick/image/upload/d_642250b563292b35f27461a7.png,f_jpg,fl_progressive,q_auto,w_1024/64e37cd56b9b31001d683ce0.jpg" 
        alt="picture of a table wiht a large asssortment of food"
        >

    </main>
</body>

</html>

/* file: styles.css */
html {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}

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


body {
    background-color: rgb(240, 240, 255);
    font-size: 2rem;
}

.magazine-cover { 
    display: grid;
    grid-template-areas: 
        "title title title" "feature-article feature-article cover-image" "small-article1 small-article2 cover-image";
    grid-template-columns: 1fr 1fr 1fr ;
    grid-template-rows: auto 1fr 1fr;
    gap: 10px;
    text-align: justify;
}



.title {
    font-size: 3rem;
    display: ;
    background: linear-gradient(#12002e, black);
    margin: 0 auto;
    padding: 1rem;
    width: 100%;
    text-align: center;
    color: white;
}

.cover-image {
    max-width: 300px
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

Design a Magazine Layout - Design a Magazine Layout

2

hello and welcome to fcc forum :slight_smile:

  • i dont see you are using any “grid-area”

perhaps look into that and try again, happy coding :slight_smile:

3

Thank you that worked I am face palming…

1 Like