Beautiful Expanding Cards

Today I am sharing a Project that I have learned from Brad Traversy Course.

This Project is Expanding Cards. Let's understand what has been performed in the Project.

As you already know HTML is data, CSS is the presentation and JS is the main code for any web project. In this, the whole work is done only on these files.

Lets Start

1. Firstly I have created an Index.html file which contains the card's background image with the title for the image.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Expanding Cards</title>
</head>

<body>
    <div class="container">
        <div class="panel active"
            style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Explore The World</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Wild Forest</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
            <h3>Sunny Beach</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
            <h3>City on Winter</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Mountains - Clouds</h3>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

2. Next I have added the Style.css file which contains all the necessary CSS for the code. I also have added comments to tell for which function is performed by specific CSS.

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

/* global styles */
* {
	box-sizing: border-box;
}

body {
	font-family: 'Muli', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	overflow: hidden;
	margin: 0;
}

.container {
	display: flex;
	width: 90vw;
}

.panel {
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	height: 80vh;
	border-radius: 50px;
	color: #fff;
	cursor: pointer;
	flex: 0.5;
	margin: 10px;
	/* want h3 inside the cards to be absolute so container must be relative */
	position: relative;
	transition: flex 0.7s ease-in;
}

.panel h3 {
	font-size: 24px;
	position: absolute;
	bottom: 20px;
	left: 20px;
	margin: 0;
	opacity: 0;
}

/* expand the active card */
.panel.active {
	flex: 5;
}

/* make h3 visible with a transition */
.panel.active h3 {
	opacity: 1;
	transition: opacity 0.3s ease-in 0.4s;
}

/* if screen is under 480px */
@media (max-width: 480px) {
	.container {
		width: 100vw;
	}

	/* removes last 2 cards */
	.panel:nth-of-type(4),
	.panel:nth-of-type(5) {
		display: none;
	}
}

3. Now the main brain of the projects comes in i.e. Script.js file. It will handle the active class on the mouse click event.

const panels = document.querySelectorAll('.panel')

panels.forEach(panel => {
    panel.addEventListener('click', () => {
        removeActiveClasses()
        panel.classList.add('active')
    })
})

function removeActiveClasses() {
    panels.forEach(panel => {
        panel.classList.remove('active')
    })
}

document.querySelectorAll() method returns all the elements in the document that matches a specified CSS selector as a static NodeList object. In this project, it is used for returning all the elements which have class as the panel.

The addEventListener() method attaches an event handler to the specified element. This method attaches an event handler to an element without overwriting existing event handlers. You can add many event handlers to one element. In this project, I have added a click event on the cards.

Course Link - https://www.udemy.com/course/50-projects-50-days/

GitHub Link - https://github.com/chirag-goel360/Beautiful-Expanding-Cards

References

querySelectorAll - https://www.w3schools.com/jsref/met_document_queryselectorall.asp

addEventListener - https://www.w3schools.com/jsref/met_document_addeventlistener.asp

Beautiful Expanding Cards

Contact Form