Meucci Social by @lion-h - Codewith.it

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

References

crossoriginGestisce richieste tra documenti provenienti da origini differenti.
<em>Formatta il testo in corsivo/italico enfatizzato
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
widthImposta la larghezza di un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

Il Fiume dell\\\\

Home Page di Cristian Moraru\\

Loading Animation

Pagina di esempio

pag. 2 progetto inf

Calcolatrice php

Donazioni per il compleanno di Emm

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Meucci Social</title>
  </head>

  <body>
    <div class="container">
      <header>
        <h1>Meucci Social</h1>
      </header>
      <nav>
        <ul>
          <li>Home</li>
          <li>Login</li>
          <li>Register</li>
        </ul>
      </nav>

      <h3>Benvenuto nel mio profilo</h3>

      <div class="profilo">
        <img src="https://lh3.googleusercontent.com/a/ACg8ocJy96qTUQ2A0x6o4MjSZT8nsQaXj4zoPjDz300qyRpX_juGbjU=s288-c-no">
        <br>
        <div class="nome-cognome">Salvatore Crapanzano</div>

        <div class="like-dislike-container">
            <button id="like-button" class="like">Like</button>
            <span id="like-count">0</span>
            <button id="dislike-button" class="dislike">Dislike</button>
            <span id="dislike-count">0</span>
        </div>

      </div>

      <div class="descrizione">
          <p>Questa è la mia prima pagina personale</p>
          <p>Qui potrai trovare informazioni su di me e sulle mie attività</p>
          <p>Se vuoi saperne di più, visita la mia pagine <a href="https://www.google.it" >personale</a></p>
      </div>
    </div>
  </body>
</html>

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(203, 230, 254);
  padding: 30px;
}

header {
  background-color: rgb(89, 89, 255);
  color: white;
  text-align: center;
  margin: 20px;
  padding: 15px;
  border-radius: 20px;
  box-shadow: 5px 10px 10px rgb(151, 152, 152);
}

nav, ul, li {
  display: inline;
  padding: 0px;
  margin: 15px;
  color: rgb(62, 62, 255);
}

.profilo {
  background-color: white;
  border-radius: 15px;
  margin: auto;
  padding: 20px 20px;
  max-width: 600px;
  text-align: center;
  box-shadow: 5px 10px 10px rgb(151, 152, 152);
}

img {
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

.like {
  background-color: green;
}

.dislike {
  background-color: red;
}

button {
  color: white;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
}

.nome-cognome {
  color: blue;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-style: bold;
}

button:hover {
  background-color: rgb(87, 87, 87);
}

.descrizione {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  margin: 30px;
}

a {
  color: blue;
}

document.addEventListener("DOMContentLoaded", function () {
  const likeButton = document.getElementById("like-button");
  const dislikeButton = document.getElementById("dislike-button");
  const likeCount = document.getElementById("like-count");
  const dislikeCount = document.getElementById("dislike-count");

  let likes = 0;
  let dislikes = 0;

  likeButton.addEventListener("click", function () {
    likes++;
    likeCount.textContent = likes;
  });

  dislikeButton.addEventListener("click", function () {
    dislikes++;
    dislikeCount.textContent = dislikes;
  });
});