Skip to content

Instantly share code, notes, and snippets.

@cumet04

cumet04/sbox_bulma.html

Created February 13, 2021 13:28
Show Gist options
  • Save cumet04/ccadb775c629963ace4c5546518fb02e to your computer and use it in GitHub Desktop.
Save cumet04/ccadb775c629963ace4c5546518fb02e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sbox_bulma.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>app</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
</head>
<body>
<header class="hero is-primary">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<div class="navbar-item">
<div class="title">Event app</div>
</div>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item" href="#">
新規登録
</a>
<a class="navbar-item" href="/login.html">
ログイン
</a>
</div>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">イベントを探す</p>
</div>
</div>
</header>
<main class="container is-max-desktop">
<section class="section">
<div class="container">
<form class="box">
<div class="field">
<div class="control">
<div class="select is-fullwidth">
<select>
<option hidden>都道府県を選ぶ</option>
<option>北海道</option>
<option>青森県</option>
<option>岩手県</option>
</select>
</div>
</div>
</div>
<div class="field">
<div class="control">
<div class="select is-fullwidth">
<select>
<option hidden>タイプを選ぶ</option>
<option>屋内</option>
<option>屋外</option>
<option>その他</option>
</select>
</div>
</div>
</div>
<div class="field">
<div class="control">
<input type="text" class="input" placeholder="キーワード">
</div>
</div>
<div class="field is-grouped is-grouped-centered">
<div class="control">
<button class="button is-link is-medium">検索する</button>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="panel">
<div class="panel-heading">
イベント2
</div>
<div class="panel-block">
<div class="container columns">
<div class="column is-5">
<figure class="image">
<img src="https://bulma.io/images/placeholders/640x480.png">
</figure>
</div>
<div class="column">
<div class="container content">
<ul>
<li>場所</li>
<li>タイプ</li>
<li>詳細</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel-block">
<div class="container">
<div class="field is-grouped is-grouped-right">
<div class="buttons">
<button class="button is-link is-light">保存する</button>
<button class="button is-link">詳細を見る</button>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
イベント1
</div>
<div class="panel-block">
<div class="container columns">
<div class="column is-5">
<figure class="image">
<img src="https://bulma.io/images/placeholders/640x480.png">
</figure>
</div>
<div class="column">
<div class="container content">
<ul>
<li>場所</li>
<li>タイプ</li>
<li>詳細</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel-block">
<div class="container">
<div class="field is-grouped is-grouped-right">
<div class="buttons">
<button class="button is-link is-light">保存する</button>
<button class="button is-link">詳細を見る</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment