People like to judge other people. This peer pressure can make you stray from the path you started to carve for your future. Don’t mind other people’s aspirations, don’t ever let someone else’s goals and dreams influence your vision of life. It’s your path and you decide where it takes you and how long it takes you to see it through.
This CSS snippet creates a stylized whiteboard effect by layering visual elements and styles to simulate a real-world whiteboard environment. Here's a summary of how it achieves that:
.demo-section sets a classroom-like wall background image, giving the impression the whiteboard is mounted on a wall..demo-whiteboard-wrap defines the main whiteboard area with a semi-transparent white background, rounded corners, and drop shadows for depth and realism..demo-whiteboard-container adds a border and multiple shadows to create a framed whiteboard look, with a subtle gradient background inside to simulate a glossy surface..demo-whiteboard-header includes an image of magnet buttons for realism..demo-whiteboard-footer uses an image of markers and erasers, placed at the bottom like they would be on a real board tray..demo-whiteboard-content uses the "Gochi Hand" Google Font to mimic handwritten notes, enhancing the whiteboard illusion.
<section class="demo-section">
<div class="demo-whiteboard-wrap">
<div class="demo-whiteboard-container">
<div class="demo-whiteboard-header"></div>
<div class="demo-whiteboard-content">
<div class="demo-content-title">Lesson 1: Walk your own path</div>
<div class="demo-content-body">
<p>People like to judge other people. This peer pressure can make you stray from the path you started to carve for your future. Don’t mind other people’s aspirations, don’t ever let someone else’s goals and dreams influence your vision of life. It’s your path and you decide where it takes you and how long it takes you to see it through.</p>
<p class="demo-quote-author">Joseph Nazoa</p>
</div>
<div style="padding-top: 2.5em"></div>
</div>
<div class="demo-whiteboard-footer"></div>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');
.demo-section {
background-image: url("bg-wall.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
padding: 2em 4em 6.9em 4em;
}
.demo-whiteboard-wrap {
margin: 0 auto;
max-width: 940px;
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-whiteboard-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: #FFFFFF;
background: radial-gradient(at left top, #FFFFFF, #FDFCFC);
}
.demo-whiteboard-header {
height: 50px;
background-image: url("magnet-buttons.png");
background-repeat: no-repeat;
background-position: bottom right;
margin-right: 10px;
}
.demo-whiteboard-footer {
position: absolute;
width: 100%;
bottom: 0px;
height: 36px;
background-image: url("marker-and-eraser.png");
background-repeat: no-repeat;
background-position: center;
background-size: 300px 36px;
}
.demo-whiteboard-content {
padding: 1em 2em;
font-family: 'Gochi Hand', cursive;
font-size: 1.4vw;
line-height: 1.5vw;
color: #3a4ba1;
}
.demo-content-title {
border-bottom: 1px dashed #CCCCCC;
padding-bottom: 2px;
margin-bottom: 1em;
}
.demo-quote-author {
text-align: right;
}
@media only screen and (max-width: 798px) {
.demo-whiteboard-content {
font-size: 16px !important;
line-height: 16px;
}
}