7-10-class
Version:
Ini adalah website sekolah untuk kelas 7.10 pada periode tahun 2025/2026 oleh escanor developments
119 lines (111 loc) • 6.01 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>7.10 Website</title>
<link rel="icon" src="logo.png" type="image/png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOM8d7xj1z5l5e5e5e5e5e5e5e5e5e5e5e5e5" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/particles.js"></script>
</head>
<body>
<!-- Particles Background -->
<div id="particles-js"></div>
<!-- Header Section -->
<header>
<div class="logo">
<a href="#"><img src="logo.png" alt="Logo"></a>
<h4>7.10 Class</h4>
<style>
.logo img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.logo h4 {
color: #fff;
font-size: 1em;
margin-left: 10px;
margin-top: 20px;
font-family: 'Arial', sans-serif;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #000000, 0 0 20px #000000, 0 0 25px #000000, 0 0 30px #000000, 0 0 35px #000000;
animation: glow 1.5s infinite alternate;
}
</style>
</div>
<nav>
<ul>
<li><a href="#about">About us</a></li>
<li><a href="#projects">Activity</a></li>
<li><a href="#social-media">Social Media</a></li>
</ul>
</nav>
<button class="theme-toggle">🌙</button>
</header>
<!-- Hero Section -->
<section class="hero">
<h1 class="hologram">Welcome to Class 7.10</h1>
<p>Hello there 👋! Welcome to our own websites! this website is build up By Raffi Shofwansyah (aka: Diego), Lets explore our activities and some workflow.</p>
<a href="#projects" class="cta-btn">Our Journey and Workflow!</a>
</section>
<!-- Hologram Box for About and Footer -->
<section id="hologram-box" class="hologram-box">
<div class="hologram-content">
<!-- About Section -->
<div id="about" class="about-box">
<h2>About Us</h2>
<p>Hello! You wanna know about us? Lets go, First i tell you about my form teacher, hes name is called Rizky Ade S.Pd, and we have 32 students on this class.<br>Lets See who is our contributor here🤔<br>Down Below!</p>
<h2>Wanna Try Our AI? Lets Get Started!</h2>
<button id="ai-btn" class="ai-button">7.10 Assistants</button>
</div>
<!-- Footer -->
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="section">
<h2>----------------- Contributor of our class -----------------</h2>
<div class="project-grid">
<div class="project-card">
<h3>Form Teacher</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit tempore voluptatem eum ipsum maiores quas ad eaque minima atque, ipsa, et cupiditate excepturi. Quidem illum a unde odit dolorum ex..</p>
</div>
<div class="project-card">
<h3>Class President</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit tempore voluptatem eum ipsum maiores quas ad eaque minima atque, ipsa, et cupiditate excepturi. Quidem illum a unde odit dolorum ex..</p>
</div>
<div class="project-card">
<h3>Vice President</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, nobis laborum! Temporibus, doloribus vitae itaque dolore, blanditiis incidunt labore eveniet officiis enim omnis, non consequuntur quas placeat est odit dolorum..</p>
</div>
<div class="project-card">
<h3>Daily Duty Officer</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt beatae repellendus porro explicabo fugit amet repellat eos inventore consectetur voluptas! Optio asperiores earum cumque ratione minus aut vero rerum placeat..</p>
</div>
<div class="project-card">
<h3>Class Treasurer</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus porro consectetur itaque dolorum nostrum provident earum accusantium deserunt eos quasi corporis iure culpa non perspiciatis nulla vitae laborum, ipsam obcaecati?.</p>
</div>
<div class="project-card">
<h3>Class Secretary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis magnam magni dolore distinctio laboriosam, eaque assumenda, laudantium, nostrum placeat natus nulla numquam provident impedit odit harum eveniet. Dolore, odit in..</p>
</div>
</div>
</section>
<section id="social-media" class="section">
<h2>See our social Media!</h2>
<div class="social-buttons">
<a href="#" class="social-btn whatsapp">Instagram</a>
<a href="#" class="social-btn discord">WhatsApp Channel</a>
<a href="#" class="social-btn tiktok">TikTok</a>
</div>
</section>
<!-- Social Media Section -->
<footer class="footer-box">
<p>© 2025 SevenTen Class By Escanor Developments. All rights reserved.</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>