I'm interested in creating cards with categories such as Men, Women, and Kids. I envision these cards to have a design similar to the ones shown here.
My goal is for users to be able to click on one of the cards and be directed to either the Men or Women page. Do you have any suggestions on how I can achieve this?
My current tools include JavaScript, Bootstrap, CSS, and HTML.
Discover How to Create a Stunning Custom Card Design
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="custom-card content-left">
<h3>EXCLUSIVE LOOK</h3>
<h1>FALL FASHION</h1>
<h2>New Arrivals</h2>
<a href="#">Explore Now</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="custom-card content-center">
<h3>MUST-HAVE PIECES</h3>
<h1>SUMMER STYLES</h1>
<h2>Dresses</h2>
<a href="#">Explore Now</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="custom-card content-right">
<h3>TIMELESS CLASSICS</h3>
<h1>For Women</h1>
<h2>Collections</h2>
<a href="#">Explore Now</a>
</div>
</div>
</div;
</div>
Create Your Own Custom Card Design with CSS Styling
/* ADD BACKGROUND IMAGE INSTEAD OF SOLID COLOR */
.content-left {
background-color: tan;
background-size: cover;
background-position: 50% 100%;
height: 100%;
width: 100%;
padding: 30px 20px;
}
.content-center {
background-color: orange;
background-size: cover;
background-position: 50% 100%;
height: 100%;
width: 100%;
padding: 30px 20px;
}
.content-right {
background-color: powderblue;
background-size: cover;
background-position: 50% 100%;
height: 100%;
width: 100%;
padding: 30px 20px;
}
/* CUSTOMIZE TEXT STYLES FOR THE CARD */
.custom-card h1 {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 28px;
text-align: left;
padding: 10px 0;
}
.custom-card h2 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 24px;
text-align: left;
padding: 5px 0;
}
.custom-card h3 {
font-family: 'Roboto', sans-serif;
font-size: 18px;
text-align: left;
}
.custom-card a {
font-family: 'Roboto', sans-serif;
color: black;
font-weight: 500;
font-size: 16px;
text-align: left;
padding: 5px 0;
text-decoration: none;
padding-bottom: 5px;
border-bottom-style: solid;
border-bottom-width: 4px;
border-color: red;
}
View the Full Source Code Here: https://github.com/HassanNazmul/stack-Overflow/blob/main/Cards%20with%20image%20in%20BOOTSTRAP/index.html
I have an interesting scenario where I am using a -webkit-mask with a radial-gradient to create small dots on a background image. These dots are transparent, allowing the background image to show through. However, each dot has a gradient color within it. ...
Having some issues with downloading files from specific links, such as . My goal is to automate the download process for these redirected files. The challenge I'm facing is that trying to access the link directly through a web browser just gives me a ...
I recently created a div with the id 'temporary' in order to display data retrieved from the openweathermap.org API. However, I am encountering an error in the console and I'm not sure why. This is my first time working with APIs and I would ...
I've been diligently working on my project for about a week now, but I've encountered a small yet incredibly frustrating issue that has me stumped. The problem lies in the functionality of the responsive sidemenu with multiple dropdowns that I ha ...
I encountered a warning in the debugger while using XCode: It detected an incorrect NSStringEncoding value of 0x8000100 when converting an NSAttributedString to html data. I am unsure of what is causing this issue or how to resolve it. Below is the code sn ...
Currently, I have a div containing elements that are aligned perfectly. However, I need to scale this div to fit the viewport size. Using CSS scale is not an option as it does not support pixel values. https://i.stack.imgur.com/uThqx.png I am looking to ...
I've hit a roadblock while attempting to trigger a CSS animation. Here's my CSS: h3[id="balance-desktop"]{ color: black; -webkit-animation-name: gogreen; -webkit-animation-duration: 2s; animation-name: gogreen; animation-du ...
Here is a code snippet that I'd like to share <body> <div id="slideshow"> <div> <img src="assets/images/home-banner.jpg" width="995" height="421" alt=""/> </div> <div&g ...
Trying to implement the material-UI Autocomplete component in my react app and looking for a way to display a div when hovering over an option from the list, similar to what is shown in this reference image. View example If anyone has any tips or suggest ...
I have developed a unique audio player that plays random sections of different songs. Currently, it is hardcoded for one song with three intros, a midsection, and three outros. I am looking to create a system where a list of songs can be randomly chosen fr ...
I am attempting to create a site that is fullscreen and responsive, but I am having issues with elements in the container overflowing on smaller screens, causing it to not be 100% as desired. I have tried using: top:100%; position:relative; width:100%; he ...
I recently created a Vue component using TypeScript that resulted in a separate CSS file being generated after the build process. However, I noticed that when the client imports this component, the CSS file is not imported automatically and needs to be exp ...
Is it possible to automatically generate an email subject that includes the title of the webpage from where the user is sending an email? For instance: If my webpage's title is "About Us," Can the email subject be "About Us" as well? I am not very ...
I am facing a strange issue with the anchors on my webpage. There are a few anchor tags in my body: <a href="link1.html"></a> <a href="link2.html"></a> <a href="link3.html"><img src="img1.png" /></a> Interestingl ...
I have a task to create a compact Nuxt application that produces a basic HTML file containing informative sections about the services offered to the clients of my organization. The main purpose is to generate an HTML file that can be easily downloaded and ...
I am working with a nested div structure and trying to center the inner content of one div within another. Is it possible to achieve this using CSS? <div id="outer"> bla, bla....... <div id="inner"> <p>Test</p> </div> ...
Can you help me modify this design using Bootstrap rules while keeping the original CSS files intact? I need to make these 5 cards (columns) full width with a navbar. Issue 1: I always see a vertical scroll bar on desktop. Issue 2: The Navbar doesn' ...
I've created a div with the id #myList, which contains 8 sub-divs each with an image. My goal is to initially load the first 3 images and then have the ability to load more when clicking on load more. I attempted to follow this jsfiddle example Bel ...
I successfully made the blue and red divs move diagonally and switch positions. Now I am looking to achieve the same effect with the green and pink divs using a similar function. I am unsure about setting the position of both divs to 0 and 350 for those p ...
While experimenting with the Durandal JS starter kit application, I happened to view the page source in Mozilla browser and noticed the following. <div class="" data-view="views/shell" style="" data-active-view="true"> </div> I couldn't ...