QrDroid


Wednesday, 27 April 2016

Google Collections UI Design using CSS and HTML

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

Every collection is a focused set of posts on particular topic, providing an ease for you to organize all the things you're into. Each collection can be shared publicly, privately or with a custom set of people. Once you have created your first collection, your profile will display a new tab where other people can find and follow your collection.

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>
 Download Google Collection UI Design : Share Code Point  Google Collection UI Design Live Demo
Finally Google Collection UI Design Done!
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. 

16 comments:


  1. Really ultimate, awesome, wonderful and great work. Fully inspired to you.
    Thanks.!

    ReplyDelete
    Replies
    1. Thank You Amit Kumar .. Share This Article With your Friends.. and for your feedback.

      Delete
  2. i am really impressed by your work and i am inviting you to join my company as an intern....Thank you.

    ReplyDelete
  3. 👍👌👌👌
    Keep Going sachin .
    Good work .

    ReplyDelete
  4. Really Inspired,Keep going my best wishes are with u...

    ReplyDelete
  5. Good work Sachin... Keep it up...:)

    ReplyDelete
  6. wonderful and great work and Thank you

    ReplyDelete
  7. Wonder and awesome tutorial thank u for sharing this ☺️

    ReplyDelete
  8. you are very nice programmer and also before website is also a very nice and in feature more websites lunch...
    nice bro...........

    ReplyDelete
  9. Nice work. Although Google Colllections randomizes the card colors

    ReplyDelete

 

Version 20.2.1 - 2016 - 2018 - © SSL Technologies And Services Private Limited | Made in India. | Copyright Content