Design is completely based on Ramil Derogongun's mock up on dribbble that can be found here https://dribbble.com/shots/1052480-Post-New-Entry
The editor itself is using quill.js
A Pen by John Balladares on CodePen.
<div class="editor-wrapper"> | |
<div class="newEntryDiv">NEW ENTRY</div> | |
<div class="title-wrapper"> | |
<input type="text" id="pr-title" class="inputInfo" placeholder="Your Title Here..."> | |
</div> | |
<div class="author-publication-wrapper"> | |
<input type="text" class="inputInfo meta" placeholder="Author" id="pr-author"> | |
<input type="text" class="inputInfo meta" placeholder="Publication" id="pr-publication"> | |
</div> | |
<!-- Create the toolbar container --> | |
<div id="toolbar" class="mytoolbar"> | |
<button class="ql-bold"><i class="fa fa-bold"></i></button> | |
<button class="ql-italic"><i class="fa fa-italic"></i></button> | |
<button class="ql-underline"><i class="fa fa-underline"></i> | |
</button> | |
<button class="ql-link"><i class="fa fa-link"></i></button> | |
<select class="ql-size"> | |
<option value="10px">Small</option> | |
<option value="13px">Normal</option> | |
<option value="18px">Large</option> | |
<option value="32px">Huge</option> | |
</select> | |
</div> | |
<!-- THIS IS THE EDITOR DIV --> | |
<div id="editor" class="editor"></div> | |
<div class="btn-wrap"> | |
<button id="button" class="btn_main">POST</button> | |
<button class="clip"><i class="fa fa-paperclip"></i> | |
</button> | |
</div> | |
</div> | |
<!-- ENDING THE EDITOR DIV --> | |
<!-- Include the Quill library --> | |
<script src="//cdn.quilljs.com/0.20.0/quill.js"></script> | |
var editorArea = document.getElementById('editor'); | |
var editor = new Quill(editorArea, { | |
modules: { | |
"toolbar": { | |
container: "#toolbar" | |
}, | |
"link-tooltip": true, | |
"image-tooltip": true | |
} | |
}); | |
var draftHTML = editor.getHTML(); | |
console.log(draftHTML); |
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700); | |
/**** **** **** **** **** | |
BREAKPOINTS - | |
USAGE: @include breakpoint(small) {} | |
**** **** **** **** ****/ | |
/* Coolors Exported Palette - coolors.co/85ffc7-297373-ff8552-e6e6e6-39393a */ | |
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700); | |
/* Coolors Exported Palette - coolors.co/85ffc7-297373-ff8552-e6e6e6-39393a */ | |
body { | |
font-family: "Lato"; | |
width: 95%; | |
margin: 0 auto; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; } | |
h1 { | |
color: #297373; } | |
input[type="text"] { | |
vertical-align: middle; } | |
#el { | |
border-radius: 200px 200px 0 0; | |
height: 35vh; | |
overflow: hidden; | |
position: relative; | |
width: 75vh; } | |
#el:after { | |
background: #fff; | |
border-radius: 140px 140px 0 0; | |
bottom: 0; | |
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15); | |
color: rgba(255, 80, 0, 0.7); | |
content: attr(data-value); | |
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif; | |
font-size: 3.5em; | |
font-weight: 100; | |
height: 70px; | |
left: 30px; | |
line-height: 95px; | |
position: absolute; | |
text-align: center; | |
width: 140px; | |
z-index: 3; } | |
#el:before { | |
background: #fbfbfb; | |
border-radius: 200px 200px 0 0; | |
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15) inset; | |
content: ""; | |
height: 35vh; | |
position: absolute; | |
width: 75vh; | |
margin-top: 2em; | |
margin-left: auto; | |
margin-right: auto; } | |
/* | |
span { | |
background: rgba(255, 80, 0, 0.7); | |
border-radius: 4px; | |
bottom: -4px; | |
box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4); | |
display: block; | |
height: 8px; | |
left: 10px; | |
position: absolute; | |
width: 90px; | |
transform-origin: 100% 4px; | |
transform: rotate(0deg); | |
transition: all 1s; | |
} | |
*/ | |
.editorWrapper { | |
margin: 0 auto; } | |
textarea { | |
display: block; | |
width: 100%; | |
margin: 0 auto; } | |
.btn_main { | |
background: #ED645A; | |
color: white; | |
font-size: 1.2em; | |
font-weight: bold; | |
line-height: 1.5em; | |
margin: 0 auto; | |
text-align: center; | |
border: none; | |
cursor: pointer; | |
vertical-align: middle; | |
padding-top: .4em; | |
padding-bottom: .4em; | |
padding-left: 1em; | |
padding-right: 1em; } | |
.btn_main:hover { | |
background: #ea4e43; | |
cursor: pointer; } | |
.clip { | |
background: #2E3F4C; | |
border: none; | |
color: white; | |
font-size: 2em; | |
vertical-align: middle; | |
padding-left: 1em; } | |
.input-wrapper { | |
text-align: left; | |
margin: 1em; | |
width: 90%; } | |
.prField { | |
font-size: 1.2em; | |
width: 90%; } | |
.retrievePost { | |
background: gray; | |
color: white; | |
padding: 1em; } | |
.editor { | |
background: #1F2E3A; | |
color: white; | |
width: 80%; | |
margin: 0 auto !important; | |
height: 300px !important; | |
font-size: 1.5em;} | |
.editor:hover { | |
cursor: pointer; } | |
.editor-wrapper { | |
background: #2E3F4C; } | |
.editorFinal-wrapper { | |
margin: 0 auto; } | |
.mytoolbar { | |
background: #374D60; | |
text-align: center; | |
margin: 2em auto 0 auto; | |
width: 80%; } | |
@media (max-width: 767px) { | |
.mytoolbar { | |
width: 100%; } } | |
.mytoolbar [class^=ql] { | |
font-size: 1.3em; | |
background: #374D60; | |
padding: .5em; | |
width: 10%; | |
border: none; | |
color: #E1E3E5; } | |
@media (max-width: 767px) { | |
.mytoolbar [class^=ql] { | |
width: 2%; | |
padding-left: 1em; | |
padding-right: 1em; | |
padding-top: 0; } } | |
.mytoolbar .fa:hover { | |
cursor: pointer; | |
color: #b8bdc1; } | |
.mytoolbar .ql-size { | |
width: auto; } | |
.btn-wrap { | |
text-align: left; | |
width: 80%; | |
margin: 0 auto; | |
padding-top: 1.5em; | |
padding-bottom: 2em; } | |
.svg { | |
width: 85%; | |
fill: #E1E3E5; } | |
.icon { | |
color: #E1E3E5; } | |
.newEntryDiv { | |
background: #ED645A; | |
color: white; | |
font-size: 1.4em; | |
line-height: 2em; | |
padding-left: 2em; | |
font-weight: bold; } | |
.title-wrapper, .author-publication-wrapper { | |
background: #2E3F4C; | |
margin: 0 auto; | |
padding-top: 1em; } | |
.inputInfo { | |
background: #2E3F4C; | |
border-bottom: 1px solid #1b252c; | |
border-top: 1px solid #2E3F4C; | |
border-right: 1px solid #2E3F4C; | |
border-left: 1px solid #2E3F4C; | |
font-size: 1.2em; | |
width: 75%; | |
display: block; | |
margin: 0 auto; | |
padding-top: .5em; | |
color: white; } | |
@media (max-width: 767px) { | |
.inputInfo { | |
font-size: 1em; } } | |
.inputInfo:hover { | |
cursor: text; } | |
.inputInfo:focus { | |
outline: none; | |
border: 1px solid #ED645A; | |
box-sahdow: 0 0 10px; } | |
.inputInfo:after { | |
content: ""; | |
width: 0; | |
height: 0; | |
border-top: 20px solid transparent; | |
border-bottom: 20px solid transparent; | |
border-left: 20px solid green; | |
position: relative; } | |
.author-publication-wrapper { | |
display: flex; | |
padding-left: 2em; | |
padding-right: 2em; } | |
.meta { | |
width: 30%; } | |
/* | |
.triangle { | |
width: 0; | |
height: 0; | |
border-style: solid; | |
border-width: 0 0 10px 10px; | |
border-color: transparent transparent $pink transparent; | |
} | |
*/ |
Design is completely based on Ramil Derogongun's mock up on dribbble that can be found here https://dribbble.com/shots/1052480-Post-New-Entry
The editor itself is using quill.js
A Pen by John Balladares on CodePen.