1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="page-content container note-has-grid">
<ul class="nav nav-pills p-3 bg-white mb-3 rounded-pill align-items-center">
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link rounded-pill note-link d-flex align-items-center px-2 px-md-3 mr-0 mr-md-2 active" id="all-category">
<i class="icon-layers mr-1"></i><span class="d-none d-md-block">All Notes</span>
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link rounded-pill note-link d-flex align-items-center px-2 px-md-3 mr-0 mr-md-2" id="note-business"> <i class="icon-briefcase mr-1"></i><span class="d-none d-md-block">Business</span></a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link rounded-pill note-link d-flex align-items-center px-2 px-md-3 mr-0 mr-md-2" id="note-social"> <i class="icon-share-alt mr-1"></i><span class="d-none d-md-block">Social</span></a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link rounded-pill note-link d-flex align-items-center px-2 px-md-3 mr-0 mr-md-2" id="note-important"> <i class="icon-tag mr-1"></i><span class="d-none d-md-block">Important</span></a>
</li>
<li class="nav-item ml-auto">
<a href="javascript:void(0)" class="nav-link btn-primary rounded-pill d-flex align-items-center px-3" id="add-notes"> <i class="icon-note m-1"></i><span class="d-none d-md-block font-14">Add Notes</span></a>
</li>
</ul>
<div class="tab-content bg-transparent">
<div id="note-full-container" class="note-has-grid row">
<div class="col-md-4 single-note-item all-category" style={{/**/}}>
<div class="card card-body">
<span class="side-stick"></span>
<h5 class="note-title text-truncate w-75 mb-0" data-noteheading="Book a Ticket for Movie">Book a Ticket for Movie <i class="point fa fa-circle ml-1 font-10"></i></h5>
<p class="note-date font-12 text-muted">11 March 2009</p>
<div class="note-content">
<p class="note-inner-content text-muted" data-notecontent="Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.">Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.</p>
</div>
<div class="d-flex align-items-center">
<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>
<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>
<div class="ml-auto">
<div class="category-selector btn-group">
<a class="nav-link dropdown-toggle category-dropdown label-group p-0" data-toggle="dropdown" href="#/" role="button" aria-haspopup="true" aria-expanded="true">
<div class="category">
<div class="category-business"></div>
<div class="category-social"></div>
<div class="category-important"></div>
<span class="more-options text-dark"><i class="icon-options-vertical"></i></span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right category-menu">
<a class="note-business badge-group-item badge-business dropdown-item position-relative category-business text-success" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i>Business
</a>
<a class="note-social badge-group-item badge-social dropdown-item position-relative category-social text-info" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Social
</a>
<a class="note-important badge-group-item badge-important dropdown-item position-relative category-important text-danger" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Important
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 single-note-item all-category note-important" style={{/**/}}>
<div class="card card-body">
<span class="side-stick"></span>
<h5 class="note-title text-truncate w-75 mb-0" data-noteheading="Go for lunch">Go for lunch <i class="point fa fa-circle ml-1 font-10"></i></h5>
<p class="note-date font-12 text-muted">01 April 2002</p>
<div class="note-content">
<p class="note-inner-content text-muted" data-notecontent="Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.">Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.</p>
</div>
<div class="d-flex align-items-center">
<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>
<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>
<div class="ml-auto">
<div class="category-selector btn-group">
<a class="nav-link dropdown-toggle category-dropdown label-group p-0" data-toggle="dropdown" href="#/" role="button" aria-haspopup="true" aria-expanded="true">
<div class="category">
<div class="category-business"></div>
<div class="category-social"></div>
<div class="category-important"></div>
<span class="more-options text-dark"><i class="icon-options-vertical"></i></span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right category-menu">
<a class="note-business badge-group-item badge-business dropdown-item position-relative category-business text-success" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i>Business
</a>
<a class="note-social badge-group-item badge-social dropdown-item position-relative category-social text-info" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Social
</a>
<a class="note-important badge-group-item badge-important dropdown-item position-relative category-important text-danger" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Important
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 single-note-item all-category note-social" style={{/**/}}>
<div class="card card-body">
<span class="side-stick"></span>
<h5 class="note-title text-truncate w-75 mb-0" data-noteheading="Meeting with Mr.Jojo">Meeting with Mr.Jojo <i class="point fa fa-circle ml-1 font-10"></i></h5>
<p class="note-date font-12 text-muted">19 October 2020</p>
<div class="note-content">
<p class="note-inner-content text-muted" data-notecontent="Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.">Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.</p>
</div>
<div class="d-flex align-items-center">
<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>
<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>
<div class="ml-auto">
<div class="category-selector btn-group">
<a class="nav-link dropdown-toggle category-dropdown label-group p-0" data-toggle="dropdown" href="#/" role="button" aria-haspopup="true" aria-expanded="true">
<div class="category">
<div class="category-business"></div>
<div class="category-social"></div>
<div class="category-important"></div>
<span class="more-options text-dark"><i class="icon-options-vertical"></i></span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right category-menu">
<a class="note-business badge-group-item badge-business dropdown-item position-relative category-business text-success" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i>Business
</a>
<a class="note-social badge-group-item badge-social dropdown-item position-relative category-social text-info" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Social
</a>
<a class="note-important badge-group-item badge-important dropdown-item position-relative category-important text-danger" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Important
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 single-note-item all-category note-business" style={{/**/}}>
<div class="card card-body">
<span class="side-stick"></span>
<h5 class="note-title text-truncate w-75 mb-0" data-noteheading="Give Review for design">Give Review for design <i class="point fa fa-circle ml-1 font-10"></i></h5>
<p class="note-date font-12 text-muted">02 January 2000</p>
<div class="note-content">
<p class="note-inner-content text-muted" data-notecontent="Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.">Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.</p>
</div>
<div class="d-flex align-items-center">
<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>
<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>
<div class="ml-auto">
<div class="category-selector btn-group">
<a class="nav-link dropdown-toggle category-dropdown label-group p-0" data-toggle="dropdown" href="#/" role="button" aria-haspopup="true" aria-expanded="true">
<div class="category">
<div class="category-business"></div>
<div class="category-social"></div>
<div class="category-important"></div>
<span class="more-options text-dark"><i class="icon-options-vertical"></i></span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right category-menu">
<a class="note-business badge-group-item badge-business dropdown-item position-relative category-business text-success" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i>Business
</a>
<a class="note-social badge-group-item badge-social dropdown-item position-relative category-social text-info" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Social
</a>
<a class="note-important badge-group-item badge-important dropdown-item position-relative category-important text-danger" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Important
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 single-note-item all-category note-social" style={{/**/}}>
<div class="card card-body">
<span class="side-stick"></span>
<h5 class="note-title text-truncate w-75 mb-0" data-noteheading="Nightout with friends">Nightout with friends <i class="point fa fa-circle ml-1 font-10"></i></h5>
<p class="note-date font-12 text-muted">01 August 1999</p>
<div class="note-content">
<p class="note-inner-content text-muted" data-notecontent="Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.">Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.</p>
</div>
<div class="d-flex align-items-center">
<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>
<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>
<div class="ml-auto">
<div class="category-selector btn-group">
<a class="nav-link dropdown-toggle category-dropdown label-group p-0" data-toggle="dropdown" href="#/" role="button" aria-haspopup="true" aria-expanded="true">
<div class="category">
<div class="category-business"></div>
<div class="category-social"></div>
<div class="category-important"></div>
<span class="more-options text-dark"><i class="icon-options-vertical"></i></span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right category-menu">
<a class="note-business badge-group-item badge-business dropdown-item position-relative category-business text-success" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i>Business
</a>
<a class="note-social badge-group-item badge-social dropdown-item position-relative category-social text-info" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Social
</a>
<a class="note-important badge-group-item badge-important dropdown-item position-relative category-important text-danger" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Important
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 single-note-item all-category note-important" style={{/**/}}>
<div class="card card-body">
<span class="side-stick"></span>
<h5 class="note-title text-truncate w-75 mb-0" data-noteheading="Launch new template">Launch new template <i class="point fa fa-circle ml-1 font-10"></i></h5>
<p class="note-date font-12 text-muted">21 January 2015</p>
<div class="note-content">
<p class="note-inner-content text-muted" data-notecontent="Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.">Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.</p>
</div>
<div class="d-flex align-items-center">
<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>
<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>
<div class="ml-auto">
<div class="category-selector btn-group">
<a class="nav-link dropdown-toggle category-dropdown label-group p-0" data-toggle="dropdown" href="#/" role="button" aria-haspopup="true" aria-expanded="true">
<div class="category">
<div class="category-business"></div>
<div class="category-social"></div>
<div class="category-important"></div>
<span class="more-options text-dark"><i class="icon-options-vertical"></i></span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right category-menu">
<a class="note-business badge-group-item badge-business dropdown-item position-relative category-business text-success" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i>Business
</a>
<a class="note-social badge-group-item badge-social dropdown-item position-relative category-social text-info" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Social
</a>
<a class="note-important badge-group-item badge-important dropdown-item position-relative category-important text-danger" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Important
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 single-note-item all-category note-social" style={{/**/}}>
<div class="card card-body">
<span class="side-stick"></span>
<h5 class="note-title text-truncate w-75 mb-0" data-noteheading="Change a Design">Change a Design <i class="point fa fa-circle ml-1 font-10"></i></h5>
<p class="note-date font-12 text-muted">25 December 2016</p>
<div class="note-content">
<p class="note-inner-content text-muted" data-notecontent="Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.">Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.</p>
</div>
<div class="d-flex align-items-center">
<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>
<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>
<div class="ml-auto">
<div class="category-selector btn-group">
<a class="nav-link dropdown-toggle category-dropdown label-group p-0" data-toggle="dropdown" href="#/" role="button" aria-haspopup="true" aria-expanded="true">
<div class="category">
<div class="category-business"></div>
<div class="category-social"></div>
<div class="category-important"></div>
<span class="more-options text-dark"><i class="icon-options-vertical"></i></span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right category-menu">
<a class="note-business badge-group-item badge-business dropdown-item position-relative category-business text-success" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i>Business
</a>
<a class="note-social badge-group-item badge-social dropdown-item position-relative category-social text-info" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Social
</a>
<a class="note-important badge-group-item badge-important dropdown-item position-relative category-important text-danger" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Important
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 single-note-item all-category note-business" style={{/**/}}>
<div class="card card-body">
<span class="side-stick"></span>
<h5 class="note-title text-truncate w-75 mb-0" data-noteheading="Give review for foods">Give review for foods <i class="point fa fa-circle ml-1 font-10"></i></h5>
<p class="note-date font-12 text-muted">18 December 2020</p>
<div class="note-content">
<p class="note-inner-content text-muted" data-notecontent="Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.">Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.</p>
</div>
<div class="d-flex align-items-center">
<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>
<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>
<div class="ml-auto">
<div class="category-selector btn-group">
<a class="nav-link dropdown-toggle category-dropdown label-group p-0" data-toggle="dropdown" href="#/" role="button" aria-haspopup="true" aria-expanded="true">
<div class="category">
<div class="category-business"></div>
<div class="category-social"></div>
<div class="category-important"></div>
<span class="more-options text-dark"><i class="icon-options-vertical"></i></span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right category-menu">
<a class="note-business badge-group-item badge-business dropdown-item position-relative category-business text-success" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i>Business
</a>
<a class="note-social badge-group-item badge-social dropdown-item position-relative category-social text-info" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Social
</a>
<a class="note-important badge-group-item badge-important dropdown-item position-relative category-important text-danger" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Important
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 single-note-item all-category note-important" style={{/**/}}>
<div class="card card-body">
<span class="side-stick"></span>
<h5 class="note-title text-truncate w-75 mb-0" data-noteheading="Give salary to employee">Give salary to employee <i class="point fa fa-circle ml-1 font-10"></i></h5>
<p class="note-date font-12 text-muted">15 Fabruary 2020</p>
<div class="note-content">
<p class="note-inner-content text-muted" data-notecontent="Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.">Blandit tempus porttitor aasfs. Integer posuere erat a ante venenatis.</p>
</div>
<div class="d-flex align-items-center">
<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>
<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>
<div class="ml-auto">
<div class="category-selector btn-group">
<a class="nav-link dropdown-toggle category-dropdown label-group p-0" data-toggle="dropdown" href="#/" role="button" aria-haspopup="true" aria-expanded="true">
<div class="category">
<div class="category-business"></div>
<div class="category-social"></div>
<div class="category-important"></div>
<span class="more-options text-dark"><i class="icon-options-vertical"></i></span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right category-menu">
<a class="note-business badge-group-item badge-business dropdown-item position-relative category-business text-success" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i>Business
</a>
<a class="note-social badge-group-item badge-social dropdown-item position-relative category-social text-info" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Social
</a>
<a class="note-important badge-group-item badge-important dropdown-item position-relative category-important text-danger" href="#/">
<i class="mdi mdi-checkbox-blank-circle-outline mr-1"></i> Important
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="addnotesmodal" tabindex="-1" role="dialog" aria-labelledby="addnotesmodalTitle" style={{/*display: none;*/}} aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content border-0">
<div class="modal-header bg-info text-white">
<h5 class="modal-title text-white">Add Notes</h5>
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="notes-box">
<div class="notes-content">
<form action="javascript:void(0);" id="addnotesmodalTitle">
<div class="row">
<div class="col-md-12 mb-3">
<div class="note-title">
<label>Note Title</label>
<input type="text" id="note-has-title" class="form-control" minlength="25" placeholder="Title" />
</div>
</div>
<div class="col-md-12">
<div class="note-description">
<label>Note Description</label>
<textarea id="note-has-description" class="form-control" minlength="60" placeholder="Description" rows="3"></textarea>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button id="btn-n-save" class="float-left btn btn-success" style={{/*display: none;*/}}>Save</button>
<button class="btn btn-danger" data-dismiss="modal">Discard</button>
<button id="btn-n-add" class="btn btn-info" disabled="disabled">Add</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{
background: #edf1f5;
margin-top:20px;
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0 solid transparent;
border-radius: 0;
}
.card {
margin-bottom: 30px;
}
.card-body {
flex: 1 1 auto;
padding: 1.57rem;
}
.note-has-grid .nav-link {
padding: .5rem
}
.note-has-grid .single-note-item .card {
border-radius: 10px
}
.note-has-grid .single-note-item .favourite-note {
cursor: pointer
}
.note-has-grid .single-note-item .side-stick {
position: absolute;
width: 3px;
height: 35px;
left: 0;
background-color: rgba(82, 95, 127, .5)
}
.note-has-grid .single-note-item .category-dropdown.dropdown-toggle:after {
display: none
}
.note-has-grid .single-note-item .category [class*=category-] {
height: 15px;
width: 15px;
display: none
}
.note-has-grid .single-note-item .category [class*=category-]::after {
content: "\f0d7";
font: normal normal normal 14px/1 FontAwesome;
font-size: 12px;
color: #fff;
position: absolute
}
.note-has-grid .single-note-item .category .category-business {
background-color: rgba(44, 208, 126, .5);
border: 2px solid #2cd07e
}
.note-has-grid .single-note-item .category .category-social {
background-color: rgba(44, 171, 227, .5);
border: 2px solid #2cabe3
}
.note-has-grid .single-note-item .category .category-important {
background-color: rgba(255, 80, 80, .5);
border: 2px solid #ff5050
}
.note-has-grid .single-note-item.all-category .point {
color: rgba(82, 95, 127, .5)
}
.note-has-grid .single-note-item.note-business .point {
color: rgba(44, 208, 126, .5)
}
.note-has-grid .single-note-item.note-business .side-stick {
background-color: rgba(44, 208, 126, .5)
}
.note-has-grid .single-note-item.note-business .category .category-business {
display: inline-block
}
.note-has-grid .single-note-item.note-favourite .favourite-note {
color: #ffc107
}
.note-has-grid .single-note-item.note-social .point {
color: rgba(44, 171, 227, .5)
}
.note-has-grid .single-note-item.note-social .side-stick {
background-color: rgba(44, 171, 227, .5)
}
.note-has-grid .single-note-item.note-social .category .category-social {
display: inline-block
}
.note-has-grid .single-note-item.note-important .point {
color: rgba(255, 80, 80, .5)
}
.note-has-grid .single-note-item.note-important .side-stick {
background-color: rgba(255, 80, 80, .5)
}
.note-has-grid .single-note-item.note-important .category .category-important {
display: inline-block
}
.note-has-grid .single-note-item.all-category .more-options,
.note-has-grid .single-note-item.all-category.note-favourite .more-options {
display: block
}
.note-has-grid .single-note-item.all-category.note-business .more-options,
.note-has-grid .single-note-item.all-category.note-favourite.note-business .more-options,
.note-has-grid .single-note-item.all-category.note-favourite.note-important .more-options,
.note-has-grid .single-note-item.all-category.note-favourite.note-social .more-options,
.note-has-grid .single-note-item.all-category.note-important .more-options,
.note-has-grid .single-note-item.all-category.note-social .more-options {
display: none
}
@media (max-width:767.98px) {
.note-has-grid .single-note-item {
max-width: 100%
}
}
@media (max-width:991.98px) {
.note-has-grid .single-note-item {
max-width: 216px
}
}
