RadioTorchiarolo:NUOVO SITO - Home by @RTradio - Codewith.it

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

References

styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<caption>Definisce didascalie all'interno di una tabella
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<h6>Titolo di intestazione di sesto livello
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina

Users

Log in to search for users

Explore

Find inspiration

Prep. Esame pt.4

Esercitazione n.1

ESERCIZIO FINALE

DDF2025 - CV & Contatti Profession

Lista delle Attività

basi html e tag

cablepartdos-op1.html

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 lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Da un idea di alcuni ragazzi di Torchiarolo, nasce un momento di condivisione che è RADIO TORCHIAROLO. Progetto destinato a crescere con nuovi podcast e aree tematiche.">
  <title>RadioTorchiarolo:NUOVO SITO - Home</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" type="image/png" href="https://www.radiotorchiarolo.it/wp-content/uploads/2023/03/cropped-RTradio-LOGO.png">
</head>
<body>

  <!-- header -->
  <header>
    <div class="container">
      <div class="logo">
        <a href="index.html">
        <img src="https://www.radiotorchiarolo.it/wp-content/uploads/2023/05/logo-RTradio.png" alt="RadioTorchiarolo">
      </a>
      </div>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="radio.html">Ascolta</a></li>
          <li><a href="#notizie">Notizie</a></li>
          <li><a href="#eventi">Eventi</a></li>
          <li><a href="#contatti">Contatti</a></li>
        </ul>
      </nav>
    </div>

    <!-- Sezione Scrollabile -->
    <div class="scrollable-section">
      <div class="scrollable-content">
        <div class="item">
          <a href="programma1.html" style="text-decoration: none;">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 1">
          <p>Programma 1</p>
          </a>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 2">
          <p>Programma 2</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 3">
          <p>Programma 3</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 4">
          <p>Programma 4</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 5">
          <p>Programma 5</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 6">
          <p>Programma 6</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 7">
          <p>Programma 7</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 8">
          <p>Programma 8</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 9">
          <p>Programma 9</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 10">
          <p>Programma 10</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 11">
          <p>Programma 11</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 12">
          <p>Programma 12</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 13">
          <p>Programma 13</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 14">
          <p>Programma 14</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 15">
          <p>Programma 15</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 16">
          <p>Programma 16</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 17">
          <p>Programma 17</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 18">
          <p>Programma 18</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 19">
          <p>Programma 19</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 20">
          <p>Programma 20</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 21">
          <p>Programma 21</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 22">
          <p>Programma 22</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 23">
          <p>Programma 23</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 24">
          <p>Programma 24</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 25">
          <p>Programma 25</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 26">
          <p>Programma 26</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 27">
          <p>Programma 27</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 28">
          <p>Programma 28</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 29">
          <p>Programma 29</p>
        </div><div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 30">
          <p>Programma 30</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 31">
          <p>Programma 31</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 32">
          <p>Programma 32</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 33">
          <p>Programma 33</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 34">
          <p>Programma 34</p>
        </div>
        <div class="item">
          <img src="https://i.postimg.cc/t4Fm25H9/prova-Img-Scrollable.png.png" alt="Icon 35">
          <p>Programma 35</p>
        </div>
      </div>
    </div>
  </header>

  <!-- carosello news -->
  <section id="hero">
    <div class="hero-slider">
      <div class="slider-item">
        <img src="https://i.postimg.cc/9XNSM0pH/739-x-400.png" alt="Slider 1">
        <div class="slider-caption">
          <h2>Ultime Notizie</h2>
          <p>Scopri le ultime notizie dal mondo della musica e della radio.</p>
        </div>
      </div>
      <div class="slider-item">
        <img src="https://i.postimg.cc/9XNSM0pH/739-x-400.png" alt="Slider 2">
        <div class="slider-caption">
          <h2>Ascolta la Diretta</h2>
          <p>Ascolta RadioTorchiarolo in diretta ovunque tu sia.</p>
        </div>
      </div>
    </div>
  </section>

    <!-- bottoni social -->

  <section id="social">
    <div class="socialsvg">
        <!--<img src="./facebook RT.svg" alt="RTradio facebook" />-->
        <object data="" width="30" height="30"> </object>   
        <a href="https://www.facebook.com/radiotorchiarolo">
          <img src="https://www.radiotorchiarolo.it/wp-content/uploads/2024/12/facebook-RT-grande-1.svg" alt="RTradio facebook" /> 
          <a href="https://www.youtube.com/channel/UC-iLjbS5uNgBc1dAEh4HxiQ" target="_blank">
            <img src="https://www.radiotorchiarolo.it/wp-content/uploads/2024/12/youtube-RT.svg" alt="YouTube">    
            </a>  
          </a>
          <a href="https://chat.whatsapp.com/KfZq44DvgiLHeSmiIfkuHp" target="_blank">
            <img src="https://www.radiotorchiarolo.it/wp-content/uploads/2024/12/whatsapp-gruppoRT.svg" alt="Instagram">
          </a>
          <a href="https://www.tiktok.com/@radiotorchiarolo" target="_blank">
            <img src="https://www.radiotorchiarolo.it/wp-content/uploads/2024/12/tiktok-RT.svg" alt="Twitter">
          </a>
          <a href="https://www.twitch.tv/radiotorchiarolo" target="_blank">
            <img src="https://www.radiotorchiarolo.it/wp-content/uploads/2024/12/twitch-RT.svg" alt="YouTube">
          </a>
        </div>
  </section>
  <!-- radio -->
  <section id="radio">
    <div class="container">
      <h2>Ascolta la nostra radio in diretta</h2>
      <div class="playerSCA" id="stream1"></div>
    </div>
  </section>

  <!-- notizie -->
  <section id="notizie">
    <div class="container">
      <h2>Ultime Notizie</h2>
      <div class="news-item">
        <h3>Notizia 1</h3>
        <p>Descrizione breve della notizia...</p>
      </div>
      <div class="news-item">
        <h3>Notizia 2</h3>
        <p>Descrizione breve della notizia...</p>
      </div>
      <a href="#altre-notizie" target="_blank" class="btn">Leggi altre notizie</a>
    </div>
  </section>

  <!-- eventi -->
  <section id="eventi">
    <div class="container">
      <h2>Eventi in Programma</h2>
      <div class="evento">
        <h3>Evento 1</h3>
        <p>Dettagli evento...</p>
      </div>
      <div class="evento">
        <h3>Evento 2</h3>
        <p>Dettagli evento...</p>
      </div>
      <a href="#altre-eventi" class="btn">Scopri gli eventi</a>
    </div>
  </section>

  <!-- footer -->
  <footer>
    <div class="container">
      <div class="social">
        <a href="https://www.facebook.com/radiotorchiarolo" target="_blank">Facebook</a>
        <a href="https://www.instagram.com/radio.torchiarolo" target="_blank">Instagram</a>
        <a href="https://chat.whatsapp.com/KfZq44DvgiLHeSmiIfkuHp" target="_blank">Gruppo WhatsApp</a>
        <a href="https://web.whatsapp.com/send/?phone=%2B393517180417&text&type=phone_number&app_absent=0" target="_blank">Scrivici su WhatsApp</a>
      </div>
      <p>&copy; 2024 RadioTorchiarolo. Tutti i diritti riservati.</p>
    </div>
  </footer>

  <script src="script.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>var bu = "https://player.streamerr.co/"; var jQuery_3_5_1 = $.noConflict(true); var uid = 344; var pid = 334</script>
<script src="https://player.streamerr.co/player/bundle.js"></script>
<script src="https://player.streamerr.co/player/init.js"></script>
</body>
</html>

/* Reset di base per il layout */
* {
  margin: 0;
  padding: 0;
  /*box-sizing: border-box;*/
  line-height: 1.5;
  transition: all 0.3s ease-in-out; /* Aggiunge transizioni morbide a tutti gli elementi */
}

/* Corpo del sito */
body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(to left, #e2001a, #003366); /* Gradiente da rosso a blu */
  color: #333;
  line-height: 1.6;
  animation: fadeIn 1s forwards; /* Animazione fade-in al caricamento della pagina */
}

/* SEZIONE SOCIAL */
#social {
  margin-top: 30px;
  text-align: center;
  padding: 20px;
  color: white; /* Testo chiaro */
}

#social h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

#social .socialsvg {
  display: flex;
  justify-content: center;
  gap: 20px; /* Spaziatura tra le icone */
}

#social .socialsvg a {
  display: inline-block;
  transition: transform 0.3s ease; /* Animazione hover */
}

#social .socialsvg img {
  width: 40px; /* Dimensione icone */
  height: 40px;
}

#social .socialsvg a:hover {
  transform: scale(1.2); /* Ingrandimento al passaggio del mouse */
}


/* Header */
header {
  /*background-color: #e2001a; /* Colore rosso RTL 102.5 */
  padding: 15px 0;
  color: white;
}

header .container {
  display: flex;
  justify-content: space-between;
  justify-content: center; /* Centra il contenuto orizzontalmente */
  align-items: center;
  flex-wrap: wrap;
}

header .logo img {
  width: 150px;
  animation: slideInFromBottom 1s forwards 0.5s; /* Animazione di scorrimento per il logo */
}

header nav ul {
  padding: 0;
  margin: 0;
  text-align: center;
  color:#f9f9f9;
  display: flex;
  justify-content: center;
  list-style: none;
  animation: fadeIn 1s forwards 1s; /* Animazione per la navigazione */
}

header nav ul li {
  margin: 5px 10px;
}

header nav ul li a {
  text-align: center;
  color: white;  /* colore link */
  /*background: linear-gradient(to right, #e2001a, #003366); /* Gradiente da rosso a blu */
  text-decoration: none;
  font-weight: bold;
}

header nav ul li a:hover {
  text-decoration: underline;
}

/* sezione scrollabile */
.scrollable-section {
  background-color: #171717; /* sfondo grigio */
  padding: 15px 0;
  overflow-x: auto; /* scrollabile orizzontalmente */
  white-space: nowrap; /* mette tutto sulla stessa riga */
}

.scrollable-content {
  display: flex;
  gap: 30px; /* spazio tra le immagini */
  padding: 0 15px; /* margini laterali */
}

.scrollable-content .item {
  text-align: center; /* centra testo e immagine */
  display: inline-block;
}

.scrollable-content .item img {
  width: 70px; /* dimensione delle immagini */
  height: 70px;
  border-radius: 50%; /* trasforma l'immagine in un cerchio */
  object-fit: cover; /* Assicura che l'immagine si adatti senza distorsioni */
  transition: transform 0.3s ease; /* Animazione al passaggio del mouse */
  border: 2px solid #ddd; /* bordo sottile per le immagini */
}

.scrollable-content .item img:hover{
  transform: scale(1.2); /* Ingrandimento al passaggio del mouse */
}

.scrollable-content .item p {
  font-size: 14px;
  color: #ffffff;
  margin-top: 3px;
  font-weight: bold;
}

/* Nascondi scrollbar su alcuni browser */
.scrollable-section::-webkit-scrollbar {
  display: none;
}
.scrollable-section {
  -ms-overflow-style: none; /* IE e Edge */
  scrollbar-width: none; /* Firefox */
}

/* Hero Section */
#hero {
  color: #171717;
  position: relative;
  height: 400px;
  /*background: linear-gradient(to right, #e2001a, #003366); /* Gradiente da rosso a blu */
  overflow: hidden;
}

.hero-slider {
  display: flex;
  transition: transform 1s ease;
}

.hero-slider .slider-item {
  min-width: 100%;
  position: relative;
  animation: fadeIn 1s forwards 1s; /* Animazione immagini carosello */
}

.hero-slider .slider-item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
/* Sovrapposizione Scura */
.slider-item::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Colore nero con opacità del 30% */
  z-index: 1; /* Posiziona l'overlay sopra l'immagine */
  pointer-events: none; /* interagisci con i pulsanti */
}

.hero-slider .slider-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  background: linear-gradient(to left, #e2001a, #003366); /* Gradiente da rosso a blu */
  padding: 10px;
  border-radius: 5px;
}


/* ascolta */
#radio {
  color: #f9f9f9;
  background: linear-gradient(to left, #e2001a, #003366); /* Gradiente da rosso a blu */
  padding: 40px 20px;
  text-align: center;
  animation: fadeIn 1s forwards 1.5s; /* animazione parte radio */
}

#radio audio {
  width: 100%;
  max-width: 600px;
}

/* notizie */
#notizie {
  color: #f9f9f9;
  background: linear-gradient(to left, #e2001a, #003366); /* Gradiente da rosso a blu */
  padding: 40px 20px;
  animation: fadeIn 1s forwards 2s; /* Fade-in per la sezione Notizie */
}

.news-item {
  background-color: #171717;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  animation: fadeIn 1s forwards 2.5s; /* Animazione per ogni notizia */
}

.news-item h3 {
  background-color: #171717;
  margin-bottom: 10px;
}

.news-item p {
  color: #666;
}

/* Sezione Eventi */
#eventi {
  color: #f9f9f9;
  background: linear-gradient(to left, #e2001a, #003366); /* Gradiente da rosso a blu */
  padding: 40px 20px;
  animation: fadeIn 1s forwards 3s; /* effetto sezione eventi */
}

.evento {
  background-color: #171717;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  animation: fadeIn 1s forwards 3.5s; /* animazione per ogni evento */
}

.evento h3 {
  margin-bottom: 10px;
}

.evento p {
  color: #666;
}

/* Footer */
footer {
  background: linear-gradient(to left, #e2001a, #003366); /* Gradiente da rosso a blu */
  color: white;
  padding: 20px 0;
  text-align: center;
}

footer .social {
  margin-bottom: 10px;
}

footer .social a {
  color: white;
  margin: 0 10px;
  text-decoration: none;
}

footer .social a:hover {
  text-decoration: underline;
}

footer p {
  margin-top: 10px;
}

/* Bottone */
.btn {
  display: inline-block;
  background-color: #e2001a;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 10px;
}

.btn:hover {
  background-color: #c10016;
}
/* Media Queries */
@media screen and (max-width: 768px) {
  header .container {
    flex-direction: column; /* adatta contenuto in verticale */
    align-items: center;
  }

  header nav ul {
    flex-direction: column; /* navigazione verticale */
  }

  header nav ul li {
    margin: 5px 0;
  }

  .carousel-btn {
    font-size: 16px;
  }

  #social .social-icons img {
    width: 30px;
    height: 30px;
  }

  section h2 {
    font-size: 20px;
  }

  section p {
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  header nav ul li a {
    font-size: 16px; 
    padding: 10px;
  }

  .carousel-btn {
    font-size: 14px;
    padding: 6px 10px;
  }

  #social .social-icons img {
    width: 25px;
    height: 25px;
  }

  section h2 {
    font-size: 18px;
  }

  section p {
    font-size: 12px;
  }

  footer {
    font-size: 12px;
  }
}


/* navigazione */
.nav-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

// Funzione per il ciclo dello slider
let currentSlide = 0;
const slides = document.querySelectorAll('.slider-item');
const totalSlides = slides.length;

function changeSlide() {
  currentSlide = (currentSlide + 1) % totalSlides;
  const slider = document.querySelector('.hero-slider');
  slider.style.transform = `translateX(-${currentSlide * 100}%)`;
}

// Cambio automatico dello slide ogni 3 secondi
setInterval(changeSlide, 3000);
const images = document.querySelector('.carousel-images');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');

let currentIndex = 0;

// Funzione per aggiornare la posizione del carosello
function updateCarousel() {
  const imageWidth = images.children[0].clientWidth;
  images.style.transform = `translateX(-${currentIndex * imageWidth}px)`;
}

// Evento per il pulsante "Prev"
prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.children.length - 1;
  updateCarousel();
});

// Evento per il pulsante "Next"
nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex < images.children.length - 1) ? currentIndex + 1 : 0;
  updateCarousel();
});

// Aggiorna carosello al ridimensionamento della finestra
window.addEventListener('resize', updateCarousel);