100 lines
4.3 KiB
HTML
100 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Моё Портфолио</title>
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:var(--ink);color:var(--white);padding:100px 24px;text-align:center}
|
||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
|
||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin:0 auto 32px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
|
||
.section{padding:80px 24px}
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:40px;text-align:center}
|
||
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
|
||
.gallery-item{border-radius:16px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
|
||
.gallery-item img{width:100%;height:300px;object-fit:cover;display:block}
|
||
.gallery-item video{width:100%;height:300px;object-fit:cover;display:block}
|
||
.video-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px}
|
||
.video-item{border-radius:16px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
|
||
.video-item video{width:100%;display:block}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}.video-gallery{grid-template-columns:1fr}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Добро пожаловать</h1>
|
||
<p>Мои лучшие моменты в фото и видео</p>
|
||
<a class="btn" href="#photos">Смотреть фото</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="photos" class="section">
|
||
<div class="container">
|
||
<h2>Фотографии</h2>
|
||
<div class="gallery">
|
||
<div class="gallery-item reveal">
|
||
<img src="WhatsApp%20Image%202026-08-30%20at%2018.51.46.jpeg" alt="Фото 1">
|
||
</div>
|
||
<div class="gallery-item reveal">
|
||
<img src="WhatsApp%20Image%202026-08-30%20at%2018.52.10.jpeg" alt="Фото 2">
|
||
</div>
|
||
<div class="gallery-item reveal">
|
||
<img src="WhatsApp%20Image%202026-08-30%20at%2018.48.47.jpeg" alt="Фото 3">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="videos" class="section" style="background:#f9fafb">
|
||
<div class="container">
|
||
<h2>Видео</h2>
|
||
<div class="video-gallery">
|
||
<div class="video-item reveal">
|
||
<video controls>
|
||
<source src="WhatsApp%20Video%202026-08-30%20at%2018.49.13.mp4" type="video/mp4">
|
||
Ваше устройство не поддерживает видео.
|
||
</video>
|
||
</div>
|
||
<div class="video-item reveal">
|
||
<video controls>
|
||
<source src="WhatsApp%20Video%202026-08-30%20at%2018.49.39.mp4" type="video/mp4">
|
||
Ваше устройство не поддерживает видео.
|
||
</video>
|
||
</div>
|
||
<div class="video-item reveal">
|
||
<video controls>
|
||
<source src="WhatsApp%20Video%202026-08-25%20at%2009.34.56.mp4" type="video/mp4">
|
||
Ваше устройство не поддерживает видео.
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>Обо мне</h2>
|
||
<div class="card reveal">
|
||
<p>Здесь вы можете рассказать о себе, своих увлечениях и достижениях. Этот сайт создан для демонстрации ваших лучших моментов.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
var io=new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
|
||
},{threshold:.15});
|
||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
||
</script>
|
||
</body>
|
||
</html>
|