Modèle de site Web HTML et CSS

Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 April 2025

Barre de navigation moderne HTML CSS

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <script src="bon non lo so.js"></script>
    <link rel="stylesheet" href="stile.css">
</head>
<body>

<header align="center">
        <a href="#" class="btn"></a>
    </header>
    <nav class="fixed-navbar">
        <button class="button"><a href="#home" style="color: #fff">Che cos'è</a></button>
        <button class="button button2"><a href="#cause" style="color: #fff"> Cause</a></button>
        <button class="button button3"><a href="#fasi" style="color: #fff"> fasi</a></button>
        <button class="button button4"><a href="#sintomi" style="color: #fff">Sintomi</a></button>
        <button class="button button5"><a href="#trattamento" style="color: #fff">Trattamento</a></button>
    </nav>

<body>
        <div class="background-image">
            <h1>LA LUDOPATIA</h1>
        </div>   
    </body>

<section id="home">
    <h2 style="color: #000;">CHE COS'È?</h2> 
    <p> 
        La ludopatia, nota anche come gioco d'azzardo patologico, è un disturbo caratterizzato da un comportamento incontrollabile di gioco d'azzardo che può causare problemi significativi nella vita di una persona. Questo comportamento può manifestarsi con giochi d'azzardo tradizionali, scommesse sportive, giochi online o qualsiasi altra forma di gioco che comporti rischi finanziari. La ludopatia può portare a gravi conseguenze personali, finanziarie e sociali, compresi problemi di salute mentale, indebitamento, perdita di lavoro, problemi familiari e isolamento sociale. È importante riconoscere i segni della ludopatia e cercare aiuto professionale se si sospetta di avere questo disturbo o se si conosce qualcuno che ne è affetto. Il trattamento per la ludopatia può includere terapia cognitivo-comportamentale, supporto psicologico, gruppi di sostegno e altre forme di intervento psicologico.
    </p>
</section>

<section id="cause">
    <h2 style="color: #000;">LE CAUSE</h2>
    <h4>La ludopatia è influenzata da diversi fattori, tra cui:</h4>
</section>

<div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="prove html scuola/imgagini/cervello+dna.jpg" class="card-image" alt="Fattori biologici">
      </div>
      <div class="flip-card-back">
        <h2>Fattori biologici</h2>
        <p>Alcune persone possono avere una predisposizione genetica alla dipendenza da gioco d'azzardo, poiché possono essere più vulnerabili agli effetti gratificanti e alle reazioni chimiche nel cervello associate al gioco d'azzardo.</p>
      </div>
    </div>
  </div>
  
  
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="prove html scuola/imgagini/giocatoredidadi.jpg" class="card-image" alt="Fattori Psicologici">
      </div>
      <div class="flip-card-back">
        <h2>Fattori Psicologici</h2>
        <p>L'ansia, la depressione, lo stress e altri disturbi psicologici possono contribuire allo sviluppo della ludopatia. Il gioco d'azzardo può diventare una forma di evasione o un modo per alleviare temporaneamente i sintomi emotivi negativi.</p>
      </div>
    </div>
  </div>
  
  
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="prove html scuola/imgagini/casinò.png" class="card-image" alt="Fattori Ambientali">
      </div>
      <div class="flip-card-back">
        <h2>Fattori Ambientali</h2>
        <p>L'accessibilità ai giochi d'azzardo, la promozione aggressiva da parte dell'industria del gioco d'azzardo, l'influenza dei pari e la cultura del gioco d'azzardo nella società possono influenzare lo sviluppo della ludopatia.</p>
      </div>
    </div>
  </div>
  

<section id="fasi">
    <h2 style="color: #000;">FASI DEL GIOCO D'AZZARDO PATOLOGICO </h2> 
</section>
      <div class="container">
          <div class="phases">
              <div class="phase">
                  <h3 class="subtitle">Fase vincite occasionali:</h3>
                  <p>Inizialmente, il giocatore può sperimentare vincite occasionali, che aumentano l'eccitazione e rafforzano l'idea che sia possibile guadagnare dal gioco d'azzardo.</p>
              </div>
              <div class="phase">
                  <h3 class="subtitle">Fase di perdita del controllo:</h3>
                  <p>Il giocatore inizia a perdere gradualmente il controllo sul gioco d'azzardo, scommettendo somme sempre più grandi e dedicando sempre più tempo al gioco.</p>
              </div>
              <div class="phase">
                  <h3 class="subtitle">Fase di disperazione:</h3>
                  <p>In questa fase, il giocatore può sperimentare gravi conseguenze finanziarie, problemi interpersonali, perdita di lavoro e difficoltà emotive come depressione e ansia.</p>
              </div>
              <div class="phase">
                  <h3 class="subtitle">Fase di rassegnazione:</h3>
                  <p>In questa fase, il giocatore accetta che il gioco d'azzardo abbia causato danni significativi nella sua vita, ma può ancora faticare a smettere o a cercare aiuto.</p>
              </div>
          </div>
      </div>
  </body>
  </html>

<section id="sintomi">
    <h2 style="color: #000;">I SINTOMI</h2>
        <h4>possono includere:</h4>
</section>
        <div class="symptoms-list">
            <div class="symptom">
                <div class="symptom-icon">🤯</div>
                <div class="symptom-description">Incapacità di controllare o fermare il gioco d'azzardo.</div>
            </div>
            <div class="symptom">
                <div class="symptom-icon">🔗</div>
                <div class="symptom-description">Pensieri possessivi sul gioco d'azzardo.</div>
            </div>
            <div class="symptom">
                <div class="symptom-icon">💳</div>
                <div class="symptom-description">Aumento della frequenza e dell'importo delle scommesse per ottenere l'eccitazione desiderata.</div>
            </div>
            <div class="symptom">
                <div class="symptom-icon">😡</div>
                <div class="symptom-description">Irritabilità o agitazione quando si cerca di smettere o ridurre il gioco d'azzardo.</div>
            </div>
            <div class="symptom">
                <div class="symptom-icon">🙁</div>
                <div class="symptom-description">Meno coinvolgimento nelle attività sociali, lavorative o familiari a causa del gioco d'azzardo.</div>
            </div>
        </div>
    </div>
</section>
        

<section id="trattamento">
        <h2 style="color: #000;">IL TRATTAMRNTO</h2>
        <h3> solitamente nella ludopatia il trattamento coinvolge una combinazione di approcci terapeutici</h3>
        <h3>Ecco alcuni metodi comuni:</h3>
</section>
    <div class="container">
      <div class="card">
        <div class="content">
          <h3 style="color: #1f9f8e;">Terapia di gruppo</h3>
          <p>Partecipare a gruppi di sostegno o a programmi di terapia di gruppo può offrire un ambiente sicuro per condividere esperienze, fornire sostegno reciproco e imparare strategie di recupero da altre persone che affrontano la stessa lotta.</p>
        </div>
      </div>
      <div class="card">
        <div class="content">
          <h3 style="color: #1f9f8e;">Terapia familiare</h3>
          <p>Coinvolgere i membri della famiglia nel processo di trattamento può aiutare a comprendere meglio il problema, migliorare la comunicazione e affrontare le dinamiche familiari associate alla ludopatia. In alcuni casi, possono essere prescritti farmaci per affrontare sintomi correlati come l'ansia, la depressione o il controllo.</p>
        </div>
      </div>
      <div class="card">
        <div class="content">
          <h3 style="color: #1f9f8e;">Terapia cognitivo-comportamentale (CBT)</h3>
          <p>Questa forma di terapia mira a identificare e modificare i pensieri e i comportamenti negativi associati al gioco d'azzardo. Si concentra anche sullo sviluppo di strategie di coping alternative e sulla gestione degli impulsi.</p>
        </div>
      </div>
      <div class="card">
        <div class="content">
          <h3 style="color: #1f9f8e;">Farmaci</h3>
          <p>In alcuni casi, possono essere prescritti farmaci per affrontare sintomi correlati come l'ansia, la depressione o il controllo degli impulsi. Tuttavia, i farmaci non sono la soluzione principale per il trattamento della ludopatia e vengono utilizzati solo in combinazione con la terapia.</p>
        </div>
      </div>
    </div>
</body>
</html>

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */

body {
    margin: 0;
    background: #f5f5f5;
    color: #4e4e4e;
    font: 18px/27px 'Arial', sans-serif;
    text-align: center;
  }

h4,
  h5,
  h6 {
    color: #1e1e1e;
  }
  
  /*header+nav*/
  
  header {
    background-color: #383232;
    color: #fff;
    padding: 15px;
    text-align: left;
    position: sticky;
    height: auto;
  }
  
  nav {
    background-color: #404040;
    color: #fff;
  }
  
  nav ul {
    list-style-type: none;
    margin: 0%;
    padding: 0;
  }
  
  nav li a {
    text-decoration: none;
    color: #fff;
  }
  
  nav li:hover {
    background-color: transparent
  }
  
  nav li {
    display: inline-block;
    padding: 15px;
  }
  
  nav#slide-menu {
    position: fixed;
    top: 0;
    left: -100px;
    bottom: 0;
    display: block;
    float: left;
    width: 100%;
    max-width: 284px;
    height: 100%;
    transition: all 300ms;
  }
  
  nav#slide-menu > ul {
    display: block;
    margin: 40px;
    padding: 0;
    list-style: none;
    opacity: 0.5;
    transition: all 300ms;
  }
  
  nav#slide-menu > ul li {
    color: #dfe5eb;
    padding: 6px 0;
    cursor: pointer;
  }
  
  nav#slide-menu > ul li:hover {
    color: #59e9df;
  }
  
  nav#slide-menu > ul li:before {
    font-family: "ico";
    font-style: normal;
    font-weight: normal;
    speak-as: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    color: #59e9df;
    margin-right: 12px;
    text-align: center;
    font-variant: normal;
    font-size: 0.75em;
    text-transform: none;
    line-height: 1em;
  }
  
  nav#slide-menu > ul li.sep {
    margin-top: 7px;
    padding-top: 14px;
    border-top: 1px solid #6b7b8d;
  }
  
  body.menu-active nav#slide-menu {
    left: 0px;
  }
  
  body.menu-active nav#slide-menu ul {
    left: 0px;
    opacity: 1;
  }
  
  /*button*/
  
  button {
    background-color: transparent;
    border: 3px ridge #149CEA;
    border-radius: 0.3em;
    color: #fff;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    outline: none;
    width: 10em;
    position: relative;
    height: 3.5em;
    transition: 1s;
    font-size: 16px;
    font-weight: bold;
  }
  
  .button2 {
    background-color: transparent;
  }
  
  .button3 {
    background-color: transparent;
  }
  
  .button4 {
    background-color: transparent;
  }
  
  .button5 {
    background-color: transparent;
  }
  
  button::after {
    content: "";
    position: absolute;
    top: -8.5px;
    left: 3%;
    width: 95%;
    height: 40%;
    background-color: #404040;
    transition: 0.5s;
    transform-origin: center;
  }
  
  button::before {
    content: "";
    transform-origin: center;
    position: absolute;
    top: 70.9%;
    left: 3%;
    width: 95%;
    height: 40%;
    background-color: #404040;
    transition: 0.5s
  }

button:hover::before, button:hover::after {
  transform: scale(0)
}

button:hover {
  box-shadow: inset 0px 0px 25px #1479EA;
}

/*immagine*/

.background-image {
    position: relative;
    height: 650px; /* Altezza desiderata del contenitore */
    text-align: center;
    color: white; /* Colore del testo */
}

.background-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://orvietosi.it/wp-content/uploads/2018/08/ludopatia.jpg); 
    background-size: cover;
    background-position: center;
    filter: brightness(50%); /* Imposta la luminosità dell'immagine al 50% */
}

h1 {
    font-size:50px; /* Dimensione del titolo */
    position: absolute;
    text-transform: capitalize;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    /* Centra il titolo sia verticalmente che orizzontalmente */
    z-index: 1;
}
  
/*siamo al 2° pezzo (about)*/

/* Contenitore della flip card */
  
.flip-card {
  background-color: transparent;
  width: 400px; /*larghrzza */
  height: 300px;  /*altezza*/
  perspective: 1000px; /* Aggiunge la profondità */
  display: inline-block;
  margin: 20px;
}

/* Interno della flip card */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* Lato frontale della flip card */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Nasconde il lato nascosto */
}

/* Lato frontale */
.flip-card-front {
  background-color: #bbb; /* Colore di sfondo */
  color: rgb(255, 255, 255); /* Colore del testo */
}

/* Lato posteriore */
.flip-card-back {
  background-color: #000; /* Colore di sfondo */
  color: white; /* Colore del testo */
  transform: rotateY(180deg); /* Ruota di 180 gradi */
  
}

/* Quando passi sopra la flip card, applica l'effetto flip */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Immagine all'interno della flip card */
.card-image {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.flip-card-back p{
  margin: 20px;
}

/*3° pezzo (fasi)*/

body {
  font-family: Arial, sans-serif;
  background-color: #f3f3f3;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
  color: #02886f;
  text-align: center;
}

.subtitle {
  color: #02886f;
}

.phase {
  margin-bottom: 20px;
}

.phase p {
  text-align: justify;
}

/*4° pezzo (sintomi)*/
body {
  font-family: Arial, sans-serif;
  background-color: #f3f3f3;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
  color: #02886f;
  text-align: center;
}

.subtitle {
  color: #02886f;
}

.subtitle::after {
  content: '';
  display: block;
  width: 50px;
  height: 2px;
  background-color: #02886f;
  margin: 10px auto;
}

.phase {
  margin-bottom: 20px;
}

.phase p {
  text-align: justify;
}

/*4° pezzo (sintomi)*/

.symptoms-list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.symptom {
  width: calc(33.33% - 40px);
  margin: 20px;
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  border: 2px solid #02886f; /* bordo */
  text-align: center;
}

.symptom:hover {
  transform: translateY(-5px);
}

.symptom-icon {
  font-size: 2em;
  margin-bottom: 10px;
  text-align: center;
}

.symptom-description {
  font-size: 1.1em;
  line-height: 1.5;
}

/*trattamento ultimo pezzo*/

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin: 20px auto;
  max-width: 1200px;
}

.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px;
  overflow: hidden;
  width: calc(50% - 40px);
  max-width: 500px;
}

.content {
  padding: 20px;
}

Modèle de site Web HTML et CSS

Recommandé

Un code de Metehan

Un code de Metehan

Barre de navigation moderne HTML CSS

HTML

CSS

JS

Recommandé

Un code de Metehan

Un code de Metehan

Barre de navigation moderne HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS