304 lines
12 KiB
HTML
304 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="eng">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>CZSK C.U.N.T.</title>
|
||
<link rel="shortcut icon" href="pix/favicon.png" type="image/x-icon" />
|
||
<link rel="stylesheet" href="assets/style.css" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<script src="assets/fractal_snowflake.js"></script>
|
||
<script src="assets/inversion.js"></script>
|
||
</head>
|
||
<body>
|
||
<!-- nav -->
|
||
<section id="nav-section">
|
||
<img src="pix/logo.png" alt="logo" width="40px" />
|
||
<div class="navigation">
|
||
<a href="#our-numbers">ABOUT US</a>
|
||
<a href="#photos-section">OUR HEROES</a>
|
||
</div>
|
||
</section>
|
||
<!-- header -->
|
||
<section id="header-section">
|
||
<div class="titles">
|
||
<div class="tit1">we are the</div>
|
||
<h1>CZSK</h1>
|
||
<div class="tit2">
|
||
DRUNKEN SOLUTIONS <br />
|
||
AROUND THE WORLD
|
||
</div>
|
||
</div>
|
||
<div class="links">
|
||
<a href="https://t.me/czechoslovakiia" target="_blank">
|
||
<img src="pix/telegram.png" alt="" width="32px" />
|
||
</a>
|
||
<br />
|
||
<a href="https://git.czsk.it/" target="_blank">
|
||
<img src="pix/git.png" alt="" width="32px" />
|
||
</a>
|
||
</div>
|
||
</section>
|
||
<!-- numbers-->
|
||
<section id="our-numbers">
|
||
<h3>Our work speaks trough numbers//</h3>
|
||
<div class="numbers">
|
||
<div class="number">
|
||
<h2>27+</h2>
|
||
<h4>COUNTRIES WAS RUINED</h4>
|
||
<p style="opacity: 40%">We travel a lot around the world</p>
|
||
</div>
|
||
<div class="number">
|
||
<h2>03%</h2>
|
||
<h4>SATISFACTION RATE</h4>
|
||
<p style="opacity: 40%">Every body hates us</p>
|
||
</div>
|
||
<div class="number">
|
||
<h2>15+</h2>
|
||
<h4>YEARS OF EXPERIENCE</h4>
|
||
<p style="opacity: 40%">
|
||
Decades of destroying our’s own life
|
||
</p>
|
||
</div>
|
||
<div class="number">
|
||
<h2>00</h2>
|
||
<h4>SUCCESS</h4>
|
||
<p style="opacity: 40%">We did absolutely nothing</p>
|
||
</div>
|
||
<div class="number">
|
||
<h2>05</h2>
|
||
<h4>COLUMNS</h4>
|
||
<p style="opacity: 40%">
|
||
The designer wanted to put 5 columns here
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- wtf -->
|
||
<section id="wtf">
|
||
<div class="wtftitle">
|
||
<h5 style="justify-content: center">
|
||
WHAT THE <br />
|
||
ACTUAL FUCK?
|
||
</h5>
|
||
<p style="padding-top: 100px; opacity: 50%">
|
||
No one knows what we created or why we created it. We have
|
||
no goal, we have no idea. Even the president doesn't
|
||
understand the nonsense that led to the Czechoslovakian
|
||
Union of Nationalistic Technicians.
|
||
<br /><br /><br />
|
||
Welcome to us. And fuck you.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
<section id="photos-section">
|
||
<h3>Heroes of CUNT//CZSK</h3>
|
||
<div class="photos-grid">
|
||
<!-- Карточка 1 -->
|
||
<div class="photo-card">
|
||
<div class="photo-container">
|
||
<img
|
||
src="pix/president.jpg"
|
||
alt=""
|
||
style="width: 100%; height: 100%; object-fit: cover"
|
||
/>
|
||
<h6>President</h6>
|
||
</div>
|
||
<div class="photo-name">SERYOZA</div>
|
||
</div>
|
||
<!-- Карточка 2 -->
|
||
<div class="photo-card">
|
||
<div class="photo-container">
|
||
<img
|
||
src="pix/primeminister.jpg"
|
||
alt=""
|
||
style="width: 100%; height: 100%; object-fit: cover"
|
||
/>
|
||
<h6>
|
||
Prime <br />
|
||
Minister
|
||
</h6>
|
||
</div>
|
||
<div class="photo-name">ALEX</div>
|
||
</div>
|
||
|
||
<!-- Карточка 3 -->
|
||
<div class="photo-card">
|
||
<div class="photo-container">
|
||
<img
|
||
src="pix/healthcare.jpg"
|
||
alt=""
|
||
style="width: 100%; height: 100%; object-fit: cover"
|
||
/>
|
||
<h6>
|
||
Minister of <br />
|
||
Healthcare
|
||
</h6>
|
||
</div>
|
||
<div class="photo-name">Nikita Eriel</div>
|
||
</div>
|
||
|
||
<!-- Карточка 4 -->
|
||
<div class="photo-card">
|
||
<div class="photo-container">
|
||
<img
|
||
src="pix/internal_affairs.jpg"
|
||
alt=""
|
||
style="width: 100%; height: 100%; object-fit: cover"
|
||
/>
|
||
<h6>
|
||
Minister of <br />
|
||
Internal Affairs
|
||
</h6>
|
||
</div>
|
||
<div class="photo-name">JAAN</div>
|
||
</div>
|
||
<!-- Карточка 5 -->
|
||
<div class="photo-card">
|
||
<div class="photo-container">
|
||
<img
|
||
src="pix/culture/culture2.jpg"
|
||
alt=""
|
||
style="width: 100%; height: 100%; object-fit: cover"
|
||
/>
|
||
<h6>
|
||
Minister of <br />
|
||
Culture
|
||
</h6>
|
||
</div>
|
||
<div class="photo-name">SANDRA</div>
|
||
</div>
|
||
<!-- Карточка 6 -->
|
||
<div class="photo-card">
|
||
<div class="photo-container">
|
||
<img
|
||
src="pix/trade.jpg"
|
||
alt=""
|
||
style="width: 100%; height: 100%; object-fit: cover"
|
||
/>
|
||
<h6>
|
||
Minister of <br />
|
||
Trade
|
||
</h6>
|
||
</div>
|
||
<div class="photo-name">¥AN</div>
|
||
</div>
|
||
<!-- Карточка 7 -->
|
||
<div class="photo-card">
|
||
<div class="photo-container">
|
||
<img
|
||
src="pix/cat/cat2.jpg"
|
||
alt=""
|
||
style="width: 100%; height: 100%; object-fit: cover"
|
||
/>
|
||
<h6>
|
||
Minister of <br />
|
||
Regional Affairs
|
||
</h6>
|
||
</div>
|
||
<div class="photo-name">ART</div>
|
||
</div>
|
||
<!-- Карточка 8 -->
|
||
<div class="photo-card">
|
||
<div class="photo-container">
|
||
<img
|
||
src="pix/iierar.jpg"
|
||
alt=""
|
||
style="width: 100%; height: 100%; object-fit: cover"
|
||
/>
|
||
<h6>
|
||
Minister of <br />
|
||
Alternative Foreign Policy
|
||
</h6>
|
||
</div>
|
||
<div class="photo-name">PAVEL</div>
|
||
</div>
|
||
<!-- Дальше карточки можно дублировать -->
|
||
<!-- Карточка 9 -->
|
||
<div class="photo-card">
|
||
<div class="photo-container">
|
||
<img
|
||
src="pix/vietman.jpg"
|
||
alt=""
|
||
style="width: 100%; height: 100%; object-fit: cover"
|
||
/>
|
||
<h6>Ambassador to Vietnam</h6>
|
||
</div>
|
||
<div class="photo-name">loquito de la casa</div>
|
||
</div>
|
||
<!-- Дальше карточки можно дублировать -->
|
||
<!-- Карточка 10 -->
|
||
<div class="photo-card">
|
||
<div class="photo-container">
|
||
<img
|
||
src="pix/env.jpg"
|
||
alt=""
|
||
style="width: 100%; height: 100%; object-fit: cover"
|
||
/>
|
||
<h6>Minister of the Environment</h6>
|
||
</div>
|
||
<div class="photo-name">Bee-bee</div>
|
||
</div>
|
||
<!-- Дальше карточки можно дублировать -->
|
||
<!-- Карточка 11 -->
|
||
<div class="photo-card">
|
||
<div class="photo-container">
|
||
<img
|
||
src="pix/gleb.jpg"
|
||
alt=""
|
||
style="width: 100%; height: 100%; object-fit: cover"
|
||
/>
|
||
<h6>Minister of the Environment</h6>
|
||
</div>
|
||
<div class="photo-name">Gleb</div>
|
||
</div>
|
||
<!-- Дальше карточки можно дублировать -->
|
||
<!-- Карточка 12 -->
|
||
<div class="photo-card">
|
||
<div class="photo-container">
|
||
<img
|
||
src="pix/atf.jpg"
|
||
alt=""
|
||
style="width: 100%; height: 100%; object-fit: cover"
|
||
/>
|
||
<h6>Head of ATF</h6>
|
||
</div>
|
||
<div class="photo-name">Masha</div>
|
||
</div>
|
||
<!-- Дальше карточки можно дублировать -->
|
||
</div>
|
||
</section>
|
||
<section class="footer">
|
||
<p>
|
||
<span id="current-year"></span>
|
||
- Landing page of Czechoslovakian Union of Nationalistic
|
||
Technicians // by
|
||
<a
|
||
href="https://nikitajevdookishkin.github.io/designer/"
|
||
class="flink"
|
||
target="_blank"
|
||
style="text-decoration: none; color: #fff"
|
||
>NJ</a
|
||
>
|
||
</p>
|
||
</section>
|
||
<script>
|
||
// year loader
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
// Get the current year
|
||
const currentYear = new Date().getFullYear();
|
||
|
||
// Find the element with the id 'current-year' and set its text content
|
||
const yearElement = document.getElementById("current-year");
|
||
if (yearElement) {
|
||
yearElement.textContent = currentYear;
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|