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.

References

<embed>Tag per l'incorporamento di contenuti multimediali
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<h6>Titolo di intestazione di sesto livello
<label>Mostrare un testo di etichetta per un elemento di input.
requiredRende obbligatorio un campo di input
dirnameInvia informazioni sulla direzione di scrittura da un elemento input

Users

Log in to search for users

Explore

Find inspiration

DEMO: Hi-Lo Game

Primo esercizio

prima volta css

Milford momentanea

Eleganza Gioielli

esercitazione 7

Ethical hacking

Ximena\'s hamburger

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