Getting Started

Before you get started, please be sure to always check out these documentation files. We outline all kinds of good information, and provide you with all the details you need know to use Sociala HTML Template.

If you are unable to find your answer here in the documentation, please contact us on our Support Forum or directly from our themeforest account

Please don't forget to rate Sociala with 5 stars and leave a nice review, it means a lot to us.

Introduction

Follow the steps below to setup your site template:

Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website

Below is the folder structure and needs to be uploaded to your website root directory

HTML/css - Stylesheet files
HTML/fonts – Icon font files
HTML/images - Image files
HTML/js - Javacript files
HTML/scss - Scss files

You should upload all or specific HTML files as per your need

You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users

HTML Structure

Sociala follows a simple and easy to customize coding structure. Here is the sample for your reference

<!doctype html>
<html class="no-js" lang="en">
<head>
	
	<meta charset="utf-8">
	<!-- description -->
	<meta name="description" content="">
	<!-- keywords -->
	<meta name="keywords" content="">
	<!-- favicon -->

	<!-- style -->

</head>
<body class="color-theme-blue mont-font">

	<div class="preloader"></div>

	
	<!-- main wrap start-->
	<div class="main-wrapper">

		<!-- header wrapper -->
		<div class="navigation scroll-bar"">
		...
		</div>
		<!-- header wrapper -->

		
		.
		.
		.

		
	<!-- main wrap end -->	
	</div>

	<!-- javascript libraries -->
	</body>
</html>

<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">

<!-- CSS -->
<link rel="stylesheet" href="css/themify-icons.css"">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">

Bootstrap Color

For change the Bootstrap Color you need to change variable.scss

primary

secondary

success

info

warning

danger

light

dark

Color Pattern

To change the color pattern using class name as mention in body tag.

color-theme-red

color-theme-green

color-theme-blue

color-theme-pink

color-theme-yellow

color-theme-orange

color-theme-gray

color-theme-brown

color-theme-darkgreen

color-theme-deeppink

color-theme-cadetblue

color-theme-darkorchid

Typography

To change the text color using class name in h1,h2.h3,h4,h5,h6,p Tag

text-grey-100

text-grey-200

text-grey-300

text-grey-400

text-grey-500

text-grey-600

text-grey-700

text-grey-800

text-grey-900

Display .display1-size

Display .display2-size

Display .display3-size

Display .display4-size

Headline .font-xsssss

Headline .font-xssss

Headline .font-xsss

Headline .font-xss

Headline .font-xs

Headline .font-sm

Headline .font-md

Headline .font-lg

Headline .font-xl

Headline .font-xxl

Font Weight .fw-100

Font Weight .fw-200

Font Weight .fw-300

Font Weight .fw-400

Font Weight .fw-500

Font Weight .fw-600

Font Weight .fw-700

Font Weight .fw-800

Font Weight .fw-900

RTL Stucture

To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.

<!doctype html>
<html lang="en" dir="rtl">
<head>
    
    <meta charset="utf-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Sociala - Online Course and LMS HTML Template</title>

    <link rel="stylesheet" href="../css/themify-icons.css">
    <link rel="stylesheet" href="../css/feather.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/style-rtl.css">

</head>
<body class="color-theme-blue mont-font">

    <div class="preloader"></div>

    
    <!-- main wrap start-->
    <div class="main-wrapper">

        <!-- header wrapper -->
        <div class="navigation scroll-bar"">
        ...
        </div>
        <!-- header wrapper -->

        
        .
        .
        .

        
    <!-- main wrap end -->   
    </div>

    <!-- javascript libraries -->
    

    <script src="../js/plugin.js"></script>

    <script src="../js/apexcharts.min.js"></script> 
    <script src="../js/chart.js"></script> 
    <script src="../js/scripts-rtl.js"></script>
    </body>
</html>

Change Log

To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.

Credits

Credits to other libraries and frameworks we have used in this template.

jQuery (https://jquery.com/)

Bootstrap (https://getbootstrap.com/)

Feather Icon (https://feather.com/)

Themify Icon (https://themify.me/themify-icons/)

Apex Chart (https://apexcharts.com/)

Owl Carousel (https://owlcarousel2.github.io/OwlCarousel2/)

Lightbox 2 (https://lokeshdhakar.com/projects/lightbox2/)

Support

Thanks for choosing This Template Sociala

To get support for our theme, please write us your problem using our support form or email to: uttamdhar81@gmail.com

We aim to give you our support within 24 hours and be as customer-friendly as possible, so please be patient and hang on tight till we get back to you. Please note that we are not available at weekends.

Lightbox 2

In order to make it work you'll have to make sure your build process has configured styles loader, and bundles it all correctly.

1. Include the library in your page

<!-- CSS -->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="all">

<!-- SCRIPT -->
<script type="text/javascript" src="js/lightbox.js"></script>

2. How to use it?

<!-- HTML -->
<a href="image path" data-lightbox="roadtrip"><img src="image path" class="rounded-lg w-100" alt="image"></a>

Apex Chart

While ApexCharts brings you the goodness of open-source charts, FusionCharts offers additional visualizations for your dashboards.

1. Include the library in your page

<!-- SCRIPT -->
<script type="text/javascript" src="js/apexcharts.min.js"></script>

2. How to use it?

<!-- SCRIPT -->
<script>
AOS.init();
</script>

2. After loading all the files, you are ready to build your first chart. To create a chart with minimal configuration, write as follows

<!-- SCRIPT -->
var options = {
  chart: {
    type: 'line'
  },
  series: [{
    name: 'sales',
    data: [30,40,35,50,49,60,70,91,125]
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

3. HTML file add div

<!-- SCRIPT -->
<div id="chart"></div>

Owl Carousel

While ApexCharts brings you the goodness of open-source charts, FusionCharts offers additional visualizations for your dashboards.

1. Include css library in your main.scss page

<!-- CSS -->
@import "./../vendor/owl-carousel/css/owl.carousel.min.css";
@import "./../vendor/owl-carousel/css/owl.theme.default.css";

2. Include js library in your page at the bottom

<!-- SCRIPT -->
<script type="text/javascript" src="js/plugin.js"></script>

<!-- HTML -->
<div class="owl-carousel category-card owl-theme">
    <div class="item"></div>
    .
    .
</div>

Feather Icon

Simply beautiful open source icons

1. Include css library in your page

<!-- CSS -->
<link rel="stylesheet" href="css/feather.css" type="text/css" media="all">

<!-- HTML -->
<i class="feather-layer"></i>

Thimify Icon

Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect, hand-crafted icons that draw inspiration from Apple iOS 7 - available to the public, 100% FREE! You may use or distribute it for any purpose, whether personal or commercial. This icon set is a must have tool for web designers and developers.

1. Include css library in your page

<!-- CSS -->
<link rel="stylesheet" href="css/themify-icons.css" type="text/css" media="all">

<!-- HTML -->
<i class="ti ti-layer"></i>

Widgets

<!-- nav menu -->
<div class="nav-wrap bg-white bg-transparent-card rounded-xxl shadow-xss pt-3 pb-1 mb-2 mt-2">
    <div class="nav-caption fw-600 font-xssss text-grey-500"><span>New </span>Feeds</div>
    <ul class="mb-1 top-content">
        <li><a href="default.html" class="nav-content-bttn open-font"><i class="feather-tv btn-round-md bg-blue-gradiant mr-3"></i><span>Newsfeed</span></a></li>
        .
        .
    </ul>
</div>
<!-- nav menu -->

<!-- nav menu  -->
<div class="nav-wrap bg-white bg-transparent-card rounded-xxl shadow-xss pt-3 pb-1">
    <div class="nav-caption fw-600 font-xssss text-grey-500"><span></span> Account</div>
    <ul class="mb-1">
        <li class="logo d-none d-xl-block d-lg-block"></li>
        .
        .
    </ul>
</div>
<!-- nav menu  -->

Message

<!-- Message  -->
<div class="section full pr-3 pl-4 pt-4 position-relative feed-body">
    <h4 class="font-xsssss text-grey-500 text-uppercase fw-700 ls-3">CONTACTS</h4>
    <ul class="list-group list-group-flush">
        <li class="bg-transparent list-group-item no-icon pr-0 pl-0 pt-2 pb-2 border-0 d-flex align-items-center">
            <figure class="avatar float-left mb-0 mr-2">
                <img src="img path" alt="image" class="w35">
            </figure>
            <h3 class="fw-700 mb-0 mt-0">
                <a class="font-xssss text-grey-600 d-block text-dark model-popup-chat" href="#">Hurin Seary</a>
            </h3>
            <span class="badge badge-primary text-white badge-pill fw-500 mt-0">2</span>
        </li>
        .
        .
    </ul>
</div>
<!-- Message  -->

Newsfeed

<!-- feed  -->
<div class="card w-100 shadow-xss rounded-xxl border-0 p-4 mb-3">
    <div class="card-body p-0 d-flex">
        <figure class="avatar mr-3"><img src="img path" alt="image" class="shadow-sm rounded-circle w45"></figure>
        <h4 class="fw-700 text-grey-900 font-xssss mt-1">Anthony Daugloi <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">3 hour ago</span></h4>
        <a href="#" class="ml-auto" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="ti-more-alt text-grey-900 btn-round-md bg-greylight font-xss"></i></a>
    </div>
    <div class="card-body p-0 mr-lg-5">
        <p class="fw-500 text-grey-500 lh-26 font-xssss w-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla dolor, ornare at commodo non, feugiat non nisi. Phasellus faucibus mollis pharetra. Proin blandit ac massa sed rhoncus <a href="#" class="fw-600 text-primary ml-2">See more</a></p>
    </div>
    <div class="card-body d-block p-0">
        <div class="row pl-2 pr-2">
            <div class="col-xs-4 col-sm-4 p-1"><a href="img path" data-lightbox="roadtrip"><img src="images/t-10.jpg" class="rounded-lg w-100" alt="image"></a></div>
            .
            .
        </div>
    </div>
    <div class="card-body d-flex p-0 mt-3">
        <a href="#" class="d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss mr-3"><i class="feather-thumbs-up text-white bg-primary-gradiant mr-1 btn-round-xs font-xss"></i> <i class="feather-heart text-white bg-red-gradiant mr-2 btn-round-xs font-xss"></i>2.8K Like</a>
        <a href="#" class="d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-message-circle text-dark text-grey-900 btn-round-sm font-lg"></i>22 Comment</a>
        <a href="#" class="ml-auto d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-share-2 text-grey-900 text-dark btn-round-sm font-lg"></i><span class="d-none-xs">Share</span></a>
    </div>
</div>
<!-- feed  -->

Profile

<!-- profile  -->
<div class="card w200 d-block border-0 shadow-xss rounded-xxl overflow-hidden mb-3 mr-2 mt-3">
    <div class="card-body position-relative h100 bg-image-cover bg-image-center" style="background-image: url(img path);"></div>
    <div class="card-body d-block w-100 pl-4 pr-4 pb-4 text-center">
        <figure class="avatar ml-auto mr-auto mb-0 mt--6 position-relative w75 z-index-1"><img src="img path" alt="image" class="float-right p-1 bg-white rounded-circle w-100" style="opacity: 1;"></figure>
        <div class="clearfix"></div>
        <h4 class="fw-700 font-xsss mt-2 mb-1">Aliqa Macale </h4>
        <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-2">support@gmail.com</p>
        <span class="live-tag mt-2 mb-0 bg-danger p-2 z-index-1 rounded-lg text-white font-xsssss text-uppersace fw-700 ls-3">LIVE</span>
        <div class="clearfix mb-2"></div>
    </div>
</div>

<!-- profile  -->

Video Feed

<!-- Video Feed  -->
<div class="card w-100 shadow-xss rounded-xxl border-0 p-4 mb-3">
    <div class="card-body p-0 d-flex">
        <figure class="avatar mr-3"><img src="img path" alt="image" class="shadow-sm rounded-circle w45"></figure>
        <h4 class="fw-700 text-grey-900 font-xssss mt-1">Anthony Daugloi <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">2 hour ago</span></h4>
        <a href="#" class="ml-auto" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="ti-more-alt text-grey-900 btn-round-md bg-greylight font-xss"></i></a>
    </div>
    <div class="card-body p-0 mb-3 rounded-lg overflow-hidden">
        <a href="#" class="video-btn">
            <video width="100%" autoplay="" loop="" class="float-right">
                <source src="img path" type="video/mp4">
            </video>
        </a>
    </div>
    <div class="card-body p-0 mr-lg-5">
        <p class="fw-500 text-grey-500 lh-26 font-xssss w-100 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla dolor, ornare at commodo non, feugiat non nisi. Phasellus faucibus mollis pharetra. Proin blandit ac massa sed rhoncus <a href="#" class="fw-600 text-primary ml-2">See more</a></p>
    </div>
    <div class="card-body d-flex p-0">
        <a href="#" class="d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss mr-3"><i class="feather-thumbs-up text-white bg-primary-gradiant mr-1 btn-round-xs font-xss"></i> <i class="feather-heart text-white bg-red-gradiant mr-2 btn-round-xs font-xss"></i>2.8K Like</a>
        <a href="#" class="d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-message-circle text-dark text-grey-900 btn-round-sm font-lg"></i>22 Comment</a>
        <a href="#" class="ml-auto d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-share-2 text-grey-900 text-dark btn-round-sm font-lg"></i><span class="d-none-xs">Share</span></a>
    </div>
</div>
<!-- Video Feed  -->

Story Feed

<!-- Story Feed  -->
<div class="card w150 h240 d-block border-0 shadow-xss rounded-xxl bg-gradiant-bottom overflow-hidden mb-3 mt-3 mr-1" style="background-image: url(img path);">
    <div class="card-body d-block w-100 position-absolute bottom-0 text-center">
        <figure class="avatar ml-auto mr-auto mb-0 position-relative w40 z-index-1"><img src="img path" alt="image" class="float-right p-0 bg-white rounded-circle w-100 shadow-xss" style="opacity: 1;"></figure>
        <div class="clearfix"></div>
        <h4 class="fw-600 position-relative z-index-1 ls-3 font-xsssss text-white mt-2 mb-1">Victor Exrixon </h4>
    </div>
</div>
<!-- Story Feed  -->

Profile Badge

<!-- profile Badge  -->
<div class="card-body d-block w-100 p-4 text-center">
    <figure class="avatar ml-auto mr-auto mb-0 position-relative w90 z-index-1"><img src="img path" alt="image" class="float-right p-1 bg-white rounded-circle w-100"></figure>
    <div class="clearfix"></div>
    <h4 class="fw-700 font-xss mt-3 mb-0">Aliqa Macale </h4>
    <p class="fw-500 font-xssss text-grey-500 mt-0 mb-3">support@gmail.com</p>
    <ul class="d-flex align-items-center justify-content-center mt-1">
        <li class="m-2"><h4 class="fw-700 font-sm">500+ <span class="font-xsssss fw-500 mt-1 text-grey-500 d-block">Connections</span></h4></li>
        .
        .
    </ul>
    <ul class="d-flex align-items-center justify-content-center mt-1">
        <li class="m-1"><img src="img path" alt="icon"></li>
        .
        .
    </ul>
    <a href="#" class="mt-4 p-0 btn p-2 lh-24 w100 ml-1 ls-3 d-inline-block rounded-xl bg-current font-xsssss fw-700 ls-lg text-white">FOLLOW</a>
</div>
<!-- profile Badge  -->

Author Profile

<!-- Author Profile  -->
<div class="card d-block border-0 shadow-xss rounded-lg overflow-hidden mb-3">
    <div class="card-body position-relative h100 bg-image-cover bg-image-center" style="background-image: url(img path);"></div>
    <div class="card-body d-block w-100 pl-10 pr-4 pb-4 pt-0 text-left position-relative">
        <figure class="avatar position-absolute w75 z-index-1" style="top:-40px; left: 15px;"><img src="img path" alt="image" class="float-right p-1 bg-white rounded-circle w-100"></figure>
        <div class="clearfix"></div>
        <h4 class="fw-700 font-xsss mt-3 mb-1">Victor Exrixon</h4>
        <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-3">support@gmail.com</p>
        <span class="position-absolute right-15 top-0 d-flex align-items-center">
            <a href="#" class="d-lg-block d-none"><i class="feather-video btn-round-md font-md bg-primary-gradiant text-white"></i></a>
            <a href="#" class="text-center p-2 lh-24 w100 ml-1 ls-3 d-inline-block rounded-xl bg-current font-xsssss fw-700 ls-lg text-white">FOLLOW</a>
        </span>
    </div>
</div>
<!-- Author Profile  -->

Hotel

<!-- Hotel  -->
<div class="card w-100 p-0 hover-card shadow-xss border-0 rounded-lg overflow-hidden mr-1">
    <span class="font-xsssss fw-700 pl-3 pr-3 lh-32 text-uppercase rounded-lg ls-2 bg-primary-gradiant d-inline-block text-white position-absolute mt-3 ml-3 z-index-1">Featured</span>
    <div class="card-image w-100 mb-3">
        <a href="default-hotel-details.html" class="position-relative d-block"><img src="img path.jpg" alt="image" class="w-100"></a>
    </div>
    <div class="card-body pt-0">
        <i class="feather-bookmark font-md text-grey-500 position-absolute right-0 mr-3"></i>
        <h4 class="fw-700 font-xss mt-0 lh-28 mb-0"><a href="default-hotel-details.html" class="text-dark text-grey-900">Montana Hotel</a></h4>
        <h6 class="font-xsssss text-grey-500 fw-600 mt-0 mb-2"> 323 Geldenfe Ave Park, Flodia City</h6>
        <div class="star d-block w-100 text-left mt-0">
            <img src="img path" alt="star" class="w15 mr-1 float-left">
            .
            .
        </div>
        <div class="clearfix"></div>
        <h5 class="mt-3 d-inline-block font-xssss fw-600 text-grey-500 mr-2"><i class="btn-round-sm bg-greylight ti-ruler-pencil text-grey-500 mr-1"></i> 200 sq</h5>
        .
        .
        <div class="clearfix"></div>
        <span class="font-lg fw-700 mt-0 pr-3 ls-2 lh-32 d-inline-block text-success float-left"><span class="font-xsssss">$</span> 320 <span class="font-xsssss text-grey-500">/ mo</span> </span>
        <a href="#" class="position-absolute bottom-15 mb-2 right-15"><i class="btn-round-sm bg-primary-gradiant text-white font-sm feather-chevron-right"></i></a>
    </div>
</div>
<!-- Hotel  -->

Event

Include the library in your page

<!-- Event -->
<div class="card p-3 bg-white w-100 hover-card border-0 shadow-xss rounded-xxl border-0 mb-3 overflow-hidden ">
    <div class="card-image w-100">
        <img src="img path" alt="event" class="w-100 rounded-lg">
    </div>
    <div class="card-body d-flex pl-0 pr-0 pb-0">
        <div class="bg-greylight mr-3 p-3 border-light-md rounded-xxl theme-dark-bg"><h4 class="fw-700 font-lg ls-3 text-grey-900 mb-0"><span class="ls-3 d-block font-xsss text-grey-500 fw-500">FEB</span>22</h4></div>
        <h2 class="fw-700 lh-3 font-xss">Right here Right Now -  Comedy 
            <span class="d-flex font-xssss fw-500 mt-2 lh-3 text-grey-500"> <i class="ti-location-pin mr-1"></i> Goa, Mumbai </span>
        </h2>
    </div>
    <div class="card-body p-0">
        <ul class="memberlist mt-4 mb-2 ml-0 d-inline-block">
            <li><a href="#"><img src="img path" alt="user" class="w30 d-inline-block"></a></li>
            .
            .
        </ul>
        <a href="#" class="font-xsssss fw-700 pl-3 pr-3 lh-32 float-right mt-4 text-uppercase rounded-lg ls-2 bg-success d-inline-block text-white mr-1">APPLY</a>
    </div>
</div>
<!-- Event -->

Author Profile

Here the code you need to put html page

Author Profile
 <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl">
    <div class="card-body h250 p-0 rounded-xxl overflow-hidden m-3"><img src="img path" alt="image"></div>
    <div class="card-body p-0 position-relative">
        <figure class="avatar position-absolute w100 z-index-1" style="top:-40px; left: 30px;"><img src="img path" alt="image" class="float-right p-1 bg-white rounded-circle w-100"></figure>
        <h4 class="fw-700 font-sm mt-2 mb-5 pl-15">Mohannad Zitoun <span class="fw-500 font-xssss text-grey-500 mt-2 mb-3 d-block">support@gmail.com</span></h4>
    </div>
    <div class="card-body d-block w-100 shadow-none mb-0 p-0 border-top-xs">
        <ul class="nav nav-tabs xs-p-4 d-flex product-info-tab border-bottom-0 pl-4" id="pills-tab" role="tablist">
            <li class="active list-inline-item mr-5"><a class="fw-700 font-xssss text-grey-500 pt-3 pb-3 ls-1 d-inline-block active" href="#navtabs1" data-toggle="tab">About</a></li>
            .
            .
        </ul>
    </div>
</div>
Author Profile

About Card

Here the code you need to put html page

About Card
<div class="card w-100 shadow-xss rounded-xxl border-0 mb-3">
    <div class="card-body d-block p-4">
        <h4 class="fw-700 mb-3 font-xsss text-grey-900">About</h4>
        <p class="fw-500 text-grey-500 lh-24 font-xssss mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla dolor, ornare at commodo non, feugiat non nisi. Phasellus faucibus mollis pharetra. Proin blandit ac massa sed rhoncus</p>
    </div>
    <div class="card-body border-top-xs d-flex">
        <i class="feather-lock text-grey-500 mr-3 font-lg"></i>
        <h4 class="fw-700 text-grey-900 font-xssss mt-0">Private <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">What's up, how are you?</span></h4>
    </div>
    .
    .
</div>
About Card

Photo Card

Here the code you need to put html page

Photo Card
<div class="card w-100 shadow-xss rounded-xxl border-0 mb-3">
    <div class="card-body d-flex align-items-center  p-4">
        <h4 class="fw-700 mb-0 font-xssss text-grey-900">Photos</h4>
        <a href="#" class="fw-600 ml-auto font-xssss text-primary">See all</a>
    </div>
    <div class="card-body d-block pt-0 pb-2">
        <div class="row">
            <div class="col-6 mb-2 pr-1"><img src="img path" alt="image" class="img-fluid rounded-lg"></div>
            .
            .
        </div>
    </div>
    <div class="card-body d-block w-100 pt-0">
        <a href="#" class="p-2 lh-28 w-100 d-block bg-grey text-grey-800 text-center font-xssss fw-700 rounded-xl"><i class="feather-external-link font-xss mr-2"></i> More</a>
    </div>
</div>
Photo Card

Group Profile

Here the code you need to put html page

Group Profile
<div class="card w-100 shadow-xss rounded-xxl overflow-hidden border-0 mb-3 mt-3">
    <div class="card-body position-relative h150 bg-image-cover bg-image-center" style="background-image: url(img path);"></div>
    <div class="card-body d-block pt-4 text-center">
        <figure class="avatar mt--6 position-relative w75 z-index-1 w100 z-index-1 ml-auto mr-auto"><img src="img path" alt="image" class="p-1 bg-white rounded-xl w-100"></figure>
        <h4 class="font-xs ls-1 fw-700 text-grey-900">Surfiya Zakir <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">@surfiyazakir22</span></h4>
    </div>
    <div class="card-body d-flex align-items-center pl-4 pr-4 pt-0">
        <h4 class="font-xsssss text-center text-grey-500 fw-600 ml-2 mr-2"><b class="text-grey-900 mb-1 font-xss fw-700 d-inline-block ls-3">456 </b> Posts</h4>
        .
        .
    </div>
    <div class="card-body d-flex align-items-center justify-content-center pl-4 pr-4 pt-0">
        <a href="#" class="bg-success p-3 z-index-1 rounded-lg text-white font-xsssss text-uppercase fw-700 ls-3">Add Friend</a>
        <a href="#" class="bg-greylight btn-round-lg ml-2 rounded-lg text-grey-700"><i class="feather-mail font-md"></i></a>
        <a href="#" class="border-light-md btn-round-lg ml-2 rounded-lg text-grey-700"><i class="ti-more font-md"></i></a>
    </div>
</div>
Group Profile

Getting Started

Introduction

HTML Structure

Bootstrap Color

Color Pattern

Typography

Display .display1-size

Display .display2-size

Display .display3-size

Display .display4-size

Headline .font-xsssss

Headline .font-xssss

Headline .font-xsss

Headline .font-xss

Headline .font-xs

Headline .font-sm

Headline .font-md

Headline .font-lg

Headline .font-xl

Headline .font-xxl

Font Weight .fw-100

Font Weight .fw-200

Font Weight .fw-300

Font Weight .fw-400

Font Weight .fw-500

Font Weight .fw-600

Font Weight .fw-700

Font Weight .fw-800

Font Weight .fw-900

RTL Stucture

Change Log

Credits

Support

Lightbox 2

Apex Chart

Owl Carousel

Feather Icon

Thimify Icon

Widgets

Navigation Menu

Navigation Menu

Message

Newsfeed

Profile

Video Feed

Story Feed

Profile Badge

Author Profile

Hotel

Event

Author Profile

About Card

Photo Card

Group Profile