Cards_With_TailwindCSS/index.html at main · StefaDale/Cards_With_TailwindCSS · 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
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cards | Tailwind CSS</title>

    <meta name="description" content="Raccolta dei link principali">
    <meta name="author" content="Stefano Catalin">
    <meta name="robots" content="index, follow">

    <link rel="canonical" href="https://StefaDale.github.io/Cards_With_TailwindCSS/">

    <meta property="og:title" content="Cards | Tailwind CSS">
    <meta property="og:description" content="Raccolta dei link principali">
    <meta property="og:type" content="website">
    <meta property="og:image" content="assets/og-preview.svg">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Cards | Tailwind CSS">
    <meta name="twitter:description" content="Raccolta dei link principali">
    <meta name="twitter:image" content="assets/og-preview.svg">

    <meta name="google-site-verification" content="atJkV0c_6yl6QBIsWBdZZH8f6Thd-s8kfkFkGJDgQS4" />

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <style>
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            opacity: 0;
            animation: fadeIn 1s ease-out forwards;
        }

        .delay-1 { animation-delay: 0.2s; }
        .delay-2 { animation-delay: 0.4s; }
        .delay-3 { animation-delay: 0.6s; }
        .delay-4 { animation-delay: 0.8s; }

        html {
        min-height: 100%;
        background: #d946ef;
    }

</style>
</head>

<body class="m-0 min-h-dvh bg-gradient-to-br from-violet-950 via-purple-700 to-fuchsia-400 flex flex-col overflow-x-hidden">
    <div>
        <header class="mt-10 flex flex-col justify-center items-center text-white p-5 transition fade-in gap-3 text-center">
            <h1 class="text-4xl md:text-6xl font-black tracking-wide">CARDS</h1>
            <h2 class="text-base md:text-xl text-white/70 font-mono">with Tailwind CSS Framework</h2>
        </header>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 items-center justify-items-center text-base gap-8 md:gap-10 flex-1 px-6 pb-10 md:text-2xl">
        <div class="fade-in delay-1 shadow-[0_0_35px_rgba(255,255,255,0.65)] md:shadow-[0_0_55px_rgba(255,255,255,0.9)] w-full max-w-80 min-h-44 p-6 flex flex-col items-start justify-center border border-white/40 bg-[#2d2856] rounded-lg transition duration-300 hover:-translate-y-1 hover:bg-[#3a3470] text-white md:p-8">
            <h2 class="text-2xl font-bold md:text-4xl">GitHub</h2>
            <p class="mt-2 text-white/80">Repository</p>
            <a class="mt-5 inline-block rounded-md bg-white px-4 py-2 text-sm font-semibold text-slate-950 transition hover:bg-violet-100" href="https://github.com/StefaDale" target="_blank" rel="noopener noreferrer">GitHub</a>
        </div>

        <div class="fade-in delay-2 shadow-[0_0_35px_rgba(255,255,255,0.65)] md:shadow-[0_0_55px_rgba(255,255,255,0.9)] w-full max-w-80 min-h-44 p-6 flex flex-col items-start justify-center border border-white/40 bg-[#2d2856] rounded-lg transition duration-300 hover:-translate-y-1 hover:bg-[#3a3470] text-white md:p-8">
            <h2 class="text-2xl font-bold md:text-4xl">Social</h2>
            <p class="mt-2 text-white/80">LinkTree</p>
            <a class="mt-5 inline-block rounded-md bg-white px-4 py-2 text-sm font-semibold text-slate-950 transition hover:bg-violet-100" href="https://stefanocatalinlinktree.netlify.app" target="_blank" rel="noopener noreferrer">LinkTree</a>
        </div>

        <div class="fade-in delay-3 shadow-[0_0_35px_rgba(255,255,255,0.65)] md:shadow-[0_0_55px_rgba(255,255,255,0.9)] w-full max-w-80 min-h-44 p-6 flex flex-col items-start justify-center border border-white/40 bg-[#2d2856] rounded-lg transition duration-300 hover:-translate-y-1 hover:bg-[#3a3470] text-white md:p-8">
            <h2 class="text-2xl font-bold md:text-4xl">Sito Web</h2>
            <p class="mt-2 text-white/80">Portfolio Personale</p>
            <a class="mt-5 inline-block rounded-md bg-white px-4 py-2 text-sm font-semibold text-slate-950 transition hover:bg-violet-100" href="https://stefanocatalin.netlify.app" target="_blank" rel="noopener noreferrer">Website</a>
        </div>

        <div class="fade-in delay-4 shadow-[0_0_35px_rgba(255,255,255,0.65)] md:shadow-[0_0_55px_rgba(255,255,255,0.9)] w-full max-w-80 min-h-44 p-6 flex flex-col items-start justify-center border border-white/40 bg-[#2d2856] rounded-lg transition duration-300 hover:-translate-y-1 hover:bg-[#3a3470] text-white md:p-8">
            <h2 class="text-2xl font-bold md:text-4xl">Questa Pagina</h2>
            <p class="mt-2 text-white/80">Repository</p>
            <a class="mt-5 inline-block rounded-md bg-white px-4 py-2 text-sm font-semibold text-slate-950 transition hover:bg-violet-100" href="https://github.com/StefaDale/Cards_With_TailwindCSS" target="_blank" rel="noopener noreferrer">GitHub</a>
        </div>
    </div>
</body>
</html>