A card is a small rectangular module with images and text. It is an entry point for users to learn more
details. To balance the aesthetics and usability of the interface, card UI design is basically a default
choice. Because cards are easy to use, they can also display content that contains different elements.
Ex:- E-commerce Websites, Social Media Websites, Coding Platforms,etc.
Nature
by Ayush Raj
Nature can refer to the general realm of living plants and animals, and in some cases to the processes associated with inanimate objects
Our Changing Planet
by Ayush Raj
Nature can refer to the general realm of living plants and animals, and in some cases to the processes associated with inanimate objects
Our Changing Planet
by Ayush Raj
Nature can refer to the general realm of living plants and animals,and in some cases to the processes associated with inanimate objects.
Our Changing Planet
by Ayush Raj
<div id="basic-card">
<div class="card-image">
<img src="https://color-components.netlify.app/1.jfif" alt="basic card image" class="img-card">
</div>
<div class="card-content">
<h2 class="card-title">Nature</h2>
<h4 class="card-subtitle">by Ayush Raj</h4>
<p class="card-description">Nature can refer to the general realm of living plants and
animals,
and in some cases to the processes associated with inanimate objects</p>
</div>
<div class="card-buttons">
<span class="card-links">
<a href="#" class="card-link">READ</a>
<a href="#" class="card-link">BOOKMARK</a>
</span>
<span class="card-buttons">
<span class="card-btns"><a href="#" class="card-btns-link"><i
class="far fa-heart"></i></a></span>
<span class="card-btns"><a href="#" class="card-btns-link"><i
class="fa-solid fa-share"></i></a></span>
<span class="card-btns"><a href="#" class="card-btns-link"><i
class="fa-solid fa-caret-down"></i></a></span>
</span>
</div>
</div>
<div id="overtext-card">
<div class="card-image">
<img src="https://color-components.netlify.app/2.jpg" alt="img" class="img-card">
</div>
<div class="card-content">
<h2 class="card-title">Our Changing Planet</h2>
<h4 class="card-subtitle">by Ayush Raj</h4>
</div>
<p class="card-description">
Nature can refer to the general realm of living plants and animals, and in some cases to the
processes associated with inanimate objects
</p>
<div class="card-buttons">
<span class="card-links">
<a href="#" class="card-link">READ</a>
<a href="#" class="card-link">BOOKMARK</a>
</span>
<span class="card-buttons">
<span class="card-btns"><a href="#" class="card-btns-link"><i
class="far fa-heart"></i></a></span>
<span class="card-btns"><a href="#" class="card-btns-link"><i
class="fa-solid fa-share"></i></a></span>
<span class="card-btns"><a href="#" class="card-btns-link"><i
class="fa-solid fa-caret-down"></i></a></span>
</span>
</div>
<div>
<div id="header-card">
<div class="card-content">
<h2 class="card-title">Our Changing Planet</h2>
<h4 class="card-subtitle">by Ayush Raj</h4>
</div>
<div class="card-image">
<img src="https://color-components.netlify.app/3.jpg" alt="img" class="img-card">
</div>
<p class="card-description">
Nature can refer to the general realm of living plants and animals,and in some cases to the
processes associated with inanimate objects.
</p>
<div class="card-buttons">
<span class="card-links">
<a href="#" class="card-link">READ</a>
<a href="#" class="card-link">BOOKMARK</a>
</span>
<span class="card-buttons">
<span class="card-btns"><a href="#" class="card-btns-link"><i
class="far fa-heart"></i></a></span>
<span class="card-btns"><a href="#" class="card-btns-link"><i
class="fa-solid fa-share"></i></a></span>
<span class="card-btns"><a href="#" class="card-btns-link"><i
class="fa-solid fa-caret-down"></i></a></span>
</span>
</div>
</div>
<div id="horizontal-card">
<div class="card-content">
<img src="https://color-components.netlify.app/4.jpg" alt="img" class="img-card">
<div>
<h2 class="card-title">Our Changing Planet</h2>
<h4 class="card-subtitle">by Ayush Raj</h4>
</div>
</div>
<div class="card-buttons">
<span class="card-links">
<a href="#" class="card-link">READ</a>
<a href="#" class="card-link">BOOKMARK</a>
</span>
<span class="card-buttons">
<span class="card-btns"><a href="#" class="card-btns-link"><i
class="far fa-heart"></i></a></span>
<span class="card-btns"><a href="#" class="card-btns-link"><i
class="fa-solid fa-share"></i></a></span>
<span class="card-btns"><a href="#" class="card-btns-link"><i
class="fa-solid fa-caret-down"></i></a></span>
</span>
</div>
</div>