Skip to content

Instantly share code, notes, and snippets.

@maiyama18

maiyama18/index.html

Created July 5, 2018 23:27
Show Gist options
  • Save maiyama18/0a4617361ed8d049337007a8e2f4c1af to your computer and use it in GitHub Desktop.
Save maiyama18/0a4617361ed8d049337007a8e2f4c1af to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<style>
.store-name {
font-size: 3.5rem;
margin-top: 8rem;
}
.main-container {
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a href="#" class="navbar-item brand-text" style="font-weight: bold">NAVBAR</a>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item">
<form action="">
<div class="field has-addons">
<p class="control">
<span class="select">
<select>
<option>すべて</option>
<option>冷蔵庫</option>
</select>
</span>
</p>
<p class="control">
<input type="text" class="input" placeholder="search...">
</p>
<p class="control">
<a href="#" class="button is-white is-outlined">
<i class="fas fa-search"></i>
</a>
</p>
</div>
</form>
</div>
<div class="navbar-item">
<a href="#" class="button is-white is-outlined">Login</a>
</div>
</div>
</div>
</div>
</nav>
<div class="container main-container">
<h1 class="title store-name">NAVBAR STORE</h1>
<div class="columns">
<div class="column is-8 is-offset-2">
<form action="">
<div class="field has-addons">
<p class="control">
<span class="select is-medium">
<select>
<option>すべて</option>
<option>冷蔵庫</option>
</select>
</span>
</p>
<p class="control is-expanded">
<input type="text" class="input is-medium" placeholder="search...">
</p>
<p class="control">
<a href="#" class="button is-primary is-outlined is-medium">
<i class="fas fa-search"></i>
</a>
</p>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment