The link in my page: file:///C:/Users/Jhon%20Gabriel%20S.%20Oro/Desktop/ORO/CSS2%20ORO.html
HOME
<!DOCTYPE html>
<html lang="en">
<head>
<title>Orotech - Learning Nen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: #f7f7f7;
color: #333;
}
/* Header style */
header {
background: linear-gradient(45deg, #4e73df, #36b9cc);
padding: 40px 20px;
text-align: center;
color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
header h2 {
font-size: 2.5rem;
font-weight: 600;
letter-spacing: 2px;
}
/* Main content layout */
section {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: space-between;
}
/* Navigation */
nav {
width: 30%;
background: #2d3e50;
border-radius: 8px;
padding: 20px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
margin-right: 10px;
}
nav ul {
list-style-type: none;
}
nav ul li {
margin-bottom: 15px;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 1.2rem;
transition: color 0.3s;
}
nav ul li a:hover {
color: #36b9cc;
}
/* Main article */
article {
width: 65%;
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
article h1 {
font-size: 2rem;
font-weight: bold;
margin-bottom: 20px;
}
article p {
font-size: 1.1rem;
line-height: 1.6;
color: #555;
}
/* Footer */
footer {
background-color: #2d3e50;
color: white;
text-align: center;
padding: 15px;
position: relative;
bottom: 0;
width: 100%;
}
/* Image Styles */
img {
display: block;
margin: 20px auto;
max-width: 100%;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Responsive Design */
@media (max-width: 768px) {
nav {
width: 100%;
margin: 0;
margin-bottom: 20px;
}
article {
width: 100%;
}
}
@media (max-width: 480px) {
header h2 {
font-size: 1.8rem;
}
nav ul li a {
font-size: 1rem;
}
article h1 {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<header>
<h2>Learn About Nen</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="file:///C:/Users/Jhon%20Gabriel%20S.%20Oro/Desktop/ORO/Gallery.html">Gallery</a></li>
<li><a href="#">About Nen</a></li>
</ul>
</nav>
<article>
<h1>What is Nen?</h1>
<p>NEN is a type of supernatural power that enables individuals to develop special abilities. Through rigorous training, Nen allows its user to unlock extraordinary capabilities that surpass normal human limits.</p>
<p>Mastering Nen requires patience, skill, and an understanding of its various types. Whether you're just beginning your Nen journey or are already on the path to mastery, learning Nen is an essential step for anyone looking to hone their skills and unlock their full potential.</p>
</article>
</section>
<img src="featured-image-hisoka-cropped.jpg" alt="Nen Master" />
<footer>
<p>© 2025 Orotech. All Rights Reserved.</p>
</footer>
</body>
</html>
GALLERY
<!DOCTYPE html>
<html lang="en">
<head>
<title>Orotech - Learn Nen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Link to Google Fonts for unique typography -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Poppins:wght@600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(45deg, #f1f1f1, #e3e3e3);
color: #333;
}
header {
background-color: #FF69B4; /* Pink */
padding: 50px;
text-align: center;
font-size: 2.5rem;
color: white;
font-family: 'Poppins', sans-serif;
letter-spacing: 2px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
margin: 20px 0;
}
header h2 {
font-weight: bold;
}
/* Main content layout */
section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
/* Navigation */
nav {
width: 30%;
background-color: #f7f7f7;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
nav:hover {
transform: translateY(-5px);
}
nav ul {
list-style-type: none;
}
nav ul li {
margin-bottom: 15px;
}
nav ul li a {
text-decoration: none;
color: #555;
font-size: 1.2rem;
font-weight: 500;
transition: color 0.3s;
}
nav ul li a:hover {
color: #FF69B4; /* Pink */
}
/* Article */
article {
width: 65%;
background-color: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
article:hover {
transform: translateY(-5px);
}
article h1 {
font-size: 2.2rem;
font-family: 'Poppins', sans-serif;
margin-bottom: 20px;
color: #222;
}
article p {
font-size: 1.2rem;
line-height: 1.6;
color: #666;
}
/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 12px;
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #f8f8f8;
font-weight: bold;
font-family: 'Poppins', sans-serif;
}
td img {
width: 100px;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
table tr:hover {
background-color: #f1f1f1;
}
/* Footer */
footer {
background-color: #800080; /* Violet */
padding: 20px;
text-align: center;
color: white;
font-family: 'Poppins', sans-serif;
margin-top: 40px;
border-radius: 12px;
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}
/* Image styling */
img {
display: block;
margin: 20px auto;
width: 80%;
max-width: 300px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Responsive Design */
@media (max-width: 768px) {
nav, article {
width: 100%;
margin-bottom: 20px;
}
header h2 {
font-size: 2rem;
}
nav ul li a {
font-size: 1rem;
}
article h1 {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<header>
<h2>Learn About Nen</h2>
</header>
<section>
<nav>
<ul>
<li><a href="CSS2%20ORO.html">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="https://css1gabriel.blogspot.com/2024/08/my-autobiography-im-jhon-gabriel-s.html">About Nen</a></li>
</ul>
</nav>
<article>
<h1>Learn Nen Types</h1>
<p>NEN is a type of supernatural power that enables individuals to develop special abilities. It is important to understand different Nen types to harness their powers effectively. Below is a list of some well-known Nen users and their Nen types.</p>
<!-- Table displaying Nen users -->
<table>
<tr>
<th>Name</th>
<th>Image</th>
<th>Nen Type</th>
</tr>
<tr>
<td>Gab</td>
<td><img src="OROWEBPAGE/c.jpg" alt="Kurapika"></td>
<td>Emitter</td>
</tr>
<tr>
<td>Totong</td>
<td><img src="OROWEBPAGE/ff.JPG" alt="Feitan"></td>
<td>Enhancer</td>
</tr>
<tr>
<td>Nino</td>
<td><img src="OROWEBPAGE/j.jpg" alt="chrollo"></td>
<td>Conjurer</td>
</tr>
<tr>
<td>Dave</td>
<td><img src="OROWEBPAGE/S.jpg" alt="Chrollo"></td>
<td>Enhancer</td>
</tr>
<tr>
<td>Pete</td>
<td><img src="OROWEBPAGE/K.jpg" alt="Hisoka"></td>
<td>Manipulator</td>
</tr>
<tr>
<td>Kerby</td>
<td><img src="OROWEBPAGE/H.jpg" alt="Killua"></td>
<td>Specialist</td>
</tr>
</table>
</article>
</section>
<footer>
<p>© 2025 Orotech. All Rights Reserved.</p>
</footer>
</body>
</html>
Comments
Post a Comment