feat: basic mobile layout
This commit is contained in:
parent
b5b7ca1f8b
commit
2a0bad598b
51
index.html
51
index.html
|
@ -9,8 +9,8 @@
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
<title>Imagine - Image Editor</title>
|
<title>Imagine - Image Editor</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body style="padding-top: 100vh">
|
||||||
<div class="navbar columns is-mobile">
|
<div class="navbar columns is-mobile is-fixed-top" style="z-index: -1">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="hero is-fullheight">
|
<div class="hero is-fullheight">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
|
@ -88,5 +88,52 @@
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="notification is-fullwidth is-hidden-desktop">
|
||||||
|
<button class="button is-primary">
|
||||||
|
Save Image
|
||||||
|
</button>
|
||||||
|
<button class="button is-secondary">
|
||||||
|
Share
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<p class="menu-label">
|
||||||
|
Color Correction
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label class="label">Brightness</label>
|
||||||
|
<div class="control">
|
||||||
|
<input type="range"
|
||||||
|
id="slider0"
|
||||||
|
class="slider is-fullwidth is-primary"
|
||||||
|
min="0" max="100" value="50" step="1">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label class="label">Saturation</label>
|
||||||
|
<div class="control">
|
||||||
|
<input type="range"
|
||||||
|
id="slider0"
|
||||||
|
class="slider is-fullwidth is-primary"
|
||||||
|
min="0" max="100" value="50" step="1">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label class="label">Contrast</label>
|
||||||
|
<div class="control">
|
||||||
|
<input type="range"
|
||||||
|
id="slider0"
|
||||||
|
class="slider is-fullwidth is-primary"
|
||||||
|
min="0" max="100" value="50" step="1">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="menu-label">
|
||||||
|
Distortion
|
||||||
|
</p>
|
||||||
|
<p class="menu-label">
|
||||||
|
Blur and Sharpen
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in a new issue