Every second you spend comparing your life to someone else’s is a second spent wasting yours; so stop comparing and create your own definition of success instead.
<div class="demo-blackboard-outer-container">
<div class="demo-blackboard-inner-container">
<div class="demo-blackboard-content">
<p>Every second you spend comparing your life to someone else’s is a second spent wasting yours; so stop comparing and create your own definition of success instead.</p>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
.source-code-area {
background: #d8d9da;
padding: 2em 0;
}
.demo-section {
background-image: url("bg-wall.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
padding: 4rem 4rem 12rem 4rem;
}
.demo-blackboard-outer-container {
margin: 0 auto;
max-width: 900px;
padding: 20px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.60);
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.demo-blackboard-inner-container {
position: relative;
border-radius: 5px;
border: 14px solid #c8c9ca;
box-shadow: 0 0 0 1px #ffffff, 0 0 0 14px #babcbd,
inset -1px 2px 2px #edeff0, 0px 5px 15px rgba(0, 0, 0, 0.35);
overflow: hidden;
background: #222222;
}
.demo-blackboard-content {
padding: 3rem;
font-family: "Fredericka the Great", serif;
font-weight: 400;
font-style: normal;
font-size: 2.4vw;
line-height: 2.2vw;
color: rgba(255, 255, 255, 0.69);
background-image: url("bg-blackboard.jpg");
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
@media only screen and (max-width: 798px) {
.demo-blackboard-content {
font-size: 16px !important;
line-height: 16px;
}
}