- Demo
- HTML
- CSS
- Full Code
- Download
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
<blockquote class="default"> Some Text... </blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
<blockquote class="grapefruit"> Some Text... </blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
<blockquote class="bittersweet"> Some Text... </blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
<blockquote class="sunflower"> Some Text... </blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
<blockquote class="grass"> Some Text... </blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
<blockquote class="mint"> Some Text... </blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
<blockquote class="aqua"> Some Text... </blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
<blockquote class="bluejeans"> Some Text... </blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
<blockquote class="lavander"> Some Text... </blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
<blockquote class="pinkrose"> Some Text... </blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
<blockquote class="light"> Some Text... </blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
<blockquote class="gray"> Some Text... </blockquote>
<blockquote class="default">
Some Text...
</blockquote>
blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
/*Font*/
font-family: Georgia, serif;
font-size: 14px;
line-height: 1.2;
color: #666;
/*Box Shadow - (Optional)*/
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
/*Borders - (Optional)*/
border-left-style: solid;
border-left-width: 15px;
border-right-style: solid;
border-right-width: 2px;
}
blockquote::before{
content: "\201C"; /*Unicode for Left Double Quote*/
/*Font*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999;
/*Positioning*/
position: absolute;
left: 10px;
top:5px;
}
blockquote::after{
/*Reset to make sure*/
content: ";
}
/*Default Color Palette*/
blockquote.default{
border-left-color: #656d77;
border-right-color: #434a53;
}
/*Grapefruit Color Palette*/
blockquote.grapefruit{
border-left-color: #ed5565;
border-right-color: #da4453;
}
/*Bittersweet Color Palette*/
blockquote.bittersweet{
border-left-color: #fc6d58;
border-right-color: #e95546;
}
/*Sunflower Color Palette*/
blockquote.sunflower{
border-left-color: #ffcd69;
border-right-color: #f6ba59;
}
/*Grass Color Palette*/
blockquote.grass{
border-left-color: #9fd477;
border-right-color: #8bc163;
}
/*Mint Color Palette*/
blockquote.mint{
border-left-color: #46cfb0;
border-right-color: #34bc9d;
}
/*Aqua Color Palette*/
blockquote.aqua{
border-left-color: #4fc2e5;
border-right-color: #3bb0d6;
}
/*Blue Jeans Color Palette*/
blockquote.bluejeans{
border-left-color: #5e9de6;
border-right-color: #4b8ad6;
}
/*Lavander Color Palette*/
blockquote.lavander{
border-left-color: #ad93e6;
border-right-color: #977bd5;
}
/*Pinkrose Color Palette*/
blockquote.pinkrose{
border-left-color: #ed87bd;
border-right-color: #d870a9;
}
/*Light Color Palette*/
blockquote.light{
border-left-color: #f5f7fa;
border-right-color: #e6e9ed;
}
/*Gray Color Palette*/
blockquote.gray{
border-left-color: #ccd1d8;
border-right-color: #aab2bc;
}
<html>
<head>
<title>DEFAULT - Blockquote Color Palette.</title>
<style>
blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
/*Font*/
font-family: Georgia, serif;
font-size: 14px;
line-height: 1.2;
color: #666;
/*Box Shadow - (Optional)*/
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
/*Borders - (Optional)*/
border-left-style: solid;
border-left-width: 15px;
border-right-style: solid;
border-right-width: 2px;
}
blockquote::before{
content: "\201C"; /*Unicode for Left Double Quote*/
/*Font*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999;
/*Positioning*/
position: absolute;
left: 10px;
top:5px;
}
blockquote::after{
/*Reset to make sure*/
content: ";
}
/*Default Color Palette*/
blockquote.default{
border-left-color: #656d77;
border-right-color: #434a53;
}
</style>
</head>
<body>
<blockquote class="default">
Some Text...
</blockquote>
</body>
</html>
Thanks :)
ReplyDeleteNeeded to compose one little word yet thanks for the suggestions that you are contributed here...
ReplyDeleteBest Online Software Training Institute | jQuery Training
Thanks For Sharing This Information Very Useful And More Informative.
ReplyDeleteTekSlate Online Trainings
Nice article thanks for sharing the post .....!
ReplyDeleteansible training
puppet training
chef training
core java training