Skip to content

Instantly share code, notes, and snippets.

@programadorabordo

programadorabordo/vue3-aula2.html

Created December 15, 2020 23:08
Show Gist options
  • Save programadorabordo/0be874c9a5532e3ceb29042d143b22f1 to your computer and use it in GitHub Desktop.
Save programadorabordo/0be874c9a5532e3ceb29042d143b22f1 to your computer and use it in GitHub Desktop.
Download ZIP
HTML utilizado na maratona Vue 3 aula 2 https://youtu.be/jP97Un5Hs1A
Raw
vue3-aula2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 template | Programador a Bordo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div class="container">
<!-- <div class="text-center login mt-3">
<span>Você não está logado! </span>
<button class="btn btn-primary btn-sm" id="login">Logar</button>
</div> -->
<div class="text-center login mt-3">
<span>Seja bem-vindo, </span>
<strong>Ayrton!</strong>
</div>
<form class="row row-align align-items-center mt-3">
<div class="col-sm-10">
<input class="form-control" type="search" name="artistName" />
</div>
<div class="col-sm">
<button class="btn btn-primary w-100" type="submit">Buscar artista</button>
</div>
</form>
<div id="content" class="mt-3">
<p class="text-center">
<strong>Busque por um artista</strong>
</p>
<div class="row">
<div class="col-3 mt-3">
<div class="card">
<img src="https://via.placeholder.com/500/500" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Título</h5>
<button type="button" class="btn btn-primary">Acessar</button>
</div>
</div>
</div><!-- .col-3.mt-3 -->
<div class="col-3 mt-3">
<div class="card">
<img src="https://via.placeholder.com/500/500" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Título</h5>
<button type="button" class="btn btn-primary">Acessar</button>
</div>
</div>
</div><!-- .col-3.mt-3 -->
<div class="col-3 mt-3">
<div class="card">
<img src="https://via.placeholder.com/500/500" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Título</h5>
<button type="button" class="btn btn-primary">Acessar</button>
</div>
</div>
</div><!-- .col-3.mt-3 -->
<div class="col-3 mt-3">
<div class="card">
<img src="https://via.placeholder.com/500/500" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Título</h5>
<button type="button" class="btn btn-primary">Acessar</button>
</div>
</div>
</div><!-- .col-3.mt-3 -->
<div class="col-3 mt-3">
<div class="card">
<img src="https://via.placeholder.com/500/500" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Título</h5>
<button type="button" class="btn btn-primary">Acessar</button>
</div>
</div>
</div><!-- .col-3.mt-3 -->
<div class="col-3 mt-3">
<div class="card">
<img src="https://via.placeholder.com/500/500" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Título</h5>
<button type="button" class="btn btn-primary">Acessar</button>
</div>
</div>
</div><!-- .col-3.mt-3 -->
<div class="col-3 mt-3">
<div class="card">
<img src="https://via.placeholder.com/500/500" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Título</h5>
<button type="button" class="btn btn-primary">Acessar</button>
</div>
</div>
</div><!-- .col-3.mt-3 -->
<div class="col-3 mt-3">
<div class="card">
<img src="https://via.placeholder.com/500/500" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Título</h5>
<button type="button" class="btn btn-primary">Acessar</button>
</div>
</div>
</div><!-- .col-3.mt-3 -->
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment