gifOS-Project/index.html at master · Asj-code/gifOS-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Styles Sheet Link -->
    <link rel="stylesheet" href="styles/styles.css">
    <!-- Font Awesome Link -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" integrity="sha384-OLYO0LymqQ+uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW+q" crossorigin="anonymous">
    <title>gifOS</title>
</head>

<body>
    <header class="header">
        <a href="#"><img class="navbar-logo-desktop" src="./assets/logo-desktop.svg" id="logo-desktop" alt="GifOS page logo"></a>
        <a href="#"><img class="navbar-logo-mobile" src="./assets/logo-mobile.svg" id="logo-mobile" alt="GifOS page logo"></a>
        <nav class="menu">
            <input class="button" type="checkbox" name="checkbox-menu">
            <span class="bars"></span>
            <span class="bars"></span>
            <span class="bars"></span>
            <ul>
                <li><a href="#" class="menu-item dark-mode text" id="change-mode">Modo Nocturno</a></li>
                <li><a href="./favorites.html" class="menu-item text">Favoritos</a></li>
                <li><a href="./my_gifos.html" class="menu-item text">Mis GIFOS</a></li>
                <a href="./create_gifo.html"><img id="create-gif" class="create-gifo-btn" src="./assets/create-gifo-btn.svg" alt="create gifo button"></a>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home">
            <h1 class="text" >Inspírate, busca, guarda y crea los mejores <span>GIFOS</span></h1>

           <div class="main-image">
                <img src="assets/home-image.svg" alt="group of people hugging each other">
            </div>

            <div id="input-ctn">
                <input type="text" id="search" placeholder="Busca GIFOS y más...">

                <ul id="box-search">
                    <li><a href="#" id="link-gif1"><img src="assets/search-icon.svg"></a></li>
                    <li><a href="#" id="link-gif2"><img src="assets/search-icon.svg"></a></li>
                    <li><a href="#" id="link-gif3"><img src="assets/search-icon.svg"></a></li>
                    <li><a href="#" id="link-gif4"><img src="assets/search-icon.svg"></a></li>
                    <li><a href="#" id="link-gif5"><img src="assets/search-icon.svg"></a></li>
                </ul>
                <div id="search-result"><img src="assets/search-icon.svg" id="search-icon" alt="search icon to see gifos"></div>
                <div id="search-result"><img src="assets/close-search-btn.svg" id="close-search-btn" alt="search icon to see gifos"></div>
            </div>

            <div id="gif-name"></div>


        <section id="gif-section">
            <template id="gif-template">
                <div id="gifs">
                    <img id="search-gif">
                    <h3 id="gif-title"></h3>
                    <p id="gif-user"></p>
                </div>
            </template>
        </section>

        <div class="fav-icons" id="ver-mas-gifos">
            <button class="fav-btn"  id="search-more-gifs"><img src="assets/ver-mas-btn.svg"alt="see more button"></button>
        </div>


        <div class="main-text">
            <p class="text" >Trending:</p>
            <p class="text" >Reactions, Entertainment, Sports, Stickers, Artists</p>
        </div>
        </section>

        <section id="trending">

            <div class="trending-text">
                <h2 class="text">Trending GIFOS</h2>
                <p class="text">Mirá los últimos GIFOS de nuestra comunidad.</p>
            </div>

            <div class="main-trendign-container">
                <img class="slider" id="left" src="/assets/slider-left-btn.svg" alt="slide gifos to the left button">

            <div id="main-gifs-container">
                <div></div>
                <div></div>
                <div></div>


                <!-- <div id="ventana-modal">
                    <div class="modal-container">
                        <div class="modal-img">
                          <img src="assets/favorite-icon.svg" alt="">
                          <img src="assets/download-icon.svg" alt="">
                          <img src="assets/max-icon.svg" alt="">
                        </div>
                        <div class="modal-text">
                            <p class="modal-content">User</p>
                            <h3 class="modal-content">Title</h3>
                        </div>
                    </div>
                </div> -->
            <!-- Imágenes creadas con javascript -->
            </div>
                <img class="slider" id="right" src="/assets/slider-right-btn.svg" alt="slide gifos to the right button">
            </div>
        </section>


        <!-- <section id="ventana-modal">

        </section>  -->
    </main>

    <footer>
        <ul>
            <li><P class="share text">Compartir en:</P></li>
            <li><a href="https://www.facebook.com/" target="_blank"><img src="assets/facebook-icon.svg" alt="facebook icon"></a></li>
            <li><a href="https://www.twitter.com/" target="_blank"><img src="assets/twitter-icon.svg" alt="twitter icon"></a></li>
            <li><a href="https://www.instagram.com/" target="_blank"><img src="assets/instagram-icon.svg" alt="instagram icon"></a></li>
            <li><p class="copyright text">©️GIFOS 2020 All Rights Reserved.</p></li>
        </ul>

    </footer>

    <script src="scripts/trending_carrousel.js" type="module"></script>
    <script src="scripts/dark_mode.js"></script>
    <script src="scripts/slider-btns.js"></script>
    <script src="scripts/search_bar.js"></script>


</body>
</html>