chengdu-universiade-website
/
index2.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2021成都大运会</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="shortcut icon" href="./public/badge.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,700" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
    <header>
        <img src="./public/skiing2.jpg" alt="skier on the mountain">
        <a href="https://www.2021chengdu.com/cn/" class="logo">
            <img src="./public/xia-logo.png" alt="black square with diagonal white line">
        </a>
        <nav>
            <a>
                <img onclick="runMenu()" class="nav-button"
                    src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iMzJweCIgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHdpZHRoPSIzMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNNCwxMGgyNGMxLjEwNCwwLDItMC44OTYsMi0ycy0wLjg5Ni0yLTItMkg0QzIuODk2LDYsMiw2Ljg5NiwyLDhTMi44OTYsMTAsNCwxMHogTTI4LDE0SDRjLTEuMTA0LDAtMiwwLjg5Ni0yLDIgIHMwLjg5NiwyLDIsMmgyNGMxLjEwNCwwLDItMC44OTYsMi0yUzI5LjEwNCwxNCwyOCwxNHogTTI4LDIySDRjLTEuMTA0LDAtMiwwLjg5Ni0yLDJzMC44OTYsMiwyLDJoMjRjMS4xMDQsMCwyLTAuODk2LDItMiAgUzI5LjEwNCwyMiwyOCwyMnoiLz48L3N2Zz4="
                    alt="hamburger menu svg">
            </a>
            <div id="nav-items" class="nav-content">
                <a href="introduction.html">简介</a>
                <a href="record.html">记·大运会</a>
                <a href="item.html">项目</a>
                <a href="news.html">新闻速递</a>
            </div>
        </nav>
        <div class="title">
            <h1>

                <br>
            </h1>
            <p>Welcome to
                <a href="end.html"><strong>ChengDu</strong></a>
                <br> A vibrant cultural city.
            </p>
        </div>
    </header>
    <article id="aboutMe" class="about-me">
        <div class="about-me-img">
            <img class="resp-img" src="./public/introduction.jpg">
        </div>
        <div class="about-me-text">
            <a href="introduction.html">
                <h3>Introduction</h3>
            </a>
            <p>在北京冬奥会完美落幕之后，中国即将迎来了一个世界大学生夏季运动会——2021成都大运会。
            </p>
        </div>
    </article>
    <section id="myGallery" class="gallery">
        <div class="gallery-first">
            <img class="resp-img" src="./public/i1（乒乓球）.jpg" alt="pingpangqiu">
        </div>
        <div class="gallery-second">
            <img class="resp-img" src="./public/i2（篮球）.jpg" alt="lanqiu">
        </div>
        <div class="gallery-third">
            <img class="resp-img" src="./public/i3（射击）.jpg" alt="sheji">
        </div>
        <div class="gallery-fourth">
            <img class="resp-img" src="./public/i4（体操）.jpg" alt="ticao">
        </div>
        <div class="instagram">
            <a href="item.html">
                <h3>
                    Universiade Sports
                </h3>
            </a>
            <p>
                体操 篮球 射击 武术 乒乓球
            </p>
            <a class="social-btn" href="#">
                VIEW ON INSTAGRAM
            </a>
        </div>
        <div class="gallery-fifth">
            <img src="./public/i5（奖牌）.jpg" alt="jiangpai" class="resp-img">
        </div>
		<div class="gallery-six">
		    <img src="./public/i6（吉祥物）.jpg" alt="jixiangwu" class="resp-img">
		</div>
    </section>
    <section id="myMusic" class="music">
        <div class="music-player">
            <div class="music-player-txt">
                <a href="news.html">
                    <h3>Live news</h3>
                </a>
                <p>F.T. FASCINATING COLLISION</p>
                <p>
                    官方发布
                    <br> 焦点新闻
                    <br> 赛事新闻
                    <br> 热榜新闻
                </p>
                <a class="music-btn" href="news.html">CLICK TO PLAY
                    <i class="fa fa-play" aria-hidden="true"></i>
                </a>
            </div>
        </div>
        <div class="music-img">
            <img id="music-backgr" src="./public/snow.jpg" alt="woman with headphones" class="resp-img">
        </div>
        <div class="spotify">
            <div class="spotify-txt">
                <a href="pictures.html">
                    <h3>
                        高清组图
                    </h3>
                </a>
                <p>
                    运动健儿们在为这场夏季“盛宴”努力的每一个时刻
                </p>
                <a class="social-btn" href="pictures.html">
                    FOLLOW ME ON SEE ING
                </a>
            </div>
        </div>
        <div class="itunes-txt">
            <a href="record.html">
                <h3>
                    记·大运会
                </h3>
            </a>
            <p>
                记录历代赛场上运动健儿的热血沸腾
            </p>
            <a class="social-btn" href="record.html">
                CLICK TO SEE
            </a>
        </div>
    </section>
    <footer id="contact">
        <div class="footer-left">
            <div class="footer-summary">
                <h3>
                    2021 成都大运会
                    <br> Chengdu Universiade
                </h3>
                <P>
                    这将是属于中国以及成都的荣耀时刻。继首都北京和
                    改革开放最前沿城市深圳之后，成都将在今年6月26
                    日正式成为第三个举办世界大学生夏季运动会的中国
                    大陆城市，也是我国西部第一个举办世界综合性运动
                    会的城市。这场即将呈现给全世界的青春盛典，将在
                    成都这座极具活力的城市上演。届时，世界目光将聚
                    焦成都东安湖畔，关于大运会的精彩瞬间与高光时刻
                    也将逐一开启。
                    <br> Ⓒ2022. all rights reserved.
                </P>
            </div>
            <div class="footer-social">
                <div class="footer-contact">
                    <h3>CONTACT ME</h3>
                    <p>
                        软件学院
                        <br>
                        <br> 软工20-5 Ac Email:1095633606@qq.com
                    </p>
                </div>
                <div class="footer-follow">
                    <h3>FOLLOW ME ON</h3>
                    <a href="#">
                        <i class="fa fa-facebook" aria-hidden="true"></i>
                        FACEBOOK
                    </a>
                    <a href="#">
                        <i class="fa fa-twitter" aria-hidden="true"></i>
                        TWITTER
                    </a>
                    <a href="#">
                        <i class="fa fa-instagram" aria-hidden="true"></i>
                        INSTAGRAM
                    </a>
                    <a href="#">
                        <i class="fa fa-spotify" aria-hidden="true"></i>
                        SPOTIFY
                    </a>
                </div>
            </div>
        </div>
        <div class="footer-right">
            <div class="footer-subscribe">
                <h3>SUBSCRIBE</h3>
                <p>大运有我<br>
                       我是成都两千万中的一个<br>
                       是城市大厦中的一块砖<br>
                       是城市名片上的一滴墨<br>
                  我将牢记成都的文明公约<br>
                 注意自己的言行举止<br>
              时时刻刻 点点滴滴 <br>
           都是标准的成都个体<br>
                </p>
            </div>
            <div class="footer-sponsor">
                <h3>SPONSOR</h3>
                <div class="sponsor-box">
                    <div>LOGO</div>
                    <div>LOGO</div>
                    <div>LOGO</div>
                </div>
            </div>
        </div>
    </footer>

    <script>
        /* When the user clicks on the button,
        toggle between hiding and showing the dropdown content */
        function runMenu() {
            document.getElementById("nav-items").classList.toggle("show");
        }

        // Close the dropdown if the user clicks outside of it
        window.onclick = function (event) {
            if (!event.target.matches('.nav-button')) {

                var dropdowns = document.getElementsByClassName("nav-content");
                var i;
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }
    </script>
</body>
</html>