It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
Written by 12 May 2020
To highlight a text, it is not necessary to always use colors. You can put your text in a protruded text box. It will look like it was written on a stone. Looks amazing!
<!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<style>
:root,
:host,
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
letter-spacing: 0.5px;
text-rendering: geometricPrecision;
background: -webkit-gradient(linear, left top, right bottom, from(#fa8ced), to(#fffd90));
background: linear-gradient(to bottom right, #fa8ced, #fffd90);
color: #222;
}
:root .container,
:host .container,
html .container,
body .container {
background: -webkit-gradient(linear, left top, right bottom, from(#fa8ced), to(#fffd90));
background: linear-gradient(to bottom right, #fa8ced, #fffd90);
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: grid;
place-content: center;
}
:root .container .card,
:host .container .card,
html .container .card,
body .container .card {
padding: 3rem;
border-radius: 10px;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3), -3px -3px 6px rgba(255, 255, 255, 0.3), inset 2px 2px 5px rgba(255, 255, 255, 0.3), inset -2px -2px 5px rgba(0, 0, 0, 0.3);
}
:root .container h1,
:host .container h1,
html .container h1,
body .container h1 {
margin: auto;
margin-bottom: 1.5rem;
width: 90%;
max-width: 300px;
}
:root .container p,
:host .container p,
html .container p,
body .container p {
margin: auto;
max-width: 300px;
width: 90%;
}
</style>
<div class="container">
<div class="card">
<h1>Lorem ipsum dolor</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum odio dignissimos sapiente. Veritatis vitae reiciendis repellendus, debitis qui aspernatur a doloribus eveniet sequi quisquam! Eos, totam repudiandae dolor dolores quam hic, id non aliquid
asperiores nisi molestias odio reprehenderit quas architecto nobis nulla cum inventore ex perspiciatis corrupti saepe accusantium?
</p>
</div>
</div><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!