May 12, 2015

Responsive about team layout with social links

Responsive about team layout with social links

This is to showcase your team-mates. When the user hovers the container the social links of the person is shown. Here different styles have been shown. You can add some description if needed and change the styles.

Another design is show here.

The basic structure:

HTML

<div class="box">
   <div class="inner-box-#">
      <!--Social icons here-->
   </div>

   <div class="photo-holder">
      <img src="PHOTO URL" />
   </div>

   <div class="name">Name</div>

   <div class="designation">Designation</div>
</div>

CSS

body {
  font-family: 'Roboto', sans-serif;
  background: #40b8af;
}

.twitter {
  color: #55acee;
}

.facebook {
  color: #3b5998;
}

.google {
  color: #dd4b39;
}

.github {
  color: #6cc644;
}

.linkedin {
  color: #0976b4;
}

.twitter-bg {
  background: #55acee;
}

.facebook-bg {
  background: #3b5998;
}

.google-bg {
  background: #dd4b39;
}

.github-bg {
  background: #6cc644;
}

.linkedin-bg {
  background: #0976b4;
}

.box {
  width: 200px;
  height: 300px;  
  position: relative;
  margin: 0 auto;
  transition: all 1s ease;
}

.box:hover {
  background: rgba(0, 0, 0, 0.1);
  transition: all 1s ease;
  text-align: center;
}

.box:hover .photo-holder, .box:hover .name, .box:hover .designation {
  display: none;
}

.box a.small-icon {
  display: none;
}
.box:hover a.small-icon {
  display: block;
}

.photo-holder {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: absolute;
  top: 0;
}

.photo-holder img {
  width: 200px;
  border-radius: 500px;
  border: 6px solid #eee;
  box-sizing: border-box;
}

.name {
  font-weight: 700;
  font-size: 28px;
  text-align: center;
  position: relative;
  top: 210px;
}

.designation {
  font-weight: 300;
  font-size: 18px;
  text-align: center;
  position: relative;
  top: 210px;
}

Style 1:

Tiny social icons without any container placed side by side.

HTML

<div class="row">
   <div class="col-xs-2">
      <a href="#" class="small-icon twitter"><i class="fa fa-twitter"></i></a>
   </div>
   <div class="col-xs-2">
      <a href="#" class="small-icon facebook"><i class="fa fa-facebook"></i></a>
   </div>
   <div class="col-xs-2">
      <a href="#" class="small-icon google"><i class="fa fa-google-plus"></i></a>
   </div>
   <div class="col-xs-2">
      <a href="#" class="small-icon github"><i class="fa fa-github-alt"></i></a>
   </div>
   <div class="col-xs-2">
      <a href="#" class="small-icon linkedin"><i class="fa fa-linkedin"></i></a>
   </div>
</div>

CSS

.inner-box-1 {
  font-size: 20px;
  line-height: 300px;
  margin-left: 20px
}

Style 2:

Square shaped social icons placed one below the other.

HTML

<div class="inner-box-2">
   <a href="#" class="small-icon twitter"><i class="fa fa-twitter-square"></i></a>
   <a href="#" class="small-icon facebook"><i class="fa fa-facebook-square"></i></a>
   <a href="#" class="small-icon google"><i class="fa fa-google-plus-square"></i></a>
   <a href="#" class="small-icon github"><i class="fa fa-github-square"></i></a>
   <a href="#" class="small-icon linkedin"><i class="fa fa-linkedin-square"></i></a>
</div>

CSS

.inner-box-2 {
  font-size: 40px
}

Style 3:

Social icons in the form of buttons.

HTML

<div class="inner-box-3">
   <a href="#" class="btn btn-default small-icon twitter-bg"><i class="fa fa-twitter"></i> Twitter</a>
   <a href="#" class="btn btn-default small-icon facebook-bg"><i class="fa fa-facebook"></i> Facebook</a>
   <a href="#" class="btn btn-default small-icon google-bg"><i class="fa fa-google-plus"></i> Google+</a>
   <a href="#" class="btn btn-default small-icon github-bg"><i class="fa fa-github-alt"></i> Github</a>
   <a href="#" class="btn btn-default small-icon linkedin-bg"><i class="fa fa-linkedin"></i> Linkedin</a>
</div>

CSS

.inner-box-3 a {
  font-size: 20px;
  margin-bottom: 22px;
  color: white;
}

Style 4:

Social icons in the form of links.

HTML

<div class="inner-box-4">
   <a href="#" class="small-icon twitter"><i class="fa fa-twitter"></i> Twitter</a>
   <a href="#" class="small-icon facebook"><i class="fa fa-facebook"></i> Facebook</a>
   <a href="#" class="small-icon google"><i class="fa fa-google-plus"></i> Google+</a>
   <a href="#" class="small-icon github"><i class="fa fa-github"></i> Github</a>
   <a href="#" class="small-icon linkedin"><i class="fa fa-linkedin"></i> Linkedin</a>
</div>

CSS

.inner-box-4 a {
  font-size: 20px;
  margin-bottom: 40px;
}

In addition you can change the shape of icons to circle too and many other style.

Attachments:

I have used external attachments.

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css
http://fonts.googleapis.com/css?family=Roboto:400,500,700,900,300,100
//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
demo

No comments:

Post a Comment

Popular Posts

Views