CARD COMPONENT - 2
Today, we are going to create a card component using only HTML and CSS, no JavaScript or jQuery. This card component uses two images, one for desktop views and one for mobile views.
We will be building the following card component:
Desktop View
Mobile View
Index
1 – Create Folder Structure
Create Folder Structure
I like to have my website structure nice and organized. To do this, I create separate folders for my stylesheet and my scripts. Since this tutorial won’t cover JavaScript or jQuery, we will just have one folder for our CSS under my dev folder.
Here is how I like to setup my folder structure:
2 – Create Markup (HTML) BEM Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/favicon-32x32.png"
/>
<link rel="stylesheet" href="./css/index.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<title>CreatiqueMedia LLC | Ron The Web Dev | Card Component - 2</title>
</head>
<body>
<div class="card-container">
<section class="section-1">
<picture class="section-1-img">
<source
class="section-1-img_desktop"
media="(min-width: 640px)"
srcset="./assets/image-product-desktop.jpg"
/>
<img
class="section-1-img_mobile lazyload"
src="./assets/image-product-mobile.jpg"
alt=""
/>
</picture>
</section>
<section class="section-2">
<h2 class="section-2-heading-1">perfume</h2>
<h1 class="section-2-heading-2">Gabrielle Essence Eau De Parfum</h1>
<p class="section-2-text">
A floral, solar and voluptuous interpretation composed by Olivier
Polge, Perfumer-Creator for the House of CHANEL.
</p>
<ul class="section-2-price-list">
<li class="section-2-list-item">$149.99</li>
<li class="sectoin-2-list-item"><s>$169.99</s></li>
</ul>
<button class="section-2-btn">
<img decoding="async" class="section-2-icon lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="./assets/icon-cart.svg" alt="" /><noscript><img decoding="async" class="section-2-icon lazyload" src="./assets/icon-cart.svg" alt="" /></noscript> Add
to Cart
</button>
</section>
</div>
<footer>
Coded by
<a href="https://CreatiqueMedia.com" target="_blank" rel="noopener noreferrer"
>CreatiqueMedia LLC | Ron The Web Dev</a
>.
</footer>
<script defer src="https://blog.creatiquemedia.com/wp-content/uploads/siteground-optimizer-assets/siteground-optimizer-combined-js-0480856a581f40a4a9508f381463e03e.js"></script></body>
</html>
3 – Create CSS
Even though we don’t use maybe all the BEM classes in our CSS, I still like to have all my markup tags associated with a class for any future development that may occur, if needed.
/* All Univesal Styling Goes At The Top! */
:root {
--main-bg-color: hsl(30, 38%, 92%);
--section-2-bg-color: #fff;
--main-font: "Montserrat", sans-serif;
--section-2-font: "Fraunces", sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style-type: none;
}
img {
max-width: 100%;
}
body {
font-size: 14px;
font-family: --main-font;
background-color: var(--main-bg-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: calc(100vh - 0.1px);
margin: 0 1.5rem;
}
.section-2:first-child img {
border-radius: 1rem 1rem 0 0;
}
.section-2:last-child {
background-color: var(--section-2-bg-color);
padding: 1.5rem;
border-radius: 0 0 1rem 1rem;
margin-top: -1rem;
}
/* Then The Other Sections Next As The Classes Appear In The Markup By Order For Structure */
/* Card Container Styling */
.card-container {
max-width: 600px;
}
/* Section 1 Styling */
.section-1-img_mobile {
height: 100%;
}
/* Section 2 Styling */
.section-2-heading-1 {
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 500;
color: hsl(228, 12%, 48%);
margin-bottom: 1rem;
letter-spacing: 0.2rem;
}
.section-2-heading-2 {
margin-bottom: 1rem;
font-size: 2rem;
color: hsl(212, 21%, 14%);
}
.section-2-text {
margin-bottom: 2rem;
color: hsl(228, 12%, 48%);
line-height: 1.8;
}
.section-2-btn,
.section-2-list-item {
font-family: inherit;
}
.section-2-price {
color: hsl(158, 36%, 37%);
}
.section-2-heading-2,
.section-2-price {
font-family: var(--section-2-font);
}
.section-2-price-list {
display: flex;
align-items: center;
margin-bottom: 2rem;
}
.section-2-list-item:first-child {
font-size: 2rem;
margin-right: 1.5rem;
}
.section-2-list-item:nth-child(2) {
color: hsl(228, 12%, 48%);
}
.section-2-btn {
background-color: hsl(158, 36%, 37%);
color: #fff;
font-weight: 700;
font-size: 1rem;
padding: 1rem 2rem;
width: 100%;
border: none;
border-radius: 0.625rem;
outline: none;
cursor: pointer;
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.section-2-btn:hover {
background-color: hsl(158, 38%, 20%);
}
.section-2-icon {
margin-right: 0.5rem;
}
/* Footer Styling */
footer {
font-size: 14px;
text-align: center;
margin-top: 2rem;
}
footer a {
color: hsl(228, 45%, 44%);
}
/* Mobile Responsive styling */
@media (min-width: 640px) {
.card-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.card-container section:first-child img {
border-radius: 0.625rem 0 0 0.625rem;
width: 100%;
}
.card-container section:last-child {
border-radius: 0 0.625rem 0.625rem 0;
margin-top: 0;
padding: 1.5rem 1.5rem 0;
}
.section-2-text {
margin-bottom: 1rem;
}
}
5 – Conclusion
Hey! I appreciate you stopping by and checking out our blog! If you’re looking for a personal or business website, contact us today and let us know how we can help! Give us a call, or email us using our contact form here: !
Please connect with us on social media here: https://www.creatiquemedia.com/#contact
CreatiqueMedia LLC