User:Noeth: Difference between revisions

From The Seven Sages of Rome
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
<html>
<html>
<style>
<div class="container">
.bento-item {
            height: 200px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            transition: transform 0.3s ease;
        }
 
        .bento-item:hover {
            transform: scale(1.05);
        }
 
        .bento-tall {
            height: 410px;
        }
</style>
<div class="container my-5">
    <h1 class="text-center mb-4">Bento Grid Layout</h1>
     <div class="row g-4">
     <div class="row g-4">
         <!-- Large item -->
         <!-- Featured Card -->
         <div class="col-md-8">
         <div class="col-md-8">
             <div class="bento-item bento-tall bg-primary">
             <div class="bento-card bg-primary text-white p-4 h-400 d-flex align-items-center justify-content-center">
                 Large Item
                 <h3>Featured Content</h3>
             </div>
             </div>
         </div>
         </div>
         <!-- Two small items -->
 
         <!-- Sidebar Cards -->
         <div class="col-md-4">
         <div class="col-md-4">
             <div class="row g-4">
             <div class="row g-4">
                 <div class="col-12">
                 <div class="col-12">
                     <div class="bento-item bg-success">
                     <div
                         Small Item 1
                        class="bento-card bg-success text-white p-4 h-200 d-flex align-items-center justify-content-center">
                         <h4>Card 1</h4>
                     </div>
                     </div>
                 </div>
                 </div>
                 <div class="col-12">
                 <div class="col-12">
                     <div class="bento-item bg-danger">
                     <div
                         Small Item 2
                        class="bento-card bg-info text-white p-4 h-200 d-flex align-items-center justify-content-center">
                         <h4>Card 2</h4>
                     </div>
                     </div>
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
         <!-- Medium item -->
 
         <!-- Bottom Row Cards -->
         <div class="col-md-4">
         <div class="col-md-4">
             <div class="bento-item bg-warning text-dark">
             <div class="bento-card bg-warning text-dark p-4 h-200 d-flex align-items-center justify-content-center">
                 Medium Item 1
                 <h4>Card 3</h4>
             </div>
             </div>
         </div>
         </div>
        <!-- Medium item -->
         <div class="col-md-4">
         <div class="col-md-4">
             <div class="bento-item bg-info text-dark">
             <div class="bento-card bg-danger text-white p-4 h-200 d-flex align-items-center justify-content-center">
                 Medium Item 2
                 <h4>Card 4</h4>
             </div>
             </div>
         </div>
         </div>
        <!-- Medium item -->
         <div class="col-md-4">
         <div class="col-md-4">
             <div class="bento-item bg-secondary">
             <div class="bento-card bg-secondary text-white p-4 h-200 d-flex align-items-center justify-content-center">
                 Medium Item 3
                 <h4>Card 5</h4>
             </div>
             </div>
         </div>
         </div>

Revision as of 15:38, 24 January 2025

Featured Content

Card 1

Card 2

Card 3

Card 4

Card 5

Retrieved from "https://db.seven-sages-of-rome.org/index.php?title=User:Noeth&oldid=5639"
This page was last edited on 24 January 2025, at 15:38.
Privacy policy
About The Seven Sages of Rome
Disclaimers