🔥 Responsive Card Grid Using Flexbox | Modern UI Design with Hover Effect

Demo :


Click Video 👇👇👇













🎯 Features:

✅ Fully responsive on all devices 📱💻
✅ Smooth hover effect for a modern look 🔥
✅ Perfect for portfolios, blogs, and product showcases


Code :


📂 Folder Structure:

/responsive-card-grid  

│── index.html  

│── style.css  


HTML:


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Responsive Card Grid with Flexbox</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="card-container">

        <div class="card">

            <img src="https://via.placeholder.com/300" alt="Card Image">

            <h2>Card Title 1</h2>

            <p>This is a description of the card content.</p>

        </div>

        <div class="card">

            <img src="https://via.placeholder.com/300" alt="Card Image">

            <h2>Card Title 2</h2>

            <p>This is a description of the card content.</p>

        </div>

        <div class="card">

            <img src="https://via.placeholder.com/300" alt="Card Image">

            <h2>Card Title 3</h2>

            <p>This is a description of the card content.</p>

        </div>

        <div class="card">

            <img src="https://via.placeholder.com/300" alt="Card Image">

            <h2>Card Title 4</h2>

            <p>This is a description of the card content.</p>

        </div>

    </div>

</body>

</html>


CSS (style.css):


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


body {

    font-family: Arial, sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    background-color: #f7f7f7;

}


.card-container {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 20px;

    max-width: 1200px;

    padding: 20px;

}


.card {

    background-color: white;

    border-radius: 8px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    width: calc(25% - 20px);

    text-align: center;

    padding: 20px;

    transition: transform 0.3s ease;

}


.card img {

    width: 100%;

    border-radius: 8px;

    object-fit: cover;

}


.card h2 {

    margin-top: 15px;

    font-size: 1.2em;

    color: #333;

}


.card p {

    font-size: 0.9em;

    color: #777;

}


.card:hover {

    transform: translateY(-10px);

}


@media screen and (max-width: 1024px) {

    .card {

        width: calc(33.33% - 20px);

    }

}


@media screen and (max-width: 768px) {

    .card {

        width: calc(50% - 20px);

    }

}


@media screen and (max-width: 480px) {

    .card {

        width: 100%;

    }

} 

Comments

Post a Comment

Popular posts from this blog

Is This News Real or Fake? 🤖 AI Exposes the Truth | FuzzuTech Python App Demo

Image
  Demo : Click Video 👇👇👇 Code : import tkinter as tk from tkinter import messagebox, ttk import joblib import os from sklearn.feature_extraction.text import TfidfVectorizer from sklearn.linear_model import PassiveAggressiveClassifier import pandas as pd from sklearn.model_selection import train_test_split # Check if model exists, else train it MODEL_PATH = "fake_news_model.pkl" def train_and_save_model():     # For demo purpose, we'll create a small dummy dataset inline     data = {         'text': [             'The economy is doing well and jobs are increasing',             'Aliens have landed on Earth and taken over the government',             'New vaccine proves to be 99% effective',             'Scientists found cure for cancer last year',             'Politician involved in scanda...
Read more

🚨 Python Intrusion Detection System (IDS) – Real-Time ML + Tkinter GUI Project | FuzzuTech

Image
  Demo : Click Video 👇👇👇 Features: ✔ SEO keywords included (IDS, ML, Tkinter, Python GUI) ✔ Embedded YouTube Short ✔ Full code snippet (main.py) ✔ Download links (GitHub/GDrive optional) ✔ Call-to-action: Subscribe + Follow socials Code : """ main.py Single-file IDS demo: - Generates synthetic network-like dataset (if missing) - Trains IsolationForest model and saves model_iforest.pkl - Runs a modern-looking Tkinter GUI to simulate live packets,   score them with the model and highlight anomalies. Usage: 1) Create and activate a venv (recommended) 2) pip install -r requirements.txt 3) python main.py """ import os import threading import time import random import sys import queue from pathlib import Path import tkinter as tk from tkinter import ttk, messagebox # --- third-party libs --- try:     import numpy as np     import pandas as pd     from sklearn.ensemble import IsolationForest     import joblib except Exception as e:...
Read more

🚀 Simple Login & Registration System in Python Tkinter 📱

Image
   Demo : Click Video 👇👇👇 ✅ Features: ✔️ Simple Login UI 🖥️ ✔️ Secure User Authentication 🔒 ✔️ SQLite Database Integration 📂 ✔️ User Registration Form ✍️ Code : import tkinter as tk from tkinter import messagebox from tkinter import ttk import sqlite3 # Global variables root = tk.Tk() root.withdraw()  # Hide main root window login_window = None home_window = None settings_window = None planner_window = None # Database setup def create_db():     conn = sqlite3.connect('user_data.db')     c = conn.cursor()     c.execute('''CREATE TABLE IF NOT EXISTS users (username TEXT, password TEXT)''')     conn.commit()     conn.close() # User registration def register_user():     username = reg_username_entry.get()     password = reg_password_entry.get()     if username and password:         conn = sqlite3.connect('user_data.db')         c = conn.cursor...
Read more