index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<title>responsive</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/slider.css">
	<link rel="stylesheet" type="text/css" href="css/custom.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
	<div class="main-container">
	<div class="inner-container">
		<!-- head -->

	<header class="header">
		<div class="logo">
			<!-- logo -->
				<img src="cake/header.jpg">
		
		</div>
		<div class="menulist menulink">
			<!-- <h1>menu</h1> -->
			<ul id="menu">
							<li><a href="#">Home</a></li>
								<li><a href="#">About</a></li>
								<li><a href="#">Cakes</a></li>
								<li><a href="#">Services</a></li>
								<li><a href="#">News</a></li>
								<li><a href="#">Contact Us</a></li>
						</ul>

							<label id="navbar-icon">
			<i class="fa fa-list" aria-hidden="true" id="nav-icon"></i>
	</label>
		</div>
		

		<!-- <div class="icon">
			<i>icon</i>
		</div> -->

	</header></div>
	<nav class="navbar">
		<div id="dropdown">
			<ul class="dropmenu menulink">
							<li><a href="#">Home</a></li>
								<li><a href="#">About</a></li>
								<li><a href="#">Cakes</a></li>
								<li><a href="#">Services</a></li>
								<li><a href="#">News</a></li>
								<li><a href="#">Contact Us</a></li>
						</ul>

		</div>

	</nav>
	<div class="container">
	<main class="mainpart">
			<section>
		<!-- slider -->
		   <div id="slider" class="vslide">
		   	<figure>
      		
      		<img src="cake/slide1.jpg">

      		<img src="cake/slide4.jpg">
      		
      		<img src="cake/slide3.jpg">
      		<img src="cake/slide2.jpg">

      		<img src="cake/slide6.jpg">

	      </figure>
       
    </div>

	</section>


	<div class="mp4video-container">

		<div class="row">

			<div class="col paragraph">
				<h3>Order Fresh Cake</h3>
				<p>
					Cake is a form of sweet food made from flour, sugar, and other ingredients, that is usually baked. In their oldest forms, cakes were modifications of bread, but cakes now cover a wide range of preparations .
				</p>
				<p>
					A basic flour mixture serves as the foundation for sweet and rich cakes and what are known as little cakes, called cookies, and their savory cousins being quick-breads and yeast breads. Basic ingredients for made-from-scratch cake recipes often include flour, sweetener (sugar), fat (butter, vegetable oil), liquid (milk), leavening agent (steam, beaten eggs, baking powder and/or baking soda), and flavorings (salt, vanilla extract). Cakes can also be purchased ready-made or baked with packaged mixes that come ready to be combined with water, eggs and vegetable oil.  
				</p>
				<!-- <img src="cake/c2.jpg"> -->

			</div>
			<div class="col image">

				<div class="video-image">

					<div class="small-image">
						<img src="cake/c2.jpg">
						<i class="fa fa-play-circle play-icon video-icon fa-2x" id="play-icon" onclick="playvideo('cake/cake3.mp4')"></i>
					</div>
				</div>


			</div>
				<!-- <div class="clear"></div> -->
		</div>
	</div>
	<!-- <div class="player"> -->

		<div class="video-player" id="VideoPlayer">

		<video  width="100%" height="350px" controls>
			<source src="cake/cake3.mp4" type="video/mp4" id="CakeVideo">

		</video>
		<i class="fa fa-times-circle fa-2x close-btn" aria-hidden="true" onclick="Stopvideo()"></i>

	</div>

	
</div>

		
	</main>
</div>
	<footer class="footer">
		<div class="footer-row">
	<div class="footer-col  more">

		<h3>FIND OUT MORE</h3>
	<p> The Cake Shop was founded by a team of passionate and dedicated bakers who are committed in baking the most delicious cakes and pastries around</p>

	</div>
	<div class="footer-col  contact">

	<h3>Contact Us</h3>		
	<h5>Address</h5>
	<span class="out">DangeeDums Ltd, 4/A Ketan Society,<br> Opp. B.D. Patel House</span>
	<h5>phone</h5>
		<p class="out">+91-98980 88885</p>
	</div>
	<div class="footer-col">
		<h3>THE CAKE SHOP OUTLETS</h3>

		<h5>JCube</h5>

<span class="out">2 Jurong East Central 1 #B1-07
Singapore 609731</span>

<h5>The Seletar Mall</h5>

<span class="out">33 Sengkang West Avenue,<br> #02-13
Singapore 797653</span>
	</div>
	<div class="footer-col follow">
		<h3>FOLLOW US</h3>
		<div class="social-icon">
		<i class="fa fa-twitter fa-2x twitter"></i>
		<i class="fa fa-facebook-square fa-2x fb" aria-hidden="true"></i>
		<i class="fa fa-whatsapp fa-2x whatsapp" aria-hidden="true"></i>
	</div>
	</div>


	</footer>
	
	
</div>
</div>


</body>
</html>
<script type="text/javascript" src="js/res.js"></script>
<script type="text/javascript">
	
	$(document).ready(function(){

		$('#nav-icon').click(function(){
			$('#dropdown').toggle();
		});
		
	});
	

</script>