<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/marijoha/pen/EvvaXL?limit=all&page=73&q=app" />
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style class="cp-pen-styles">* {
font-family: system-ui;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
#app {
width: 100vw;
height: 100%;
background: #fff;
padding: 0 3%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#app h1 {
font-size: 80px;
color: black;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.1));
filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.1));
font-family: 'Lobster';
margin-top: -7rem;
}
.toolbar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background: #F5EFED;
padding: 1rem;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.toolbar input {
padding: 1rem;
border: none;
border-radius: 5px;
font-size: 24px;
font-weight: bold;
border: 1px solid transparent;
-webkit-transition: .3s ease;
transition: .3s ease;
cursor: text;
color: #595959;
}
.toolbar input:hover {
border: 1px solid #dbdbdb;
}
.toolbar input:focus {
outline: none;
border: 1px solid #d6d6d6;
color: #333;
}
.toolbar__gradients {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 1rem;
height: 100%;
padding: .25rem;
}
.gradient {
width: 4rem;
height: 100%;
border-radius: 5px;
margin-right: .5rem;
border: none;
border: 4px solid #F4ECEA;
cursor: pointer;
-webkit-transition: .3s ease;
transition: .3s ease;
}
.gradient:hover {
border: 4px solid #d1b5ab;
}
.gradient:focus {
outline: none;
}
.gradient-1 {
background: -webkit-gradient(linear, left top, left bottom, from(pink), to(orange));
background: linear-gradient(pink, orange);
}
.gradient-2 {
background: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
}
.gradient-3 {
background: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}
.gradient-4 {
background-image: -webkit-gradient(linear, left top, right top, from(#FF9A8B), color-stop(55%, #FF6A88), to(#FF99AC));
background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
}
.gradient-5 {
background-image: -webkit-gradient(linear, left bottom, left top, from(#FFDEE9), to(#B5FFFC));
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
}
.gradient-6 {
background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);
}
.gradient-7 {
background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
}
.gradient-8 {
background-image: -webkit-gradient(linear, left bottom, left top, from(#08AEEA), to(#2AF598));
background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
}
.toolbar__customize {
width: 100%;
text-align: right;
position: relative;
}
.toolbar__customize button {
position: relative;
height: 60px;
border: none;
font-size: 16px;
font-weight: 700;
color: #333;
background: #e3d2cc;
padding: 1rem;
border-radius: 5px;
cursor: pointer;
-webkit-transition: .3s ease;
transition: .3s ease;
}
.toolbar__customize button:hover {
background: #d1b5ab;
}
.toolbar__customize button:focus {
outline: none;
}
.custom-pop-up {
position: absolute;
width: 500px;
height: 250px;
bottom: 90px;
right: 0;
background: #F5EFED;
border-radius: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding: 1rem;
opacity: 1;
-webkit-transition: .3s ease;
transition: .3s ease;
}
.custom-pop-up:after {
content: '';
width: 20px;
height: 20px;
position: absolute;
bottom: -24px;
right: 0;
border-radius: 100%;
background: #e3d2cc;
}
.custom-pop-up.show {
opacity: 1;
}
.css {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.css p {
font-weight: 700;
color: #714b3f;
}
.css span {
font-size: 14px;
font-family: monospace;
color: #714b3f;
}
.css input {
padding: .5rem;
font-size: 14px;
font-family: monospace;
width: 22.5rem;
opacity: 1;
font-weight: 400;
font-family: monospace;
}
.css input::-webkit-input-placeholder {
opacity: .3;
}
.css input:-ms-input-placeholder {
opacity: .3;
}
.css input::-ms-input-placeholder {
opacity: .3;
}
.css input::placeholder {
opacity: .3;
}
.separator {
font-size: 12px;
font-weight: 700;
width: 100%;
height: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 1rem;
text-align: center;
color: #714b3f;
}
.separator:before {
content: '';
width: 200px;
height: 1px;
background: #be988b;
margin-right: 2rem;
}
.separator:after {
content: '';
width: 200px;
height: 1px;
background: #be988b;
margin-left: 2rem;
}
.color-picker p {
font-weight: 700;
color: #714b3f;
text-align: left;
}
.colors {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 1rem;
width: 100%;
}
.color-1,
.color-2 {
width: 100%;
}
.color-1 input,
.color-2 input {
padding: .5rem;
font-size: 14px;
width: 5rem;
opacity: 1;
font-weight: 400;
font-family: monospace;
}
.color-1 input::-webkit-input-placeholder,
.color-2 input::-webkit-input-placeholder {
opacity: .3;
}
.color-1 input:-ms-input-placeholder,
.color-2 input:-ms-input-placeholder {
opacity: .3;
}
.color-1 input::-ms-input-placeholder,
.color-2 input::-ms-input-placeholder {
opacity: .3;
}
.color-1 input::placeholder,
.color-2 input::placeholder {
opacity: .3;
}
.color-1 {
margin-right: 1rem;
}
.color-1 span,
.color-2 span {
width: 4rem;
height: 4rem;
border-radius: 100%;
border: 2px solid black;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
</style></head><body>
<div id="app">
<h1 class="gradient-3">{{ text }}</h1>
<div class="toolbar">
<input v-model="text" placeholder="Enter text" />
<div class="toolbar__gradients">
<button v-on:click="changeColor" class="gradient gradient-1" id="gradient-1"></button>
<button v-on:click="changeColor" class="gradient gradient-2" id="gradient-2"></button>
<button v-on:click="changeColor" class="gradient gradient-3" id="gradient-3"></button>
<button v-on:click="changeColor" class="gradient gradient-4" id="gradient-4"></button>
<button v-on:click="changeColor" class="gradient gradient-5" id="gradient-5"></button>
<button v-on:click="changeColor" class="gradient gradient-6" id="gradient-6"></button>
<button v-on:click="changeColor" class="gradient gradient-7" id="gradient-7"></button>
<button v-on:click="changeColor" class="gradient gradient-8" id="gradient-8"></button>
</div>
<!-- <div class="toolbar__customize">
<button v-on:click="togglePopUp">Custom gradient</button>
<div class="custom-pop-up">
<div class="css">
<p>Paste CSS</p>
<div>
<span>background: </span>
<input type="text" placeholder="linear-gradient(43deg, #4158D0 0%, #C850C0 53%, #FFCC70 100%);
" />
</div>
</div>
<div class="separator">OR</div>
<div class="color-picker">
<p>Pick 2 colors</p>
<div class="colors">
<div class="color-1">
<span></span>
<input type="text" placeholder="#ffffff" />
</div>
<div class="color-2">
<span></span>
<input type="text" placeholder="#ffffff" />
</div>
</div>
</div>
</div>
</div> -->
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script >var app = new Vue({
el: '#app',
data: {
text: 'Pickle Rick'
},
methods: {
changeColor: function changeColor(e) {
var heading = document.querySelector('h1');
var gradient = e.target.id;
heading.classList = [];
heading.classList.add(gradient);
},
togglePopUp: function togglePopUp(e) {
var popup = document.querySelector('.custom-pop-up');
popup.classList.toggle('show');
}
}
});
//# sourceURL=pen.js
</script>
</body></html>
