Scribd
Upload
2 views

code

This document is an HTML template for a personal website belonging to Sahitya Bhattarai, showcasing their profile, education, hobbies, and poems. It includes a navigation bar, sections for content, and a contact form, all styled with CSS for a modern look. The site also features interactive elements such as poem navigation buttons and social media links.

Uploaded by

bhattaraisahitya4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
2 views

code

This document is an HTML template for a personal website belonging to Sahitya Bhattarai, showcasing their profile, education, hobbies, and poems. It includes a navigation bar, sections for content, and a contact form, all styled with CSS for a modern look. The site also features interactive elements such as poem navigation buttons and social media links.

Uploaded by

bhattaraisahitya4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 18

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Personal Website</title>

<!-- Font Awesome for social media icons -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/


all.min.css">

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Arial', sans-serif;

body {

background: #f0f2f5;

nav {

background: #2c3e50;

padding: 1rem;

position: fixed;

width: 100%;

top: 0;
z-index: 1000;

nav ul {

display: flex;

justify-content: center;

list-style: none;

gap: 2rem;

nav a {

color: white;

text-decoration: none;

font-size: 1.1rem;

transition: color 0.3s;

nav a:hover {

color: #3498db;

section {

padding: 4rem 2rem;

min-height: 100vh;

display: flex;

flex-direction: column;
justify-content: center;

align-items: center;

#home {

background: linear-gradient(135deg, #2c3e50, #3498db);

color: white;

text-align: center;

padding-top: 6rem;

.profile-img {

width: 200px;

height: 200px;

border-radius: 50%;

object-fit: cover;

border: 5px solid white;

margin-bottom: 2rem;

animation: float 3s ease-in-out infinite;

@keyframes float {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(-20px); }

}
.section-title {

font-size: 2.5rem;

margin-bottom: 2rem;

position: relative;

padding-bottom: 1rem;

.section-title::after {

content: '';

position: absolute;

bottom: 0;

left: 50%;

transform: translateX(-50%);

width: 100px;

height: 3px;

background: #3498db;

.card {

background: white;

padding: 2rem;

border-radius: 10px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

margin: 1rem;

max-width: 800px;

width: 100%;
transition: transform 0.3s;

.card:hover {

transform: translateY(-5px);

#poems {

background: #ecf0f1;

display: flex;

justify-content: center;

align-items: center;

.poem-container {

position: relative;

width: 100%;

max-width: 800px;

overflow: hidden;

.poem {

text-align: center;

opacity: 0;

transform: translateX(100%);

transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;


}

.poem.visible {

opacity: 1;

transform: translateX(0);

.arrow-btn {

position: absolute;

top: 50%;

font-size: 2rem;

color: #3498db;

background: rgba(255, 255, 255, 0.7);

border: none;

padding: 0.5rem;

cursor: pointer;

transform: translateY(-50%);

z-index: 2;

.arrow-left {

left: 0;

.arrow-right {

right: 0;
}

.skill-container {

display: flex;

flex-wrap: wrap;

gap: 1rem;

justify-content: center;

.skill {

background: #3498db;

color: white;

padding: 0.5rem 1rem;

border-radius: 20px;

animation: fadeIn 1s;

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

#contact {

background: #2c3e50;

color: white;

}
.social-links {

display: flex;

gap: 2rem;

margin-top: 2rem;

.social-links a {

color: white;

font-size: 2rem;

transition: transform 0.3s;

.social-links a:hover {

transform: scale(1.2);

color: #3498db;

.contact-form {

max-width: 500px;

width: 100%;

margin-top: 2rem;

.form-group {

margin-bottom: 1.5rem;
}

.form-group label {

display: block;

margin-bottom: 0.5rem;

color: white;

.form-group input,

.form-group textarea {

width: 100%;

padding: 0.8rem;

border: none;

border-radius: 5px;

background: rgba(255, 255, 255, 0.1);

color: white;

font-size: 1rem;

.form-group textarea {

height: 150px;

resize: vertical;

button {

background: #3498db;
color: white;

border: none;

padding: 1rem 2rem;

border-radius: 5px;

cursor: pointer;

font-size: 1rem;

transition: background 0.3s;

button:hover {

background: #2980b9;

.footer {

background-color: #f1f1f1;

text-align: center;

padding: 20px;

position: fixed;

bottom: 0;

width: 100%;

.footer p {

color: black;

margin: 0;

font-size: 14px;
}

</style>

</head>

<body>

<nav>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#education">Education</a></li>

<li><a href="#hobbies">Hobbies</a></li>

<li><a href="#poems">Poems</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

<section id="home">

<img src="C:\Users\bhatt\Desktop\photos\profile.jpg" alt="Your Profile Picture" class="profile-


img">

<h1>SAHITYA BHATTARAI</h1>

<p>Web Developer | Poet | Creative Thinker</p>

</section>

<section id="education">

<h2 class="section-title">Education</h2>

<div class="card">

<h3>Ilam Tea Garden English School</h3>

<p>Grade 10</p>
<p>2008-2021 AD</p>

</div>

<div class="card">

<h3>Devi Secondary School</h3>

<p>+2 </p>

<p>2021-2023 AD</p>

</div>

<div class="card">

<h3>Mechi Multiple Campus</h3>

<p>BSc.CSIT</p>

<p>2023 - Present</p>

</div>

</section>

<section id="hobbies">

<h2 class="section-title">Hobbies</h2>

<div class="skill-container">

<span class="skill">Photography</span>

<span class="skill">Writing</span>

<span class="skill">Cricket</span>

<span class="skill">Reading</span>

</div>

</section>
<section id="poems">

<h2 class="section-title">My Poems</h2>

<div class="poem-container">

<div class="poem visible">

<h3>जीवन अनि मृत्यु</h3>

<p><i>जीवन कुरा गर्छ, मृत्युले चिच्याउँछ,<br>

हामी समयको भीडमा, हराउँछौं अनायासै।<br>

सास त लिन्छौं, तर उधारोमा साँचिएको,<br>

मुटुको धड्कन पनि, क्षणिक गीतले गाइएको।<br><br>

जीवन नाच्छ अँध्यारोको किनारमा,<br>

जुनकिरी जस्तो, टिमटिमाउँछ अनि हराउँछ।<br>

हामी सूर्यलाई पछ्याउँछौं, उज्यालोलाई समाउँछौं,<br>

तर मृत्युले, छायाँझैं सधैं खेदाउँछ।<br><br>

जीवन भनेको के हो? एक क्षणिक सपना,<br>

समयको चिसो धारामा हराएको एक छाल।<br>

हामी संघर्ष गर्छौं, प्रेम गर्छौं, आशा गर्दछौं,<br>

तर एक दिन सबैले मृत्युको सामना गर्छौं।<br><br>

मृत्युमा न साथ न शत्रु, केवल मौनता छ,<br>

जहाँ हावा पनि चल्दैन, शून्य मात्र बग्छ।<br>

तर त्यो मौनतामा, सत्य लुक्छ कतै,<br>

जीवन त केवल क्षणिक सपना हो ,<br> सत्य मृत्युमै।.</i></p>

</div>
<div class="poem">

<h3>तिमिनै तिमि</h3>

<p><i>

तिमी फूलको बगैंचा,<br>

म तिम्रो भमरा हुँ,<br>

तिम्रो हाँसोले म, <br>

सधैं सधैं झुम्छु।<br>

तिमी जूनको उज्यालो<br>

म रातको छायाँ,<br>

तिम्रो साथ बिना, <br>

अधुरो यो माया।<br>

तिम्रो नजर सागर,<br>

म गहिराइमा डुब्छु, <br>

तिम्रो नाम सुनेरै,<br>

मुहारमा मुस्कान ल्याउँछु ।<br>

तिमी बादलको रङ, <br>

म तिम्रो इन्द्रेणी,<br>

तिम्रो मायाले,<br>

हर दिन हुन्छ खुशी।<br>

तिमी मेरो कविता, <br>

माया शब्दमा उर्लन्छ,<br>

तिम्रो प्रेमले, <br>

यो जीवन झल्कन्छ। <br>

सधैंभरि म, <br>

तिमीमा रमाउँछु, <br>


तिमी संगै अब <br>

सातै जुनि बिताउँछु ।<br>

</i></p>

</div>

<button class="arrow-btn arrow-left" id="prevPoem">←</button>

<button class="arrow-btn arrow-right" id="nextPoem">→</button>

</div>

<!-- Read More Button -->

<div style="text-align:center; margin-top:20px;">

<a href="https://supersubday.github.io/story/" target="_blank" class="btn-read-more">Read


More</a>

</div>

</section>

<style>

.btn-read-more {

display: inline-block;

padding: 10px 20px;

font-size: 1rem;

color: white;

background-color: #3498db;

border: none;

border-radius: 5px;

text-decoration: none;

transition: background-color 0.3s, transform 0.3s;

}
.btn-read-more:hover {

background-color: #2980b9;

transform: translateY(-2px);

.btn-read-more:active {

background-color: #1c6391;

transform: translateY(0);

</style>

<section id="contact">

<h2 class="section-title">Contact Me</h2>

<p>Get in touch with me</p>

<div class="contact-form">

<form action="mailto:[email protected]" method="POST" enctype="multipart/form-


data">

<div class="form-group">

<label for="name">Name</label>

<input type="text" id="name" name="name" required>

</div>

<div class="form-group">

<label for="email">Email</label>

<input type="email" id="email" name="email" required>

</div>

<div class="form-group">

<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>

</div>

<button type="submit">Send Message</button>

</form>

</div>

<div class="social-links">

<a href="https://www.facebook.com/share/92aoq1dbLwLmxddK/"><i class="fab fa-


facebook"></i></a>

<a href="https://wa.me/qr/ZB3NIBHN7HAYC1"><i class="fab fa-whatsapp"></i></a>

<a href="https://www.instagram.com/me.sahitya/profilecard/?igsh=Zms4ajVnNGpqZ3hi"><i
class="fab fa-instagram"></i></a>

</div>

</section>

<footer class="footer">

<p>&copy; 2024 Sahitya Bhattarai. All rights reserved.</p>

</footer>

<script>

let currentPoemIndex = 0;

const poems = document.querySelectorAll('.poem');

const totalPoems = poems.length;

function updatePoemDisplay() {

poems.forEach((poem, index) => {

poem.classList.remove('visible');

if (index === currentPoemIndex) {

poem.classList.add('visible');

}
});

document.getElementById('prevPoem').addEventListener('click', () => {

currentPoemIndex = (currentPoemIndex === 0) ? totalPoems - 1 : currentPoemIndex - 1;

updatePoemDisplay();

});

document.getElementById('nextPoem').addEventListener('click', () => {

currentPoemIndex = (currentPoemIndex === totalPoems - 1) ? 0 : currentPoemIndex + 1;

updatePoemDisplay();

});

updatePoemDisplay();

</script>

</body>

</html>

You might also like