DEV Community

artydev
artydev

Posted on

1

Showcase of a site I am creating for my familiars

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar Responsiva con Schede Prodotto</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Contenitore della Navbar -->
    <div class="navbar-container">
        <nav class="navbar">
            <div class="logo"></div>
            <div class="nav-links">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#products">Prodotti</a></li>
                    <li><a href="#services">Servizi</a></li>
                    <li><a href="#contact">Contatti</a></li>
                </ul>
            </div>
            <!-- Icona del Menu Hamburger -->
            <div class="hamburger" id="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
    </div>

    <!-- Parallax Section -->
<section class="parallax">
    <div class="logo-container">
        <img src="https://via.placeholder.com/150x150?text=Logo" alt="TermoClima Logo" class="logo-image">
    </div>
</section>

    <!-- Contenuto della Pagina con Schede Prodotto -->
    <div class="content">
        <!-- Sezione Prodotto -->
        <section id="products" class="product-section">
            <h1>I Nostri Prodotti</h1>
            <div class="product-grid">
                <!-- Scheda Prodotto 1 -->
                <section class="product-card">
                    <img src="https://via.placeholder.com/300" alt="Prodotto 1">
                    <h2>Prodotto 1</h2>
                    <p>Questa è una descrizione del prodotto 1. È un ottimo prodotto.</p>
                    <span class="price">€29,99</span>
                    <button class="buy-btn">Acquista Ora</button>
                </section>
                <!-- Scheda Prodotto 2 -->
                <section class="product-card">
                    <img src="https://via.placeholder.com/300" alt="Prodotto 2">
                    <h2>Prodotto 2</h2>
                    <p>Questa è una descrizione del prodotto 2. È un prodotto fantastico.</p>
                    <span class="price">€39,99</span>
                    <button class="buy-btn">Acquista Ora</button>
                </section>
                <!-- Scheda Prodotto 3 -->
                <section class="product-card">
                    <img src="https://via.placeholder.com/300" alt="Prodotto 3">
                    <h2>Prodotto 3</h2>
                    <p>Questa è una descrizione del prodotto 3. È un prodotto incredibile.</p>
                    <span class="price">€49,99</span>
                    <button class="buy-btn">Acquista Ora</button>
                </section>
                  <!-- Scheda Prodotto 1 -->
                <section class="product-card">
                    <img src="https://via.placeholder.com/300" alt="Prodotto 1">
                    <h2>Prodotto 1</h2>
                    <p>Questa è una descrizione del prodotto 1. È un ottimo prodotto.</p>
                    <span class="price">€29,99</span>
                    <button class="buy-btn">Acquista Ora</button>
                </section>
                <!-- Scheda Prodotto 2 -->
                <section class="product-card">
                    <img src="https://via.placeholder.com/300" alt="Prodotto 2">
                    <h2>Prodotto 2</h2>
                    <p>Questa è una descrizione del prodotto 2. È un prodotto fantastico.</p>
                    <span class="price">€39,99</span>
                    <button class="buy-btn">Acquista Ora</button>
                </section>
                <!-- Scheda Prodotto 3 -->
                <section class="product-card">
                    <img src="https://via.placeholder.com/300" alt="Prodotto 3">
                    <h2>Prodotto 3</h2>
                    <p>Questa è una descrizione del prodotto 3. È un prodotto incredibile.</p>
                    <span class="price">€49,99</span>
                    <button class="buy-btn">Acquista Ora</button>
                </section>
                  <!-- Scheda Prodotto 1 -->
                <section class="product-card">
                    <img src="https://via.placeholder.com/300" alt="Prodotto 1">
                    <h2>Prodotto 1</h2>
                    <p>Questa è una descrizione del prodotto 1. È un ottimo prodotto.</p>
                    <span class="price">€29,99</span>
                    <button class="buy-btn">Acquista Ora</button>
                </section>
                <!-- Scheda Prodotto 2 -->
                <section class="product-card">
                    <img src="https://via.placeholder.com/300" alt="Prodotto 2">
                    <h2>Prodotto 2</h2>
                    <p>Questa è una descrizione del prodotto 2. È un prodotto fantastico.</p>
                    <span class="price">€39,99</span>
                    <button class="buy-btn">Acquista Ora</button>
                </section>
                <!-- Scheda Prodotto 3 -->
                <section class="product-card">
                    <img src="https://via.placeholder.com/300" alt="Prodotto 3">
                    <h2>Prodotto 3</h2>
                    <p>Questa è una descrizione del prodotto 3. È un prodotto incredibile.</p>
                    <span class="price">€49,99</span>
                    <button class="buy-btn">Acquista Ora</button>
                </section>
            </div>
        </section>
    </div>
<!-- Footer Section -->
<footer class="footer">
    <div class="footer-content">
        <div class="footer-logo">
            <h2>TermoClima</h2>
            <p>Soluzioni per il clima e il comfort della tua casa.</p>
        </div>
        <div class="footer-links">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#products">Prodotti</a></li>
                <li><a href="#services">Servizi</a></li>
                <li><a href="#contact">Contatti</a></li>
            </ul>
        </div>
        <div class="footer-contact">
            <h3>Contatti</h3>
            <p><strong>Email:</strong> info@termoclima.it</p>
            <p><strong>Telefono:</strong> +39 123 456 789</p>
        </div>
        <div class="footer-social">
            <h3>Seguici</h3>
            <div class="social-icons">
                <a href="#"><img src="https://via.placeholder.com/24" alt="Facebook"></a>
                <a href="#"><img src="https://via.placeholder.com/24" alt="Instagram"></a>
                <a href="#"><img src="https://via.placeholder.com/24" alt="Twitter"></a>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <p>&copy; 2024 TermoClima. Tutti i diritti riservati.</p>
    </div>
</footer>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode
/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --base-green: hsl(120, 10%, 40%); /* Base green color - slightly muted for a more professional feel */

    /* Variations based on navbar-background */
    --navbar-background: hsl(120, 40%, 28%); /* Darker green for navbar */
    --navbar-background-light: hsl(20, 4%, 3%); /* Slightly lighter variation for subtle contrasts */
    --hover-background: hsl(120, 40%, 35%); /* Darker green on hover for better interaction */
    --button-background: var(--base-green); /* Green button */
    --button-hover-background: hsl(120, 50%, 50%); /* Slightly darker green on button hover */

    /* Background and text colors */
    --background-color: hsl(210, 20%, 95%); /* Light background for a clean look */
    --navbar-text-color: hsl(0, 0%, 100%); /* White text for navbar */

    /* Header and card colors */
    --header-color: hsl(120, 45%, 40%); /* A bit muted medium green for headers */
    --header-background: hsl(120, 40%, 25%); /* Darker background for header sections */
    --card-background: hsl(0, 0%, 100%); /* White for product cards */
    --card-title-color: hsl(120, 30%, 15%); /* Darker green for card titles, enhancing readability */
    --card-description-color: hsl(120, 30%, 35%); /* Dim green for descriptions */

    /* Price color */
    --price-color: hsl(120, 50%, 40%); /* Lighter green for prices, ensuring visibility */

    /* Accent colors */
    --accent-color: hsl(30, 100%, 50%); /* A warm orange for call-to-action elements */
    --warning-color: hsl(0, 100%, 50%); /* Red for errors or warnings */

    /* Additional variations for interaction */
    --dropdown-background: hsl(120, 40%, 30%); /* Background for dropdown menus */
    --input-background: hsl(210, 20%, 100%); /* Light background for inputs */
    --input-border-color: hsl(120, 40%, 40%); /* Border color for input fields */
}


/* Body styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: var(--background-color);
    color: #333; /* Text color */
}


/* Parallax Section */
.parallax {
        background-image: url('https://images.pexels.com/photos/338936/pexels-photo-338936.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); /* Replace with your image URL */
    height: 400px; /* Height of the parallax section */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.logo-image {
    width: 150px;
    height: 150px;
    opacity: 0.9; /* Slight transparency for effect */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Adds a shadow for better contrast */
    position:relative;
    top:1.5rem
}

/* Optional Parallax Overlay Text Styling */
.parallax h2 {
    color: white;
    font-size: 2.5rem;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* Body styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: var(--background-color);
    color: #333; /* Text color */
    margin: 0;
}


h1 {
  margin-top:4rem;
}

/* Navbar styling */
.navbar-container {
    width: 100%;
    display: flex;
    justify-content: center;
    position: fixed;
    top:0;
    z-index: 1000;
    background-color: var(--navbar-background);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.navbar {
    width: 80%;
    max-width: 1200px;
    padding: 15px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Absolute positioning for the logo */
.logo {
    font-size: 1.8rem;
    color: var(--navbar-text-color);
    font-weight: bold;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Default Navigation Links */
.nav-links {
    flex-grow: 1;
}

.nav-links ul {
    display: flex; /* Use flex to arrange links horizontally */
    list-style: none;
    justify-content: center; /* Center links */
}

.nav-links li {
    margin-left: 20px; /* Space between nav items */
}

.nav-links li a {
    color: var(--navbar-text-color);
    text-decoration: none;
    padding: 12px 20px;
    display: block;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.nav-links li a:hover {
    background-color: var(--hover-background);
    border-radius: 3px;

}

/* Hamburger menu (positioned on the right) */
.hamburger {
    display: none; /* Hidden by default, shown in media query */
    flex-direction: column;
    cursor: pointer;
    margin-left: auto; /* Push hamburger to the right */
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: var(--navbar-text-color); /* White bars */
    margin: 4px 0;
    transition: all 0.3s ease;
}

/* Content styling */
.content {
    margin-top: 100px; /* Margin to accommodate fixed navbar */
    padding: 20px;
    width:100%;
    max-width:1640px;
    margin:0 auto;
}

/* Product Section */
.product-section h1 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5rem;
    color: var(--header-color);
}

/* Product Grid Layout */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Product Card Styling */
.product-card {
    background-color: var(--card-background);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-card:hover {
    transform: translateY(-10px);
    transition: all 0.53s ease;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}



.product-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
}

.product-card h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--card-title-color);
}

.product-card p {
    font-size: 1rem;
    color: var(--card-description-color);
    margin-bottom: 15px;
}

.product-card .price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--price-color);
    margin-bottom: 15px;
    display: block;
}

.product-card .buy-btn {
    padding: 10px 20px;
    background-color: var(--button-background);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.product-card .buy-btn:hover {
    background-color: var(--button-hover-background);
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Hamburger Menu appears */
    .hamburger {
        display: flex;
    }

    /* Hide the nav links by default */
    .nav-links {
        display: none; /* Hidden by default */
        flex-direction: column; /* Stack links vertically */
        width: 100%; /* Full width */
        background-color: var(--navbar-background); /* Forest green with transparency */
        position: absolute;
        top: 62px; /* Adjust based on your navbar height */
        left: 0;
        z-index: 1000;
        padding: 10px 0; /* Add padding for the dropdown */
    }

    /* Show nav when hamburger is clicked */
    .nav-links.show {
        display: flex; /* Show nav when hamburger is clicked */
          border-top:1px solid rgba(0,0,0,0.2);
    }

  .nav-links ul {
    display: block;

  }

    .nav-links li {
        margin: 10px 0; /* Space between vertical items */
        text-align: center; /* Center text in the vertical menu */
    }

    .nav-links li a {
        padding: 15px 20px;
    }
}


/* Footer Styling */
.footer {
    background-color: var(--navbar-background);
    color: var(--navbar-text-color);
    padding: 40px 20px;
    text-align: center;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-logo h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--header-color);
}

.footer-logo p {
    font-size: 1rem;
    color: var(--card-description-color);
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links ul li {
    margin: 10px 0;
}

.footer-links ul li a {
    color: var(--navbar-text-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-links ul li a:hover {
    color: var(--button-hover-background);
}

.footer-contact h3, .footer-social h3 {
    margin-bottom: 10px;
    color: var(--header-color);
}

.footer-contact p {
    font-size: 1rem;
    margin: 5px 0;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.social-icons a {
    display: inline-block;
}

.footer-bottom {
    margin-top: 20px;
    border-top: 1px solid var(--hover-background);
    padding-top: 10px;
}

.footer-bottom p {
    font-size: 0.9rem;
    color: var(--card-description-color);
}

/* Responsive Styling for Footer */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr; /* Stack all footer sections vertically */
    }
}


Enter fullscreen mode Exit fullscreen mode

Demo

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Retry later