master

分支 (1)

管理

管理

master

pic_trans
/
index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Picture transformer: by ZCLGP group</title>
    <link rel="stylesheet" href="css/scaffold.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
      integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet">
  </head>
  <body>
    <header class="grid">
      <!-- <div class="button-menu grid-item">
        <a href="#"> <i class="fas fa-bars"></i> </a>
      </div> -->
      <div class="grid-item-12 logo-comp">
        <h2>Picture<span class="co-logo">Transform</span></h2>
        <h3>by ZCLGP group</h3>
      </div>
      <!-- <div class="grid-item-6 search">
        <input type="text" placeholder="Tell us what else style you are expecting!" />
        <button>SEND</button>
      </div> -->
      <div class="search-icon grid-item-2">
        <i class="fas fa-search"></i>
      </div>

    </header>

    <main class="grid" style="align-items: center;">
      <div class="grid-item-10">
        <section class="grid article-columns">

          <div class="grid-item-4 article-column">
            <div class="column-item">
              <h2 class="section-title">图中文物：伯矩鬲</h2>
              <div class="block-list">
                <img src="img/2.png" class="img">
                <div class="block-content">
                  <p class="block-kicker">Before Transformation</p>
                </div>
              </div>
            </div>
          </div>

          <div class="grid-item-8 article-column">
            <div class="column-item">
              <h2 class="section-title" style="font-size: 26px;margin-top: 20px;">伯(bó)矩(jǔ)鬲(lǐ)的自述</h2>
              <div class="block-list">
                <div class="block-content" style="margin-left: 7px; margin-right: 7px;">
                  <p class="block-kicker"  style="line-height: 25px; color:  rgb(121, 113, 113); text-indent:2em;">我是出生于西周初期的青铜器，有个拉风的全名“牛头纹带盖伯矩鬲”。</p>
                  <p class="block-kicker"  style="line-height: 25px; color:  rgb(121, 113, 113); text-indent:2em;">原本我一直在土里安眠，一天突然就见了天日，后来我就被仔仔细细地保护了起来，人们还给我写了个小档案，依稀记得里面还写了我的出土日期（1974年）和地址（北京市房山区琉璃河遗址251号墓）。现在我常年驻扎在北京市首都博物馆，偶有馆际互借的活动，
                      让我得以外出旅游一波，但由于国家文物局禁止将我出国展览，我的旅游路线仅限于国内。</p>
                  <p class="block-kicker"  style="line-height: 25px; color:  rgb(121, 113, 113); text-indent:2em;">不得不提的是首都博物馆还为我开发了“首伯牛”的IP，还有以我为原型的各种文创产品，甚至还有冰淇淋🍦！</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>


      <div class="grid nav-images">

        <div class="grid-item-3">
          <img src="img/pic1.png" class="img" width="160px">
          <span>SCIENCE, TECH, MATH</span>
        </div>

        <div class="grid-item-3">
          <img src="img/pic2.png" class="img" width="160px">
          <span>HUMANITIES</span>
        </div>

        <div class="grid-item-3">
          <img src="img/pic3.png" class="img" width="160px">
          <span>ARTS, MUSIC, RECREATION</span>
        </div>

        <div class="grid-item-3">
          <img src="img/pic4.png" class="img" width="160px">
          <span>RESOURCES</span>
        </div>
      </div>
      <section class="grid article-columns">
        <div class="grid-item-3 article-column">
          <div class="column-item">
            <h2 class="section-title">
              LIGHT SKETCH </h2>
            <div class="block-list">
              <img src="img/pencil.jpg" class="img">
              <div class="block-content">
                <p class="block-kicker">After</p>
              </div>
            </div>

            <a href="img_trans.html" class="column-btn">
              Try this out!
              <i class="fas fa-caret-right"></i> </a>
          </div>
        </div>
        <div class="grid-item-3 article-column">
          <div class="column-item">
            <h2 class="section-title">
              CHINESE PAINTING </h2>
            <div class="block-list">
              <img src="img/chi_paint.jpg" class="img">
              <div class="block-content">
                <p class="block-kicker">After</p>
              </div>
            </div>

            <a href="img_trans.html" class="column-btn">
              Try this out!
              <i class="fas fa-caret-right"></i> </a>
          </div>
        </div>

        <div class="grid-item-3 article-column">
          <div class="column-item">
            <h2 class="section-title">
              LINE DRAWING </h2>
            <div class="block-list">
              <img src="img/line_draw.jpg" class="img">
              <div class="block-content">
                <p class="block-kicker">After</p>
              </div>
            </div>

            <a href="img_trans.html" class="column-btn">
              Try this out!
              <i class="fas fa-caret-right"></i> </a>
          </div>
        </div>

        <div class="grid-item-3 article-column">
          <div class="column-item">
            <h2 class="section-title">
              WESTERN PAINTING </h2>
            <div class="block-list">
              <img src="img/wes_paint.jpg" class="img">
              <div class="block-content">
                <p class="block-kicker">After</p>
              </div>
            </div>

            <a href="img_trans.html" class="column-btn">
              Try this out!
              <i class="fas fa-caret-right"></i> </a>
          </div>
        </div>
      </section>

      <!--the second line--->
      <div class="grid nav-images" >
        <div class="grid-item-3"></div>
        <div class="grid-item-3">
          <img src="img/pic5.png" class="img" width="160px">
          <span>SCIENCE, TECH, MATH</span>
        </div>
        <div class="grid-item-3">
          <img src="img/pic6.png" class="img" width="160px">
          <span>HUMANITIES</span>
        </div>
        <div class="grid-item-3"></div>
      </div>

      <section class="grid article-columns"  >
        <div class="grid-item-3"></div>
        <div class="grid-item-3 article-column">
          <div class="column-item">
            <h2 class="section-title">GREY SKETCH</h2>
            <div class="block-list">
              <img src="img/grey.jpg" class="img">
              <div class="block-content">
                <p class="block-kicker">After</p>
              </div>
            </div>
            <a href="img_trans.html" class="column-btn">
              Try this out!
              <i class="fas fa-caret-right"></i> </a>
          </div>
        </div>
        <div class="grid-item-3 article-column" >
          <div class="column-item">
            <h2 class="section-title">
              COLORFUL SKETCH </h2>
            <div class="block-list">
              <img src="img/colorful.jpg" class="img">
              <div class="block-content">
                <p class="block-kicker">After</p>
              </div>
            </div>

            <a href="img_trans.html" class="column-btn">
              Try this out!
              <i class="fas fa-caret-right"></i> </a>
          </div>
        </div>


      </section>
    </main>


        <div class="grid-item-12">
          <div class="grid-item-6 block-content" style="text-align: center;">
            <p class="block-kicker" >Article</p>
            <h2 class="block-title">
              <a href="https://baike.baidu.com/item/%E8%A5%BF%E5%91%A8%E4%BC%AF%E7%9F%A9%E9%AC%B2/8253157">
                <span>Read more about 伯矩鬲</span>
              </a>
            </h2>
          </div>
          <div class="grid-item-6 block-content" style="text-align: center;">
            <p class="block-kicker">Website</p>
            <h2 class="block-title">
              <a href="https://www.capitalmuseum.org.cn/">
                <span>Learn more about 首都博物馆</span>
              </a>
            </h2>
          </div>
        </div>
      </div>
    </section>

    <footer class="grid">
       <div class="grid-item-12 logo">
         <h2>Picture<span class="co-logo">Transform</span></h2>
       </div>

       <div class="footer-social-wrapper grid">

         <div class="grid-item-12 footer-social">
           <form action="#" class="newsletter">
             <label for="email">Quick Ways to Constact Us</label>
             <div class="comp grid">
               <input type="text" name="advise" placeholder="  Enter your suggestions..." style="font-size:20px;">
               <button>SEND</button>
             </div>
           </form>
           <div class="social-block-bottom grid">
             <div class="grid-item-12 social-block">
               <div class="social-follow-title"> Follow Us </div>
               <ul class="social-follow-list">
                 <li> <a href="https://gitee.com/cassie_lin/pic_trans.git"> <img src="img/gitee.png"> </a> </li>
                 <li> <a href="#"> <img src="img/github.png"> </a> </li>
               </ul>
             </div>
           </div>
         </div>

         <div class="grid-item-12 footer-links">
           <div class="grid-item-6">
             <div class="footer-link-item">
               <p style="font-size: 20px;">Acknowledgements</p>
             </div>
             <div class="footer-link-item" >
               <a href="https://ts1.cn.mm.bing.net/th/id/R-C.3f742f804a8f57ec6df0533ad8c644ec?rik=SbdRK3HwQK2mYQ&riu=http%3a%2f%2fwww.wenbozaixian.com%2fdata%2fupload%2f20161224%2f585dd368f0243.png&ehk=QjnSMbElfb3FSRLImS17J9vxJrotnVZZt58sQvf%2f4AU%3d&risl=&pid=ImgRaw&r=0"> Picture Source </a>
             </div>
             <div class="footer-link-item">
               <a href="https://github.com/fcarlosdev/grid-framework"> Web Design Reference: Scaffold framework </a>
             </div>
           </div>
           <div class="grid-item-6 footer-more-links">
             <div>
               <div class="ft-mlnk-item" style="font-size: 18px;">
                 <p>Group Members</p>
                 <p>(In Alphabetical Order)</p>
               </div>
               <div class="ft-mlnk-item">
                 <p>Chen YuanTeng, Gu ChaoYang</p>
               </div>
               <div class="ft-mlnk-item">
                 <p>Lin MengYing,  Peng RuiSi</p>
               </div>
               <div class="ft-mlnk-item">
                 <p>Zhao JingWei,  Zhao YuJie</p>
               </div>
             </div>

           </div>
         </div>

       </div>

    </footer>

  </body>
</html>