WebDev-Templates/grid-elements.html at main · Rafa1Devlp/WebDev-Templates · 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
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebDev Templates</title>
    <meta name="author" content="RafaelWebDev - Github">
    <style>
         :root {
            /* Transition Variables */
            --transition-time: 500ms;
            /* Color Variables */
            --primary-color: #0e0e0e;
            --secondary-color: #006800;
            --text--color: #efefef;
        }

        * {
            background-color: var(--primary-color);
            color: var(--text--color);
        }

        main {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
            justify-content: center;
            padding: 1em;
            margin: 1em;
        }

        main a {
            padding: 1em;
            border: 1px solid var(--text--color);
            text-decoration: none;
            transition: all var(--transition-time);
        }

        main a:hover {
            scale: 1.1;
            border-color: var(--secondary-color);
            transition: all var(--transition-time);
        }
    </style>
</head>
<!--
    You can substitute the <div> whit <img>, <video>, etc tags, and change the global variables to your choosing.
    Its a simple yet nice design that can be emplemented in:
        - Online Stores
        - Media Hosting Websites
        - In Websites where the User has to choose between multiple Options
    Or anywhere you want!
-->

<body>
    <main>
        <a href="">
            <div></div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste iusto deserunt pariatur magni repellat esse perspiciatis, perferendis officiis. Cupiditate inventore quibusdam necessitatibus voluptatibus unde rem voluptatem dignissimos nobis. Totam, omnis.
        </a>
        <a href="">
            <div></div>
            Quod inventore ratione similique corrupti consequatur iusto, sapiente saepe vero, est, mollitia veniam. Quas inventore porro animi, autem, mollitia eligendi deleniti voluptates ut molestias at rem! Tempora veritatis maxime qui.
        </a>
        <a href="">
            <div></div>
            Eaque quos quam rerum magni aut officia consequatur! Nisi sunt eum rerum asperiores voluptatum unde excepturi delectus neque autem ipsam, iusto ipsa ut porro adipisci reprehenderit dolores laboriosam in quia.
        </a>
        <a href="">
            <div></div>
            Repellendus dolorem labore soluta voluptates odit magnam inventore necessitatibus pariatur adipisci vitae fugiat, debitis eaque nobis voluptatem ipsam suscipit modi architecto quia deserunt, natus magni voluptate neque nisi! Voluptatibus, nisi?
        </a>
        <a href="">
            <div></div>
            Fuga aliquam architecto perferendis sed incidunt quisquam mollitia. Ea corporis cupiditate eveniet at maiores minima vero, ex asperiores quidem, iste vel nisi ut praesentium hic obcaecati nemo. Accusantium, voluptates nihil?
        </a>
        <a href="">
            <div></div>
            Omnis veritatis a quidem? Deserunt sunt corrupti accusamus voluptates totam quis quasi, beatae minus nostrum reiciendis laboriosam impedit asperiores quia voluptatibus odio et animi culpa tenetur quidem consequatur necessitatibus deleniti.
        </a>
        <a href="">
            <div></div>
            In consectetur, laudantium corrupti ratione accusamus perspiciatis sequi dignissimos, voluptates ipsa vitae vero veniam aliquid. Ipsa eos adipisci impedit cum voluptatem magnam. Minus molestiae architecto itaque adipisci laboriosam voluptatem pariatur.
        </a>
        <a href="">
            <div></div>
            Ipsum repellendus perspiciatis laborum, hic nihil fuga adipisci corrupti expedita, deleniti nobis labore libero dolorem. Quis, maiores officiis consectetur numquam, laboriosam error enim quia, excepturi ratione voluptatem facilis! Velit, quaerat!
        </a>
        <a href="">
            <div></div>
            Explicabo est similique tempora eligendi repellendus aperiam iusto vel perferendis! Laborum, alias molestiae vitae laudantium officia ipsam quia, placeat voluptatem dolorum architecto ratione quam doloremque nemo cupiditate eos, omnis quisquam?
        </a>
        <a href="">
            <div></div>
            Commodi eaque itaque distinctio tenetur nemo enim, minima alias dolorem ipsa quia vitae minus voluptates accusantium et quae culpa doloribus amet atque assumenda unde. Natus consequuntur accusantium earum quis facilis.
        </a>
        <a href="">
            <div></div>
            Cum consequuntur unde amet ex! Amet quidem dignissimos earum veniam, distinctio commodi quia facilis atque officiis odit nam tempora sed! Enim porro, reprehenderit possimus repellendus facilis ea itaque? Incidunt, nesciunt?
        </a>
        <a href="">
            <div></div>
            Sapiente accusamus, voluptatum fugit quisquam soluta voluptas, minima minus necessitatibus consectetur dolore fugiat doloremque illo totam eius? Mollitia fuga, labore sunt atque, quidem fugiat ratione, dignissimos quasi dolore aperiam rerum?
        </a>
    </main>
</body>

</html>