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

<label>Mostrare un testo di etichetta per un elemento di input.
autofocusAttiva un elemento al caricamento della pagina.
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<nav>Definisce un menu di navigazione
<h2>Titolo di intestazione di secondo livello
<b>Formatta il testo in grassetto

Users

Log in to search for users

Explore

Find inspiration

tabella attività settimana piscina

Epic Read - Recensioni di libri fa

Idee background personaggio

Istogramma a colonne

Differences in Forms of Government

le miniere di nuxis

Portfolio | DFD Design

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