notes

This bootstrap snippet notes was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: user notes

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootstrap snippet">
    <div class="row">
		<ul class="notes">
            <li>
                <div class="rotate-1 lazur-bg">
                    <small>12:03:28 12-04-2014</small>
                    <h4>Awesome title</h4>
                    <p>The years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
                    <a href="#" class="text-danger pull-right"><i class="fa fa-trash-o "></i></a>
                </div>
            </li>   
            <li>
                <div class="rotate-2 red-bg">
                    <small>12:03:28 12-04-2014</small>
                    <h4>Awesome date</h4>
                    <p>The years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
                    <a href="#" class="text-danger pull-right"><i class="fa fa-trash-o "></i></a>
                </div>
            </li>    
            <li>
                <div class="rotate-1 yellow-bg">
                    <small>12:03:28 12-04-2014</small>
                    <h4>Awesome project</h4>
                    <p>The years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
                    <a href="#" class="text-danger pull-right"><i class="fa fa-trash-o "></i></a>
                </div>
            </li>   
		</ul>  
	</div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;}

ul.notes li {
  margin: 10px 40px 50px 0px;
  float: left;
}

ul.notes li, ul.tag-list li {
  list-style: none;
}

ul.notes li div small {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 10px;
}

div.rotate-1 {
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
}

div.rotate-2 {
  -o-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  position: relative;
  top: 5px;
}

.lazur-bg {
  background-color: #23c6c8;
  color: #ffffff;
}

.red-bg {
  background-color: #ed5565;
  color: #ffffff;
}

.navy-bg {
  background-color: #1ab394;
  color: #ffffff;
}

.yellow-bg {
  background-color: #f8ac59;
  color: #ffffff;
}

ul.notes li div {
  text-decoration: none;
  color: #000;
  display: block;
  height: 210px;
  width: 210px;
  padding: 1em;
  -moz-box-shadow: 5px 5px 7px #212121;
  -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
  box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
  -moz-transition: -moz-transform 0.15s linear;
  -o-transition: -o-transform 0.15s linear;
  -webkit-transition: -webkit-transform 0.15s linear;
}



                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 28th 2015, 20:13

Views: 3.1K