s4s-editor / ml2scratch /old /dist /styleguide.html
soiz1's picture
Upload 208 files
72c8f1c verified
raw
history blame
12.1 kB
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ML2Scratch</title>
<meta property="og:type" content="website">
<meta property="og:title" content="ML2Scratch">
<meta property="og:url" content="https://champierre.github.io/ml2scratch/">
<meta property="og:site_name" content="ML2Scratch">
<meta property="og:image" content="https://champierre.github.io/ml2scratch/dist/images/common/og_image.png">
<link rel="canonical" href="https://champierre.github.io/ml2scratch/">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">
<link rel="shortcut icon" href="/images/common/favicon.ico">
<link rel="apple-touch-icon" href="/images/common/apple-touch-icon.png">
<link rel="stylesheet" href="/stylesheets/styles.css">
</head>
<body>
<div class="container">
<div class="row my-5">
<div class="col-md-2">
Logo
</div>
<div class="col-md-10">
<a href="#">
<span class="logo">ML2Scratch</span>
</a>
</div>
</div>
<div class="row my-5">
<div class="col-md-2">
Images
</div>
<div class="col-md-10">
<i class="icon-camera"></i>
<i class="icon-camera is-mini"></i>
<i class="icon-dots"></i>
<i class="icon-photos"></i>
</div>
</div>
<div class="row my-5">
<div class="col-md-2">
Button
</div>
<div class="col-md-10">
<a href="#" class="button">Button</a>
<a href="#" class="button is-w100">
<i class="icon-camera"></i>
</a>
<a href="#" class="button is-w100">
<i class="icon-camera is-mini"></i>
</a>
</div>
</div>
<div class="row my-5">
<div class="col-md-2">
Input
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="" placeholder="" class="input" value="k3iqrlypc8" />
<button class="button">接 続</button>
</div>
<div class="my-2"></div>
<div class="input-group">
<label class="input-file">
<input type="file" name="" data-file />
<span data-file-name>Choose file...</span>
</label>
<button class="button">追 加</button>
</div>
</div>
</div>
<div class="row my-5">
<div class="col-md-2">
Card
</div>
<div class="col-md-10">
<div class="card is-top is-debug">
<div class="card__inner">
<div class="title-block">
<h3>タイトル</h3>
<div class="dropdown">
<a href="#" class="link" data-toggle="dropdown">
<i class="icon-dots"></i>
</a>
<div class="card-dropdown-menu dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">削除</a>
</div>
</div>
</div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<div class="card is-debug">
<div class="card__inner">
<div class="title-block">
<h3>タイトル</h3>
<div class="dropdown">
<a href="#" class="link" data-toggle="dropdown">
<i class="icon-dots"></i>
</a>
<div class="card-dropdown-menu dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">削除</a>
</div>
</div>
</div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<div class="card-block-container">
<!-- card-block -->
<div class="card-block">
<div class="dammy-photo"></div>
<div class="card-block__info">
<span>
<i class="icon-photos"></i>
x 5
</span>
<div class="dropdown">
<a href="#" class="link" data-toggle="dropdown">
<i class="icon-dots-white"></i>
</a>
<div class="card-dropdown-menu dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">削除</a>
</div>
</div>
</div>
<a href="#" class="button is-w100 is-mini">
<i class="icon-camera is-mini"></i>
</a>
</div>
<!-- card-block -->
<div class="card-block">
<div class="dammy-photo"></div>
<div class="card-block__info">
<span>
<i class="icon-photos"></i>
x 5
</span>
<div class="dropdown">
<a href="#" class="link" data-toggle="dropdown">
<i class="icon-dots-white"></i>
</a>
<div class="card-dropdown-menu dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">削除</a>
</div>
</div>
</div>
<a href="#" class="button is-w100 is-mini">
<i class="icon-camera is-mini"></i>
</a>
</div>
<!-- card-block -->
<div class="card-block">
<div class="dammy-photo"></div>
<div class="card-block__info">
<span>
<i class="icon-photos"></i>
x 5
</span>
<div class="dropdown">
<a href="#" class="link" data-toggle="dropdown">
<i class="icon-dots-white"></i>
</a>
<div class="card-dropdown-menu dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">削除</a>
</div>
</div>
</div>
<a href="#" class="button is-w100 is-mini">
<i class="icon-camera is-mini"></i>
</a>
</div>
<!-- card-block -->
<div class="card-block">
<div class="dammy-photo"></div>
<div class="card-block__info">
<span>
<i class="icon-photos"></i>
x 5
</span>
<div class="dropdown">
<a href="#" class="link" data-toggle="dropdown">
<i class="icon-dots-white"></i>
</a>
<div class="card-dropdown-menu dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">削除</a>
</div>
</div>
</div>
<a href="#" class="button is-w100 is-mini">
<i class="icon-camera is-mini"></i>
</a>
</div>
<!-- card-block -->
<div class="card-block">
<div class="dammy-photo"></div>
<div class="card-block__info">
<span>
<i class="icon-photos"></i>
x 5
</span>
<div class="dropdown">
<a href="#" class="link" data-toggle="dropdown">
<i class="icon-dots-white"></i>
</a>
<div class="card-dropdown-menu dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">削除</a>
</div>
</div>
</div>
<a href="#" class="button is-w100 is-mini">
<i class="icon-camera is-mini"></i>
</a>
</div>
<!-- card-block -->
<div class="card-block">
<div class="dammy-photo"></div>
<div class="card-block__info">
<span>
<i class="icon-photos"></i>
x 5
</span>
<div class="dropdown">
<a href="#" class="link" data-toggle="dropdown">
<i class="icon-dots-white"></i>
</a>
<div class="card-dropdown-menu dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">削除</a>
</div>
</div>
</div>
<a href="#" class="button is-w100 is-mini">
<i class="icon-camera is-mini"></i>
</a>
</div>
<!-- card-block -->
<div class="card-block">
<div class="dammy-photo"></div>
<div class="card-block__info">
<span>
<i class="icon-photos"></i>
x 5
</span>
<div class="dropdown">
<a href="#" class="link" data-toggle="dropdown">
<i class="icon-dots-white"></i>
</a>
<div class="card-dropdown-menu dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">削除</a>
</div>
</div>
</div>
<a href="#" class="button is-w100">
<i class="icon-camera is-mini"></i>
</a>
</div>
<!-- card-block -->
<div class="card-block">
<div class="dammy-photo"></div>
<div class="card-block__info">
<span>
<i class="icon-photos"></i>
x 5
</span>
<div class="dropdown">
<a href="#" class="link" data-toggle="dropdown">
<i class="icon-dots-white"></i>
</a>
<div class="card-dropdown-menu dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">削除</a>
</div>
</div>
</div>
<a href="#" class="button is-w100">
<i class="icon-camera is-mini"></i>
</a>
</div>
</div>
</div>
</div>
<div class="card-button-container">
<a href="#" class="card-button">
<div class="card-button__inner">
Bottom
</div>
</a>
</div>
</div>
</div>
</div>
<script src="/javascripts/scripts.js"></script>
</body>
</html>