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.
HTML
<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>
CSS
@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;
}
}
Arrow at the bottom
Arrow at the bottom with a utf-8 character
Arrow at the top of a container
Aside
Background color
Blackboard design
Breadcrumbs design
Calendar design
Checkboxes design
Checkboxes as switch buttons design
Circular image with border and shadow design
Cursor
Font Awesome pulled icons
Gallery picture frame with a price ribbon
Google pie chart
Google web fonts
Image caption
Last child and not last child element
Letter spacing
List items with a Font Awesome icon
Neon text
Neon text with a flickering effect
Notebook paper background
Radio buttons design
Radio buttons as stars
Remove the glow effect from an input field
Search bar with categories
Track (audio/video subtitles)
Web fonts
Whiteboard design