Trying to make Flexbox container of cards, flexItem 1 contains the cards but tests still not passing that they are being created

user4BS91 0
Viewed 17

main{
  flex:1;
}

html{
  height: 100%;
}

.flex-bodyContainer{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: inherit;
}

body {
  font-family: "Lato", "Helvetica Neue", "Helvetica", sans-serif;
  margin: 0;
  height: inherit;
}

* { box-sizing: border-box; }

.flex-container { 
  display: flex;
  height:100%;
}
.flex-item{
  padding: 1em;
}

.flex-item#0{
  flex-basis: 240px;
}

.flex-item#1{
  flex: 1;
  flex-grow: fill;
  background-color: #eee;
}

.flex-item#1, .flex-ImageContainer{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-item#1 .flex-ImageContainer .flex-imageItem{
  flex: 0 0 250px;
  background-color: white;
  margin:0.5rem;
  padding: .5rem 1rem;
  border-radius: 10px;
  box-shadow: 0 1 3px;
}

.flex-item#1 .flex-ImageContainer .flex-item .flex-imageItem p{
  padding:0.5rem 1rem;
}

.flex-item#2{
  flex-basis: 180px;
  flex-shrink: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>Cards</title>
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">    
    <!-- normalize.css for cross-browser stuff -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body class="flex-bodyContainer">
    <main>
        <div class="flex-container">
            <section class="flex-item" id="0">
                <h1>Cards</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, ullam! Provident at accusantium, explicabo odio laborum ducimus earum amet repudiandae commodi quod distinctio, iste reprehenderit nihil ullam dolorum illo fugit.</p>
            </section>

            <section class="flex-item" id="1">
                <div class="flex-ImageContainer">
                
                    <div class="flex-imageItem">
                        <!-- Card 1 -->
                        <img src="img/abstract1.jpg" alt="abstract art">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, laborum.</p>
                    </div>

                    <div class="flex-imageItem">
                        <!-- Card 2 -->
                        <img src="img/abstract2.jpg" alt="abstract art">
                        <p>Doloremque commodi unde eaque! Et natus dolorum corrupti ut numquam.</p>
                    </div>

                    <div class="flex-imageItem">
                        <!-- Card 3 -->
                        <img src="img/abstract3.jpg" alt="abstract art">
                        <p>Odio praesentium cum nemo nesciunt architecto, quam voluptate porro inventore.</p>
                    </div>

                    <div class="flex-imageItem"></div>
                        <!-- Card 4 -->
                        <img src="img/abstract4.jpg" alt="abstract art">
                        <p>Dignissimos consequuntur maxime harum debitis ratione, culpa iure pariatur quaerat?</p>
                    </div>

                    <div class="flex-imageItem">
                        <!-- Card 5 -->
                        <img src="img/abstract5.jpg" alt="abstract art">
                        <p>Odit id earum commodi tempora voluptatum mollitia dolorum, perspiciatis nulla!</p>
                    </div>
                </div>
            </section>

            <section class="flex-item" id="2">
                <ul>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Delectus, aliquid vitae?</li>
                    <li>Vero, molestias debitis.</li>
                    <li>Obcaecati, vitae amet?</li>
                    <li>A, nulla dolore!</li>
                    <li>Error, nesciunt at.</li>
                </ul>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quo voluptates sint laudantium quaerat commodi!</p>
                <p>Aliquam, harum cumque aspernatur consectetur tempore dicta explicabo facere, adipisci sunt quas perferendis repudiandae sequi!</p>
                <p>Dolore aut error distinctio! Nemo impedit ipsum sunt neque vel enim unde incidunt nam consequuntur!</p>
            </section>
        </div>
    </main>

</body>
</html>

<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">  
<title>Cards</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">    
<!-- normalize.css for cross-browser stuff -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css"> </head>

Cards

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, ullam! Provident at accusantium, explicabo odio laborum ducimus earum amet repudiandae commodi quod distinctio, iste reprehenderit nihil ullam dolorum illo fugit.

        <section class="flex-item" id="1">
            <div class="flex-ImageContainer">
            
                <div class="flex-imageItem">
                    <!-- Card 1 -->
                    <img src="img/abstract1.jpg" alt="abstract art">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, laborum.</p>
                </div>

                <div class="flex-imageItem">
                    <!-- Card 2 -->
                    <img src="img/abstract2.jpg" alt="abstract art">
                    <p>Doloremque commodi unde eaque! Et natus dolorum corrupti ut numquam.</p>
                </div>

                <div class="flex-imageItem">
                    <!-- Card 3 -->
                    <img src="img/abstract3.jpg" alt="abstract art">
                    <p>Odio praesentium cum nemo nesciunt architecto, quam voluptate porro inventore.</p>
                </div>

                <div class="flex-imageItem"></div>
                    <!-- Card 4 -->
                    <img src="img/abstract4.jpg" alt="abstract art">
                    <p>Dignissimos consequuntur maxime harum debitis ratione, culpa iure pariatur quaerat?</p>
                </div>

                <div class="flex-imageItem">
                    <!-- Card 5 -->
                    <img src="img/abstract5.jpg" alt="abstract art">
                    <p>Odit id earum commodi tempora voluptatum mollitia dolorum, perspiciatis nulla!</p>
                </div>
            </div>
        </section>

        <section class="flex-item" id="2">
            <ul>
                <li>Lorem, ipsum dolor.</li>
                <li>Delectus, aliquid vitae?</li>
                <li>Vero, molestias debitis.</li>
                <li>Obcaecati, vitae amet?</li>
                <li>A, nulla dolore!</li>
                <li>Error, nesciunt at.</li>
            </ul>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quo voluptates sint laudantium quaerat commodi!</p>
            <p>Aliquam, harum cumque aspernatur consectetur tempore dicta explicabo facere, adipisci sunt quas perferendis

repudiandae sequi!

Dolore aut error distinctio! Nemo impedit ipsum sunt neque vel enim unde incidunt nam consequuntur!

visual-web-developer flexbox html
0 Answers
Related