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

<video>Integra e controlla video in una pagina HTML
srcIndica la provenienza di una risorsa esterna (tramite URL).
<pre>Indica una parte di testo preformattato
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<ul>Usato per la creazione di liste non ordinate.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

ES01a\\\\index.html(2)

Estratti di mitologie greche

Cappuccetto Rosso - La Storia

Ruota delle Cucine

DEMO: For Loop 2

Simple Calculator

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