@extends('template.template')

@section('title', '經濟部產業發展署')

@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/home.css') }}">
@stop

@section('content') 
    <section class='carousel-block'>
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://images.unsplash.com/photo-1532458198880-add09ce3b2f5">
                </div>
                <div class="carousel-item">
                    <img src="https://images.unsplash.com/photo-1590692464381-38f566ceaf7a">
                </div>
                <div class="carousel-item">
                    <img src="https://images.unsplash.com/photo-1509304638917-0423760634a9">
                </div>
            </div>

            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <div class="arrow"></div>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <div class="arrow arrow-right"></div>
            </a>
            
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
        </div>
    </section>


    <div class='container-fluid'>
        <section class='news'>
            <div class='header'>
                <div front style="background: rgb(255, 92, 1)"></div>
                <h2>最新消息</h2>
                <div front end style="background: rgb(255, 92, 1)"></div>
            </div>

            <div class='news-list'>
                <div class='news-item'>
                    <p class='title'>
                        <i class="fa fa-greater-than"></i>
                        【PS-STORE 現正特價中，只到 1/8】
                    </p>
                    <div class='content' style="text-align:left;">
                        若要在PS5上遊玩這款遊戲，您的主機可能必須安裝最新的系統軟件。體驗《天命2》的科幻史詩大作，以及其所有資料片。就在《天命2》：傳奇版。創建你的守護者，並在這個持續進化的宇宙中，享受一場如電影般的劇情故事。
                        <a href="#">下載遊戲</a>
                    </div>          
                    <div class='horizon' style="background: linear-gradient( rgb(232,213,198) 0 67% ,  rgb(169,165,162) 0 );"></div>
                </div>
                <div class='news-item'>
                    <p class='title'>
                        <i class="fa fa-greater-than"></i>
                        【PS-STORE 現正特價中，只到 1/8】
                    </p>
                    <div class='content' style="text-align:left;">
                        若要在PS5上遊玩這款遊戲，您的主機可能必須安裝最新的系統軟件。體驗《天命2》的科幻史詩大作，以及其所有資料片。就在《天命2》：傳奇版。創建你的守護者，並在這個持續進化的宇宙中，享受一場如電影般的劇情故事。
                        <a href="#">下載遊戲</a>
                    </div>          
                    <div class='horizon' style="background: linear-gradient( rgb(232,213,198) 0 67% ,  rgb(169,165,162) 0 );"></div>
                </div>
                <div class='news-item'>
                    <p class='title'>
                        <i class="fa fa-greater-than"></i>
                        【PS-STORE 現正特價中，只到 1/8】
                    </p>
                    <div class='content' style="text-align:left;">
                        若要在PS5上遊玩這款遊戲，您的主機可能必須安裝最新的系統軟件。體驗《天命2》的科幻史詩大作，以及其所有資料片。就在《天命2》：傳奇版。創建你的守護者，並在這個持續進化的宇宙中，享受一場如電影般的劇情故事。
                        <a href="#">下載遊戲</a>
                    </div>          
                    <div class='horizon' style="background: linear-gradient( rgb(232,213,198) 0 67% ,  rgb(169,165,162) 0 );"></div>
                </div>
            </div>
            
            <div class='align-right'><button class='more'>more <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button></div>
        </section>

        <section class='activities'>
            <div class='header'>
                <div front style="background: rgb(29, 126, 59);"></div>
                <h2>活動訊息</h2>
                <div front end style="background: rgb(29, 126, 59);"></div>
            </div>
            
            <div class='section-list'>
                <div class="activities-item">
                    <div class='activities-img'><img src=""></div>
                    <p class='content'>
                        【標題1】<br> 這是例文，將以置中文字方式顯示。與標題無特別拉寬間距。請注意字數限制。
                    </p>
                </div>
                <div class="activities-item">
                    <div class='activities-img'><img src=""></div>
                    <p class='content'>
                        【標題1】<br> 這是例文，將以置中文字方式顯示。與標題無特別拉寬間距。請注意字數限制。
                    </p>
                </div>
                <div class="activities-item">
                    <div class='activities-img'><img src=""></div>
                    <p class='content'>
                        【標題1】<br> 這是例文，將以置中文字方式顯示。與標題無特別拉寬間距。請注意字數限制。
                    </p>
                </div>
            </div>
            <div class='horizon' style="background: linear-gradient( rgb(197, 223, 194) 0 67% ,  rgb(169,165,162) 0 );"></div>
            <div class='align-right'><button class='more'>more <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button></div>
        </section>

        <section class='downloads'>
            <div class='header'>
                <div front style="background: rgb(38, 88, 159);"></div>
                <h2>規章管理制度</h2>
                <div front end style="background: rgb(38, 88, 159);"></div>
            </div>
            
            <div class='section-list'>
                <div class='item'>
                    <i class="far fa-file-alt"></i>
                    <a href="">第一份檔案 <br> (點我下載)</a>
                </div>
                <div class='item'>
                    <i class="far fa-file-alt"></i>
                    <a href="">第一份檔案 <br> (點我下載)</a>
                </div>
                <div class='item'>
                    <i class="far fa-file-alt"></i>
                    <a href="">第一份檔案 <br> (點我下載)</a>
                </div>
                <div class='item'>
                    <i class="far fa-file-alt"></i>
                    <a href="">第一份檔案 <br> (點我下載)</a>
                </div>
                <div class='item'>
                    <i class="far fa-file-alt"></i>
                    <a href="">第一份檔案 <br> (點我下載)</a>
                </div>
            </div>
            <div class='horizon' style="background: linear-gradient( rgb(197, 210, 229) 0 67% ,  rgb(169,165,162) 0 );"></div>
            <div class='align-right'><button class='more'>more <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button></div>
        </section>

        <section class='section-list'>
            <div class='medal-item'><img src=""></div>
            <div class='medal-item'><img src=""></div>
            <div class='medal-item'><img src=""></div>
            <div class='medal-item'><img src=""></div>
            <div class='medal-item'><img src=""></div>
            <div class='medal-item'><img src=""></div>
            <div class='medal-item'><img src=""></div>
            <div class='medal-item'><img src=""></div>
            <div class='medal-item'><img src=""></div>
            <div class='medal-item'><img src=""></div>
            <div class='medal-item'><img src=""></div>
            <div class='medal-item'><img src=""></div>
        </section>
    </div>
@stop