- codingsoho.com

开启代码之旅 Launch With Code

17 Create a Social Sharing Page Part 3

https://www.codingforentrepreneurs.com/

创建到facebook，wechat等的分享

素材及参考 – Font

Icon CDN

https://www.bootstrapcdn.com/fontawesome/

    <link href="[https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css](https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css)" rel="stylesheet">

share.html

    <div class="jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-md-6 pull-right" style="text-align:center" >
          <i class="fa fa-share-alt fa-5x"></i>
            <h1>Inivte Friend & Earn Rewards</h1>
            <p>Share your unique link below via Email, Facebook, Twitter, Reddit, or LinkedIn to earn rewards from LaunchWithCode.com</p>
            <div class="well" style="background-color:white">{{ref_url}}</div>
            <br/>Share<br/>
            <i class="fa fa-facebook-square fa-4x" style="color:#213E75"></i>
            <i class="fa fa-twitter-square fa-4x" style="color:#D42665"></i>
            <i class="fa fa-linkedin-square fa-4x" style="color:#5413B9"></i>
            <i class="fa fa-reddit-square fa-4x" style="color:#75213F"></i>
          </div>
          <div class="col-md-6 pull-left">
            <img src = "{% static 'img/launch.jpg' %}" class = "img-responsive" />
          </div>
        </div>
      </div>
</div>

进度条

[http://getbootstrap.com/components/#progress]9http://getbootstrap.com/components/#progress）

<div class="container" style="text-align:center">
Joined number is: {{count}} <br/>

<div class="row">
    <div class="col-sm-3">
        <h3>5 Joined</h3>
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            60%
          </div>
        </div>
        <h4>Rewards Name</h4>
        <img src="[http://www.icon100.com/up/4257/72/BattleNet.png](http://www.icon100.com/up/4257/72/BattleNet.png)"/>
        <img src="[http://www.icon100.com/up/4252/72/32-extraterrestrial-head.png](http://www.icon100.com/up/4252/72/32-extraterrestrial-head.png)"/>
        <hr/>
        <span style="text-align:left!important">
        <h5>Rewards Include:</h5>
          <ul>
              <li> Reward 1</li>
              <li> Reward 1</li>
          </ul>
        </span>
        <hr>        
    </div>