G-Cloud-8.0
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <script type="text/javascript" src="./script/jquery.min.js"></script>
  <script type="text/javascript" src="./script/bootstrap.min.js"></script>
  <link rel="stylesheet" href="./css/fontawesome.min.css" />
  <title>主页 - 开源社区</title>
</head>
<body>
  <!--页面头部-->
  <div class="topic">
    <div class="topic-logo">
      <div class="logo-title">
        <p class="title">中国云开源社区</p>
        <p class="subtitle">China Cloud Open Source Community</p>
      </div>
      <img class="logo-img" src="./images/v2_pifeog.png" />
    </div>

    <div class="topic-tool">
      <div class="tool-user">
        <div class="user-tool">
          <a href="javascript:void(0)">【登录】</a>
          <a href="javascript:void(0)">【注册】</a>
        </div>
        <div class="user-info"><span>2019年01月02日 欢迎登陆到开源社区</span></div>
      </div>

      <div class="tool-bar">
        <ul>
          <a class="active" href="javascript:void(0)"><li>主页</li></a>
          <a href="javascript:void(0)"><li>资讯</li></a>
          <a href="javascript:void(0)"><li>项目</li></a>
          <a href="javascript:void(0)"><li>群组</li></a>
          <a href="javascript:void(0)"><li>示范仓库</li></a>
          <a href="javascript:void(0)"><li>个人中心</li></a>
        </ul>
      </div>
    </div>
    <div class="clear"></div>
  </div>

  <!-- 图片轮滚 !-->
  <div id="carousel" data-ride="carousel" class="carousel slide">
    <ol class="carousel-indicators">
      <li data-target="#carousel" data-slide-to="0" class="active"></li>
      <li data-target="#carousel" data-slide-to="1"></li>
      <li data-target="#carousel" data-slide-to="2"></li>
      <li data-target="#carousel" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
      <div class="item active">
        <img src="./images/banner0.jpg">
      </div>
      <div class="item">
        <img src="./images/banner1.jpg">
      </div>
      <div class="item">
        <img src="./images/banner2.jpg">
      </div>
      <div class="item">
        <img src="./images/banner3.jpg">
      </div>
    </div>
  </div>

  <!--页面主要内容-->
  <div class="main-container">
    <div class="container-row">
      <div class="container-row-display">
        <div class="display-content-left">
          <div class="display-title">
            <span>推荐项目</span>
            <a href="javascript:void(0)" class="more-btn">MORE</a>
          </div>

          <div class="display-content">
            <div class="recommend-project">
              <i class="fas fa-chess-board"></i>
              <div class="recommend-project-content">
                <p class="content-title">深度学习分布式训练库 Petastorm深度学习分深度学习分深度学习分深度学习分</a>
                <p class="content-subtitle"><span>开发语言:Python</span><span>操作系统:Linux</span></p>
              </div>
            </div>
            <div class="recommend-project">
              <i class="fas fa-box-open"></i>
              <div class="recommend-project-content">
                <p class="content-title">Kubernetes原生Serverless框架Kubeless</a>
                <p class="content-subtitle"><span>开发语言:Python</span><span>操作系统:Linux</span></p>
              </div>
            </div>
            <div class="recommend-project">
              <i class="fab fa-windows"></i>
              <div class="recommend-project-content">
                <p class="content-title">深度学习分布式训练库 Petastorm</a>
                <p class="content-subtitle"><span>开发语言:Python</span><span>操作系统:Linux</span></p>
              </div>
            </div>
            <div class="recommend-project">
              <i class="fas fa-feather-alt"></i>
              <div class="recommend-project-content">
                <p class="content-title">深度学习分布式训练库 Petastorm</a>
                <p class="content-subtitle"><span>开发语言:Python</span><span>操作系统:Linux</span></p>
              </div>
            </div>
            <div class="recommend-project" style="margin-bottom: 0;">
              <i class="fab fa-codepen"></i>
              <div class="recommend-project-content">
                <p class="content-title">深度学习分布式训练库 Petastorm</a>
                <p class="content-subtitle"><span>开发语言:Python</span><span>操作系统:Linux</span></p>
              </div>
            </div>
          </div>
        </div>

        <div class="display-content-right">
          <div class="display-title">
            <span>热门项目</span>
            <a href="javascript:void(0)" class="more-btn">MORE</a>
          </div>
          <ul class="content-list">
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">Web 交互式计算笔记本平台 Jupyter Notebook记本平台 Ju记本平台 Ju记本平台 Ju</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">开源可自建的 RSS 订阅器 FreshRSS</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">微软磁盘操作系统MS-DOS</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">去中心化平台Solid</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">基于模型的机器学习框架Infer.NET</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">代码搜索浏览工具 Sourcegraph</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">H5、小程序自动化测试框架FAutoTest</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">轻量级插件化方案 Neptune</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">静态编程语言 Skiplang React Native</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">应用基础组件库 beeshell</a></li>
          </ul>
        </div>
        <div class="clear"></div>
      </div>

      <div class="container-row-display">
        <div class="display-content-left">
          <div class="display-title">
            <span>推荐群组</span>
            <a href="javascript:void(0)" href="javascript:void(0)" class="more-btn">MORE</a>
          </div>

          <div class="recommend-group-content">
            <a href="javascript:void(0)" class="content-title">深度学习分布式训深度学习分布式训练库深度学习分布式训练库深度学习分布式训练库练库 Petastorm</a>
            <p class="content-subtitle"><span>开发语言:Python</span><span>操作系统:Linux</span></p>
          </div>

          <div class="recommend-group-content">
            <a href="javascript:void(0)" class="content-title">Kubernetes原生Serverless框架Kubeless</a>
            <p class="content-subtitle"><span>开发语言:Python</span><span>操作系统:Linux</span></p>
          </div>

          <div class="recommend-group-content">
            <a href="javascript:void(0)" class="content-title">深度学习分布式训练库 Petastorm</a>
            <p class="content-subtitle"><span>开发语言:Python</span><span>操作系统:Linux</span></p>
          </div>

          <div class="recommend-group-content">
            <a href="javascript:void(0)" class="content-title">深度学习分布式训练库 Petastorm</a>
            <p class="content-subtitle"><span>开发语言:Python</span><span>操作系统:Linux</span></p>
          </div>

          <div class="recommend-group-content">
            <a href="javascript:void(0)" class="content-title">深度学习分布式训练库 Petastorm</a>
            <p class="content-subtitle"><span>开发语言:Python</span><span>操作系统:Linux</span></p>
          </div>
        </div>

        <div class="display-content-right">
          <div class="display-title">
            <span>热门讨论</span>
            <a href="javascript:void(0)" class="more-btn">MORE</a>
          </div>

          <ul class="content-list">
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">Web 交互式计算笔记本平台 Jupyter Notebook笔记本平台笔记本平台笔记本平台</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">开源可自建的 RSS 订阅器 FreshRSS</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">微软磁盘操作系统MS-DOS</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">去中心化平台Solid</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">基于模型的机器学习框架Infer.NET</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">代码搜索浏览工具 Sourcegraph</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">H5、小程序自动化测试框架FAutoTest</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">轻量级插件化方案 Neptune</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">静态编程语言 Skiplang React Native</a></li>
            <li><i class="far fa-circle"></i><a href="javascript:void(0)">应用基础组件库 beeshell</a></li>
          </ul>
        </div>
        <div class="clear"></div>
      </div>
    </div>

    <div class="container-col">
      <div class="container-col-display">
        <div class="display-title" style="height: 15%;">
          <span>行业资讯</span>
          <a href="javascript:void(0)" class="more-btn">MORE</a>
        </div>

        <ul class="content-list col-list">
          <li><i class="far fa-circle"></i><a href="javascript:void(0)">Jboot v1.7.1 发布JbootJbootJbootJbootJbootJbootJbootJboots</a></li>
          <li><i class="far fa-circle"></i><a href="javascript:void(0)">Spring Boot Admin 2.0.4 发布</a></li>
          <li><i class="far fa-circle"></i><a href="javascript:void(0)">t-io 3.2.1 发布了</a></li>
          <li><i class="far fa-circle"></i><a href="javascript:void(0)">APP 版本更APP 版本APP 版本APP 版本APP 版本APP 版本新丨动弹也能看代码啦！</a></li>
          <li><i class="far fa-circle"></i><a href="javascript:void(0)">Opus 1.3 发布</a></li>
          <li><i class="far fa-circle"></i><a href="javascript:void(0)">ASP.NET SignalR 2.4.0 Preview 2 发布</a></li>
          <li><i class="far fa-circle"></i><a href="javascript:void(0)">GitLab 11.4 带来审查合并请求和 Feature</a></li>
          <li><i class="far fa-circle"></i><a href="javascript:void(0)">Linux Kernel 4.19 正式发布</a></li>
          <li><i class="far fa-circle"></i><a href="javascript:void(0)">material2 发布 7.0.1</a></li>
          <li><i class="far fa-circle"></i><a href="javascript:void(0)">HHVM 3.29 发布</a></li>
        </ul>
      </div>
      <div class="container-col-display">
        <div class="display-title" style="height: 15%;">
          <span>下载排行榜</span>
          <a href="javascript:void(0)" class="more-btn">MORE</a>
        </div>

        <ul class="content-list col-list rank-list">
          <li><span class="list-num">01</span><a href="javascript:void(0)">Jboot v1.7.1 发布JbootJbootJbootJbootJbootJbootJbootJbootJbootJbootJboot</a><span class="rank-num">233</span></li>
          <li><span class="list-num">02</span><a href="javascript:void(0)">Spring Boot Admin 2.0.4 发布</a><span class="rank-num">219</span></li>
          <li><span class="list-num">03</span><a href="javascript:void(0)">t-io 3.2.1 发布了</a><span class="rank-num">233</span></li>
          <li><span class="list-num">04</span><a href="javascript:void(0)">APP 版本更新丨动弹也能看代码啦！</a><span class="rank-num">204</span></li>
          <li><span class="list-num">05</span><a href="javascript:void(0)">Opus 1.3 发布</a><span class="rank-num">183</span></li>
          <li><span class="list-num">06</span><a href="javascript:void(0)">ASP.NET SignalR 2.4.0 Preview 2 发布</a><span class="rank-num">163</span></li>
          <li><span class="list-num">07</span><a href="javascript:void(0)">GitLab 11.4 带来审查合并请求和 Feature</a><span class="rank-num">152</span></li>
          <li><span class="list-num">08</span><a href="javascript:void(0)">Linux Kernel 4.19 正式发布</a><span class="rank-num">124</span></li>
        </ul>
      </div>
      <div class="container-col-display" style="padding: 89px 0 0 36%; min-height: 188px; background-color: #FFFACC;">
        <span>推荐活动/广告位</span>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</body>

<script>
  $(".tool-bar ul a").mouseenter(function(){
    $(this).addClass("active");
    $(this).siblings().removeClass("active");

    $(".tool-bar ul a").mouseleave(function() {
      $(".tool-bar ul a").eq(0).addClass("active");
      $(".tool-bar ul a").eq(0).siblings().removeClass("active");
    });
  });
</script>
</html>