Scribd
Upload
2 views

Htmlviewer HTML

Uploaded by

ehsazaliza
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

Htmlviewer HTML

Uploaded by

ehsazaliza
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Mastery Circle</title>
<link href="https://fonts.googleapis.com/css2?
family=Lora:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
font-family: 'Lora', serif;
background-color: #000;
color: #FFD700;
overflow-x: hidden;
}
header {
background-color: #000;
color: #FFD700;
padding: 10px 20px;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
transition: background-color 0.3s ease;
}
header h1 {
margin: 0;
font-size: 2.5em;
font-family: 'Lora', serif;
}
header img {
width: 100px;
height: auto;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
margin: 10px 0;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: #FFD700;
font-weight: bold;
position: relative;
transition: color 0.3s ease;
}
nav ul li a::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: -2px;
left: 0;
background-color: #FFD700;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
nav ul li a:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
section {
padding: 60px 20px;
text-align: center;
background: linear-gradient(to bottom, rgba(0,0,0,0.8),
rgba(0,0,0,0.9));
color: #FFD700;
transition: background 0.5s ease;
}
section:nth-child(even) {
background: linear-gradient(to bottom, rgba(0,0,0,0.9),
rgba(0,0,0,0.8));
}
section h2 {
font-size: 2em;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
section h2::after {
content: '';
position: absolute;
width: 50%;
height: 3px;
background: #FFD700;
bottom: -10px;
left: 25%;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.testimonials img {
width: 100%;
max-width: 400px;
height: auto;
}
.fade-in {
opacity: 0;
transform: translateY(20px);
animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Add smooth scroll */
html {
scroll-behavior: smooth;
}
</style>
</head>
<body>
<header>
<a href="#home">
<img src="https://example.com/path/to/logo.png" alt="Personal Mastery
Circle Logo">
</a>
<h1>Personal Mastery Circle</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#register">Register</a></li>
</ul>
</nav>
</header>

<section id="home" class="fade-in">


<div class="container">
<h2>Welcome to Personal Mastery Circle</h2>
<p>Inspiring individuals around the world to self-transform into being
better in all aspects of life.</p>
</div>
</section>

<section id="about" class="fade-in">


<div class="container">
<h2>About Us</h2>
<img src="https://example.com/path/to/founder.jpg" alt="Founder"
width="300">
<p>Personal Mastery Circle is dedicated to providing motivational
inspirations and guidelines. We aim to integrate elements of healing - physical,
intellectual, emotional, and spiritual.</p>
</div>
</section>

<section id="services" class="fade-in">


<div class="container">
<h2>Our Services</h2>
<p>We offer a range of services to help you transform your life and
reach your full potential.</p>
<!-- Add details of services here -->
</div>
</section>

<section id="testimonials" class="fade-in">


<div class="container">
<h2>Testimonials</h2>
<p>Read what our satisfied clients have to say about us.</p>
<a href="https://example.com/path/to/testimonial/image.png">
<img src="https://example.com/path/to/testimonial/image.png"
alt="Testimonial Image">
</a>
<a href="https://www.google.com/url?sa=i&url=https%3A%2F
%2Fkitareporters.com%2Finsan%2FN1aM8qE1eW&psig=AOvVaw0fkfCzdiT-
7IYlW8C3Le33&ust=1718088051545000&source=images&cd=vfe&opi=89978449&ved=0CBQQjhxqFw
oTCJCclvK20IYDFQAAAAAdAAAAABAo">
<img src="https://www.google.com/url?sa=i&url=https%3A%2F
%2Fkitareporters.com%2Finsan%2FN1aM8qE1eW&psig=AOvVaw0fkfCzdiT-
7IYlW8C3Le33&ust=1718088051545000&source=images&cd=vfe&opi=89978449&ved=0CBQQjhxqFw
oTCJCclvK20IYDFQAAAAAdAAAAABAo" alt="Additional Testimonial Image">
</a>
</div>
</section>

<section id="contact" class="fade-in">


<div class="container">
<h2>Contact Us</h2>
<p>Get in touch with us for more information or to book a session.</p>
<!-- Add contact form or details here -->
</div>
</section>

<section id="register" class="fade-in">


<div class="container">
<h2>Register</h2>
<p>Join us today to start your journey towards self-improvement.</p>
<!-- Add registration form or details here -->
</div>
</section>
</body>
</html>

You might also like