tassioauad/Imagem

## Imagem
https://drive.google.com/file/d/1lOJgsNvvWpIhDAogFzn2v4JeP0ntMjGV/view?usp=sharing

## index.html
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Cinecta</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <header>
            <nav>
                <ul>
                    <li>Home</li>
                    <li>Sessão</li>
                    <li>Pipoca</li>
                    <li>Outros</li>
                </ul>
            </nav>
        </header>
        <article>
            <h2>Olá, cliente</h2>
            <section id="filme-detalhe">
                <h3 id="filme-titulo">Filme Star Wars</h3>
                <img id="filme-poster" src="https://images-na.ssl-images-amazon.com/images/I/81pAZ356XbL.jpg" />
            </section>
            <section id="filme-sessao">
                <div id="filme-horario">
                    <p>Horários das sessões</p>
                    <select id="filme-horario-opcao">
                        <option>16hrs</option>
                    </select>
                </div>
                <div id="filme-dias">
                    <p>Dias disponíveis</p>
                    <select id="filme-horario-opcao">
                        <option>28/11</option>
                    </select>
                </div>
            </section>
        </article>
        <aside>
            <h4>Em breve</h4>
            <ul>
                <li><img src="https://upload.wikimedia.org/wikipedia/pt/2/20/2_Fast_2_Furious_2003.jpg"/></li>
                <li><img src="https://br.web.img3.acsta.net/pictures/18/04/12/20/25/5720930.jpg"/></li>
            </ul>
        </aside>
        <footer>
            <p>Coryrights @</p>
        </footer>
    </body>
</html>

## style.css
img{
    width:300px;
    height:450px;
}

body {
    display: grid;
    grid-template-areas: "menu conteudo" "rodape rodape";
    grid-template-columns: 20vh auto;
    grid-template-rows: auto 20vh;
}

body header{
    grid-area: menu;
    background-color: lightgray;
}

body article {
    grid-area: conteudo;
}

body aside {
    grid-area: conteudo;
}

body footer {
    grid-area: rodape;
}
	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<title>Cinecta</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
	<header>
	<nav>
	<ul>
	<li>Home</li>
	<li>Sessão</li>
	<li>Pipoca</li>
	<li>Outros</li>
	</ul>
	</nav>
	</header>
	<article>
	<h2>Olá, cliente</h2>
	<section id="filme-detalhe">
	<h3 id="filme-titulo">Filme Star Wars</h3>
	<img id="filme-poster" src="https://images-na.ssl-images-amazon.com/images/I/81pAZ356XbL.jpg" />
	</section>
	<section id="filme-sessao">
	<div id="filme-horario">
	<p>Horários das sessões</p>
	<select id="filme-horario-opcao">
	<option>16hrs</option>
	</select>
	</div>
	<div id="filme-dias">
	<p>Dias disponíveis</p>
	<select id="filme-horario-opcao">
	<option>28/11</option>
	</select>
	</div>
	</section>
	</article>
	<aside>
	<h4>Em breve</h4>
	<ul>
	<li><img src="https://upload.wikimedia.org/wikipedia/pt/2/20/2_Fast_2_Furious_2003.jpg"/></li>
	<li><img src="https://br.web.img3.acsta.net/pictures/18/04/12/20/25/5720930.jpg"/></li>
	</ul>
	</aside>
	<footer>
	<p>Coryrights @</p>
	</footer>
	</body>
	</html>
	img{
	width:300px;
	height:450px;
	}

	body {
	display: grid;
	grid-template-areas: "menu conteudo" "rodape rodape";
	grid-template-columns: 20vh auto;
	grid-template-rows: auto 20vh;
	}

	body header{
	grid-area: menu;
	background-color: lightgray;
	}

	body article {
	grid-area: conteudo;
	}

	body aside {
	grid-area: conteudo;
	}

	body footer {
	grid-area: rodape;
	}