TheBestTutorials.css Cards
Displaying Cards
John
Architect and engineer
Class | Defines |
---|---|
TheBestTutorials-card | Container for any HTML content (With border) |
TheBestTutorials-card-2 | Container for any HTML content (2px bordered shadow) |
TheBestTutorials-card-4 | Container for any HTML content (4px bordered shadow) |
TheBestTutorials-card-8 | Container for any HTML content (8px bordered shadow) |
TheBestTutorials-card-12 | Container for any HTML content (12px bordered shadow) |
TheBestTutorials-card-16 | Container for any HTML content (16px bordered shadow) |
TheBestTutorials-card-24 | Container for any HTML content (24px bordered shadow) |
Colored Cards
Create paper-like cards with the TheBestTutorials-card classes, and use a TheBestTutorials-color class to add a color:
TheBestTutorials-card-2
TheBestTutorials-card-4
TheBestTutorials-card-8
Example (Yellow Cards)
<p>subhodaya-card</p>
</div>
Card Content
Header
Some text.. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Add containers inside the card to create different sections:
Example
<header class="subhodaya-container subhodaya-blue">
<h1>Header</h1>
</header>
<div class="subhodaya-container">
<p>Lorem ipsum...</p>
<button class="subhodaya-btn">Button</button>
</div>
<footer class="subhodaya-container subhodaya-blue">
<h5>Footer</h5>
</footer>
</div>
Photo Card
The Troll's tongue in Hardanger, Norway
Example
<img src="img_fjords.jpg" alt="Norway">
<div class="subhodaya-container subhodaya-center">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div>
Hover Effect
The TheBestTutorials-hover-shadow class adds a shadow effect on hover - this will make any element look like a card on mouse-over (same style as subhodaya-card-4).
Hover over me!
Example
<p>Hover over me!</p>
</div>
More Examples
Friend Request
John Doe
Example
<div class="subhodaya-container subhodaya-center">
<h3>Friend request</h3>
<img src="img_avatar3.png" alt="Avatar" style="width:80%">
<h5>John Doe</h5>
<button class="subhodaya-btn subhodaya-green">Accept</button>
<button class="subhodaya-btn subhodaya-red">Decline</button>
</div>
</div>
John Doe
1 new friend request
CEO at Mighty Schools. Marketing and Advertising. Seeking a new job and new opportunities.
Example
<header class="subhodaya-container subhodaya-light-grey">
<h3>John Doe</h3>
</header>
<div class="subhodaya-container">
<p>1 new friend request</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="subhodaya-left subhodaya-circle">
<p>President/CEO at Mighty Schools...</p>
</div>
<button class="subhodaya-btn-block subhodaya-dark-grey">+ Connect</button>
</div>