kinkxknow/understanding.html at main · dkconnect/kinkxknow · 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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>

<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Understanding Kinks | KinkXKnow</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&amp;family=Montserrat:wght@300;400;600&amp;family=Manrope:wght@400;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#f4c025",
                        "background-light": "#f8f8f5",
                        "background-dark": "#050a18",
                        "neon-pink": "#ff00ff",
                    },
                    fontFamily: {
                        "display": ["Manrope", "sans-serif"],
                        "cinzel": ["Cinzel", "serif"],
                        "montserrat": ["Montserrat", "sans-serif"],
                    },
                    borderRadius: {
                        "DEFAULT": "0.5rem",
                        "lg": "1rem",
                        "xl": "1.5rem",
                        "full": "9999px"
                    },
                },
            },
        }
    </script>
<style>
        .neon-bg-pattern {
            background-image:
                radial-gradient(circle at 20% 30%, rgba(255, 0, 255, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(255, 0, 255, 0.05) 0%, transparent 50%),
                linear-gradient(45deg, rgba(255, 0, 255, 0.02) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(255, 0, 255, 0.02) 25%, transparent 25%);
            background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(244, 192, 37, 0.3);
            transition: all 0.3s ease;
        }
        .glass-card:hover {
            border-color: rgba(244, 192, 37, 1);
            transform: translateY(-5px);
            box-shadow: 0 0 20px rgba(244, 192, 37, 0.2);
        }
        .golden-text-glow {
            text-shadow: 0 0 15px rgba(244, 192, 37, 0.5);
        }
    </style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-white min-h-screen neon-bg-pattern">
<div class="relative flex h-auto min-h-screen w-full flex-col overflow-x-hidden">
<div class="layout-container flex h-full grow flex-col">

<div class="px-4 lg:px-40 flex justify-center py-5">
<div class="layout-content-container flex flex-col max-w-[1200px] flex-1">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-primary/20 px-4 lg:px-10 py-3 glass-card rounded-xl">
<div class="flex items-center gap-8">
<div class="flex items-center gap-4 text-primary">
<div class="size-6">
<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71L12 2z"></path>
</svg>
</div>
<h2 class="text-primary text-xl font-cinzel font-bold leading-tight tracking-widest uppercase golden-text-glow">KINK X KNOW</h2>
</div>
</div>
<div class="flex flex-1 justify-end gap-4 lg:gap-8">
<label class="hidden sm:flex flex-col min-w-40 !h-10 max-w-64">
</label>
</div>
</header>
</div>
</div>

<div class="px-4 lg:px-40 flex justify-center pt-12 pb-4">
<div class="layout-content-container flex flex-col max-w-[1200px] flex-1 text-center">
<h1 class="text-primary tracking-[0.2em] text-5xl md:text-7xl font-cinzel font-bold leading-tight px-4 golden-text-glow uppercase">
                        Understanding Kinks
                    </h1>
<div class="w-full flex justify-center items-center gap-4 mt-8">
<div class="h-[1px] flex-1 bg-gradient-to-r from-transparent via-primary/50 to-primary"></div>
<span class="material-symbols-outlined text-primary text-2xl">star</span>
<div class="h-[1px] flex-1 bg-gradient-to-l from-transparent via-primary/50 to-primary"></div>
</div>
<p class="text-white/60 font-montserrat mt-6 text-lg tracking-widest italic">Learn about the kinks and delve into this world.</p>
</div>
</div>

<div class="px-4 lg:px-40 flex justify-center py-10">
<div class="layout-content-container flex flex-col max-w-[1200px] flex-1">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 p-4">

<div class="glass-card flex flex-col gap-0 rounded-xl overflow-hidden group">
<div class="bg-cover bg-center aspect-[3/4] transition-transform duration-500 group-hover:scale-105" data-alt="Elegant close up of high quality foot art with silk" style='background-image: linear-gradient(0deg, rgba(5, 10, 24, 0.9) 0%, rgba(5, 10, 24, 0) 50%), url("https://cdn.dribbble.com/userupload/9763671/file/original-d1eeec3f9b3a6c9a90b4c523742c8458.jpg?resize=400x0");'>
</div>
<div class="p-6 -mt-20 relative z-10">
<h3 class="text-primary font-cinzel text-xl font-bold mb-2 tracking-wide">Feet Fetish</h3>
<p class="text-white/70 font-montserrat text-xs leading-relaxed">A foot fetish is a kink that involves a strong attraction to feet. From massaging and worshiping to tickling and toe-sucking, there are endless ways to indulge in this foot-tastic kink.</p>
</div>
</div>

<div class="glass-card flex flex-col gap-0 rounded-xl overflow-hidden group">
<div class="bg-cover bg-center aspect-[3/4] transition-transform duration-500 group-hover:scale-105" data-alt="Powerful artistic portrait of a woman in authority position" style='background-image: linear-gradient(0deg, rgba(5, 10, 24, 0.9) 0%, rgba(5, 10, 24, 0) 50%), url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKDWg43kd_xSh7V0pm7PK8qCoEm76rS4c-Mw&s");'>
</div>
<div class="p-6 -mt-20 relative z-10">
<h3 class="text-primary font-cinzel text-xl font-bold mb-2 tracking-wide">Bondage</h3>
<p class="text-white/70 font-montserrat text-xs leading-relaxed">Bondage is a kink that involves restraining your partner (or being restrained yourself) for the ultimate power play. From silky scarves to sturdy ropes, there are endless possibilities for getting all tied up in the name of pleasure.</p>

</div>
</div>

<div class="glass-card flex flex-col gap-0 rounded-xl overflow-hidden group">
<div class="bg-cover bg-center aspect-[3/4] transition-transform duration-500 group-hover:scale-105" data-alt="Soft focus intimate artistic shot of a couple touching" style='background-image: linear-gradient(0deg, rgba(5, 10, 24, 0.9) 0%, rgba(5, 10, 24, 0) 50%), url("https://static.wixstatic.com/media/7e5434_843fa7e6a3994e12ad4adc92cfb0fbdc~mv2.jpg/v1/fill/w_600,h_800,al_c/7e5434_843fa7e6a3994e12ad4adc92cfb0fbdc~mv2.jpg");'>
</div>
<div class="p-6 -mt-20 relative z-10">
<h3 class="text-primary font-cinzel text-xl font-bold mb-2 tracking-wide">Dominance and Submission</h3>
<p class="text-white/70 font-montserrat text-xs leading-relaxed">Dominance and submission (D/s) is a kink that explores power dynamics in the bedroom. Whether you're a dominant who loves to take charge or a submissive who enjoys being told what to do, this kink can add a whole new level of excitement to your sex life.</p>
</div>
</div>

<div class="glass-card flex flex-col gap-0 rounded-xl overflow-hidden group">
<div class="bg-cover bg-center aspect-[3/4] transition-transform duration-500 group-hover:scale-105" data-alt="Aesthetic shibari rope work on a dark background" style='background-image: linear-gradient(0deg, rgba(5, 10, 24, 0.9) 0%, rgba(5, 10, 24, 0) 50%), url("https://domzine.com/wp-content/gallery/femdom-drawings-2/femdom-drawing-16.jpg");'>
</div>
<div class="p-6 -mt-20 relative z-10">
<h3 class="text-primary font-cinzel text-xl font-bold mb-2 tracking-wide">Humiliation</h3>
<p class="text-white/70 font-montserrat text-xs leading-relaxed">Humiliation is a kink that involves consensual degradation and embarrassment. From verbal humiliation to small penis humiliation, this kink can be a thrilling way to explore power dynamics and push your boundaries. </p>

</div>
</div>
</div>
</div>
</div>

<div class="w-full" style="height: 60px;"></div>

<footer class="py-12 border-t border-white/5 bg-royal-dark/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto flex flex-col items-center justify-center gap-6">
<div class="flex items-center gap-8 mb-4">
<span class="material-symbols-outlined text-gold-rich/30 text-xl">vaping_rooms</span>
<span class="material-symbols-outlined text-neon-pink/30 text-xl">self_improvement</span>
<span class="material-symbols-outlined text-gold-rich/30 text-xl">festival</span>
</div>
<p class="text-gold-rich/60 text-[10px] uppercase tracking-[0.5em] font-medium text-center">
                    Copyright - 2026 - KinkxKnow
                </p>
<p class="text-gold-rich/60 text-[10px] uppercase tracking-[0.5em] font-medium text-center">
                    Dibyanshu | Lucifer
                </p>
</div>
</footer>
</div>
</body></html>
</div>
</div>
</div>
</div>
</body></html>