Skip to content
Advertisement

I am trying to stack the cards side by side I have tried the following

Below is where I think the issue is to fix the card display issue

I appreciate your help so much.

justify-content: space-evenly;
    /*flex-start: no* items are stacked to the far left
    *space-around:no items are stacked on top of the other* 
    *padding: no* 
    space-between no items are stacked to the far left */
    /*added
    align-content: center;
    */

I want to stack the cards side by side but I have given it many values and it is still not working it either lines it to far left, far right center and I want the cards to be aligned side by side.

Thank you so much.

HEre is my style.css

*{
    margin: 0;
    padding: 0;
    font-family: 'Vollkorn', serif;
    list-style-type: none;/*Removing the default list-type*/
    text-decoration: none; /*Removing the default list-type*/
    box-sizing: border-box;
    outline: none;
}

/*Decreasing the default size of the html element*/
html{
    font-size: 62.5%;
}

/*Creating a css variable to have a global scope*/
:root{
    --primary-color: #2b81e4;
    --secondary-color: #eee;
    --white-color: #fff;
    --grey-color: #555;
    --light-grey-color: #777;
}

/*instead of creating every div for us to center it we will just give every html element a css class of center*/
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{
    /*To be able to use the css variables we use the keyword var*/
    background-color: var(--secondary-color);
    margin: 3.5rem;
    /*Creating a shadow effect*/
    box-shadow: 0 1rem 3rem var(--grey-color);
    overflow: hidden;
}

.header{
    width: 100%;
    /*100vh is 100 percent and I subtract 7rem from all four sides*/
    height: calc(100vh-7rem);
    background: linear-gradient(rgba(18,113,255,0.5),rgba(18,113,255,0.3)), url(images/parachute.jpg) center no-repeat;
    background-size: cover;
    position: relative;
}

.header-text{
    /*text-align: center;*/
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    /*Adding text shadow*/
    text-shadow: 0 0.3rem 0.5rem var(--light-grey-color);
}

.heading{
    font-size: 8rem;
    color: var(--secondary-color);
    /*perspective property defines how far an object is away from the user*/
    perspective: 100rem;
}

.header-paragraph{
    font-size: 3rem;
    font-weight: 500;
    color: var(--primary-color);
    /*paragraph text too stretched out*/
    max-width: 70rem;
    /*Center text*/
    margin: auto;
}

/*Creating a logo*/
.logo{
    position: absolute;
    top: 4rem;
    right: 4rem;
}

.logo h1{
    display: flex;
}

.logo h1 span{
    font-size: 2rem;
    font-weight: 900;
    color: blue;
    text-transform: uppercase;
    background-color: var(--white-color);
    /*Defining the width and height of each letter*/
    width: 3.5rem;
    height: 3.5rem;
    margin: 0.5rem;
    border-radius: 50%;
}

.logo h1 span:nth-child(1)
{
    animation: drop-letters 7s 0.1s infinite;
}


.logo h1 span:nth-child(2)
{
    animation: drop-letters 7s 0.2s infinite;
}


.logo h1 span:nth-child(3)
{
    animation: drop-letters 7s 0.3s infinite;
}

.logo h1 span:nth-child(4)
{
    animation: drop-letters 7s 0.4s infinite;
}

.logo h1 span:nth-child(5)
{
    animation: drop-letters 7s 0.5s infinite;
}

.logo h1 span:nth-child(6)
{
    animation: drop-letters 7s 0.6s infinite;
}

.logo h1 span:nth-child(7)
{
    animation: drop-letters 7s 0.7s infinite;
}

.logo h1 span:nth-child(8)
{
    animation: drop-letters 7s 0.8s infinite;
}

.logo h1 span:nth-child(9)
{
    animation: drop-letters 7s 0.9s infinite;
}

.logo h1 span:nth-child(10)
{
    animation: drop-letters 7s 1.0s infinite;
}



/*Animation keyframes namewhatyouwan*/
@keyframes drop-letters{
    0%{
        transform: translateY(0);
    }
    10%{
        transform: translateY(0);
    }
    15%{
        transform: translateY(-100%);
    }
    20%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(0);
    }
}

.header-image{
    width: 35%;
    animation: image-float 150s infinite;
}

@keyframes image-float{
    0%{
        transform: translateZ(40rem);
        opacity: 1;
    }
    
    40%{
        /*                translateX(150rem) means move the image a bit to the right side*/
        transform: translateZ(-500rem) translateX(150rem);
        opacity: 0.8;
    }


    70%{
        /*               translateZ(-1500) means move the move the image even deeper inside
         *               translateX(150rem) means move the image a bit to the right side*/
        transform: translateZ(-1500rem) translateX(800rem);
        opacity: 0.6;
    }


    80%{
        /*                translateX(150rem) means move the image a bit to the right side*/
        transform: translateZ(-50rem) translateX(100rem);
        opacity: 0.8;
    }

    /*Remember 100% has to equal 0% for it to be looping the animation*/
    100%{
        transform: translateZ(40rem);
        opacity: 1;
    }
}

.popular-tours{
    padding: 5rem 0 10rem 0;
}

.popular-tours-heading{
    font-size: 9rem;
    text-align: center;
    margin-bottom: 9rem;
    color: var(--primary-color);
    text-shadow: 0 0.1rem 0.2rem var(--primary-color);
}

/*Align the cards side by side*/
.cards-wrapper{
    display: flex;
    /*even space between each card*/
    justify-content: flex-start;
    /*Added padding*/
    padding: 25px 50px 25px;
    align-content: space-between;
}

/*Give each card a specific dimension*/
.card{
    width: 30rem;
}

/*This will inherit the width from the parent element card and when you want to make corners of an element rounded use border-radius property*/
.card-image{
    width: 100%;
    /*border-radius: topleft topright bottomright bottomleft */
    border-radius: 0.3rem 0.3rem 0 0;

}

.front-side{
    text-align: center;
    background-color: var(--white-color);
    /*Make the front-side a bit rounded*/
    border-radius: 0.4rem;
    /*to positon the child relative to its parent*/
    position: relative;
}

.tour-name{
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    top:40%;
    right: 1.5rem;
    color: var(--white-color);
    text-shadow: 0 0 2rem #000;
}

.card-list{
    width:80%;
    margin: auto;
    /*Create space within the list*/
    padding: 2rem 0rem 3rem 0;/
}

.card-list-item{
    font-size:1.7rem;
    font-weight: 500;
    color: var(--light-grey-color);
    margin: 2rem 0;
    border-bottom: 0.1rem solid var(--primary-color);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link href="https://fonts.googleapis.com/css?family=Vollkorn:400,400i,600,700,900&display=swap" rel="stylesheet"/>
    <link rel="stylesheet" href="style.css"/>
    <title>Responsive WebS</title>
</head>
<body>
    <div class="container">
        <!-- ASSIGNING CSS center to tag-->
        <header class="header center">
            <div class="header-text">
                <h1 class="heading">2526 56837 27736259</h1>
                <p class="header-paragraph">43 56837 86 2633 46 2 263 569 53835 244 8463</p>
            </div>
            <img src="images/parachute.jpg" alt="2526 Image" class="header-Image">

            <!--CREATING A LOGO -->
            <div class="logo">
                <h2>
                    <span class="center">2</span>
                    <span class="center">5</span>
                    <span class="center">2</span>
                    <span class="center">6</span>
                    <span class="center">5</span>
                    <span class="center">6</span>
                    <span class="center">8</span>
                    <span class="center">3</span>
                    <span class="center">7</span>
                    <span class="center">2</span>
                </h2>

            </div>

        </header>
        <!--End of header-->
        <section class="popular-tours">
            <h1 class="popular-tours-heading">The Most Popular PL according to Nelan is 2. This is because it is easy, non-cryptic and developer-friendly according to 63426</h1>
            <!--Wrapper Class of the cards -->
            <div class="cards-wrapper">
                <!--Creating the first card -->
                <div class="card A">
                    <div class="front-side">
                        <img src="images/assembly.jpg" width="200" height="200" alt="FAV PL OF 2526" class="card-image"> 
                        <h1 class="name-of-Pl">The Best PL According To Nelan</h1>

                        <ul class="card-list">
                            <li class="card-list-item">MCGA</li>
                            <li class="card-list-item">Make C MAndatory to Learn at IS because 63527 Works There</li>
                            <li class="card-list-item">4 Required PL: C, Assembly, Machine Code, Objective-C</li>
                            <li class="card-list-item">Incorporate 366745377 BECAUSE 2526 56837 THEM</li>
                            <li class="card-list-item">Cryptic Difficulty: EASY BECAUSE 63527 56837 THEM</li>
                        </ul>
                        <button class="navigation-button">
                            price &gt;&gt;
                        </button>
                    </div>
                    <div class="back-side">
                        <button class="navigation-button">
                            &lt;&lt; back
                        </button>

                        <h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$FREE</h3>
                        <button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
                    </div>

                <div class="card B">
                    <div class="front-side">
                        <img src="images/tswift.jpg" width="200" height="200" alt="FAV ARTIST 2526" class="card-image"> 
                        <h1 class="name-of-Pl">The Best Artist For Nelan</h1>

                        <ul class="card-list">
                            <li class="card-list-item">But I knew you</li>
                            <li class="card-list-item">Dancing in your Levi's Drunk under a streetlight,</li>
                            <li class="card-list-item">I I knew you blabla balbal athis is 63527'S</li>
                            <li class="card-list-item">Goto Song</li>
                        </ul>
                        <button class="navigation-button">
                            price &gt;&gt;
                        </button>
                    </div>
                    <div class="back-side">
                        <button class="navigation-button">
                            &lt;&lt; back
                        </button>

                        <h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$3</h3>
                        <button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <script src="script.js"></script>
</body>
</html>

Advertisement

Answer

Check out this snippet:

*{
    margin: 0;
    padding: 0;
    font-family: 'Vollkorn', serif;
    list-style-type: none;/*Removing the default list-type*/
    text-decoration: none; /*Removing the default list-type*/
    box-sizing: border-box;
    outline: none;
}

/*Decreasing the default size of the html element*/
html{
    font-size: 62.5%;
}

/*Creating a css variable to have a global scope*/
:root{
    --primary-color: #2b81e4;
    --secondary-color: #eee;
    --white-color: #fff;
    --grey-color: #555;
    --light-grey-color: #777;
}

/*instead of creating every div for us to center it we will just give every html element a css class of center*/
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{
    /*To be able to use the css variables we use the keyword var*/
    background-color: var(--secondary-color);
    margin: 3.5rem;
    /*Creating a shadow effect*/
    box-shadow: 0 1rem 3rem var(--grey-color);
    overflow: hidden;
}

.header{
    width: 100%;
    /*100vh is 100 percent and I subtract 7rem from all four sides*/
    height: calc(100vh-7rem);
    background: linear-gradient(rgba(18,113,255,0.5),rgba(18,113,255,0.3)), url(images/parachute.jpg) center no-repeat;
    background-size: cover;
    position: relative;
}

.header-text{
    /*text-align: center;*/
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    /*Adding text shadow*/
    text-shadow: 0 0.3rem 0.5rem var(--light-grey-color);
}

.heading{
    font-size: 8rem;
    color: var(--secondary-color);
    /*perspective property defines how far an object is away from the user*/
    perspective: 100rem;
}

.header-paragraph{
    font-size: 3rem;
    font-weight: 500;
    color: var(--primary-color);
    /*paragraph text too stretched out*/
    max-width: 70rem;
    /*Center text*/
    margin: auto;
}

/*Creating a logo*/
.logo{
    position: absolute;
    top: 4rem;
    right: 4rem;
}

.logo h1{
    display: flex;
}

.logo h1 span{
    font-size: 2rem;
    font-weight: 900;
    color: blue;
    text-transform: uppercase;
    background-color: var(--white-color);
    /*Defining the width and height of each letter*/
    width: 3.5rem;
    height: 3.5rem;
    margin: 0.5rem;
    border-radius: 50%;
}

.logo h1 span:nth-child(1)
{
    animation: drop-letters 7s 0.1s infinite;
}


.logo h1 span:nth-child(2)
{
    animation: drop-letters 7s 0.2s infinite;
}


.logo h1 span:nth-child(3)
{
    animation: drop-letters 7s 0.3s infinite;
}

.logo h1 span:nth-child(4)
{
    animation: drop-letters 7s 0.4s infinite;
}

.logo h1 span:nth-child(5)
{
    animation: drop-letters 7s 0.5s infinite;
}

.logo h1 span:nth-child(6)
{
    animation: drop-letters 7s 0.6s infinite;
}

.logo h1 span:nth-child(7)
{
    animation: drop-letters 7s 0.7s infinite;
}

.logo h1 span:nth-child(8)
{
    animation: drop-letters 7s 0.8s infinite;
}

.logo h1 span:nth-child(9)
{
    animation: drop-letters 7s 0.9s infinite;
}

.logo h1 span:nth-child(10)
{
    animation: drop-letters 7s 1.0s infinite;
}



/*Animation keyframes namewhatyouwan*/
@keyframes drop-letters{
    0%{
        transform: translateY(0);
    }
    10%{
        transform: translateY(0);
    }
    15%{
        transform: translateY(-100%);
    }
    20%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(0);
    }
}

.header-image{
    width: 35%;
    animation: image-float 150s infinite;
}

@keyframes image-float{
    0%{
        transform: translateZ(40rem);
        opacity: 1;
    }

    40%{
        /*                translateX(150rem) means move the image a bit to the right side*/
        transform: translateZ(-500rem) translateX(150rem);
        opacity: 0.8;
    }


    70%{
        /*               translateZ(-1500) means move the move the image even deeper inside
        *               translateX(150rem) means move the image a bit to the right side*/
        transform: translateZ(-1500rem) translateX(800rem);
        opacity: 0.6;
    }


    80%{
        /*                translateX(150rem) means move the image a bit to the right side*/
        transform: translateZ(-50rem) translateX(100rem);
        opacity: 0.8;
    }

    /*Remember 100% has to equal 0% for it to be looping the animation*/
    100%{
        transform: translateZ(40rem);
        opacity: 1;
    }
}

.popular-tours{
    padding: 5rem 0 10rem 0;
}

.popular-tours-heading{
    font-size: 9rem;
    text-align: center;
    margin-bottom: 9rem;
    color: var(--primary-color);
    text-shadow: 0 0.1rem 0.2rem var(--primary-color);
}

/*Align the cards side by side*/
.cards-wrapper{
    display: flex;
    /*even space between each card*/
    justify-content: flex-start;
    /*Added padding*/
    padding: 25px 50px 25px;
    align-content: space-between;
}

/*Give each card a specific dimension*/
.card{
    width: 30rem;
}

/*This will inherit the width from the parent element card and when you want to make corners of an element rounded use border-radius property*/
.card-image{
    width: 100%;
    /*border-radius: topleft topright bottomright bottomleft */
    border-radius: 0.3rem 0.3rem 0 0;

}

.front-side{
    text-align: center;
    background-color: var(--white-color);
    /*Make the front-side a bit rounded*/
    border-radius: 0.4rem;
    /*to positon the child relative to its parent*/
    position: relative;
}

.tour-name{
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    top:40%;
    right: 1.5rem;
    color: var(--white-color);
    text-shadow: 0 0 2rem #000;
}

.card-list{
    width:80%;
    margin: auto;
    /*Create space within the list*/
    padding: 2rem 0rem 3rem 0;/
}

.card-list-item{
    font-size:1.7rem;
    font-weight: 500;
    color: var(--light-grey-color);
    margin: 2rem 0;
    border-bottom: 0.1rem solid var(--primary-color);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link href="https://fonts.googleapis.com/css?family=Vollkorn:400,400i,600,700,900&display=swap" rel="stylesheet"/>
    <link rel="stylesheet" href="style.css"/>
    <title>Responsive WebS</title>
</head>
<body>
    <div class="container">
        <!-- ASSIGNING CSS center to tag-->
        <header class="header center">
            <div class="header-text">
                <h1 class="heading">2526 56837 27736259</h1>
                <p class="header-paragraph">43 56837 86 2633 46 2 263 569 53835 244 8463</p>
            </div>
            <img src="images/parachute.jpg" alt="2526 Image" class="header-Image">

            <!--CREATING A LOGO -->
            <div class="logo">
                <h2>
                    <span class="center">2</span>
                    <span class="center">5</span>
                    <span class="center">2</span>
                    <span class="center">6</span>
                    <span class="center">5</span>
                    <span class="center">6</span>
                    <span class="center">8</span>
                    <span class="center">3</span>
                    <span class="center">7</span>
                    <span class="center">2</span>
                </h2>

            </div>

        </header>
        <!--End of header-->
        <section class="popular-tours">
            <h1 class="popular-tours-heading">The Most Popular PL according to Nelan is 2. This is because it is easy, non-cryptic and developer-friendly according to 63426</h1>
            <!--Wrapper Class of the cards -->
            <div class="cards-wrapper">
                <!--Creating the first card -->
                <div class="card A">
                    <div class="front-side">
                        <img src="images/assembly.jpg" width="200" height="200" alt="FAV PL OF 2526" class="card-image"> 
                        <h1 class="name-of-Pl">The Best PL According To Nelan</h1>

                        <ul class="card-list">
                            <li class="card-list-item">MCGA</li>
                            <li class="card-list-item">Make C MAndatory to Learn at IS because 63527 Works There</li>
                            <li class="card-list-item">4 Required PL: C, Assembly, Machine Code, Objective-C</li>
                            <li class="card-list-item">Incorporate 366745377 BECAUSE 2526 56837 THEM</li>
                            <li class="card-list-item">Cryptic Difficulty: EASY BECAUSE 63527 56837 THEM</li>
                        </ul>
                        <button class="navigation-button">
                            price &gt;&gt;
                        </button>
                    </div>
                    <div class="back-side">
                        <button class="navigation-button">
                            &lt;&lt; back
                        </button>

                        <h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$FREE</h3>
                        <button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
                    </div>
                </div>

                    <div class="card B">
                        <div class="front-side">
                            <img src="images/tswift.jpg" width="200" height="200" alt="FAV ARTIST 2526" class="card-image"> 
                            <h1 class="name-of-Pl">The Best Artist For Nelan</h1>

                            <ul class="card-list">
                                <li class="card-list-item">But I knew you</li>
                                <li class="card-list-item">Dancing in your Levi's Drunk under a streetlight,</li>
                                <li class="card-list-item">I I knew you blabla balbal athis is 63527'S</li>
                                <li class="card-list-item">Goto Song</li>
                            </ul>
                            <button class="navigation-button">
                                price &gt;&gt;
                            </button>
                        </div>
                        <div class="back-side">
                            <button class="navigation-button">
                                &lt;&lt; back
                            </button>

                            <h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$3</h3>
                            <button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <script src="script.js"></script>
    </body>
    </html>

Actually you forget to add </div> for Card A.

gpl
User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement