Hello, I could use some help adding the features to my HTML and CSS code. Any he
ID: 3912930 • Letter: H
Question
Hello, I could use some help adding the features to my HTML and CSS code. Any help that you could give me would be appreciated. My code is posted below. Thank you!!
===============================================
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- title-->
<title>Home page</title>
<!-- css file --->
<!--- first your create a folder css and put all css file with name main.css and responsive.css in it-->
<!--main css is main.css-->
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<!-- header start here -->
<header>
<div class="container">
<h1>Your Name</h1>
</div>
</header>
<!-- navigation start here -->
<div class="navigation">
<nav class="container">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<!-- banner section end here -->
<section class="banner">
<div>
<!-- you can set your on image here-->
<img src="images/services.jpg" alt="Services" />
</div>
</section>
<!-- section content top three box here -->
<section class="body_content">
<div class="welcome">
<h3>Welcome Message here</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>
</div>
<div class="container ">
<div class="row">
<div class="column">
<!-- here put your own image with proper url of src if you put image in folders the src="foldername/dell.jpeg" or your image name-->
<img src="images/dell.jpeg" alt="image1" />
<div>
<h3>Section One</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
</p>
</div>
</div>
<div class="column">
<!-- here put your own image with proper url of src if you put image in folders the src="foldername/dell.jpeg" or your image name-->
<img src="images/dell.jpeg" alt="image1" />
<div>
<h3>Section Two</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
</p>
</div>
</div>
<div class="column">
<!-- here put your own image with proper url of src if you put image in folders the src="foldername/dell.jpeg" or your image name-->
<img src="images/dell.jpeg" alt="image1" />
<div>
<h3>Section Three</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
</p>
</div>
</div>
</div>
</div>
<!-- Spacial project start here -->
<div class="container">
<div class="row">
<div class="spacial_project">
<div class="content_box1">
<h3>Spacial Project</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</p>
<br />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</p>
<br />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</p>
</div>
<div class="content_box2">
<div class="div_top">
<h5>Important Content</h5>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s.
</p>
</div>
<div class="div_middle">
<h5>Important Content</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Spacial project end here -->
</section>
<footer>
<div class="container">
<div class="footer_content">
<nav class="container footer_navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
</footer>
</body>
</html>
===============
about.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- title-->
<title>About</title>
<!-- css file --->
<!--main css is main.css-->
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<!-- header start here -->
<header>
<div class="container">
<h1>Your Name</h1>
</div>
</header>
<!-- header end here -->
<!-- navigation start here -->
<div class="navigation">
<nav class="container">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<!-- navigation end here -->
<!-- banner section end here -->
<section class="banner">
<div>
<!-- you can set your on image here-->
<img src="images/contact-banner.jpg" alt="contact banner" />
</div>
</section>
<!-- section content top three box here -->
<section class="body_content">
<!-- Spacial project start here -->
<div class="container">
<!-- heading About us--->
<div class="heading">
<h3>About Us</h3>
</div>
<div class="spacial_project">
<div class="content_box1">
<h3>About Yourself</h3>
<table class="tbl_about">
<tr>
<th>Heading 1</th>
<th>Heading 1</th>
<th>Heading 1</th>
</tr>
<tr>
<td>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</p>
</td>
<td>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</p>
</td>
<td>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</p>
</td>
</tr>
</table>
<br />
<br />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</div>
<div class="content_box2">
<img src="images/dell.jpeg" alt="my_image" />
</div>
</div>
</div>
<!-- Spacial project end here -->
</section>
<footer>
<div class="container">
<div class="footer_content">
<nav class="container footer_navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
</footer>
</body>
</html>
===============
services.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- title-->
<title>Services</title>
<!-- css file --->
<!--- first your create a folder css and put all css file with name main.css and responsive.css in it-->
<!--main css is main.css-->
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<!-- header start here -->
<header>
<div class="container">
<h1>Your Name</h1>
</div>
</header>
<!-- header end here -->
<!-- navigation start here -->
<div class="navigation">
<nav class="container">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<!-- navigation end here -->
<!-- banner section end here -->
<section class="banner">
<div>
<!-- you can set your on image here-->
<img src="images/services.jpg" alt="contact banner" />
</div>
</section>
<!-- section content top three box here -->
<section class="body_content">
<div class="services">
<div class="container ">
<div class="heading">
<h2>Services</h2>
</div>
<div class="box">
<!-- here put your own image with proper url of src if you put image in folders the src="foldername/dell.jpeg" or your image name-->
<img src="images/dell.jpeg" alt="image1" />
<div>
<h3>Service 1</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
</p>
</div>
</div>
<div class="box">
<!-- here put your own image with proper url of src if you put image in folders the src="foldername/dell.jpeg" or your image name-->
<img src="images/dell.jpeg" alt="image1" />
<div>
<h3>Service 2</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
</p>
</div>
</div>
<div class="box">
<!-- here put your own image with proper url of src if you put image in folders the src="foldername/dell.jpeg" or your image name-->
<img src="images/dell.jpeg" alt="image1" />
<div>
<h3>Service 3</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
</p>
</div>
</div>
</div>
<br />
<div class="container">
<h2>Product Description
<p>
This column has different width
</p>
</h2>
<div class="row">
<div class="column1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s,
</div>
<div class="column2">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
survived not only five centuries,
</p>
</div>
<div class="column3">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
</p>
</div>
<div class="column4">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer_content">
<nav class="container footer_navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
</footer>
</body>
</html>
==============
gallery.html
=====================================================
gallery.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- title-->
<title>Gallery</title>
<!-- css file --->
<!--- first your create a folder css and put all css file with name main.css and responsive.css in it-->
<!--main css is main.css-->
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<!-- header start here -->
<header>
<div class="container">
<h1>Your Name</h1>
</div>
</header>
<!-- header end here -->
<!-- navigation start here -->
<div class="navigation">
<nav class="container">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<!-- navigation end here -->
<!-- banner section end here -->
<section class="banner">
<div>
<!-- you can set your on image here-->
<img src="images/contact-banner.jpg" alt="Gallery banner" />
</div>
</section>
<!-- section content top three box here -->
<section class="body_content gallery">
<div class="container ">
<!-- heading Gallery--->
<div class="heading">
<h3>Gallery</h3>
</div>
<div class="box">
<!-- here put your own image with proper url of src if you put image in folders the src="foldername/dell.jpeg" or your image name-->
<img src="images/dell.jpeg" alt="image1" />
<h2>Image 1</h2>
</div>
<div class="box">
<!-- here put your own image with proper url of src if you put image in folders the src="foldername/dell.jpeg" or your image name-->
<img src="images/dell.jpeg" alt="image2" />
<h2>Image 2</h2>
</div>
<div class="box">
<!-- here put your own image with proper url of src if you put image in folders the src="foldername/dell.jpeg" or your image name-->
<img src="images/dell.jpeg" alt="image3" />
<h2>Image 3</h2>
</div>
</div>
<div class="container ">
<div class="box">
<!-- here put your own image with proper url of src if you put image in folders the src="foldername/dell.jpeg" or your image name-->
<img src="images/dell.jpeg" alt="image4" />
<h2>Image 4</h2>
</div>
<div class="box">
<!-- here put your own image with proper url of src if you put image in folders the src="foldername/dell.jpeg" or your image name-->
<img src="images/dell.jpeg" alt="image5" />
<h2>Image 5</h2>
</div>
<div class="box">
<!-- here put your own image with proper url of src if you put image in folders the src="foldername/dell.jpeg" or your image name-->
<img src="images/dell.jpeg" alt="image6" />
<h2>Image 6</h2>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer_content">
<nav class="container footer_navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
</footer>
</body>
</html>
==============
contact.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- title-->
<title>Contact</title>
<!-- css file --->
<!--main css is main.css-->
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<!-- header start here -->
<header>
<div class="container">
<h1>Your Name</h1>
</div>
</header>
<!-- header end here -->
<!-- navigation start here -->
<div class="navigation">
<nav class="container">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<!-- navigation end here -->
<!-- banner section end here -->
<section class="banner">
<div>
<!-- you can set your on image here-->
<img src="images/contact-banner.jpg" alt="contact banner" />
</div>
</section>
<!-- section content top three box here -->
<section class="body_content">
<!-- Spacial project start here -->
<div class="container">
<!-- in this page we add multiple rows-->
<div class="row">
<div class="spacial_project">
<div class="content_box1">
<form method="#">
<div>
<div>
<h3>Send Query</h3>
<br />
</div>
<table width="100%">
<tr>
<td>
<!-- take input for name-->
<div class="row">
Name<br />
<input type="text" name="txtBoxName" class="txtbox" placeholder="Enter Name" />
</div>
</td>
</tr>
<tr>
<td>
<!-- take input for contact no-->
<div class="row">
Contact Number<br />
<input type="text" name="txtBoxNumber" class="txtbox" placeholder="Enter Contact Number" />
</div>
</td>
</tr>
<tr>
<td>
<!-- take input for email -->
<div class="row">
Email Id<br />
<input type="text" name="txtBoxEmail" class="txtbox" placeholder="Enter Email Id" />
</div>
</td>
</tr>
<tr>
<!--<td>Message</td>-->
<td>
<!-- take input for message-->
<div class="row">
Message<br />
<textarea name="txtAreaMessage" class="txtboxarea" placeholder="Enter message"></textarea>
</div>
</td>
</tr>
<tr>
<td>
<!-- button to submit data-->
<div class="row">
<input type="submit" value="Send Message" class="btn" />
</div>
</td>
</tr>
</table>
</div>
</form>
</div>
<div class="content_box2 reach_us">
<h3>Reach Us</h3>
<b>Address :</b>
<p>address here</p>
<b>Email :</b>
<p>email here</p>
<b>Contact Number :</b>
<p>Contact Number here</p>
<p>plese insert a data according to your needs</p>
</div>
</div>
</div>
</div>
<!-- Spacial project end here -->
</section>
<footer>
<div class="container">
<div class="footer_content">
<nav class="container footer_navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
</footer>
</body>
</html>
=====================================
main.css
/** import google font
of font family 'Open Sans', sans-serif
*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
padding:0;
margin:0;
background-color:#3f3f3f;
}
p
{
font-size:93%;
line-height:1.5em;
padding:0;
margin:0;
}
h1, h2, h3, h4, h5, h6
{
margin:0;
padding:0;
}
/*css for row*/
.row
{
width:99%;
padding:10px;
}
header
{
background-color:#E9E9E9;
padding:40px 0;
}
/* css for welcom text */
.welcome
{
margin:50px 30px;
text-align:center;
}
.welcome h3,h2
{
margin-bottom:20px;
}
/*main navigation css*/
.navigation
{
background-color:#d4d4d4 !important;
height:35px;
border-bottom:1px solid #bababa;
}
/*main navigation unorderlist css*/
.navigation ul
{
padding:0;
margin:0;
width:auto;
}
.navigation ul li
{
float:left;
text-align:left;
font-size:93%;
list-style:none;
width:auto !important;
padding:9px 15px;
border-right:1px solid #bababa;
}
.navigation ul li a
{
color:#3f3f3f;
text-decoration:none;
}
.navigation ul li a:visited,a:active,a:hover
{
color:#3f3f3f;
}
.navigation ul li:hover
{
color:#f1f1f1;
background-color:#151515;
transition:.8s linear;
border-right:1px solid #151515;
}
.navigation ul li:hover a
{
color:#f1f1f1;
}
.body_content
{
background-color:#fff;
padding:50px 0;
}
.spacial_project
{
padding:40px 30px;
}
.spacial_project .content_box1
{
width:65%;
display:inline-block;
}
.spacial_project .content_box2
{
width:30%;
display:inline-block;
padding:10px;
vertical-align:top;
}
.spacial_project .content_box2 .div_top
{
background-color:#9dd6f4;
margin-bottom:15px;
padding:10px;
}
.spacial_project .content_box2 .div_middle
{
background-color:#ecdb7f;
margin-bottom:15px;
padding:10px;
}
.spacial_project .content_box2 .div_bottom
{
background-color:#ecdb7f;
margin-bottom:15px;
padding:10px;
}
footer
{
background-color:#3f3f3f ;
}
footer .footer_content
{
text-align:center;
padding:15px 0;
color:#fff;
}
/*resume page*/
.heading
{
text-align:center;
padding:15px 0;
background-color:#E9E9E9;
margin:20px 0 40px 0;
}
/*contact page*/
.contact_form
{
}
/*css to set the textbox */
.txtbox
{
width:80%;
height:35px;
border:1px solid #bababa;
margin-bottom:20px;
padding-left:10px;
}
/*css for text box area on contact us page*/
.txtboxarea
{
width:80%;
height:80px;
border:1px solid #bababa;
margin-bottom:20px;
padding-left:10px;
}
/*css to set the button*/
.btn
{
background-color:#ff6a00;
color:#fff;
padding:10px;
width:250px;
text-align:center;
}
.reach_us h3,p
{
margin-bottom:8px;
}
/*css to set the banner image height and width*/
.banner img
{
height:300px !important;
width:100%;
}
/* about page table css*/
.tbl_about
{
width:100%;
margin-top:20px;
}
/* about page table head css*/
.tbl_about th
{
background-color:#3f3f3f;
color:#f1f1f1;
padding:5px;
}
/* about page table column css*/
.tbl_about tr td
{
background-color:#f1f1f1;
padding:5px;
}
/* css for services page with services class
set the margin bottom of h3 tag
*/
.services h3
{
margin-bottom:15px;
}
/* css for footer navigations*/
.footer_navigation ul
{
display:inline-block
}
.footer_navigation ul li
{
text-decoration:none;
list-style-type:none;
display:inline-block;
padding:0 15px;
}
.footer_navigation ul li a
{
text-decoration:none;
color:#f1f1f1;
float:left;
}
.footer_navigation ul li a:link
{
color: #f1f1f1;
}
.footer_navigation ul li a:hover
{
color: #ff6a00;
}
.footer_navigation ul li a:active
{
color:#0026ff;
}
/*--for page responsive css is responsive.css--*/
/*css for container*/
.container
{
width:90%;
margin:0 auto;
}
/*css for set column width*/
.one-third
{
width:47.5%;
}
.one-third-second
{
margin:0;
}
.one-third-last
{
float:none;
width:auto;
padding:20px 0 0 0;
}
/*css to set column width*/
.column
{
width:30%;
display:inline-block;
padding:10px;
text-align:center;
}
.column1
{
width:9%;
display:inline-block;
vertical-align:top;
padding:10px;
}
.column2
{
width:19%;
display:inline-block;
padding:10px;
}
.column3
{
width:26%;
display:inline-block;
vertical-align:top;
padding:10px;
}
.column4
{
width:36%;
display:inline-block;
vertical-align:top;
padding:10px;
}
/*css for navigation*/
.navigation ul li
{
width:25%;
}
/*css for box*/
.box
{
width:33%;
display:inline-block;
text-align:center;
}
/*css to set the css for screen size and make website responsive*/
@media only screen and (max-width:620)
{
.navigation ul li
{
width:33%;
}
}
@media only screen and (max-width:500)
{
.navigation ul li
{
width:50%;
font-size:85%;
}
}
Explanation / Answer
Below I have given some help regarding constructing photo gallery
And then Audio embedding inside web page
And last is the video embedding inside the webpage.
Hope it helps you.
<!-- Photo Gallery -->
<div class="galcontainer">
<h2>Photo Gallery</h2>
<div class="pagcontainer">
<!-- Following DIV Hides the Bottom Transition of Images overlapping the Pagination Thumbnail images. -->
<div id="background"></div>
<input name="thumb" id="imageid1"/>
<label for="imageid1">
<!-- specify the src for thumbnail image-->
<img src="https://www.pexels.com/photo/beach-beautiful-color-idyllic-358358/" alt="Image1"/>
</label>
<!-- specify the src for large image-->
<img src="images/bigimg/bigimg2.jpg/" alt="Image2">
<input name="thumb" id="imageid2" />
<label for="imageid2">
<img src="https://www.pexels.com/photo/cottage-near-sea-shore-1172518/" alt="Image2"/>
</label>
<img src="images/bigimg/bigimg2.jpg" alt="Image2">
<input name="thumb" id="imageid3" />
<label for="imageid3">
<img src="https://www.pexels.com/photo/scenic-view-of-beach-248797/" alt="Image3"/>
</label>
<img src="images/bigimg/bigimg3.jpg" alt="Image3">
</div>
</div>
<!-- Loading JavaScript Codes. -->
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
//
jQuery(document).ready(function ($) {
$('.pagcontainer>img').toggleClass('DefaultBigStyle1');
$('.pagcontainer label:nth-child(3)>img').trigger('click'); // This is to set initial Photo in the Frame.
$('.menu ul li').on('click',function(){
$('.menu ul li').removeClass();
$(this).addClass('menuSelected');
//index=$(this).data('pattern');
//console.log('Pattern : '+index+' is Selected..!!');
$('.pagcontainer>img').removeClass();
//$('.pagcontainer>img').addClass('DefaultBigStyle'+index); // Applying the CSS classes based on User's choice of transition styles.
});
$('.menu ul li:nth-child(1)').trigger('click');
});
</script>
<!--You can specify the audio file name in the src and it should be in mp3 format-->
<!-- controls attribute displays the controls of the audio-->
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<!-- If you want to broadcast your video you can use below code snippet-->
<video width="500" controls>
<source src="videofileName.mp4" type="video/mp4">
<!-- Need to specify the below line since for browsers that do not support html5 it can be displayed-->
Your browser does not support HTML5 video.
</video>
<!--Can play the youtube video in your webpage using iframe tag-->
<!--Specify the file source in src attribute -->
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.