DEV Community

artydev
artydev

Posted on

Showcase of a site I am creating for my familiars

#html #css 
<!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

Top comments (0)

Read next

hosseinyazdi profile image

9 Lesser Known, but Powerful Color Tools (You'll Regret Missing) 🎨🔥

Hossein Yazdi -

jsha profile image

Grid Basics. Track sizes

Julia Shlykova -

andrewelans profile image

Inject HTML snippet from file

Andrew Elans -

softheartengineer profile image

Mastering CSS @property Binding: A Guide for Web Developers

Soft Heart Engineer -