Create note using html and css

Total Views : 444
Zoom In Zoom Out Read Later Print

This code is all about creating note, using html and css in 4 different style of notes.

note.css

@charset "UTF-8";

/* Common Styles */
div[class*="pd-note-"]+div[class*="pd-note-"] {
margin-top: 20px;
}

/* Note Style 1 */
.pd-note-style1 {
vertical-align: middle;
padding: 20px;
background-color: #fff;
border: 1px solid #f5f5f5;
display: table;
width: 100%;
}

.pd-note-style1 .note-icon {
color: #aaa;
width: 58px;
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 30px;
}

.pd-note-style1 .note-desc {
vertical-align: middle;
padding-left: 15px;
}

.pd-note-style1 .note-desc h3 {
margin: 0 0 7px 0;
font-size: 20px;
}

.pd-note-style1.pd-note-info {
border-color: #3dc0f1;
}

.pd-note-style1.pd-note-info .note-icon {
color: #3dc0f1;
}

.pd-note-style1.pd-note-success {
border-color: #4CAF50;
}

.pd-note-style1.pd-note-success .note-icon {
color: #4CAF50;
}

.pd-note-style1.pd-note-warning {
border-color: #FF9800;
}

.pd-note-style1.pd-note-warning .note-icon {
color: #FF9800;
}

.pd-note-style1.pd-note-danger {
border-color: #ff5252;
}

.pd-note-style1.pd-note-danger .note-icon {
color: #ff5252;
}

/* Note Style 2 */
.pd-note-style2 {
vertical-align: middle;
padding: 20px;
background-color: #fff;
border-top: 3px solid #444;
display: table;
width: 100%;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.pd-note-style2 .note-icon {
width: 58px;
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 30px;
}

.pd-note-style2 .note-desc {
vertical-align: middle;
padding-left: 15px;
}

.pd-note-style2 .note-desc h3 {
margin: 0 0 7px 0;
font-size: 20px;
}

.pd-note-style2.pd-note-info {
border-color: #3dc0f1;
}

.pd-note-style2.pd-note-info .note-icon {
color: #3dc0f1;
}

.pd-note-style2.pd-note-success {
border-color: #4CAF50;
}

.pd-note-style2.pd-note-success .note-icon {
color: #4CAF50;
}

.pd-note-style2.pd-note-warning {
border-color: #FF9800;
}

.pd-note-style2.pd-note-warning .note-icon {
color: #FF9800;
}

.pd-note-style2.pd-note-danger {
border-color: #ff5252;
}

.pd-note-style2.pd-note-danger .note-icon {
color: #ff5252;
}

/* Note Style 3 */
.pd-note-style3 {
vertical-align: middle;
padding: 20px;
background-color: #fff;
border: 2px solid #f5f5f5;
display: table;
width: 100%;
}

.pd-note-style3 .note-icon {
width: 58px;
height: 58px;
line-height: 58px;
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 20px;
background: rgba(0, 0, 0, 0.05);
border-radius: 50%;
color: #444;
}

.pd-note-style3 .note-desc {
vertical-align: middle;
padding-left: 15px;
margin-left: 20px;
border-left: 2px solid rgba(0, 0, 0, 0.04);
}

.pd-note-style3 .note-desc h3 {
margin: 0 0 7px 0;
font-size: 20px;
}

.pd-note-style3.pd-note-info {
background-color: #3dc0f1;
}

.pd-note-style3.pd-note-success {
background-color: #4CAF50;
}

.pd-note-style3.pd-note-warning {
background-color: #FF9800;
}

.pd-note-style3.pd-note-danger {
background-color: #ff5252;
}

.pd-note-style3.pd-note-info .note-desc h3,
.pd-note-style3.pd-note-info .note-desc p {
color: #fff;
}

.pd-note-style3.pd-note-success .note-desc h3,
.pd-note-style3.pd-note-success .note-desc p {
color: #fff;
}

.pd-note-style3.pd-note-warning .note-desc h3,
.pd-note-style3.pd-note-warning .note-desc p {
color: #fff;
}

.pd-note-style3.pd-note-danger .note-desc h3,
.pd-note-style3.pd-note-danger .note-desc p {
color: #fff;
}

.pd-note-style3.pd-note-info .note-icon,
.pd-note-style3.pd-note-success .note-icon,
.pd-note-style3.pd-note-warning .note-icon,
.pd-note-style3.pd-note-danger .note-icon {
color: #fff;
background-color: rgba(255, 255, 255, 0.15);
}

/* Note Style 4 */
.pd-note-style4 {
padding: 25px;
background-color: #fff;
border: 1px solid #f5f5f5;
position: relative;
overflow: hidden;
}

.pd-note-style4 .note-icon {
text-align: center;
position: absolute;
right: -17px;
bottom: 0;
font-size: 90px;
transform: rotate(15deg);
opacity: 0.1;
color: #bbb;
}

.pd-note-style4 .note-desc h3 {
margin: 0 0 7px 0;
font-size: 20px;
border-bottom: 1px solid rgba(68, 68, 68, 0.04);
padding-bottom: 8px;
margin-bottom: 14px;
width: 95%;
}

.pd-note-style4.pd-note-info,
.pd-note-style4.pd-note-info .note-desc h3 {
border-color: rgba(61, 192, 241, 0.5);
}

.pd-note-style4.pd-note-info .note-icon {
color: #3dc0f1;
}

.pd-note-style4.pd-note-success,
.pd-note-style4.pd-note-success .note-desc h3 {
border-color: rgba(76, 175, 80, 0.5);
}

.pd-note-style4.pd-note-success .note-icon {
color: #4CAF50;
}

.pd-note-style4.pd-note-warning,
.pd-note-style4.pd-note-warning .note-desc h3 {
border-color: rgba(255, 152, 0, 0.5);
}

.pd-note-style4.pd-note-warning .note-icon {
color: #FF9800;
}

.pd-note-style4.pd-note-danger,
.pd-note-style4.pd-note-danger .note-desc h3 {
border-color: rgba(255, 82, 82, 0.5);
}

.pd-note-style4.pd-note-danger .note-icon {
color: #ff5252;
}

note.html

<!DOCTYPE html>
<html lang="zxx">
<head>

<!-- meta character set -->
<meta charset="utf-8">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Fontawesome Icon font -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- bootstrap.min -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- demo stylesheet -->
<link rel="stylesheet" href="css/main.css"> <!-- This file only use demostration -->
<!-- note stylesheet -->
<link rel="stylesheet" href="css/note.css">
</head>

<body id="body">
<!-- Main Start -->
<main class="site-content">

<!-- Note Style 1 Start -->
<section class="sec-spacer sec-color">
<div class="container container-center">
<h3 class="title text-center">Style 1</h3>
<div class="pd-note-style1">
<div class="note-icon">
<i class="fa fa-envelope-o"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style1 pd-note-info">
<div class="note-icon">
<i class="fa fa-info"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style1 pd-note-success">
<div class="note-icon">
<i class="fa fa-check"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style1 pd-note-warning">
<div class="note-icon">
<i class="fa fa-question-circle"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style1 pd-note-danger">
<div class="note-icon">
<i class="fa fa-remove"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
</div>
</section>
<!-- Note Style 1 End -->

<!-- Note Style 2 Start -->
<section class="sec-spacer">
<div class="container container-center">
<h3 class="title text-center">Style 2</h3>
<div class="pd-note-style2">
<div class="note-icon">
<i class="fa fa-envelope-o"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style2 pd-note-info">
<div class="note-icon">
<i class="fa fa-info"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style2 pd-note-success">
<div class="note-icon">
<i class="fa fa-check"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style2 pd-note-warning">
<div class="note-icon">
<i class="fa fa-question-circle"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style2 pd-note-danger">
<div class="note-icon">
<i class="fa fa-remove"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
</div>
</section>
<!-- Note Style 2 End -->

<!-- Note Style 3 Start -->
<section class="sec-spacer sec-color">
<div class="container container-center">
<h3 class="title text-center">Style 3</h3>
<div class="pd-note-style3">
<div class="note-icon">
<i class="fa fa-envelope-o"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style3 pd-note-info">
<div class="note-icon">
<i class="fa fa-info"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style3 pd-note-success">
<div class="note-icon">
<i class="fa fa-check"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style3 pd-note-warning">
<div class="note-icon">
<i class="fa fa-question-circle"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style3 pd-note-danger">
<div class="note-icon">
<i class="fa fa-remove"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
</div>
</section>
<!-- Note Style 3 End -->

<!-- Note Style 4 Start -->
<section class="sec-spacer">
<div class="container container-center">
<h3 class="title text-center">Style 4</h3>
<div class="pd-note-style4">
<div class="note-icon">
<i class="fa fa-envelope-o"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style4 pd-note-info">
<div class="note-icon">
<i class="fa fa-info"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style4 pd-note-success">
<div class="note-icon">
<i class="fa fa-check"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style4 pd-note-warning">
<div class="note-icon">
<i class="fa fa-question-circle"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
<div class="pd-note-style4 pd-note-danger">
<div class="note-icon">
<i class="fa fa-remove"></i>
</div>
<div class="note-desc">
<h3>Note Title</h3>
<p>
Some text to show in your note.
</p>
</div>
</div>
</div>
</section>
<!-- Note Style 4 End -->
</main>
<!-- Main End -->
</body>
</html>

See More

Latest Photos