Skip to content

Commit

Permalink
change html file to be more semnatic
Browse files Browse the repository at this point in the history
  • Loading branch information
@abdulbasit-dev
abdulbasit-dev committed May 3, 2020
1 parent 8bdcf6c commit 3bf7ca2
Showing 1 changed file with 24 additions and 19 deletions.
43 changes: 24 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,11 @@
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- min.css bootstrap -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

<!-- my style -->
<link rel="stylesheet" href="css/style.css">
</head>

<body>


<header>
<nav class="navbar navbar-dark bg-info mb-5">
<div class="container">
Expand All @@ -27,56 +24,63 @@
</header>

<main>

</main>
<div class="container">
<div class="row">
<div class="col-md-8 m-auto">
<div class="container">
<section id="addFile">
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="upload-file">
<label for="upload-file" class="custom-file-label">Choose Image</label>
</div>
<canvas id="canvas"></canvas>

<h4 class="text-center my-3">Filters</h4>
<div class="row">
<div class="col-md-6">
<canvas id="canvas1"></canvas>
</div>
<div class="col-md-6">
<canvas id="canvas2"></canvas>
</div>
</div>
</section>

<div class="row my-4 text-center">
<section id="filter" class="text-center py-5">
<h4 class=" my-3">Filters</h4>
<div class="row my-4 ">
<div class="col-md-3">
<div class="btn-group btn-group-sm">
<div class="btn-group ">
<button class="filter-btn brightness-remove btn btn-info">-</button>
<button class="btn btn-secondary btn-disabled" disabled>Brightness</button>
<button class="filter-btn brightness-add btn btn-info">+</button>
</div>
</div>

<div class="col-md-3">
<div class="btn-group btn-group-sm">
<div class="btn-group ">
<button class="filter-btn contrast-remove btn btn-info">-</button>
<button class="btn btn-secondary btn-disabled" disabled>Contrast</button>
<button class="filter-btn contrast-add btn btn-info">+</button>
</div>
</div>

<div class="col-md-3">
<div class="btn-group btn-group-sm">
<div class="btn-group ">
<button class="filter-btn saturation-remove btn btn-info">-</button>
<button class="btn btn-secondary btn-disabled" disabled>Saturation</button>
<button class="filter-btn saturation-add btn btn-info">+</button>
</div>
</div>

<div class="col-md-3">
<div class="btn-group btn-group-sm">
<div class="btn-group ">
<button class="filter-btn vibrance-remove btn btn-info">-</button>
<button class="btn btn-secondary btn-disabled" disabled>Vibrance</button>
<button class="filter-btn vibrance-add btn btn-info">+</button>
</div>
</div>
</div>
<!-- ./row -->
</section>

<section id="effects">
<h4 class="text-center my-3">Effects</h4>

<div class="row mb-3">
<div class="col-md-3">
<button class="filter-btn vintage-add btn btn-dark btn-block">
Expand Down Expand Up @@ -122,18 +126,19 @@ <h4 class="text-center my-3">Effects</h4>
</button>
</div>
</div>
</section>

<div class="row mt-5 mb-4">
<section id="action" class="my-5">
<div class="row">
<div class="col-md-6">
<button id="download-btn" class="btn btn-primary btn-block">Download Image</button>
</div>
<div class="col-md-6">
<button id="revert-btn" class="btn btn-danger btn-block">Remove Filters</button>
</div>
</div>
</div>
</section>
</div>
</div>
</main>

<footer class="p-4 bg-dark text-white">
Expand Down

0 comments on commit 3bf7ca2

Please sign in to comment.