@extends('layouts.app')

@section('content')
    <!-- center column -->
    <div class="col-2">
        <div class="content content-last">
            <div class="content-bg">

                <div class="content-bg-bottom">
                    <h2>Metin2 - Galerie</h2>
                    <div class="gallery-inner-content">
                        <div class="gallerybox">
                            <h4>Screenshots</h4>
                            <div id="screenshots">
                                <a class="first" title="Captura 1" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot01.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb01.jpg') }}" alt="Captura 1"/></a>
                                <a title="Captura 2" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot02.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb02.jpg') }}" alt="Captura 2"/></a>
                                <a title="Captura 3" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot03.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb03.jpg') }}" alt="Captura 3"/></a>
                                <a title="Captura 4" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot04.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb04.jpg') }}" alt="Captura 4"/></a>
                                <a title="Captura 5" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot05.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb05.jpg') }}" alt="Captura 5"/></a>
                                <a title="Captura 6" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot06.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb06.jpg') }}" alt="Captura 6"/></a>
                                <a title="Captura 7" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot07.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb07.jpg') }}" alt="Captura 7"/></a>
                                <a title="Captura 8" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot08.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb08.jpg') }}" alt="Captura 8"/></a>
                                <a title="Captura 9" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot09.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb09.jpg') }}" alt="Captura 9"/></a>
                                <a title="Captura 10" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot10.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb10.jpg') }}" alt="Captura 10"/></a>
                                <a title="Captura 11" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot11.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb11.jpg') }}" alt="Captura 11"/></a>
                                <a title="Captura 12" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot12.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb12.jpg') }}" alt="Captura 12"/></a>
                                <a title="" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot13.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb13.jpg') }}" alt=""/></a>
                                <a title="" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot14.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb14.jpg') }}" alt=""/></a>
                                <a title="" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot15.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb15.jpg') }}" alt=""/></a>
                                <a title="Screenshots" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot16.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb16.jpg') }}" alt="Screenshots"/></a>
                                <a title="Screenshots" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot17.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb17.jpg') }}" alt="Screenshots"/></a>
                                <a title="Screenshots" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot18.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb18.jpg') }}" alt="Screenshots"/></a>
                                <a title="Screenshots" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot19.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb19.jpg') }}" alt="Screenshots"/></a>
                                <a title="Screenshots" href="{{ asset('img/screenshots/mmorpg-fantasy-metin2-screenshot20.jpg') }}">
                                    <img height="75" width="100" src="{{ asset('img/screenshots/thumbs/mmorpg-fantasy-metin2-thumb20.jpg') }}" alt="Screenshots"/></a>
                                <br class="clearfloat" />
                            </div>
                            <br class="clearfloat" />
                        </div>
                        <div class="gallerybox gallerybox-middle">

                            <h4>Tapet</h4>
                            <div id="wallpapers">
                                <a class="first" title="Tapet "href="{{ asset('img/wallpapers/1.jpg') }}" target="_blank"><img height="75" width="100" src="{{ asset('img/wallpapers/wallpaper-thumb-1.jpg') }}" alt="Tapet" /></a>
                                <a title="Tapet"href="{{ asset('img/wallpapers/2.jpg') }}" target="_blank"><img height="75" width="100" src="{{ asset('img/wallpapers/wallpaper-thumb-2.jpg') }}" alt="Tapet" /></a>
                                <a title="Tapet" href="{{ asset('img/wallpapers/3.jpg') }}" target="_blank"><img height="75" width="100" src="{{ asset('img/wallpapers/wallpaper-thumb-3.jpg') }}" alt="Tapet" /></a>
                                <a title="Tapet "href="{{ asset('img/wallpapers/4.jpg') }}" target="_blank"><img height="75" width="100" src="{{ asset('img/wallpapers/wallpaper-thumb-4.jpg') }}" alt="Tapet" /></a>
                            </div>
                            <br class="clearfloat" />

                            <ul class="wallpaper-links">
                                <li><a href="{{ asset('img/wallpapers/wallpaper_1_1024x768.jpg') }}" target="_blank">1024x768</a></li>
                                <li><a href="{{ asset('img/wallpapers/wallpaper_1_1280x960.jpg') }}" target="_blank">1280x960</a></li>
                                <li><a href="{{ asset('img/wallpapers/wallpaper_1_1600x1200.jpg') }}" target="_blank">1600x1200</a></li>
                            </ul>
                            <ul class="wallpaper-links">
                                <li><a href="{{ asset('img/wallpapers/wallpaper_2_1024x768.jpg') }}" target="_blank">1024x768</a></li>
                                <li><a href="{{ asset('img/wallpapers/wallpaper_2_1280x960.jpg') }}" target="_blank">1280x960</a></li>
                                <li><a href="{{ asset('img/wallpapers/wallpaper_2_1600x1200.jpg') }}" target="_blank">1600x1200</a></li>
                            </ul>
                            <ul class="wallpaper-links">
                                <li><a href="{{ asset('img/wallpapers/wallpaper_3_1024x768.jpg') }}" target="_blank">1024x768</a></li>
                                <li><a href="{{ asset('img/wallpapers/wallpaper_3_1280x960.jpg') }}" target="_blank">1280x960</a></li>
                                <li><a href="{{ asset('img/wallpapers/wallpaper_3_1600x1200.jpg') }}" target="_blank">1600x1200</a></li>

                            </ul>
                            <ul class="wallpaper-links">
                                <li><a href="{{ asset('img/wallpapers/wallpaper_4_1024x768.jpg') }}" target="_blank">1024x768</a></li>
                                <li><a href="{{ asset('img/wallpapers/wallpaper_4_1280x960.jpg') }}" target="_blank">1280x960</a></li>
                                <li><a href="{{ asset('img/wallpapers/wallpaper_4_1600x1200.jpg') }}" target="_blank">1600x1200</a></li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="shadow">&nbsp;</div>

    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#screenshots a, #wallpapers a").overlay({
                target: '#gallery',
                expose: '#000'
            }).gallery({
                next:	'.forward',
                prev: 	'.back',
                speed: 800
            });
        });
    </script>
@endsection