Notebook design using HTML & CSS


The following source code provides few lines of HTML and CSS which creates a simple yet pretty looks of a notepad.

Source Code :

<link rel='stylesheet' href=''>
  body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 30px;

  .notepad {
    width: 80%;
    max-width: 600px;
    border-radius: 0 0 10px 10px;
    overflow: hidden;

  .top {
    width: 100%;
    height: 50px;
    background: #33842d;
    border-radius: 5px 5px 0 0;
    font-family: "Shadows Into Light", cursive;
    text-align: center;
    font-size: 1.85em;
    border-bottom: 3px solid #000;

  .paper {
    width: 100%;
    height: 60vh;
    padding: 35px 20px;
    background: repeating-linear-gradient(#d7f1dd, #e6f6fd 31px, #7ab9cc 31px, #91c0c7 32px);
    font-family: "Shadows Into Light", cursive;
    line-height: 32px;
    outline: 0;
    font-size: 22px;
<div class="notepad">
  <div class="top">My Notebook</div>
  <div class="paper" contenteditable="true">
    Hello world !!!<br>
    This is my Personal Notebook


Follow this video for complete guidance :


ALSO READ  Create Marquee in webpage using CSS

Comments are closed.