编程知识 cdmana.com

HTML static webpage assignment - Basketball webpage

HTML Final assignment - Basketball website (HTML+CSS+Bootstarp)

Partial source code


<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title> contact </title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/bootstrap-select.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="js/modernizr-2.8.3.min.js"></script>
</head>

<body>
    <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

    <!-- Add your site or application content here -->

    <header>
        <div class="top-bar gray-3d-bg">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <div class="top-contact-info">
                            <span class="work-sans fz-13 lh-50"><img src="img/phone.png" alt=""> + 124 45 78 678 </span>
                            <span class="work-sans fz-13 lh-50"><img src="img/mail.png" alt=""> 123456@mail.com</span>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12 social-login">
                        <div class="top-social display-ib">
                            <a href="#"><i class="fa fa-facebook"></i></a>
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-google-plus"></i></a>
                            <a href="#"><i class="fa fa-linkedin"></i></a>
                        </div>
                        <div class="top-login display-ib lh-50">
                            <img src="img/login.png" alt="">
                            <span class="white">
                                    <a href="#"> Sign in </a> /
                                    <a href="#">  register </a>
                                </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-nav-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="man-nav">
                            <nav class="navbar navbar-default no-margin">
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                       
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                        </button>
                                </div>
                                <div id="navbar" class="navbar-collapse collapse no-margin no-padding">
                                    <div class="col-md-7 col-sm-7">
                                        <ul class="nav navbar-nav">
                                            <li class="active"><a href="index.html"> home page </a></li>
                                            <li><a href="about.html"> About </a></li>
                                            <li><a class="" href="gallery.html">NBA </a></li>
                                            <li><a class="" href="match-fixtures.html"> Game information </a></li>
                                        </ul>
                                    </div>
                                    <div class="col-md-5 col-sm-5">
                                        <ul class="nav navbar-nav pl-50">
                                            <li class="dropdown">
                                                <a href="blog.html" class="dropdown-toggle"> players <span class="caret"></span></a>

                                            </li>
                                            <li class="dropdown">
                                                <a href="404.html" class="dropdown-toggle"> Team data   <span class="caret"></span></a>

                                            </li>
                                            <li class="dropdown">
                                                <a href="shop.html" class="dropdown-toggle"> The surrounding Mall   <span class="caret"></span></a>

                                            </li>
                                            <li><a href="contact.html"> Contact us </a></li>
                                        </ul>
                                    </div>
                                </div>
                                <!--/.nav-collapse -->
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="page-title contact-title">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 text-center p-static">
                    <div class="page-heading">
                        <h2 class="white text-uppercase fz-36 ls-2"> Keep in contact </h2>
                        <h6 class="work-sans fz-15 white mt-20"> home page  <span class="mlr-10"> / </span>  contact  </h6>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <section class="mt-100 pb-150 contact-section">
        <div class="container">
            <div class="row mt-20">
                <div class="col-md-8 col-sm-6 col-xs-6 mt-30">
                    <h1 class="text-uppercase ls-3 fz-38"> <span class="yellow">  Leaving a message. </span></h1>
                    <form action="#" class="contact mt-30">
                        <div class="row">
                            <div class="col-md-6 mt-20"><input type="text" class="form-control" placeholder=" full name  *" name="contact-name" id="input_name" required=""></div>
                            <div class="col-md-6 mt-20"><input type="email" class="form-control" placeholder="  mailbox  *" name="contact-email" id="input_email" required=""></div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mt-20"><input type="text" class="form-control" placeholder=" Telephone " name="contact-phone" id="input_phone"></div>
                            <div class="col-md-6 mt-20"><input type="text" class="form-control" placeholder=" Discipline " name="contact-subject" id="input_subject"></div>
                        </div>
                        <textarea rows="10" class="form-control mt-20" placeholder=" Information " name="contact-message" id="input_message"></textarea>
                        <input type="submit" value=" send out " id="btn_submit" class="contact-btn btn-yellow mt-35 text-uppercase" />
                        <div class="alert-msg" id="alert-msg"></div>
                    </form>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-6 mt-30">
                    <div class="contact-cat category">
                        <h4 class="work-sans fz-20 text-semi-bold text-uppercase gray-de text-center bb"> The upcoming game </h4>
                        <div class="category-inner mt-25">
                            <div class="upcomig-match clearfix">
                                <img src="img/um-1.jpg" alt="" class="pull-left" style="width: 90px;height: 85px;">
                                <div class="pull-left">
                                    <h6 class="mb-10 lh-26"><a href="#" class="work-sans fz-13 d-black">     Basketball builds a bridge of friendship !
                                       </a></h6>
                                    <span class="work-sans text-medium fz-12 yellow text-uppercase"> 2015 year 12 month 15 Japan </span>
                                </div>
                            </div>
                            <div class="upcomig-match mt-25 clearfix">
                                <img src="img/um-2.jpg" alt="" class="pull-left" style="width: 90px;height: 85px;">
                                <div class="pull-left">
                                    <h6 class="mb-10 lh-26"><a href="#" class="work-sans fz-13 d-black">     Basketball builds a bridge of friendship !
                                       </a></h6>
                                    <span class="work-sans text-medium fz-12 yellow text-uppercase"> 2016 year 1 month 20 Japan </span>
                                </div>
                            </div>
                            <div class="upcomig-match mt-25 clearfix">
                                <img src="img/um-3.jpg" alt="" class="pull-left" style="width: 90px;height: 85px;">
                                <div class="pull-left">
                                    <h6 class="mb-10 lh-26"><a href="#" class="work-sans fz-13 d-black">     Basketball builds a bridge of friendship !
                                      </a></h6>
                                    <span class="work-sans text-medium fz-12 yellow text-uppercase">  2016 year 2 month 26 Japan </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="upper-footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <h5 class="raleway fz-14 gray-ccc text-bold fbb text-uppercase">About Us</h5>
                        <p class="mt-45 gray-999 fz-13"> China Basketball Federation ( Beijing ) Sports Limited is 2016 year 10 A large-scale competition operation and management company registered in May , And has been authorized by China Basketball Association for a long time , To China Men's basketball professional league (CBA) Compete on your own 、 Business operation .CBA The league is the highest level men's basketball professional league in China , after 20 After years of development , At present, it has become a leading domestic sports brand with international influence . China Basketball Federation ( Beijing ) Sports Limited is 2016 year 10 A large-scale competition operation and management company registered in May , And has been authorized by China Basketball Association for a long time , To China Men's basketball professional league (CBA) Compete on your own 、 Business operation .CBA The league is the highest level men's basketball professional league in China , after 20 After years of development , At present, it has become a leading domestic sports brand with international influence .
                        </p>
                        <div class="f-social mt-35">
                            <ul class="list-inline">
                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-1 col-sm-2">
                        <h5 class="raleway fz-14 gray-ccc text-bold fbb text-uppercase"> link </h5>
                        <ul class="mt-45 iist-unstyled links">
                            <li><a href="#"> home page </a></li>
                            <li><a href="#"> About us </a></li>
                            <li><a href="#"> service </a></li>
                            <li><a href="#"> investment portfolio </a></li>
                            <li><a href="#"> Photo </a></li>
                            <li><a href="#">  contact </a></li>
                        </ul>
                    </div>
                    <div class="col-md-3 col-sm-4">
                        <h5 class="raleway fz-14 gray-ccc text-bold fbb text-uppercase"> Welcome to your attention CBA League official social media </h5>
                        <div class="f-contact-info clearfix mt-45">
                            <img src="img/address.png" alt="" class="pull-left">
                            <span class="work-sans text-medium fz-13 gray-999 lh-24 pull-left">cba2.0@cbaleague.com</span>
                        </div>
                        <div class="f-contact-info clearfix mt-25">
                            <img src="img/phone.png" alt="" class="pull-left">
                            <span class="work-sans text-medium fz-13 gray-999 lh-24 pull-left">cbabd@cbaleague.com</span>
                        </div>
                        <div class="f-contact-info clearfix mt-25">
                            <img src="img/envelope.png" alt="" class="pull-left">
                            <span class="work-sans text-medium fz-13 gray-999 lh-24 pull-left">digital@cbaleague.com</span>
                        </div>
                        <div class="f-contact-info clearfix mt-25">
                            <img src="img/fax.png" alt="" class="pull-left">
                            <span class="work-sans text-medium fz-13 gray-999 lh-24 pull-left">Dream@cbaleague.com</span>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <h5 class="raleway fz-14 gray-ccc text-bold fbb text-uppercase"> For more information </h5>
                        <div class="instagram-links mt-45">
                            <a href="#"><img src="img/f1.jpg" alt=""></a>
                            <a href="#"><img src="img/f2.jpg" alt=""></a>
                            <a href="#"><img src="img/f3.jpg" alt=""></a>
                            <a href="#"><img src="img/f4.jpg" alt=""></a>
                            <a href="#"><img src="img/f5.jpg" alt=""></a>
                            <a href="#"><img src="img/f6.jpg" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lower-footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-3 col-sm-6">
                                <h4 class="white text-uppercase lh-90"> Today,  <span class="yellow"> event </span></h4>
                            </div>
                            <div class="col-sm-6 last-match">
                                <span class="work-sans fz-14 text-bold white text-uppercase lh-90"><img src="img/f-team1.png" alt=""> AUTE</span>
                                <h4 class="lh-90 yellow text-bold display-ib">1:2</h4>
                                <span class="work-sans fz-14 text-bold white text-uppercase lh-90"><img src="img/f-team2.png" alt=""> Dolor</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h4 class="work-sans fz-16 text-medium text-uppercase white lh-90 display-ib"> Join in  <span class="yellow">  We </span></h4>
                        <div class="input-group">
                            <input type="email" class="form-control" placeholder="Email">
                            <div class="input-group-addon"><a class="work-sans text-semi-bold fz-11 white text-uppercase" href="#"> send out </a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copy-rights">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <p class="raleway text-semi-bold fz-12 gray-ccc ls-1">Copyrights&copy; 2020  Basketball information website </p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.js"></script>
    <script src="js/jquery.countdown.min.js"></script>
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/isotope.pkgd.min.js"></script>
    <script src="js/bootstrap-select.min.js"></script>
    <!-- Library - Google Map API -->
    <script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCn3Z6i1AYolP3Y2SGis5qhbhRwmxxo1wU"></script>
    <script src="js/main.js"></script>

</body>

</html>

Some of the screenshots are 9 Pages  

 

 

 

 

 

版权声明
本文为[osc_ 9na1lmr9]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224103308494n.html

Scroll to Top