My Anime Blog - Ninjas and Dragons(2) by @sancho - Codewith.it

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

Referenze

selectedPre-seleziona un elemento di input
<input>Definisce un area di input per l'invio di dati e informazioni
<table>Tag primario per la creazione di tabelle
<hr>Inserisce una linea orizzontale
formmethodDefinisce il metodo di invio dei dati oltre a method
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

La Magica Storia del Basket Moderno

Comunicare sul Web [Template HTML]

TravelEscape - Esplora il Mondo co

Ragdoll Archers

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="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Anime Blog - Ninjas and Dragons</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header>
    <div class="container">
      <h1>My Anime Blog</h1>
      <p>Ninjas and Dragons</p>
    </div>
  </header>

  <main class="container">
    <section id="featured-video">
      <h2>Featured Video</h2>
      <div class="video-container">
        <!-- Replace with your embedded video iframe -->
        <iframe width="560" height="315" src="https://www.youtube.com/embed/PSU22SJi1UI?si=AqtjEOUP1I7yFaC4"
          title="Sauce Walka - MADE BY RICH GOD (Official Video)" frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen></iframe>
      </div>
    </section>

    <section id="latest-posts">
      <h2>Latest Posts</h2>
      <div class="post">
        <h3>Adventure of the Shadow Ninja</h3>
        <p>A thrilling tale of a ninja mastering the art of shadows.</p>
        <a href="post1.html">Read more...</a>
      </div>
      <div class="post">
        <h3>Dragon's Lair</h3>
        <p>Discover the secret world of dragons and their ancient powers.</p>
        <a href="post2.html">Read more...</a>
      </div>
      <div class="post">
        <h3>Ninja vs Dragon: Ultimate Showdown</h3>
        <p>Witness the epic battle between a ninja warrior and a fierce dragon.</p>
        <a href="post3.html">Read more...</a>
      </div>
    </section>
  </main>

  <footer>
    <div class="container">
      <p>&copy; 2024 My Anime Blog - Ninjas and Dragons</p>
    </div>
  </footer>

  <script src="script.js" defer></script>
</body>

</html>

/* Reset default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f0f0f0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em 0;
}

header h1 {
  font-size: 2.5rem;
}

header p {
  font-size: 1.2rem;
}

main {
  padding: 20px 0;
}

section {
  margin-bottom: 40px;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.post {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.post h3 {
  color: #333;
  margin-bottom: 10px;
}

.post p {
  color: #666;
}

.post a {
  display: block;
  margin-top: 10px;
  color: #007bff;
  text-decoration: none;
}

.post a:hover {
  text-decoration: underline;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em 0;
}

// TypeScript code for your front page

// Function to handle video playback
function playVideo() {
  const videoPlayer: HTMLIFrameElement | null = document.querySelector('.video-container iframe');
  if (videoPlayer) {
    // Example manipulation of the video player
    videoPlayer.play();
  }
}

// Example TypeScript class for handling posts
class Post {
  title: string;
  content: string;

  constructor(title: string, content: string) {
    this.title = title;
    this.content = content;
  }

  // Method to log post details
  logDetails() {
    console.log(`Post Title: ${this.title}`);
    console.log(`Post Content: ${this.content}`);
  }
}

// Example usage of the Post class
const post1 = new Post('Adventure of the Shadow Ninja', 'A thrilling tale of a ninja mastering the art of shadows.');
post1.logDetails();

// TypeScript code can be more strongly typed and organized, adding more clarity and maintainability