<!--<link rel="stylesheet" href="https://dl.dropbox.com/s/pq06sh79bhe1c9t/general.css" />-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<style>
body {
padding-top: 0px;
/* background-color: #fff!important; */
background-color: #fff!important;
}
}
.body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.canvas-area {
flex: 2;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.img-canvas {
border: 1px solid #000;
}
.input-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 10px;
}
.form-group {
width: 90%;
}
.download-button {
margin-top: 10px;
}
</style>
<div class="body">
<div class="canvas-area" id="technicalarpcanva">
<canvas id="technicalarpimgCanvas" class="img-canvas">
Canvas Not supported in your browser... Sorry!
</canvas>
</div>
<div class="input-area">
<div class="form-group">
<label for="image">Source Image:</label>
<input
type="file"
id="image"
class="form-control"
accept=".png,.jpg,.jpeg"
/>
</div>
<div class="form-group">
<label for="topText">Top Text:</label>
<input type="text" id="topText" class="form-control" />
</div>
<div class="form-group">
<label for="bottomText">Bottom Text:</label>
<input type="text" id="bottomText" class="form-control" />
</div>
<a
class="btn btn-primary download-button"
id="technicalArpMeme"
download="meme.html"
>Download</a
>
</div>
</div>
<br>
<br>
<br>
<script type="text/javascript" src="https://raw.githack.com/IamArpain/free-blogger-scripts/IamArpain-start-1/scripts/technicalarpmemes.js"></script>
</body>
</html>
