Scribd
Upload
13 views

G1Project

The document provides a comprehensive guide on constructing an EduHub product page using HTML5 and CSS. It covers key components such as the head and body sections, styling with CSS, and specific elements like <div> and <label> tags. Additionally, it includes practical examples of code for product showcases, image carousels, and buttons, culminating in a final output demonstration.

Uploaded by

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

G1Project

The document provides a comprehensive guide on constructing an EduHub product page using HTML5 and CSS. It covers key components such as the head and body sections, styling with CSS, and specific elements like <div> and <label> tags. Additionally, it includes practical examples of code for product showcases, image carousels, and buttons, culminating in a final output demonstration.

Uploaded by

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

UNDERSTANDING THE

STRUCTURE
OF AN
EDUHUB
PRODUCT PAGE
CONTENTS

• Introduction To HTML5 Framework


• Head Section & its key components
• CSS Styling & Details
• Body Section & its key components
• <DIV> & <LABEL> TAGS
• Final Output Of Product Page

2
INTRODUCTION TO HTML5 FRAMEWORK

• HTML5 Declaration
: This tells the browser we’re using HTML5. It’s like a signpost for
our document.

• HTML Element
: The container for the entire webpage

• Head Element
: Contains Important Information like the title and styles.

• Body Element
: The heart where all the visible content lives
HEAD SECTION AND
ITS COMPONENT
The head section is like the
Brain of our webpage. It
contains important elements
such as the title and styles.
HEAD INPUT CODES:

<head>
<title>Maths Book</title>
<link rel="stylesheet" href=“style.css"> <!--
External CSS link -->
</head>

5
EXTERNAL CSS LINK
(STYLE SHEET)

By using ‘External Style sheet’, look


of an entire website can be changed
by updating just one CSS file.

• To do so, a webpage must include a


reference to the external style sheet
file within a <link> tag inside the
<head> tag.
CSS STYLING
It handles and describes how an
HTML webpage will be presented on
a web browser. It helps to save a lot Details
of time as one design layout can be
used to make more number of web 1. Body : Sets the font of the
pages. webpage (e.g., font-family: Arial,
sans-serif)
2. Headings : Defines the
appearance of heading with a dark
background, white text, and
centered alignment.
3. Links : Stylish navigational buttons
e.g., with specific color and
padding.

7
The Body section is the heart of the webpage where all visible
BODY SECTIONcontent is placed

CSS:--
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

8
PRODUCT SHOWCASE
SECTION:
INPUT CODE:-- <div class="product-showcase">
<h1>EduHub Maths Book</h1> <!-- Product Name Heading -->

CSS:-- .product-showcase {
width: 80%;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #333; OUTPUT:--
}
h2 {

9 margin-top: 20px;
}
IMAGE CAROUSEL SECTION:
INPUT <!-- Image Carousel Section -->
CODE:-- <div class="carousel">
<input type="radio" name="carousel" id="img1" checked>
<input type="radio" name="carousel" id="img2">
<input type="radio" name="carousel" id="img3">

<div class="carousel-images">
<div class="carousel-image" id="image1">
<img src="C:\Users\Use\Desktop\Practical file\img1.jpg"
alt="Product Image 1">
</div>
<div class="carousel-image" id="image2">
<img src="C:\Users\Use\Desktop\Practical file\img2.jpg"
alt="Product Image 2">
</div>
<div class="carousel-image" id="image3">
<img src="C:\Users\Use\Desktop\Practical file\img3.jpg"
alt="Product Image 3">
</div>
10
</div>
IMAGE CAROUSEL SECTION:
CSS:-- img { .carousel-image {
display: none;
width: 100%;
height:400px; height: 100%;
width:500px; object-fit: cover;
}
.carousel {
position: #img1:checked ~ .carousel-images #image1,
relative; #img2:checked ~ .carousel-images #image2,
#img3:checked ~ .carousel-images #image3 {
text-align: left;
display: block;
margin: 20px }
30px;
}

.carousel input {
display: none;
}

.carousel-images
{
position:
relative;
width: 100%;
height: 400px;
11 }
IMAGE 1

12
IMAGE 2

13
IMAGE 3

14
CAROUSEL CONTROLS
INPUT <div class="carousel-controls">
CODE:-- <label for="img1" class="carousel-control
prev">&#10094;</label>
<label for="img2" class="carousel-control">&#10095;</label>
<label for="img3" class="carousel-control">&#10095;</label>
</div>
</div>
CSS:-- .carousel-controls {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-
between;
transform: translateY(-50%);
}

.carousel-control {
background-color: rgba(0, 0,
0, 0.5);
color: #fff;
15 padding: 10px;
cursor: pointer;
Carousel
&#10094 controls

&#10095

16
<DIV> TAGS

The <div> tag defines a division or a section in an HTML document. The <div> tag is used
as a container for HTML elements

<LABEL> TAGS
The <label> element is used to associate a text label with a form <input> field. The label
is used to tell users the value that should be entered in the associated input field.

17
<A> ANCHOR TAG
User clicks on the button, the document which is linked, gets opened. <A> tag
which stands for ‘Anchor’ is used to create link in a document. The HREF is the
attributes of the <A> tag that takes the URL or the path of a web page to be
opened when user clicks on the link.
Usage In The Project:--

<a href="Comparision.html"><b>COMPARE</b></a> Our


Book_____________Difference!

<a href="MoreReviews.html">More Reviews...</a>


<br>
<br>
<a href="Review.html">Add Reviews</a>
<br>
18
BUTTON (ADD TO CART) STYLING:
INPUT CODE:-- <CENTER>
<A href = "Cart.html" target = "_self" class="buy-now">

<button style = "background-color: orange;"> ADD TO


CART </button>
</A>
<br>
CSS:-- button {
width: 500px;
background-color: yellow;
border-radius: 50px;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
19 font-size: 20px;
}
BUTTON (BUY NOW)
STYLING
INPUT CODE:-- <A href = "BuyingPage.html" target = "_self" class="buy-now">

<BUTTON> BUY NOW </BUTTON>


</A>
</CENTER>
</div>
CSS:-- .buy-now:hover {
background-color: #218838;
transform: scale(1.05);
transition: background-color 0.3s ease, transform 0.3s
ease;
}

20
Final
Output:-

21
THANK YOU
Presented By
Sahitya Bhushan
Class- X – A
Group 1 Project

You might also like