CreatiqueMedia Blog

CM-Post-0003-20220825-Card-Component-2

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-1ee25b58ebfd0249146ad0ee16699e73.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

 

Ron The Web Dev

Leave a Comment

Your email address will not be published. Required fields are marked *