Project by @Dhilaan - Codewith.it

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

References

<address> Definisce una sezione contenente indirizzi, contatti e informazioni
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
minImposta il valore numerico o temporale minimo per un elemento input
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<textarea>Area di testo libero espandibile per form HTML

Users

Log in to search for users

Explore

Find inspiration

New Charter Page Test

square - social bar

La mia prima pagina HTML

Tabella base (lezione 10)

Alice nel Paese delle Meraviglie

clarinetto.html

Text-Based Doom-Like Game aka DOOM

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>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Project</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
   <img src="https://1000logos.net/wp-content/uploads/2020/10/AMC-Theatres-Logo.png" class="amcth">
  <header>
   <nav class="navi">
  <ol>
    <li class="content"><a href="#">See a movie</a>&nbsp;&nbsp;></li>
    <li class="content"><a href="#">Find a Theatre</a>&nbsp;&nbsp;></li>
    <li class="content"><a href="#">Food and Drinks</a>&nbsp;&nbsp;></li>
    <li class="content">&nbsp;More&#9660;</li>
    <input type="text" placeholder="Search" class="searchbar">
  </ol>
</nav>

  </header>


<main>
  <h1 class="tex">Movies At AMC</h1> <hr>
    <div class="moviesfirstrow">

      <div class="singmovie">
        <img src="https://www.cinematerial.com/media/box-office/1462764.jpg" alt="Indiana Jones and the Dial of Destiny">
        <div class="info">
          <h2>Indiana Jones and the Dial of Destiny</h2>
          <p>3 Hrs 10 Mins</p>
          <button class="moviebutton">Get Tickets Now</button>
        </div>
      </div>

<div class="singmovie">
        <img src="https://posters.movieposterdb.com/24_05/2024/6263850/l_deadpool-wolverine-movie-poster_ca977381.jpg" alt="Deadpool and Wolverine">
        <div class="info">
          <h2>Deadpool & Wolverine</h2>
          <p>2 Hrs 12 Mins</p>
          <button class="moviebutton">Get Tickets Now</button>
        </div>
      </div>

      <div class="singmovie">
        <img src="https://posters.movieposterdb.com/24_05/2024/2049403/l_beetlejuice-beetlejuice-movie-poster_a879898e.jpg" alt="Beetlejuice Bettlejuice">
        <div class="info">
          <h2>Beetlejuice Bettlejuice</h2>
          <p>1 Hrs 33 Mins</p>
          <button class="moviebutton">Get Tickets Now</button>
        </div>
      </div>

      <div class="singmovie">
        <img src="https://posters.movieposterdb.com/21_08/2021/1160419/l_1160419_565d3d10.jpg" alt="Dune ">
        <div class="info">
          <h2>Dune</h2>
          <p>2 Hrs 6 Mins</p>
          <button class="moviebutton">Get Tickets Now</button>
        </div>
      </div>

      <div class="singmovie">
        <img src="https://posters.movieposterdb.com/14_09/2014/816692/s_816692_593eaeff.jpg" alt="Interstellar">
        <div class="info">
          <h2>Interstellar</h2>
          <p>3 Hrs 2 Mins</p>
          <button class="moviebutton">Get Tickets Now</button>
        </div>
      </div>

    </div>

    <div class="moviessecondrow">

      <div class="singmovie">
        <img src="https://posters.movieposterdb.com/21_12/2021/10872600/l_10872600_c809b67f.jpg" alt="Spiderman No Way Home">
        <div class="info">
          <h2>Spiderman No Way Home</h2>
          <p>2 Hrs 42 Mins</p>
          <button class="moviebutton">Get Tickets Now</button>
        </div>
      </div>

      <div class="singmovie">
        <img src="https://posters.movieposterdb.com/22_11/2019/8772262/l_midsommar-movie-poster_a64c4d73.jpeg" alt="Midsommar">
        <div class="info">
          <h2>Midsommar</h2>
          <p>1 Hrs 11 Mins</p>
          <button class="moviebutton">Get Tickets Now</button>
        </div>
      </div>

      <div class="singmovie">
        <img src="https://posters.movieposterdb.com/20_06/2017/3315342/l_3315342_81bf503d.jpg" alt="Logan">
        <div class="info">
          <h2>Logan</h2>
          <p>2 Hrs 16 Mins</p>
          <button class="moviebutton">Get Tickets Now</button>
        </div>
      </div>

      <div class="singmovie">
        <img src="https://posters.movieposterdb.com/14_07/2013/2402085/s_2402085_19f5411f.jpg" alt="Jimi Hendrix">
        <div class="info">
          <h2>Jimi: All is by my Side</h2>
          <p>2 Hrs 12 Mins</p>
          <button class="moviebutton">Get Tickets Now</button>
        </div>
      </div>

      <div class="singmovie">
        <img src="https://posters.movieposterdb.com/09_04/2003/324216/l_324216_b593e547.jpg" alt="Texas Chainsaw Massacre">
        <div class="info">
          <h2>Texas Chainsaw Massacre</h2>
          <p>1 Hrs 10 Mins</p>
          <button class="moviebutton">Get Tickets Now</button>
        </div>
      </div>

    </div>

</main>

<footer>
<p>AMC Clone made by Dhilaan</p> <p>Contact Information: abcdefg</p>
<p><a href="https://www.amctheatres.com/" target="_blank"> Refrence Website</a></p>
</footer>

</body>

</html>

.navi{
  display: inline-block;
  margin-left: 30%;
}

a{
  color: white;
  font: 16px;
}

.content{
  display: inline-block;
}

body{
background: rgb(119,93,104);
background: radial-gradient(circle, rgba(119,93,104,1) 0%, rgba(17,40,66,1) 100%);
  color: white;
}

.searchbar{
  background: rgb(199, 199, 199);
  color: white;
  border-radius: 5px;
  margin-left: 25px;
}

.tex{
  font-family: "Lucida Console", "Courier New", monospace;
  margin-left: 44%;
}

.moviesfirstrow {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  border: 6px rgb(181, 181, 181) solid;
}

.moviessecondrow{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 15px;
  border: 6px rgb(181, 181, 181) solid;
}

.singmovie{
  background-color: rgb(48, 39, 39);
  border-radius: 10px;
  overflow: hidden;
  margin: 10px;
  width: 200px;
  padding: 10px;
  text-align: justify;
}

.info{
  text-align: center;
  align-items:  center;
}

.moviebutton{
  padding: 10px 15px;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  background-color: #ffffff;
  transition: 0.3s;
}

.moviebutton:hover {
  background-color: #d4421a;
  color: white;
}

img{
  max-width: 196px;
  max-height: 285px;
}

.amcth{
  max-width: 100px;
  padding-top: 25px;
  padding-left: 25px;
  float: inline-start;
}