[go: up one dir, main page]
Scribd
Upload
4 views19 pages

Ui 12

Uploaded by

testpentest0704
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views19 pages

Ui 12

Uploaded by

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

SANDHIYA R

953622104085

EXERCISE-12
Sketch, design with popular tool and build a prototype and perform usability testing
and identify improvements
Bike World Website Report
1. Homepage
● Hero Section:
o Includes a bold headline: "Unleash Your Ride" with a subheading "Experience
the Thrill of Speed."
o A call-to-action button labeled "Explore More" directs users to learn more
about Bike World’s offerings.
o The hero background features a stylish image of a bike, conveying the brand's
theme and appeal to bike enthusiasts.
● Navigation:
o Positioned at the top of the page with links to Home, About, Bikes,
Testimonials, and Contact.
o Likely uses CSS for a simple yet modern horizontal alignment.
2. Featured Bikes Section
● Bike Cards:
o Displayed in a grid layout with images of different bike models: "Royal
Enfield Bike," "Honda Bike," and "Yamaha Bike."
o Each bike card includes:
▪ An image of the bike model.
▪ A title and a short description.
o This section emphasizes available options for customers, structured neatly for
easy viewing.
● Footer:
o Includes copyright information: "© 2024 Bike World. All rights reserved."
o Dark background aligns with the website's overall color scheme.
3. About Us Section
● Overview and Mission:
o Provides a short introduction about Bike World and a mission statement.
o Text is centered and organized, possibly using CSS text alignment and
padding to ensure readability.
● Why Choose Us:
o Features icons with brief points such as Unmatched Quality, Wide Variety,
Exceptional Service, and Customer Satisfaction.
o CSS grid or flexbox may be used to create an evenly spaced layout.
4. Testimonials Section
● Customer Feedback:
o Organized in a list format with customer testimonials.
o Text is highlighted or enclosed in quote marks to distinguish feedback from
regular content.
o The list is well-spaced for readability, suggesting the use of CSS margin and
padding.
5. Contact Us Section
● Contact Form:
o A structured form where users can submit inquiries.
o Fields include Address, Phone, Email, and an actual form with Name,
Email, and Message fields.
SANDHIYA R
953622104085

oLikely uses CSS for styling form elements, such as input borders, padding,
and the "Send Message" button.
● Form Styling:
o The form is centered within a container, using CSS to create a neat,
professional appearance.

Design & CSS Styling Overview


● Color Scheme:
o A combination of dark and light colors provides contrast and visual appeal.
o Dark backgrounds in the header, footer, and form sections, combined with
light background areas, create a balanced aesthetic.
● Typography:
o Headings are bold and likely use a larger font size for emphasis.
o Regular text is styled for readability, with adjustments to line-height and
margin.
● Layout:
o CSS grid or flexbox layout is used to arrange sections in a responsive and
aligned manner.
o The bike cards and "Why Choose Us" icons are spaced evenly to ensure
balance.
● Responsive Design:
o The website appears adaptable for different screen sizes, likely utilizing media
queries.
o Navigation links and content sections maintain structure across screen
variations.
● Interactivity:
o The "Explore More" button may have hover effects using CSS transitions.
o The form inputs likely have focus effects for enhanced usability.

INDEX CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bike World - Home</title>
<link rel="stylesheet" href="styles.css">
<style>
/* General Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
color: #333;
background-color: #f0f0f0;
SANDHIYA R
953622104085

/* Header Styling */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
background-color: #333;
color: #fff;
}

.logo {
font-size: 1.5em;
font-weight: bold;
color: #fff;
}

nav ul {
list-style: none;
display: flex;
}

nav ul li {
margin-left: 20px;
}

nav ul li a {
text-decoration: none;
color: #fff;
font-weight: bold;
}

/* Hero Section with Background Image */


.hero-section {
display: flex;
flex-direction: column;
align-items: flex-start; /* Align items to the left */
justify-content: center;
text-align: left; /* Align text to the left */
height: 90vh;
color: #fff;
position: relative;
padding: 20px 50px;
background-image: url('background-image.jpg'); /* Add your background image here
*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
SANDHIYA R
953622104085

/* Hero Text */
.hero-section h1 {
font-size: 3.5em;
font-weight: bold;
margin-bottom: 10px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* Adds shadow for better readability */
color: #00008B;
}

.hero-section h2 {
font-size: 2em;
font-weight: lighter;
margin-bottom: 20px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
color: #0000FF;
}

.hero-section p {
font-size: 1.7em;
margin-bottom: 30px;
max-width: 600px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
color: #003399;
}

/* CTA Button */
.cta-button {
display: inline-block;
padding: 15px 30px;
background-color: #333;
color: #fff;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
transition: background-color 0.3s;
}

.cta-button:hover {
background-color: #555;
}

/* Hero Image */
.hero-image {
width: 100%;
max-width: 700px;
height: 710px;
position: absolute;
bottom: -50px;
right: 20px;
SANDHIYA R
953622104085

opacity: 0.9;
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="logo">Bike World</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="about.html">About</a></li> <!-- This link navigates to the About
page -->
<li><a href="bikes.html">Bikes</a></li> <!-- Link to the Bikes page -->
<li><a href="testimonials.html">Testimonials</a></li> <!-- Link to the
Testimonials page -->
<li><a href="contact.html">Contact</a></li> <!-- Link to the Contact page -->
</ul>
</nav>
</header>

<!-- Hero Section -->


<section class="hero-section">
<h1>Unleash Your Ride</h1>
<h2>Experience the Thrill of Speed</h2>
<p>Discover our wide range of powerful and stylish bikes that bring speed and precision
to every journey.</p>
<a href="about.html" class="cta-button">Explore More</a>
<img src="C:\Users\rsand\Downloads\Royal Enfield Bike.jpg" alt="Motorbike"
class="hero-image">
</section>
</body>
</html>

ABOUT CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bike World - About Us</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to external CSS -->
<style>
/* General Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
SANDHIYA R
953622104085

body {
font-family: Arial, sans-serif;
color: #333;
background-color: #f5f5f5;
}

/* Header Styling */
header {
background-color: #333;
padding: 20px 50px;
color: white;
}

.logo {
font-size: 1.8em;
font-weight: bold;
color: #fff;
text-decoration: none;
margin-right: auto; /* Pushes the nav items to the right */
}

nav {
display: flex;
justify-content: flex-end; /* Aligns nav items to the right */
}

nav ul {
list-style: none;
display: flex;
gap: 15px;
}

nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 8px 12px;
border-radius: 5px;
transition: background-color 0.3s;
}

nav ul li a:hover {
background-color: #555;
}

/* About Section */
.about {
padding: 60px 20px;
background-color: #fafafa;
text-align: center;
SANDHIYA R
953622104085

.about h2 {
font-size: 2.5em;
margin-bottom: 20px;
color: #333;
}

.about p {
font-size: 1.1em;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
color: #666;
}

/* Mission Section */
.mission-section {
padding: 60px 20px;
display: flex;
align-items: center;
justify-content: center;
background-image: url('mission-background.jpg'); /* Add your mission background
image */
background-size: cover;
background-position: center;
color: #fff;
text-align: center;
flex-direction: column;
}

.mission-section h3 {
font-size: 2.2em;
margin-bottom: 10px;
color: navy;
}

.mission-section p {
font-size: 1.2em;
max-width: 800px;
color: dimgray;
}

/* Why Choose Us Section */


.why-choose-us {
padding: 60px 20px;
background-color: #333;
color: #fff;
text-align: center;
}
SANDHIYA R
953622104085

.why-choose-us h3 {
font-size: 2em;
margin-bottom: 20px;
}

.features-container {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-top: 20px;
}

.feature-item {
width: 250px;
padding: 20px;
background-color: #444;
border-radius: 8px;
text-align: center;
}

.feature-item h4 {
font-size: 1.3em;
margin: 10px 0;
color: #ffd700;
}

.feature-item p {
font-size: 0.9em;
color: #ccc;
}

/* Footer */
footer {
padding: 20px;
background-color: #333;
color: white;
text-align: center;
}
</style>
</head>
<body>
<!-- Header -->
<header>
<nav>
<a href="index1.html" class="logo">Bike World</a>
<ul>
<li><a href="index1.html">Home</a></li>
<li><a href="about.html">About</a></li>
SANDHIYA R
953622104085

<li><a href="bikes.html">Bikes</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>

<!-- About Section -->


<section class="about" id="about">
<h2>About Us</h2>
<p>At Bike World, we believe in the spirit of adventure. Our mission is to offer bikes
that inspire freedom, exploration, and a passion for the great outdoors.</p>
</section>

<!-- Mission Section -->


<section class="mission-section">
<h3>Our Mission</h3>
<p>To deliver bikes that are not only stylish and high-performance but also dependable
companions on the road. Every ride you take with us is a journey toward exploring new
horizons and discovering limitless possibilities.</p>
</section>

<!-- Why Choose Us Section -->


<section class="why-choose-us">
<h3>Why Choose Us</h3>
<div class="features-container">
<div class="feature-item">
<h4>Unmatched Quality</h4>
<p>Our bikes are built with the highest quality materials and crafted with precision
for maximum durability.</p>
</div>
<div class="feature-item">
<h4>Wide Variety</h4>
<p>From sports bikes to cruisers, we offer a wide range to suit every style and
preference.</p>
</div>
<div class="feature-item">
<h4>Exceptional Service</h4>
<p>Our dedicated team is here to ensure that your experience with us is smooth
and satisfying from start to finish.</p>
</div>
<div class="feature-item">
<h4>Customer Satisfaction</h4>
<p>We prioritize your satisfaction and work hard to meet and exceed your
expectations with every purchase.</p>
</div>
</div>
</section>

<!-- Footer -->


SANDHIYA R
953622104085

<footer>
<p>&copy; 2024 Bike World. All rights reserved.</p>
</footer>
</body>
</html>

TESTIMONIALS CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bike World - Bikes</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to the external CSS -->
<style>
/* General Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
color: #333;
background-color: #f0f0f0;
}

/* Header Styling */
header {
background-color: #333;
color: #fff;
padding: 20px;
}

nav {
display: flex;
justify-content: space-between; /* Space between logo and nav items */
align-items: center; /* Center items vertically */
}

nav .logo {
font-size: 1.5em;
font-weight: bold;
color: #fff; /* Logo color */
text-decoration: none; /* Remove underline */
}

nav ul {
SANDHIYA R
953622104085

display: flex; /* Use flex to arrange items horizontally */


list-style: none; /* Remove bullets */
}

nav ul li {
margin-left: 20px; /* Space between nav items */
}

nav a {
color: #fff; /* Link color */
text-decoration: none; /* Remove underline */
font-weight: bold; /* Bold text */
}

/* Bike Gallery */
.bike-gallery {
padding: 20px;
text-align: center;
}

.bike-gallery h2 {
margin-bottom: 20px;
color: #00008B; /* Dark blue color for the heading */
}

.bike-item {
margin: 20px;
display: inline-block;
width: 300px;
text-align: left;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}

.bike-item:hover {
transform: translateY(-5px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.bike-item img {
width: 100%;
height: auto;
}

.bike-item h3 {
margin: 10px 0;
color: #0000FF; /* Bright blue for bike titles */
SANDHIYA R
953622104085

.bike-item p {
padding: 0 10px 10px;
color: #003399; /* Medium blue for descriptions */
}

/* Footer Styling */
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: #fff;
position: relative;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<nav>
<a href="index.html" class="logo">Bike World</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="bikes.html">Bikes</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>

<section class="bike-gallery" id="bikes">


<h2>Featured Bikes</h2>
<div class="bike-item">
<img src="C:\Users\rsand\Downloads\royal1.png" alt="Royal Enfield Bike">
<h3>Royal Enfield Bike</h3>
<p>Perfect for rough terrains and adventure.</p>
</div>
<div class="bike-item">
<img src="C:\Users\rsand\Downloads\honda.jpg" alt="Honda">
<h3>Honda Bike</h3>
<p>Built for speed on paved roads.</p>
</div>
<div class="bike-item">
<img src="C:\Users\rsand\Downloads\yamaga.jpg" alt="Yamaga Bike">
<h3>Yamaga Bike</h3>
<p>A versatile bike for both city and off-road rides.</p>
</div>
SANDHIYA R
953622104085

</section>

<footer>
<p>&copy; 2024 Bike World. All rights reserved.</p>
</footer>
</body>
</html>

CONTACT US CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bike World - Contact Us</title>
<style>
/* General Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
color: #333;
background-color: #f0f0f0;
}

/* Header Styling */
header {
background-color: #333;
color: #fff;
padding: 20px;
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
}

nav .logo {
font-size: 1.5em;
font-weight: bold;
color: #fff;
text-decoration: none;
}
SANDHIYA R
953622104085

nav ul {
display: flex;
list-style: none;
}

nav ul li {
margin-left: 20px;
}

nav a {
color: #fff;
text-decoration: none;
font-weight: bold;
}

/* Contact Section */
.contact-section {
padding: 20px;
background-color: #fff;
border-radius: 5px;
margin: 20px auto;
max-width: 600px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.contact-section h2 {
margin-bottom: 20px;
color: #00008B;
}

.contact-info {
margin-bottom: 20px;
}

.contact-info p {
margin: 5px 0;
}

.contact-form {
display: flex;
flex-direction: column;
}

.contact-form label {
margin-bottom: 5px;
font-weight: bold;
}

.contact-form input,
.contact-form textarea {
SANDHIYA R
953622104085

margin-bottom: 15px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}

.contact-form button {
padding: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}

.contact-form button:hover {
background-color: #555;
}

/* Footer Styling */
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: #fff;
position: relative;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<nav>
<a href="index.html" class="logo">Bike World</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="bikes.html">Bikes</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>

<section class="contact-section">
<h2>Contact Us</h2>
<div class="contact-info">
SANDHIYA R
953622104085

<p><strong>Address:</strong> 123 Bike Lane, Cycle City, CC 12345</p>


<p><strong>Phone:</strong> +1 (234) 567-8901</p>
<p><strong>Email:</strong> contact@bikeworld.com</p>
<p>We value your feedback and inquiries. Please fill out the form below, and we will
get back to you as soon as possible.</p>
</div>
<form class="contact-form" action="your-server-endpoint" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

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

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


</form>
</section>

<footer>
<p>&copy; 2024 Bike World. All rights reserved.</p>
</footer>
</body>
</html>

SCREENSHORT:

FIG 1.1 HOME PAGE


SANDHIYA R
953622104085

FIG 1.2 ABOUT PAGE

FIG 1.3 IMAGE PAGE


SANDHIYA R
953622104085

FIG 1.4 CUSTOMERS FEEDBACK PAGE

FIG 1.5 CONTACT US PAGE


SANDHIYA R
953622104085

RESULT:
The Bike World website enhanced user experience with easy navigation, appealing visuals,
and organized sections. Users could explore bikes, read testimonials, and contact the team
effortlessly, resulting in higher engagement and satisfaction.

You might also like