Perch Oslo una Smart City 1 by @matteo0 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

Inserisce un commento nel codice
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
autofocusAttiva un elemento al caricamento della pagina.
hrefDefinisce l'URL della risorsa/pagina di destinazione.
<pre>Indica una parte di testo preformattato
<em>Formatta il testo in corsivo/italico enfatizzato

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Heads and Tails

Questa è una pagina dimostrativa

angoli e shadow

Mappa Visiva (Wire,CTA) - Moduli W

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>

<html lang="it">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>OSLO - Smart City</title>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&amp;family=Source+Sans+3:wght@300;400;600&amp;display=swap" rel="stylesheet"/>
<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Source Sans 3', sans-serif;
            background: #f5f5f5;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        .slide-container {
            position: relative;
            width: 1280px;
            height: 720px;
            overflow: hidden;
            background: #000;
        }
        
        /* Background image with overlay */
        .bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 1280px;
            height: 720px;
            background-image: url("https://page.gensparksite.com/slides_images/52cfe61fff2f799e2ef132dad6f702a7.webp");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 1;
        }
        
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 1280px;
            height: 720px;
            background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.5) 100%);
            z-index: 2;
        }
        
        /* Decorative elements */
        .deco-line {
            position: absolute;
            height: 2px;
            background: rgba(255,255,255,0.3);
            z-index: 3;
        }
        
        /* Main content container */
        .content-wrapper {
            position: absolute;
            top: 242px;
            left: 190px;
            text-align: center;
            z-index: 10;
            width: 900px;
            height: 360px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        /* Title styling */
        .main-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 120px;
            font-weight: 700;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 15px;
            margin-bottom: 20px;
            text-shadow: 0 4px 20px rgba(0,0,0,0.3);
            position: relative;
            display: inline-block;
            line-height: 1.1;
        }
        
        .main-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, #00ff88, #00ccff);
            border-radius: 2px;
        }
        
        /* Subtitle */
        .subtitle {
            font-family: 'Montserrat', sans-serif;
            font-size: 32px;
            font-weight: 300;
            color: #ffffff;
            letter-spacing: 8px;
            margin-bottom: 40px;
            text-transform: uppercase;
        }
        
        .subtitle span {
            color: #00ff88;
            font-weight: 600;
        }
        
        /* Authors */
        .authors {
            font-size: 18px;
            color: rgba(255,255,255,0.8);
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }
        
        .authors i {
            color: #00ff88;
            font-size: 16px;
        }
        
        .authors span {
            font-weight: 400;
        }
        
        .authors strong {
            color: #ffffff;
            font-weight: 600;
        }
        
        /* Nordic design elements */
        .nordic-pattern {
            position: absolute;
            bottom: 40px;
            left: 40px;
            width: 100px;
            height: 20px;
            display: flex;
            gap: 10px;
            z-index: 5;
            align-items: center;
        }
        
        .pattern-dot {
            width: 8px;
            height: 8px;
            background: rgba(255,255,255,0.6);
            border-radius: 50%;
        }
        
        .pattern-dot.active {
            background: #00ff88;
        }
        
        /* Logo area */
        .logo-area {
            position: absolute;
            top: 40px;
            left: 1100px;
            width: 140px;
            height: 30px;
            z-index: 5;
        }
        
        .logo-text {
            font-family: 'Montserrat', sans-serif;
            font-size: 14px;
            color: rgba(255,255,255,0.8);
            letter-spacing: 2px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
        }
        
        .logo-icon {
            color: #00ff88;
            margin-right: 8px;
        }
        
        /* Floating elements */
        .floating-icon {
            position: absolute;
            font-size: 28px;
            color: rgba(255,255,255,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Gradient overlay for text readability */
        .text-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 1280px;
            height: 720px;
            background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
            z-index: 1;
        }
    </style>
</head>
<body>
<div class="slide-container">
<!-- Background image -->
<div class="bg-image" data-object="true" data-object-type="image"></div>
<!-- Overlay -->
<div class="overlay" data-object="true" data-object-type="shape"></div>
<!-- Text overlay -->
<div class="text-overlay" data-object="true" data-object-type="shape"></div>
<!-- Decorative lines -->
<div class="deco-line" data-object="true" data-object-type="shape" style="top: 120px; left: 80px; width: 200px;"></div>
<div class="deco-line" data-object="true" data-object-type="shape" style="top: 600px; left: 1000px; width: 200px;"></div>
<!-- Floating icons - resized and placed carefully to avoid overlap and edge issues -->
<div class="floating-icon" data-object="true" data-object-type="icon" style="top: 120px; left: 120px; width: 40px; height: 40px;">
<i class="fas fa-leaf"></i>
</div>
<div class="floating-icon" data-object="true" data-object-type="icon" style="top: 210px; left: 1050px; width: 40px; height: 40px;">
<i class="fas fa-city"></i>
</div>
<div class="floating-icon" data-object="true" data-object-type="icon" style="top: 500px; left: 180px; width: 40px; height: 40px;">
<i class="fas fa-globe-europe"></i>
</div>
<!-- Logo area -->
<div class="logo-area" data-object="true" data-object-type="textbox">
<div class="logo-text">
<i class="fas fa-map-marker-alt logo-icon"></i>
<span>Norway</span>
</div>
</div>
<!-- Main content -->
<div class="content-wrapper" data-object="true" data-object-type="textbox">
<div class="main-title">OSLO</div>
<div class="subtitle"><span>Smart</span> City</div>
<div class="authors">
<i class="fas fa-users"></i>
<span>By <strong>Matteo Menacho</strong> &amp; <strong>Giorgio Bettoni</strong></span>
</div>
</div>
<!-- Nordic pattern -->
<div class="nordic-pattern" data-object="true" data-object-type="shape">
<div class="pattern-dot active"></div>
<div class="pattern-dot"></div>
<div class="pattern-dot"></div>
<div class="pattern-dot"></div>
<div class="pattern-dot"></div>
</div>
</div>
</body>
</html>