Scribd
Upload
2 views

HTML

The 'About Us' page aims to connect customers with the company by detailing its journey and history. It features a navigation bar, sections about the company and team members, and a responsive design with a green color theme for clarity. The page includes images, contact information, and links to social media, enhancing user engagement and accessibility.

Uploaded by

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

HTML

The 'About Us' page aims to connect customers with the company by detailing its journey and history. It features a navigation bar, sections about the company and team members, and a responsive design with a green color theme for clarity. The page includes images, contact information, and links to social media, enhancing user engagement and accessibility.

Uploaded by

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

About Us page

Here is the description of the about us page of our project.


The contents are step by step explained below:
• Introduction
The about us page is designed for the purpose to connect
costumers with out company explaining them about the
company journey, history and now how it come up as a
brand.
• About page
The page contains a navigation bar where company logo is
in left corner , home and about us button on middle and
search box, add to cart and account button on right.
Below that there is about our company and Team
members and there details.
In footer there is brand tagline contacts and other links.
• Overview of wire frame
• Overview of Website
• Design:
Color: The background of the website is green color themed
which represents royality and introductions and texts are
keep set in white color that brings clarity and make easy to
read texts.

Images: Images of company logo , products and


Team members are kept in the website in different
sections as the costumer interests more to know
about the company.

Responsive Design: The design of the website is very


responsive and easy to interact that every costumer
can use it.

• Appendix
Source code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>About Us </title>
<link rel="stylesheet" href="styles.css">

</head>
<body>
<header>
<!-- Nav Start -->
<nav class="navbar">
<div class="navdiv">
<div class="logo"><img
src="C:\Users\LENOVO\Desktop\Code\final a\Toman.jpg"
style="height: 0.80cm; width: 1cm; margin-top:
0.25cm;"><a href="#">TOMAN</a></div>
<ul>
<li class="test"><a class="nav"
href="#">Home</a></li>
<li><a class="nav" href="#">About us</a></li>
</ul>
<div class="nav-icons">
<div class="search-btn"><input type="text"
placeholder=" Search
product"><button> </button></div>
<button class="cart-btn"> </button>
<button class="account-button">A</button>
</div>
</div>
</nav>
<!-- Nav End -->
</header>
<div id="content1" class="img-container">
<div class="con-img">
<img src="C:\Users\LENOVO\Desktop\Code\final
a\Toman.jpg" alt="TOMAN" width="auto" height="300px">
<h1 class="img-title">TOMAN</h1>
</div>
<div class="paragraph">
<h1>About Toman</h1>
<p>This is our watch brand which we started to dream
about.</p>
</div>
</div>

<div class="journey">
<h1>Our Journey</h1>
<P>about our starting and history and now
TomanToman
</P>
</div>
<div id="content2" class="img-container">
<div class="con-img">
<img src="C:\Users\LENOVO\Desktop\Code\final
a\Toman.jpg" alt="TOMAN" width="auto" height="300px">
<h1 class="img-title">TOMAN</h1>
</div>
<div class="paragraph">
<h1>About Toman</h1>
<p>This is our watch brand which we started to dream
about.</p>
</div>
</div>

<section class="team-container">

<div class="team-member" id="member1">


<img src="D:\final project\cartoon-819023_1280.jpg"
alt="Abal" class="team-img" >
<h2>Abal Bohara</h2>
<p class="role">Founder & CEO</p>
<button class="learn-more"
onclick="toggleDetails('member1')">Learn More</button>
<div class="details" id="details-member1">
<p>Details....</p>
<ul>
<li>Email: <a
href="mail">[email protected]</a></li>
<li>Address: Letang</li>
<li>Visit Website: <a href="portfolio">
https://abalbohora.netlify.app/ </a> </li>
</ul>
</div>
</div>

<div class="team-member" id="member2">


<img src="D:\final project\mouse-8030076_1920.jpg"
alt="Aayush" class="team-img">
<h2>Aayush Acharya</h2>
<p class="role">Chief Technology Officer</p>
<button class="learn-more"
onclick="toggleDetails('member2')">Learn More</button>
<div class="details" id="details-member2">
<p>Details.....</p>
<ul>
<li>Email: <a
href="mail">[email protected]</a></li>
<li>Address: Letang 2</li>
<li>Visit Website:</li>
</ul>
</div>
</div>

<div class="team-member" id="member3">


<img src="D:\final project\penguin-219765_1920.jpg"
alt="Jewan" class="team-img">
<h2>Jewan Parajuli</h2>
<p class="role">Marketing Manager</p>
<button class="learn-more"
onclick="toggleDetails('member3')">Learn More</button>
<div class="details" id="details-member3">
<p> details....</p>
<ul>
<li>Email: <a
href="mail">[email protected]</a></li>
<li>Address: Ithari</li>
<li>Visit Website: </li>
</ul>
</div>
</div>

<div class="team-member" id="member4">


<img src="D:\final project\saint-2356564_1920.jpg"
alt="Prabesh" class="team-img">
<h2>Prabesh Adhikari</h2>
<p class="role">Customer Support </p>
<button class="learn-more"
onclick="toggleDetails('member4')">Learn More</button>
<div class="details" id="details-member4">
<p>Details......</p>
<ul>
<li>Email: <a
href="mail">[email protected]</a></li>
<li>Address: Ithari</li>
<li>Visit Website: </li>
</ul>
</div>
</div>

<div class="team-member" id="member5">


<img src="D:\final project\toy-4013415_1920.jpg"
alt="Anil" class="team-img">
<h2>Anil Kumar Shah</h2>
<p class="role">Product Manager</p>
<button class="learn-more"
onclick="toggleDetails('member5')">Learn More</button>
<div class="details" id="details-member5">
<p>Details......</p>
<ul>
<li>Email: <a
href="mail">[email protected]</a></li>
<li>Address: Letang-2</li>
<li>Visit website: </li>
</ul>
</div>
</div>
</section>

<!-- Footer Start -->


<footer class="footer" >
<div class="Footer-Div">
<div class="footer1" style="display: flex; justify-
content: space-evenly;">
<div class="Footer-Section">
<h3>TOMAN</h3>
<p>Where Time Meets Sophistication.</p>

</div>
<div class="Footer-Section">
<h3>Quick Links</h3>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>

</ul>
</div>
<div class="Footer-Section">
<h3>Contact Us</h3>
<p> +977 9746953539</p>
<a
href="mailto:[email protected]">
[email protected]</a>
<p> Dulari, Morang, Nepal</p>
</div>
<div class="Footer-Section">
<h3>Follow Us</h3>
<div class="social-links">
<a href="#">Facebook</a>
<a
href="https://www.instagram.com/toman_025/">Instagra
m</a>
<a href="#">Twitter</a>
</div>
</div>
<div class="Footer-Section" style="text-align:
left;">
<h3>Team Member</h3>
<a href="" > Abal Bohara </a>
<p> Asyush Acharya</p>
<p> Anil Saha</p>
<p> Jiban Parajuli</p>
<p> Prabesh Adhikari</p>
</div>
</div>
<hr/>
<div class="footer-bottom">
<p>© 2025 Toman Watches. All Rights
Reserved.</p>
</div>
</div>
</footer>

<!-- Footer End -->

<script src="script.js"></script>
</body>
</html>

Css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
body {
font-family: 'Arial', sans-serif;
background-color: #127749;
color: #333;
}

header {
text-align: center;
padding: 20px 20px;
background-color: #054d0f;
color: rgb(255, 255, 255);
}
.button{
background-color: black;
}

.account-button {
padding: 10px;
border: none;
cursor: pointer;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
background-color: #FFC107;
color: white;
}

.nav-links {
display: flex;
gap: 32px;
}
.nav-links a {
color: #4a4a4a;
font-weight: 500;
transition: color 0.3s;
}

.nav-links a:hover{
background:#04492a;
}
.nav-links a.active {
color: #1a1a1a;
}
.nav-icons {
display: flex;
gap: 16px;
align-items: center;
}
.search-btn{
display: flex;
justify-content: center;
}

.nav-icons button {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
position: relative;
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background-color: #1a1a1a;
color: white;
font-size: 12px;
padding: 2px 6px;
border-radius: 50%;
}
.account-button {
padding: 10px;
border: none;
cursor: pointer;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
background-color: #127749;
color: white;
}

.account-button:hover {
background-color:#085a35;
}
.search-btn:hover{
background-color:#085a35;
}
.cart-btn:hover{
background-color:#085a35;
}

.nav:hover{

color: black;
}
*{
text-decoration: none;
}
.navbar{
background: linear-gradient(90deg, #0b3e27, #197149);
font-family: Arial;
padding-right: 15px;
padding-left: 15px;
height: 1.5cm;

}
.navdiv{
display: flex;
align-items: center;
justify-content: space-between;
}
.logo a{
font-size: 35px;
font-weight: 600;
color: white;
}
li{
list-style: none;
display: inline-block;

}
li a{
color: white;
font-size: 18px;
font-weight: bold;
margin-right: 25px;

}
button a{
color: black;
font-weight: bold;
font-size: 15px;

}
.img-container {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
padding: 50px;
padding-left: 200px;
}
#content2 img{
align-items: end;
}
.con-img{
text-align: center;
margin-right:20px;
}
.img-title{
color: white;
margin-top: 10px;
font-size: 18px;
}
.paragraph{
color: white;
max-width: 500px;
font-size: 16px;
}
.journey{
text-align: center;
background-color: #16843d;
color: white;
}
h1{
text-align: center;
margin: 50px;
}

h2 {
font-size: 1.5rem;
color: #fff5e1;
}

p{
font-size: 1rem;
}

.team-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: 30px 0;

.team-member {
background-color: rgb(7, 165, 55);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
width: 300px;
margin: 15px;
padding: 20px;
text-align: center;

.team-img {
width: 100%;
border-radius: 50%;
margin-bottom: 20px;
}

.role {
color: #f2e8ec;
font-size: medium;
font-weight: bold;
margin-bottom: 15px;
text-decoration: underline;
}

.learn-more {
background-color: #853fb3;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}

.learn-more:hover {
transition: 0.4s;
background-color: #0c7890;
}

.details {
background-color: #ab218b;
border-radius: 3px;
width: 260px;
padding: auto;
color: #f2e8ec;
display: none;
margin-top: 15px;
text-align: left ;

.footer {
background-color: #127749;
color: white;
padding: 60px 0 20px;
display: block;
unicode-bidi: isolate;
}

.footer1 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px,
1fr));
gap: 40px;
margin-bottom: 40px;
}

.Footer-Section h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
}

.Footer-Section p {
color: #9ca3af;
margin-bottom: 10px;
}

.Footer-Section ul li {
margin-bottom: 10px;
}
.Footer-Section ul a {color: #9ca3af;
transition: color 0.3s;
}

.Footer-Section ul a:hover {
color: white;
}

.social-links {
display: flex;
gap: 16px;
}

.social-links a {
color: #9ca3af;
transition: color 0.3s;
}

.social-links a:hover {
color: white;
}

.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid #374151;
color: #9ca3af;
}
ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 5px;
}

Javascript:

function toggleDetails(memberId) {
const details = document.getElementById(`details-
${memberId}`);
const isVisible = details.style.display === 'block';
details.style.display = isVisible ? 'none' : 'block';
}

Screenshot :

You might also like