312 lines
13 KiB
HTML
312 lines
13 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% load static %}
|
|
|
|
{% block title %}Social Buttons{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'plugins/bootstrap-social/bootstrap-social.css' %}" rel="stylesheet" />
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'plugins/@highlightjs/cdn-assets/highlight.min.js' %}"></script>
|
|
<script src="{% static 'js/demo/render.highlight.js' %}"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- BEGIN breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript:;">UI Elements</a></li>
|
|
<li class="breadcrumb-item active">Social Buttons</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">Social Buttons <small>header small text goes here...</small></h1>
|
|
<!-- END page-header -->
|
|
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-8 -->
|
|
<div class="col-xl-8">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Installation </h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN table-responsive -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-condensed text-nowrap m-0 table-panel">
|
|
<thead>
|
|
<tr>
|
|
<th>Buttons</th>
|
|
<th>class=""</th>
|
|
<th>Color Code</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-adn">
|
|
<span class="fab fa-adn"></span> Sign in with App.net
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-adn</code></td>
|
|
<td>#D87A68</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-bitbucket">
|
|
<span class="fab fa-bitbucket"></span> Sign in with Bitbucket
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-bitbucket</code></td>
|
|
<td>#205081</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-dropbox">
|
|
<span class="fab fa-dropbox"></span> Sign in with Dropbox
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-dropbox</code></td>
|
|
<td>#1087DD</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-facebook">
|
|
<span class="fab fa-facebook"></span> Sign in with Facebook
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-facebook</code></td>
|
|
<td>#3B5998</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-flickr">
|
|
<span class="fab fa-flickr"></span> Sign in with Flickr
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-flickr</code></td>
|
|
<td>#2BA9E1</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-foursquare">
|
|
<span class="fab fa-foursquare"></span> Sign in with Foursquare
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-foursquare</code></td>
|
|
<td>#f94877</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-github">
|
|
<span class="fab fa-github"></span> Sign in with GitHub
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-github</code></td>
|
|
<td>#444444</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-google">
|
|
<span class="fab fa-google"></span> Sign in with Google
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-google</code></td>
|
|
<td>#DD4B39</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-instagram">
|
|
<span class="fab fa-instagram"></span> Sign in with Instagram
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-instagram</code></td>
|
|
<td>#3F729B</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-linkedin">
|
|
<span class="fab fa-linkedin"></span> Sign in with LinkedIn
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-linkedin</code></td>
|
|
<td>#007BB6</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-microsoft">
|
|
<span class="fab fa-windows"></span> Sign in with Microsoft
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-microsoft</code></td>
|
|
<td>#2672EC</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-odnoklassniki">
|
|
<span class="fab fa-odnoklassniki"></span> Sign in with Odnoklassniki
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-odnoklassniki</code></td>
|
|
<td>#F4731C</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-openid">
|
|
<span class="fab fa-openid"></span> Sign in with OpenID
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-openid</code></td>
|
|
<td>#F7931E</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-pinterest">
|
|
<span class="fab fa-pinterest"></span> Sign in with Pinterest
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-pinterest</code></td>
|
|
<td>#CB2027</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-reddit">
|
|
<span class="fab fa-reddit"></span> Sign in with Reddit
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-reddit</code></td>
|
|
<td>#EFF7FF</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-soundcloud">
|
|
<span class="fab fa-soundcloud"></span> Sign in with SoundCloud
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-soundcloud</code></td>
|
|
<td>#FF5500</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-tumblr">
|
|
<span class="fab fa-tumblr"></span> Sign in with Tumblr
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-tumblr</code></td>
|
|
<td>#CB2027</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-twitter">
|
|
<span class="fab fa-twitter"></span> Sign in with Twitter
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-twitter</code></td>
|
|
<td>#55ACEE</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-vimeo">
|
|
<span class="fab fa-vimeo-square"></span> Sign in with Vimeo
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-vimeo</code></td>
|
|
<td>#1AB7EA</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-vk">
|
|
<span class="fab fa-vk"></span> Sign in with VK
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-vk</code></td>
|
|
<td>#587EA3</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="with-btn">
|
|
<a href="javascript:;" class="btn btn-sm w-250px btn-social btn-yahoo">
|
|
<span class="fab fa-yahoo"></span> Sign in with Yahoo!
|
|
</a>
|
|
</td>
|
|
<td><code>btn btn-social btn-yahoo</code></td>
|
|
<td>#720E9E</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- END table-responsive -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/ui-social-buttons/code-1.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-8 -->
|
|
<!-- BEGIN col-4 -->
|
|
<div class="col-xl-4">
|
|
<div class="lead mb-20px">
|
|
<p class="mb-5px">Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome!</p>
|
|
<a href="https://lipis.github.io/bootstrap-social/" target="_blank" class="btn btn-sm btn-dark">View Official Website <i class="fa fa-arrow-right ms-5px"></i></a>
|
|
</div>
|
|
<div class="mb-10px"><b>Social Icons</b></div>
|
|
<div class="clearfix mb-20px">
|
|
<a href="javascript:;" class="btn btn-social-icon btn-adn float-start me-5px mb-5px"><span class="fab fa-adn"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-bitbucket float-start me-5px mb-5px"><span class="fab fa-bitbucket"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-dropbox float-start me-5px mb-5px"><span class="fab fa-dropbox"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-facebook float-start me-5px mb-5px"><span class="fab fa-facebook"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-flickr float-start me-5px mb-5px"><span class="fab fa-flickr"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-foursquare float-start me-5px mb-5px"><span class="fab fa-foursquare"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-github float-start me-5px mb-5px"><span class="fab fa-github"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-google float-start me-5px mb-5px"><span class="fab fa-google"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-instagram float-start me-5px mb-5px"><span class="fab fa-instagram"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-linkedin float-start me-5px mb-5px"><span class="fab fa-linkedin"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-microsoft float-start me-5px mb-5px"><span class="fab fa-windows"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-odnoklassniki float-start me-5px mb-5px"><span class="fab fa-odnoklassniki"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-openid float-start me-5px mb-5px"><span class="fab fa-openid"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-pinterest float-start me-5px mb-5px"><span class="fab fa-pinterest"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-reddit float-start me-5px mb-5px"><span class="fab fa-reddit"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-soundcloud float-start me-5px mb-5px"><span class="fab fa-soundcloud"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-tumblr float-start me-5px mb-5px"><span class="fab fa-tumblr"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-twitter float-start me-5px mb-5px"><span class="fab fa-twitter"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-vimeo float-start me-5px mb-5px"><span class="fab fa-vimeo-square"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-vk float-start me-5px mb-5px"><span class="fab fa-vk"></span></a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-yahoo float-start me-5px mb-5px"><span class="fab fa-yahoo"></span></a>
|
|
</div>
|
|
<div class="mb-10px"><b>Different Sizes</b></div>
|
|
<div class="mb-10px">
|
|
<p>
|
|
<a href="javascript:;" class="btn btn-social btn-lg btn-facebook me-5px"><i class="fab fa-facebook-f"></i>Sign in with Facebook</a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-lg btn-facebook"><i class="fab fa-facebook-f"></i></a>
|
|
</p>
|
|
<p>
|
|
<a href="javascript:;" class="btn btn-social btn-facebook me-5px"><i class="fab fa-facebook-f"></i>Sign in with Facebook</a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-facebook"><i class="fab fa-facebook-f"></i></a>
|
|
</p>
|
|
<p>
|
|
<a href="javascript:;" class="btn btn-social btn-sm btn-facebook me-5px"><i class="fab fa-facebook-f"></i>Sign in with Facebook</a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-sm btn-facebook"><i class="fab fa-facebook-f"></i></a>
|
|
</p>
|
|
<p>
|
|
<a href="javascript:;" class="btn btn-social btn-xs btn-facebook me-5px"><i class="fab fa-facebook-f"></i>Sign in with Facebook</a>
|
|
<a href="javascript:;" class="btn btn-social-icon btn-xs btn-facebook"><i class="fab fa-facebook-f"></i></a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- END col-4 -->
|
|
</div>
|
|
<!-- END row -->
|
|
|
|
{% endblock %} |