I hope you all are using the Google Collection for your Fun and Enjoyment. If you are not using the Google Collection then Create the Collection on google plus. It is helpful to share the knowledge. Google Collection is the new way to group your post by topics.
This Tutorial explai How to Create the Google Collections UI Interface Design
Design The Font-end Design of Google Collections
HTML Code
Here is the starting code in out index.html file. Here we are loading Google Collections CSS library and also our custom customize.css file.
<html> <head> <title>Google Collection UI Design</title> <!--Bootstrap Css File --> <link href="controller/css/boot.css" rel="stylesheet"> <!--Customize Style Css File --> <link href="controller/css/customize.css" rel="stylesheet"> <body> <!-- Google Collections UI DESIGN </body> </html>CSS Code
.google-collection-cover {
width: 100% !Important;
height: 130px !important;
}
.google-collection {
padding: 0px;
}
.google-collection > li {
margin-bottom: 12px;
margin-top: -5px;
margin-left: 0px;
padding: 0px;
padding-top: 0px;
border: 2px solid #f7f5ee;
transition: all 500ms ease;
}
.google-collection > li > a {
display: block;
position: relative;
color: #777;
padding: 0px;
padding-bottom: 20px;
}
.google-collection li h2 {
font-size: 18px;
text-align: left;
color: #f5f5f5;
font-weight: 400;
margin: 28px 2px 3px 5px;
line-height: 19px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-flex: 1;
padding-left: 4px !important;
-webkit-box-orient: vertical
}
.google-collection li small {
font-size: 12.5px;
text-align: left;
margin: 5px 2px 17px 5px;
line-height: 18px;
overflow: hidden;
color: #ddd;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-flex: 1;
padding-left: 4px !important;
-webkit-box-orient: vertical
}
.google-collection li .follow-btn {
overflow: hidden;
color: #fff;
font-size: 17px;
border-radius: 2px;
padding: 10px;
font-weight: 300px;
margin-left: 10px;
}
.google-collection li .follow-btn:hover {
color: #f5f5f5;
background-color: rgba(0, 0, 0, 0.6);
}
.google-collection .userpic {
color: #fff;
font-weight: bold;
float: left;
left: 10px;
padding: 10px;
width: 50px;
height: 50px;
border: 1px solid #fff;
background-image: url('./../../user.png');
background-size: 50px 50px;
border-radius: 100px;
background-repeat: no-repeat;
position: absolute;
bottom: 115px;
}
Google Collections Background Color CSS Code
We are displaying a different color background of collections. There are 12 different background colors for collections . If you want to add more background colors, then add the customize.css file.
.color-design-1{ background-color:#44484e;}
.color-design-2{ background-color:#663333;}
.color-design-3{ background-color:#CC6666;}
.color-design-4{ background-color:#009999;}
.color-design-5{ background-color:#CC3366;}
.color-design-6{ background-color:#006699;}
.color-design-7{ background-color:#669966;}
.color-design-8{ background-color:#CC6600;}
.color-design-9{ background-color:#330033;}
.color-design-10{ background-color:#9900CC;}
.color-design-11{ background-color:#669999;}
.color-design-12{ background-color:#663333;}
Creating the Google Collection UI Design Code
Here is the code to display a Google Collections.
<div class="container"> <div class="row"> <div class="col-sm-10" style="padding: 20px;"> <ul class="list-unstyled google-collection row"> <li class="col-lg-3 col-sm-4 col-xs-6 color-design-1"> <a href="http://www.sharecodepoint.com/2016/04/google-collections-ui-design-using.html"> <img class="img-responsive google-collection-cover" src="./cover/1.jpg"> <h2> Web & Graphics Designer</h2> <small>Sachin Yadav</small> <span class="follow-btn" type="button">Follow</span> <span class="userpic"></span> </a> </li> <li class="col-lg-3 col-sm-4 col-xs-6 color-design-2"> <a href="http://www.sharecodepoint.com/2016/04/google-collections-ui-design-using.html"> <img class="img-responsive google-collection-cover" src="./cover/2.jpg"> <h2> Programming Hub</h2> <small>Sachin Yadav</small> <span class="follow-btn" type="button">Follow</span> <span class="userpic"></span> </a> </li> <li class="col-lg-3 col-sm-4 col-xs-6 color-design-3"> <a href="http://www.sharecodepoint.com/2016/04/google-collections-ui-design-using.html"> <img class="img-responsive google-collection-cover" src="./cover/3.jpg"> <h2> Learn More and Enjoy More</h2> <small>Sachin Yadav</small> <span class="follow-btn" type="button">Follow</span> <span class="userpic"></span> </a> </li> <li class="col-lg-3 col-sm-4 col-xs-6 color-design-4"> <a href="http://www.sharecodepoint.com/2016/04/google-collections-ui-design-using.html"> <img class="img-responsive google-collection-cover" src="./cover/6.jpg"> <h2> Make Your Life More Easy</h2> <small>Sachin Yadav</small> <span class="follow-btn" type="button">Follow</span> <span class="userpic"></span> </a> </li> </ul> </div> </div> </div>
If you are planing to create a new website then you can categorize your website updates topic by topic, which helps your followers to quickly find updates for the topics they’re interested in.
Thanks for the article!
ReplyDeleteReally ultimate, awesome, wonderful and great work. Fully inspired to you.
ReplyDeleteThanks.!
Thank You Amit Kumar .. Share This Article With your Friends.. and for your feedback.
DeleteNice work
ReplyDeletei am really impressed by your work and i am inviting you to join my company as an intern....Thank you.
ReplyDeleteThank for your feedback..
Delete👍👌👌👌
ReplyDeleteKeep Going sachin .
Good work .
thank you Ankit Gupta
DeleteReally Inspired,Keep going my best wishes are with u...
ReplyDeleteAwesome work.. Keep it up
ReplyDeleteGood work Sachin... Keep it up...:)
ReplyDeletewonderful and great work and Thank you
ReplyDeleteNice work.Keep it up man
ReplyDeleteWonder and awesome tutorial thank u for sharing this ☺️
ReplyDeleteyou are very nice programmer and also before website is also a very nice and in feature more websites lunch...
ReplyDeletenice bro...........
Nice work. Although Google Colllections randomizes the card colors
ReplyDelete