<title>辰室光廊 ChenSpotLight</title>

<style>
    /* Not Using */�

    /* 懸浮式文字視窗 */
    .popup_Logo {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        height: 200px;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        text-align: center;
        padding: 20px;
        z-index: 9999;
        display: none;
    }

    .logo:after + .popup_Logo {
        display: none;
    }
    /* Not Using */

    .logo {
        top: 75px;
        display: inline-block;
        width: 360px;
        height: 80px;
        background-repeat: repeat;
        background-position: center;
        align-items: center;
        position: absolute;
    }

        .logo:hover {
            display: inline-block;
            background-image: url('https://i.pinimg.com/originals/c4/35/d8/c435d8ab77377a71fbf93e45058b48d6.gif');
        }

    body {
        margin-top: -30px;
    }

    /*
    main.h2
    {
        font-size: 10px;
    }
    */
     
    main {
        background-color: black;
    }
    
    .post {
        display: block;
        text-align: center;
    }
    
</style>

<!-- Wrapper -->
<div id="wrapper" class="fade-in">

    <!-- Intro -->
    <div id="intro">
        <h1>
            Chen Spot Light<br />- 辰 室 光 廊 -
        </h1>
        <p>
            光廊（ Urben Spotlight ），象徵這座城市裡暗自發光的人們<br />
            這裡，獻給溫室中的你我<br />
            - From March 1, 2021
        </p>
        <ul class="actions">
            <li><a href="#header" class="button icon solid solo fa-arrow-down scrolly">Continue</a></li>
        </ul>

    </div>
</div>

    <!-- Header -->
    <header id="header">
        <a href="https://line.me/R/ti/p/%40811fumht" class="logo" target="_blank">Spotlight</a>
    </header>

    <!-- Nav -->

    <nav id="nav">
        <ul class="links">
            <li class="active"><a href="#">Top</a></li>
            <li><a href="Index.html#main">Home Page</a></li>
            <li><a href="Articles.html#main">Articles</a></li>
            <li><a href="About.html#main">About</a></li>
            <li><a href="#footer">Contact us</a></li>
        </ul>
        <ul class="icons">
            <li><a href="https://twitter.com" class="icon brands fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
            <li><a href="https://www.facebook.com" class="icon brands fa-facebook-f" target="_blank"><span class="label">Facebook</span></a></li>
            <li><a href="https://www.instagram.com" class="icon brands fa-instagram" target="_blank"><span class="label">Instagram</span></a></li>
            <li><a href="https://github.com" class="icon brands fa-github" target="_blank" 1><span class="label">GitHub</span></a></li>
        </ul>
    </nav>

    <!-- Main -->
    <div id="main">

        <!-- Featured Post -->
        <article class="post featured">
            <header class="major">
                <span class="date">March 1, 2021</span>
                <h2>
                    <a href="About.html">
                        Start the<br />
                        Literary Surfing
                    </a>
                </h2>
                <p>
                    
                </p>
            </header>
            <a href="About.html" class="image main"><img src="images/GettingSTART.jpg" alt="" /></a>
            <ul class="actions special">
                <li><a href="About.html" class="button large">About Us</a></li>
            </ul>
        </article>

        <!-- Posts -->
        <section class="posts">
            <article>
                <header>
                    <span class="date">March 1, 2021</span>
                    <h2>
                        <a href="ArticlesPages/Fate.html">
                            緣起，緣盡
                        </a>
                    </h2>
                </header>
                <a href="Fate.html" class="main image"><img src="images/EarlyMorning.jpg" alt="" /></a>
                <p>
                    前世不欠，今生不見
                </p>
                <ul class="actions special">
                    <li><a href="Fate.html" class="button">Full Story</a></li>
                </ul>
            </article>
            <article>
                <header>
                    <span class="date">March 1, 2021</span>
                    <h2>
                        <a href="#">
                            Title
                        </a>
                    </h2>
                </header>
                <a href="#" class="image fit"><img src="images/pic03.jpg" alt="" /></a>
                <p>Contents</p>
                <ul class="actions special">
                    <li><a href="#" class="button">Full Story</a></li>
                </ul>
            </article>
            <article>
                <header>
                    <span class="date">March 1, 2021</span>
                    <h2>
                        <a href="#">
                            Title
                        </a>
                    </h2>
                </header>
                <a href="#" class="image fit"><img src="images/pic04.jpg" alt="" /></a>
                <p>Contents</p>
                <ul class="actions special">
                    <li><a href="#" class="button">Full Story</a></li>
                </ul>
            </article>
            <article>
                <header>
                    <span class="date">March 1, 2021</span>
                    <h2>
                        <a href="#">
                            Title
                        </a>
                    </h2>
                </header>
                <a href="#" class="image fit"><img src="images/pic05.jpg" alt="" /></a>
                <p>Contents</p>
                <ul class="actions special">
                    <li><a href="#" class="button">Full Story</a></li>
                </ul>
            </article>
            <article>
                <header>
                    <span class="date">March 1, 2021</span>
                    <h2>
                        <a href="#">
                            Title
                        </a>
                    </h2>
                </header>
                <a href="#" class="image fit"><img src="images/pic06.jpg" alt="" /></a>
                <p>Contents</p>
                <ul class="actions special">
                    <li><a href="#" class="button">Full Story</a></li>
                </ul>
            </article>
            <article>
                <header>
                    <span class="date">March 1, 2021</span>
                    <h2>
                        <a href="#">
                            Title
                        </a>
                    </h2>
                </header>
                <a href="#" class="image fit"><img src="images/pic07.jpg" alt="" /></a>
                <p>Contents</p>
                <ul class="actions special">
                    <li><a href="#" class="button">Full Story</a></li>
                </ul>
            </article>
        </section>

        <!-- Footer -->
        <footer>
            <div class="pagination">
                <!--<a href="#" class="previous">Prev</a>-->
                <a href="Page1.html#nav" class="page active">1</a>
                <a href="#" class="page">2</a>
                <a href="#" class="page">3</a>
                <span class="extra">&hellip;</span>
                <a href="#" class="page">8</a>
                <a href="#" class="page">9</a>
                <a href="#" class="page">10</a>
                <a href="#" class="next">Next</a>
            </div>
        </footer>

    </div>

    <!-- Footer -->
    <footer id="footer">
        <section>
            <form method="post" action="#">
                <div class="fields">
                    <div class="field">
                        <label for="name">Name</label>
                        <input type="text" name="name" id="name" />
                    </div>
                    <div class="field">
                        <label for="email">Email</label>
                        <input type="text" name="email" id="email" />
                    </div>
                    <div class="field">
                        <label for="message">Message</label>
                        <textarea name="message" id="message" rows="3"></textarea>
                    </div>
                </div>
                <ul class="actions">
                    <li><input type="submit" value="Send Message" /></li>
                </ul>
            </form>
        </section>
        <section class="split contact">
            <section class="alt">
                <h3>Address</h3>
                <p>
                    Contect US!
                </p>
            </section>
            <section>
                <h3>Phone</h3>
                <p><a href="#">(000) 000-0000</a></p>
            </section>
            <section>
                <h3>Email</h3>
                <p><a href="#">[email protected]</a></p>
            </section>
            <section>
                <h3>Social</h3>
                <ul class="icons alt">
                    <li><a href="#" class="icon brands alt fa-twitter"><span class="label">Twitter</span></a></li>
                    <li><a href="#" class="icon brands alt fa-facebook-f"><span class="label">Facebook</span></a></li>
                    <li><a href="#" class="icon brands alt fa-instagram"><span class="label">Instagram</span></a></li>
                    <li><a href="#" class="icon brands alt fa-github"><span class="label">GitHub</span></a></li>
                </ul>
            </section>
        </section>
    </footer>

    <!-- Copyright -->
    <div id="copyright">
        <ul><li>&copy; 辰室光廊</li><li>Design: <a href="About.html">ChenSpotLight</a></li></ul>
    </div>

</div>

<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>