gridLayout/index.html at main · JaySun0/gridLayout · 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
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en,ru">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="author" content="Daniil Kochkin">
        <meta name="copyright" content="https://tpverstak.ru/">
        <meta name="description" content="Вёрстка веб-страницы при помощи CSS Grid">
        <meta name="keywords" content="css grid, css грид, грид, grid, css сетка, grid макет, грид макет">
        <title>CSS GRID сайт-пример</title>
        <meta property="og:type" content="website">
        <meta property="og:locale" content="ru_RU">
        <meta property="og:url" content="https://jaysuno0.github.io/gridLayout/">
        <meta property="og:title" content="Пример сайта на CSS GRID">
        <meta property="og:image" content="https://st4.cannypic.com/thumbs/40/402613_632_canny_pic.jpg">
        <meta property="og:description" content="Пример вёрстки веб-страницы с использованием CSS GRID">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/queries.css">
    </head>
    <body>
        <header id="header">
            <nav>
                <ul class="flex-horisontal">
                    <li><a href="#about">ABOUT US</a></li>
                    <li><a href="#work">WORK</a></li>
                    <li class="logo"><a href="https://jaysuno0.github.io/gridLayout/"><img src="img/logo/logo-main.png" alt="company logo"></a></li>
                    <li><a href="#shop">SHOP</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section id="about" class="flex-vertical">
                <img class="icon" src="img/about/about-icon.png" alt="bike chain icon">
                <h2>A NEW GENERATION OF VINTAGE BIKE</h2>
                <p  class="text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim doloremque fugit aut, commodi eos, dolorum ratione qui blanditiis odit exercitationem explicabo voluptatibus inventore aspernatur hic vitae. Neque id quasi aut?
                    Velit pariatur cum tempora molestias quisquam exercitationem earum ut. Dolor magni placeat exercitationem perspiciatis deserunt porro tempora eius unde fuga enim, error voluptatem? Dolores, rem recusandae. Fuga perferendis eum numquam.
                    Eaque, laudantium non magnam qui maiores similique illum optio harum. Sequi perspiciatis accusamus repellendus, quis quibusdam fugit deleniti eum excepturi repellat architecto in voluptate velit molestiae quos voluptates labore est.
                </p>
            </section>
            <section id="work">
                <div class="work-aspect">
                    <img class="horisontal-img" src="img/work/bike01/bike01-1.png" alt="bike pic">
                    <div class="text-container flex-vertical">
                        <img class="icon" src="img/work/bike01/bike01-icon.png" alt="bike frame icon">
                        <h2>VINTAGE OLIVA</h2>
                        <p class="text">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Id enim eligendi sequi aperiam hic, labore eveniet reprehenderit nihil architecto. Aliquam ab non officiis.
                        </p>
                        <hr>
                        <div class="square"></div>
                        <img src="img/work/bike01/bike01-aspect.png">
                    </div>
                </div>

                <div class="work-aspect">
                    <div class="text-container flex-vertical">
                        <img class="icon" src="img/work/bike02/bike02-icon.png" alt="bike pedals icon">
                        <h2>LA BORIOSA</h2>
                        <p class="text">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eos ea corrupti tempora ad neque delectus, fuga, odio earum et quae error architecto tempore aspernatur quisquam sit in, deserunt itaque?
                        </p>
                        <hr>
                        <div class="square"></div>
                        <img src="img/work/bike02/bike02-aspect.png">
                    </div>
                    <img class="horisontal-img" src="img/work/bike02/bike02-1.png" alt="bike pic">
                </div>

                <div class="work-aspect">
                    <img class="vertical-img" src="img/work/bike03/bike03-1.png" alt="bike pic">
                    <div class="text-container flex-vertical">
                        <img class="icon" src="img/work/bike03/bike03-icon.png" alt="bike fork icon">
                        <h2>RETRO BIKE - M.HULOT</h2>
                        <p class="text">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, officia? Nesciunt recusandae placeat tenetur sed sit provident.
                        </p>
                        <hr>
                        <div class="square"></div>
                        <img src="img/work/bike03/bike03-aspect.png">
                    </div>
                    <img class="vertical-img" src="img/work/bike03/bike03-2.png" alt="bike pic">
                </div>
            </section>
        </main>
        <section id="twitter" class="flex-vertical">
            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><title>Logo Twitter</title><path d='M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z'/></svg>
            <p class="title">
                Twitter post <span class="time text">/ 35 min</span>
            </p>
            <p class="text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima ratione sint rerum. Illo nulla in iste hic officiis corrupti velit aliquam impedit eligendi nesciunt commodi ratione.
            </p>
            <div class="counter-points-wrapper flex-horisontal">
                <div class="counter-point active"></div>
                <div class="counter-point"></div>
                <div class="counter-point"></div
            </div>
        </section>
        <section id="shop">
            <div class="gallery">
                <img class="small-img s1" src="img/shop/shop-small-1.png" alt="bike photo">
                <img class="small-img s2" src="img/shop/shop-small-2.png" alt="bike photo">
                <img class="vertical-img v1" src="img/shop/shop-vertical-1.png" alt="bike photo">
                <img class="vertical-img v2" src="img/shop/shop-vertical-2.png" alt="bike photo">
                <img class="horisontal-img h1" src="img/shop/shop-horisontal-2.png" alt="bike photo">
                <img class="horisontal-img h2" src="img/shop/shop-horisontal-1.png" alt="bike photo">
                <img class="small-img s3" src="img/shop/shop-small-3.png" alt="bike photo">
                <img class="small-img s4" src="img/shop/shop-small-4.png" alt="bike photo">
            </div>
            <div class="shop-btn-wrapper">
                <a class="shop-btn" href="https://vk.com/id58913402" target="_blank">DISCOVER THE SHOP</a>
            </div>
        </section>
        <section id="contact" class="flex-vertical">
            <img src="img/logo/logo-main.png" alt="company logo">
            <p class="text">Stay on the saddle!</p>
            <form action="#" method="GET" class="flex-horisontal">
                <input name="user-email" type="email" minlength="5" maxlength="100" placeholder="enter your email" reqiured>
                <button type="submit">GO</button>
            </form>
        </section>
        <footer>
            <div class="info text">
                <p><b>AOD New Yourk</b></p>
                <p>2250 Lexington Avenue</p>
                <p>New Yourk, NY10035 - info@domain.com</p>
            </div>
            <div class="socials-wrapper">
                <a href="https://twitter.com/" target="_blank">
                    <svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Logo Twitter</title><path d='M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z'/></svg>
                </a>
                <a href="https://www.facebook.com/" target="_blank">
                    <svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Logo Facebook</title><path d='M480 257.35c0-123.7-100.3-224-224-224s-224 100.3-224 224c0 111.8 81.9 204.47 189 221.29V322.12h-56.89v-64.77H221V208c0-56.13 33.45-87.16 84.61-87.16 24.51 0 50.15 4.38 50.15 4.38v55.13H327.5c-27.81 0-36.51 17.26-36.51 35v42h62.12l-9.92 64.77H291v156.54c107.1-16.81 189-109.48 189-221.31z' fill-rule='evenodd'/></svg></a>
                <a href="https://www.pinterest.ru/" target="_blank">
                    <svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Logo Pinterest</title><path d='M256.05 32c-123.7 0-224 100.3-224 224 0 91.7 55.2 170.5 134.1 205.2-.6-15.6-.1-34.4 3.9-51.4 4.3-18.2 28.8-122.1 28.8-122.1s-7.2-14.3-7.2-35.4c0-33.2 19.2-58 43.2-58 20.4 0 30.2 15.3 30.2 33.6 0 20.5-13.1 51.1-19.8 79.5-5.6 23.8 11.9 43.1 35.4 43.1 42.4 0 71-54.5 71-119.1 0-49.1-33.1-85.8-93.2-85.8-67.9 0-110.3 50.7-110.3 107.3 0 19.5 5.8 33.3 14.8 43.9 4.1 4.9 4.7 6.9 3.2 12.5-1.1 4.1-3.5 14-4.6 18-1.5 5.7-6.1 7.7-11.2 5.6-31.3-12.8-45.9-47-45.9-85.6 0-63.6 53.7-139.9 160.1-139.9 85.5 0 141.8 61.9 141.8 128.3 0 87.9-48.9 153.5-120.9 153.5-24.2 0-46.9-13.1-54.7-27.9 0 0-13 51.6-15.8 61.6-4.7 17.3-14 34.5-22.5 48a225.13 225.13 0 0063.5 9.2c123.7 0 224-100.3 224-224S379.75 32 256.05 32z'/></svg>
                </a>
            </div>
            <a class="btn-to-top text" href="#header">to top</a>
        </footer>
    </body>
</html>