Learn how to craft captivating movie poster cards using HTML and CSS. Step-by-step guide to design, style, and make them responsive.
Table of Contents
Welcome to the exciting realm of crafting captivating movie poster cards using the dynamic duo of HTML and CSS! In this comprehensive guide, we're about to embark on a creative journey that will enable you to design visually alluring and attention-grabbing movie poster cards right from the comfort of your screen.
Imagine being able to showcase your favorite films, upcoming blockbusters, or even your own cinematic creations in a way that not only captivates but also engages your website visitors. That's the power of movie poster cards – they're not mere images, but rather interactive and immersive snapshots of the cinematic world.
Whether you're an aspiring web designer eager to expand your skill set or a fervent movie buff with a burning desire to share your passion, you're in for a treat. Throughout this step-by-step tutorial, we'll unveil the secrets behind seamlessly melding HTML and CSS to construct these captivating movie poster cards from scratch.
Gone are the days of static images languishing on your website. With our guidance, you'll learn how to infuse life and interactivity into your movie posters, ensuring that each card becomes an enthralling window into the world of cinema. Together, we'll delve into the art of combining code and creativity, resulting in mesmerizing movie poster cards that are bound to leave an indelible mark on your digital space.
So, whether you're fueled by a fervor for film or a passion for design (or both!), prepare to unlock the potential of HTML and CSS as we embark on this exhilarating quest to produce movie poster cards that truly stand out. Let's dive in and give your cinematic visions the platform they deserve!
Credit: Ethan
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our movie poster cards.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the code step by step:
1. <!DOCTYPE html>: This is the document type declaration, indicating that the document is an HTML5 document.
2. <html lang="en">: The opening tag for the HTML document, with the lang attribute set to "en" (English) to specify the language of the content.
3. <head>: The head section of the document, where metadata and external resources are typically included.
- <title>Movie Poster Cards</title>: Sets the webpage title that appears in the browser's title bar or tab.
- <meta charset="UTF-8" />: Specifies the character encoding for the document as UTF-8, which is a standard encoding for Unicode characters.
- <meta name="viewport" content="width=device-width" />: Defines the viewport settings for responsive design, ensuring that the webpage adapts well to different device widths.
- <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'>: Links to an external stylesheet containing Font Awesome icons, which are used for star ratings.
- <link rel="stylesheet" href="styles.css" />: Links to an external stylesheet named "styles.css" to define the visual styling of the webpage.
4. <body>: The body section of the document, where the main content of the webpage is placed.
- <div class="wrapper">: A container that wraps all the movie cards.
- Each <div class="card"> represents a movie card that displays information about a specific movie.
- Inside each card, there is a <div class="poster"> containing an <img> tag that displays the movie poster image.
- The <div class="details"> section contains various details about the movie, such as title, release year, duration, rating, genres, description, and cast.
- The <h1> tag displays the movie title.
- The <h2> tag displays the release year, rating, and duration of the movie.
- The <div class="rating"> displays a star rating using Font Awesome icons and a numerical rating.
- The <div class="tags"> displays the movie genres using tag-like elements.
- The <p class="desc"> displays a brief description of the movie.
- The <div class="cast"> section displays the cast members of the movie as a list of images.
5. The content of each card varies for each movie, including the poster image, movie details, rating, genres, description, and cast members.
6. The webpage structure is repeated for each of the three movies: "Location Unknown," "Air," and "End Credits."
This is the basic structure of our movie poster cards using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the movie poster cards is in place, the next step is to add styling to the cards using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our cards.
Let's break down each section:
1. @import: This imports a Google Fonts stylesheet, specifically the "Inter" font family with weights 400 (regular) and 700 (bold), and specifies to display it using the "swap" strategy. This ensures that the text content using this font will display properly before the font is fully loaded.
2. * Selector: This targets all HTML elements on the page and sets some common styles:
- margin: 0; padding: 0;: Resets the default margin and padding for all elements.
- box-sizing: border-box;: Ensures that the total width and height of an element include its padding and border, not just the content.
- font-family: Inter, sans-serif;: Sets the default font family for all elements to "Inter" (if available) and a generic sans-serif font as a fallback.
3. body: Styles the <body> element, creating a centered and vertically aligned layout:
- display: flex; align-items: center; justify-content: center;: Uses flexbox to center its contents both horizontally and vertically.
- min-height: 100vh;: Sets the minimum height of the body to 100% of the viewport height.
- background: #f5f5f5;: Sets a light gray background color.
4. .wrapper: Styles a container that holds multiple cards:
- position: relative;: Enables positioning of child elements.
- width: 100%; height: 100%;: Makes the container take up the full width and height of its parent.
- padding: 20px;: Adds padding around the content inside the wrapper.
- display: flex; align-content: center; justify-content: center;: Centers the cards using flexbox.
- gap: 24px;: Sets the gap between child elements.
- flex-wrap: wrap;: Allows cards to wrap to the next row if they exceed the container's width.
5. .card: Styles each individual card:
- position: relative;: Allows positioning of inner elements.
- width: 325px; height: 450px;: Sets the dimensions of the card.
- background: #000;: Sets a black background color.
- border-radius: 18px;: Rounds the corners of the card.
- overflow: hidden;: Clips any content that overflows the card's boundaries.
- box-shadow: 0 5px 10px rgba(0, 0, 0, .2);: Adds a subtle shadow to the card.
6. .poster: Styles the container for the movie poster:
- position: relative;: Allows positioning of its child elements.
- top: 0; left: 0;: Positions the poster at the top-left corner of the container.
- width: 100%; height: 100%;: Makes the poster take up the full width and height.
- overflow: hidden;: Clips the poster image if it's larger than the container.
7. .poster::before: Creates a pseudo-element before the poster to add an overlay effect on hover:
- content: ''; position: absolute;: Creates an empty pseudo-element positioned absolutely.
- bottom: -45%; left: 0;: Initially positions the overlay below the container.
- width: 100%; height: 100%;: Covers the full width and height of the container.
- z-index: 1; transition: .3s;: Adds a smooth transition effect on hover.
8. .card:hover .poster::before: This selector targets the overlay pseudo-element of the poster when the card is hovered over. It moves the overlay upward (bottom: 0;) to reveal more of the poster, creating an elegant hover effect.
9. .poster img: Styles the poster image within the card:
- position: absolute; top: 0; left: 0;: Positions the image at the top-left corner of the .poster container.
- width: 100%; height: 100%;: Makes the image cover the entire container.
- object-fit: cover;: Ensures the image fills the container while maintaining its aspect ratio.
- transition: .3s;: Adds a smooth transition effect when the image is scaled on hover.
10. .card:hover .poster img: This selector targets the poster image within the card when the card is hovered over. It enlarges the image slightly (transform: scale(1.1);) to provide a zoom-in effect.
11. .details: Styles the container for movie details that appear on hover:
- position: absolute; bottom: -100%; left: 0;: Initially hides the details off-screen.
- width: 100%; height: auto;: Sets the width to 100% and adjusts the height automatically based on content.
- padding: 1.5em 1.5em 2em;: Adds padding around the content.
- background: #000a;: Provides a semi-transparent black background.
- backdrop-filter: blur(16px) saturate(120%);: Applies a backdrop filter for a blur effect with increased saturation.
- transition: .3s;: Adds a smooth transition effect when the details slide into view.
- color: #fff; z-index: 2;: Sets the text color to white and adjusts the stacking order to appear above the poster.
12. .card:hover .details: This selector targets the details container within the card when the card is hovered over. It slides the details into view from the bottom (bottom: 0;), revealing the movie information.
The following styles (h1, h2, .rating, .tags, .desc, .cast) within the .details class target various elements inside the details container. They specify font sizes, margins, and colors to style the movie title, subtitle, ratings, tags, description, and cast.
13. .details .rating i: Styles the icons used for ratings by changing their color to a yellowish shade (#e3c414).
14. .details .cast ul: Styles the list of cast members:
- position: relative; display: flex; flex-wrap: wrap; gap: 0.625rem;: Positions the list as a flex container with wrapped items and a small gap between them.
- width: 100%;: Sets the width of the list to 100%.
15. .details .cast ul li: Styles each cast member's thumbnail image:
- list-style: none; width: 55px; height: 55px;: Removes the default list bullet and sets a fixed size for each cast member's thumbnail.
- border-radius: 50%; overflow: hidden; border: 1.5px solid #fff;: Creates a circular shape, clips the image, and adds a white border.
16. .details .cast ul li img: Styles the cast member's thumbnail image:
- width: 100%; height: 100%;: Makes the image fill the circular container.
This will give our movie poster cards an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Inter, sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f5f5f5;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
padding: 20px;
display: flex;
align-content: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.card {
position: relative;
width: 325px;
height: 450px;
background: #000;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.poster {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.poster::before {
content: '';
position: absolute;
bottom: -45%;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: .3s;
}
.card:hover .poster::before {
bottom: 0;
}
.poster img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: .3s;
}
.card:hover .poster img {
transform: scale(1.1);
}
.details {
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
height: auto;
padding: 1.5em 1.5em 2em;
background: #000a;
backdrop-filter: blur(16px) saturate(120%);
transition: .3s;
color: #fff;
z-index: 2;
}
.card:hover .details {
bottom: 0;
}
.details h1,
.details h2 {
font-weight: 700;
}
.details h1 {
font-size: 1.5em;
margin-bottom: 5px;
}
.details h2 {
font-weight: 400;
font-size: 1em;
margin-bottom: 10px;
opacity: .6;
}
.details .rating {
position: relative;
margin-bottom: 15px;
display: flex;
gap: .25em;
}
.details .rating i {
color: #e3c414;
}
.details .rating span {
margin-left: 0.25em;
}
.details .tags {
display: flex;
gap: .375em;
margin-bottom: .875em;
font-size: .85em;
}
.details .tags span {
padding: .35rem .65rem;
color: #fff;
border: 1.5px solid rgba(255 255 255 / 0.4);
border-radius: 50px;
}
.details .desc {
color: #fff;
opacity: .8;
line-height: 1.5;
margin-bottom: 1em;
}
.details .cast h3 {
margin-bottom: .5em;
}
.details .cast ul {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
width: 100%;
}
.details .cast ul li {
list-style: none;
width: 55px;
height: 55px;
border-radius: 50%;
overflow: hidden;
border: 1.5px solid #fff;
}
.details .cast ul li img {
width: 100%;
height: 100%;
} Final Output:
Conclusion:
Congratulations, you've reached the end of our exhilarating journey into the world of crafting captivating movie poster cards using HTML and CSS! From the inception of a mere idea to the creation of interactive and visually striking movie poster cards, you've acquired valuable skills that can transform your website into a cinematic showcase.
By blending your newfound knowledge of HTML's structural prowess with the artistic touch of CSS styling, you're now equipped to create movie poster cards that are not just static images, but immersive experiences. Your cards will beckon visitors to explore the cinematic wonders you've curated, all while enjoying an engaging and visually pleasing design.
Remember, the movie poster cards you've mastered here can be customized endlessly. Experiment with color palettes, fonts, and hover effects to infuse your unique style into each card. With responsive design principles in mind, your creations will look stunning across devices of all sizes, ensuring that your website visitors are treated to a seamless experience, no matter where they are.
As you venture forward, don't hesitate to continue refining your skills. Stay curious, explore advanced techniques, and always keep an eye out for new design trends. Your journey into the world of web design has just begun, and these movie poster cards are merely the tip of the iceberg when it comes to the incredible possibilities HTML and CSS offer.
So, whether you're designing for personal enjoyment, professional growth, or the sheer thrill of sharing your cinematic passions, remember that you hold the keys to crafting visually captivating movie poster cards. Embrace your creativity, let your imagination run wild, and continue making your digital space a haven for all things cinematic. Your website is now poised to be a true masterpiece that reflects your love for film and design. Best of luck, and may your movie poster cards shine bright on the virtual red carpet!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
