Project by @Dhilaan - Codewith.it

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

References

sizeDetermina le dimensioni dell'elemento in base al valore contenuto
<nav>Definisce un menu di navigazione
<hr>Inserisce una linea orizzontale
<head>Tag primario di un documento HTML
formmethodDefinisce il metodo di invio dei dati oltre a method
<pre>Indica una parte di testo preformattato

Users

Log in to search for users

Explore

Find inspiration

Image Comparison Slider

Elenchi numerati con HTML

Pizzafy - Calcolatore di Pizza

DDFDesign 25+CV & Contatti Profess

Esercitazione n. 1

Italiano-Cinema [Mohole]

Prototipo di form

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;
}