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

forSpecifica a quale id è associato l'elemento in cui è dichiarato.
getDefinisce un metodo di invio di dati al server
<blockquote>Inserisce citazioni in un documento HTML
langSpecifica la lingua del contenuto di un elemento
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
selectedPre-seleziona un elemento di input

Users

Log in to search for users

Explore

Find inspiration

Batch versamento settimanale

Immagine PCTO [Toastmasters]

Ricettario rumeno

CAPODANNO SENZA LUCI

Template Wheel Stripes

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