cloud
/
index.html

<!--<The Clouds Museum,a website of introducing the clouds>  Copyright (C) <2021>  <Honglei Gan>-->
<!--  This program is free software: you can redistribute it and/or modifyit under the terms of the GNU General Public License as published bythe Free Software Foundation, either version 3 of the License, or(at your option) any later version.-->
<!--This program is distributed in the hope that it will be useful,but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details.-->
<!--You should have received a copy of the GNU General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>云朵博物馆</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
 <body  class="background1" style="margin:0; background:url(img/background.jpg);background-size:cover;">
  <div  class="content">
   <div class="top">
    <img class="logo" src="img/logo.png" width="50px">
    <div class="title">
     <span>云朵博物馆</span>
    </div>
    <!--title-->
   </div>
   <!--top-->
   <!--顶栏-->
   <div class="items">
    <div class="first">
     <div class="passage">
      <p><span class="title1">云·Cloud</span><br><span class="t1">你真的看过那片天空吗？<br >你真的看过那片云彩吗?</span><br ><br><span class="t2">云是水蒸气的另一个化身，生于水最终也回到水的怀抱。世上从来没有相同的两片云，每一片云都是独一无二的存在。云的形态无法确定，它的颜色总给人惊喜，它上一秒是云，下一秒便可以使瓢泼大雨。记录每一片云彩，从不定姿态的云中体味生活百态…… </span></p>
     </div>
     <!--passage-->
     <a href="html/more.html"><button class="button1"><b>了解更多</b></button></a>
    </div>
    <!--first-->
    <div class="second">
     <div class="box">
      <div class="photo" style="background:url(img/1.jpeg); background-size:cover;margin-left:5px;float:left;">
      </div>
      <!--photo1-->
      <div class="text" style="font-size:20px;text-align:left;float:right;">
       <span>2021.China<br>Wuhan<br>云是天上的海，<br>海是天上的云。</span>
      </div>
      <!--text1-->
     </div>
     <!--box1-->
     <div class="box">
      <div class="photo" style="margin-right:5px;background:url(img/2.jpg);background-size:cover;float:right;"></div>
      <!--photo2-->
      <div class="text" style="font-size:18px;text-align:right;float:left;">
       <span>2021.China<br>Wuhan<br>云浪是天海范起的褶皱,星辰成了锦鲤。</span>
      </div>
      <!--text2-->
     </div>
     <!--box2-->
     <div class="box">
      <div class="photo" style="margin-left:5px;background:url(img/3.jpg);background-size:cover;float:left;">
      </div>
      <!--photo3-->
      <div class="text" style="font-size:15px;text-align:left;float:right;">
       <p>2021.China<br>Enshi<br>低调，取舍间，必有得失。人生，可以痛苦，更要懂得追求快乐。</p>
      </div>
      <!--text3-->
     </div>
     <!--box3-->
     <div class="box">
      <div class="photo" style="margin-right:5px;background:url(img/4.jpg);background-size:cover;float:right;"></div>
      <!--photo4-->
      <div class="text" style="font-size:15px;text-align:right;float;left;">
       <p>2021.China<br>Enshi<br>世间最珍贵的不是“得不到”和“已失去”，而是现在能把握的幸福。</p>
      </div>
      <!--text4-->
     </div>
     <!--box4-->
     <div class="box">
      <div class="photo" style="margin-left:5px;background:url(img/5.jpg);background-size:cover;float:left;">
      </div>
      <!--photo5-->
      <div class="text" style="font-size:15px;text-align:left;float:right;">
       <p>2021.China<br>None<br>不乱于心，不困于情，不畏将来，不念过往，如此，安好。</p>
      </div>
      <!--text5-->
     </div>
     <!--box5-->
    </div>
    <!--second-->

    <div class="three">
     <div class="box">
      <div class="photo" style="background:url(img/6.jpg); background-size:cover;margin-right:5px;float:right;">
      </div>
      <!--photo1-->
      <div class="text" style="font-size:20px;text-align:right;float:left;">
       <span>2021.China<br>Sichuan<br>带给我快乐的人，一定要加倍快乐。</span>
      </div>
      <!--text1-->
     </div>
     <!--box1-->
     <div class="box">
      <div class="photo" style="margin-left:5px;background:url(img/7.jpg);background-size:cover;float:left;"></div>
      <!--photo2-->
      <div class="text" style="font-size:18px;text-align:left;float:right;">
       <span>2021.China<br>None<br>我陪着你，你可以看不到但请不要逃跑。</span>
      </div>
      <!--text2-->
     </div>
     <!--box2-->
     <div class="box">
      <div class="photo" style="margin-right:5px;background:url(img/8.jpg);background-size:cover;float:right;">
      </div>
      <!--photo3-->
      <div class="text" style="font-size:15px;text-align:right;float:left;">
       <p>2021.Japan<br>Kagawa-ken<br>湛蓝天空上像奶油泡芙一样的云朵溢出夏天的味道。</p>
      </div>
      <!--text3-->
     </div>
     <!--box3-->
          <div class="box">
      <div class="photo" style="background:url(img/9.jpg); background-size:cover;margin-left:5px;float:left;">
      </div>
      <!--photo4-->
      <div class="text" style="font-size:17px;text-align:left;float:right;">
       <span>2021.China<br>Sichuan<br>是微风，是晚霞，是心跳不止，是无可代替。</span>
      </div>
      <!--text4-->
     </div>
     <!--box4-->
     <div class="box">
      <div class="photo" style="margin-right:5px;background:url(img/10.jpeg);background-size:cover;float:right;"></div>
      <!--photo5-->
      <div class="text" style="font-size:18px;text-align:right;float:left;">
       <span>2021.China<br>None<br>心怀浪漫宇宙，<br>也珍惜人间日常。</span>
      </div>
      <!--text5-->
     </div>
     <!--box5-->
     <br>
     <button class="Copyright">Copyright© 2021 Honglei Gan.│<a style="text-decoration:none;color:black;" href="html/name.html">贡献</a>│<a style="text-decoration:none;color:black;" href="https://qm.qq.com/cgi-bin/qm/qr?k=44bvJN3bpbC4ukoOp_iqWh1sCOkNBJmE&amp;noverify=0">QQ</a>│<a style="text-decoration:none;color:black;" href="https://www.coolapk.com/u/3968504">COOLAPK</a>│<a style="text-decoration:none;color:black;" href="https://gitee.com/hongleigan">Gitee</a></button>
    </div>
    <!--three-->
   </div>
   <!--items-->
  </div>
  <!--content-->
  </body>
</html>