MohammadTaseenKhan/index.html

## index.html
<!Doctype html>
<html>
	<head>
		<meta charset="width=device-width,initial-scale=1"/>
		<link rel="stylesheet" href="2nd wibpage.css"/>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
	</head>
	<body>
	<div class="hero">

		<!--Nav bar code-->
		<nav id="navBar">
			<div id="icon_div"><i class="fa fa-ravelry" aria-hidden="true" id="icon"></i><span id="RA">RA</span><span id="mylogo">R</span>
			</div>
			<!--Manu bar code-->
			<div id="manu">
				<ul>
					<li>HOME</li>
					<li>ABOUT</li>
					<li>RECIPE</li>
				</ul>
			</div>
			<!--Manu bar code end-->

			<!--button code-->
			<button id="button" title="Click for sign up"">SIGN UP</button>
			<!--button code end-->
		</nav>

		<!--baner code-->
		<div id="benner">
			<h1>Food <span id="baner_span">doesn't have<br/>a religion.</span> It is a religion</h1>
			<button id="button_2">EXPLORE</button>
		</div>
		<!--baner code end-->

		<!--vertical-bar code-->
		<i class="fa fa-bars" id="show_vertical"></i>
		<div id="vertical-bar">
			<div id="search-icon">
				<i class="fa fa-close" id="close_vertical"></i>
				<i class="fa fa-search"></i>
			</div>
			<div id="social-icon">
				<i class="fa fa-facebook"></i>
				<i class="fa fa-instagram"></i>
				<i class="fa fa-twitter"></i>
				<i class="fa fa-pinterest"></i>
			</div>
		</div>
		<!--vertical-bar code end-->

		<!--signup-slide code-->
		<div id="signup_slide">
			<i class="fa fa-close" id="close_slide"></i>

			<h2><i class="fa fa-user-o"></i>SIGN UP</h2>
			<div id="underline"></div>
			<h3  id="email" ><i class="fa fa-user"></i> Email Address</h3>
			<input id="input" type="text"/>
			<h3 id="password"><i class="fa fa-lock"></i>Password</h3>
			<input id="input_2" type="password"/>
			<button id="login">LOG IN</button>
		</div>
		<!--signup-slide code end-->

		<!-- 2nd webpage start -->
				<div class="AN_page">
					<a class="A_tag" href="file:///C:/Users/HP/Desktop/Webdisign/@@THIMPLATE@@/MY%20WIBPAGE/3rd%20Webpage/bootstrap%20design.html" target="_blank">
					3rd webpage</a>
				</div>

				<div class="page_hover page">
					<i class="fa fa-cog AN_btn" ></i>

				</div>
				<!-- 2nd webpage end -->

	</div>

	<script type="text/javascript" >
		document.querySelector("#button").addEventListener("click",show);
		function show(){
		document.getElementById("signup_slide").setAttribute("style","opacity:1;transform:scaleX(1)");
		};

		document.querySelector("#close_slide").addEventListener("click",close);
		function close(){
		document.getElementById("signup_slide").setAttribute("style","opacity:0;transform:scaleX(0)");
		}

		document.querySelector("#show_vertical").addEventListener("click",verticalShow);
		function verticalShow(){
		document.getElementById("vertical-bar").setAttribute("style","opacity:1;transform:scaleX(1)");
		}

		document.querySelector("#close_vertical").addEventListener("click",verticalClose);
		function verticalClose(){
		document.getElementById("vertical-bar").setAttribute("style","opacity:0;transform:scaleX(0)");
		}

			<!-- new page open -->

				document.querySelector(".page").addEventListener("click",function(){
					if(document.querySelector(".page").classList.contains("page_hover")){
						document.querySelector(".page").classList.remove("page_hover");
						document.querySelector(".page").classList.add("page_hover_2");
						document.querySelector(".AN_page").setAttribute("style","transform:scaleX(1)");


					}else if(document.querySelector(".page").classList.contains("page_hover_2")){
						document.querySelector(".page").classList.remove("page_hover_2");
						document.querySelector(".page").classList.add("page_hover");
						document.querySelector(".AN_page").setAttribute("style","transform:scaleX(0)");
					}
				});

				<!-- new page end -->

	</script>
	</body>
</html>

## kkqmgny.markdown

      
    Raw
  

              kkqmgny.markdown
            
          
    KKqMgNY

A Pen by Rasel Ahommed Rana on CodePen.
License.

  
## style.css
*{
	margin:0;
	padding:0;
	font-family:sans-serif;
}
.hero{
	height:100vh;
	background:linear-gradient(rgba(0, 0, 0, 0.8),rgba(12, 12, 12, 0.8)),url(1592889948304.jpg);
	background-size:cover;
	position:relative;
}
#icon_div{
	float:left;
}
#RA{
    font-family: Colonna MT;
    color: #10ff00;
    font-size: 36px;
	margin-left: 5px;
}
#mylogo{
	color: red;
    font-family: arial black;
    font-size: 22px;
}
#icon{
	font-size: 26px;
    margin-top: 24px;
    margin-left: 116px;
    color: #fff702;
}
#manu{
	margin:27px 212px;
	color:white;
	flex:1;
	position:absolute;
}
#manu ul{
	display:inline-flex;
	margin-left: 100px;
}
#manu ul li{
	padding: 0px 20px;
	list-style:none;
	letter-spacing:3px;
	cursor:pointer;
}
#manu ul li:after{
	content:'';
	width:0;
	height:2px;
	display:block;
	background:yellow;
	margin:auto;
	transition:.4s;
}
#manu ul li:hover:after{
	width:100%;
}
#button{
	padding: 10px 20px;
    float: right;
    margin-top: 25px;
    margin-right: 115px;
    background: yellow;
    border: 0;
    font-weight: bold;
	cursor:pointer;
	border-radius: 3px;
}
#button:hover{
	color: #ff2300;
}
#benner{
	position: absolute;
    top: 180px;
    left: 116px;
}
#benner h1{
    color: white;
	font-size:50px;
	margin-bottom:50px;
}
#button_2{
	padding: 10px 20px;
    background: yellow;
    border: 0;
    font-weight: bold;
	cursor:pointer;
	border-radius: 3px;
}
#button_2:hover{
	color: #ff2300;
}
#baner_span{
	color:yellow;
}
.fa-bars{
	color:#fff;
	position: absolute;
    left: 15px;
    top: 24px;
	cursor:pointer;
}
.fa-bars:hover{
	color:#de4545;
}
#show_vertical{
	font-size:26px;
}
#vertical-bar{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
	background: #000;
	transition:all .5s;
	transform:scaleX(0);
	transform-origin:left;
	opacity:0;
}
#search-icon{
	height:60%;
	width:80px;
}
#search-icon .fa{
	margin:27px 23px;
	display:block;
	color:white;
	font-size:30px;
	cursor:pointer;
}
#search-icon .fa:hover{
	color:#de4545;
}
#social-icon{
	height:229px;
	width:80px;
	background:yellow;
	text-align:center;
	padding-top:27%;
	bottom:0;
	position:absolute;
}
#social-icon .fa{
	margin:15px 23px;
	display:block;
	padding:8px;
	cursor:pointer;
	border:1px solid black;
	border-radius:100%;
}
#social-icon .fa:hover{
	border:1px solid red;
	color:red;
}
#signup_slide{
	width: 264px;
    height: 100%;
    background: black;
    position: absolute;
    left: 79%;
	transition:all .5s;
	transform:scaleX(0);
	transform-origin:right;
	opacity:0;
}
#signup_slide .fa-close{
	font-size: 26px;
    margin: 7px 10px;
	color: #fff;
	cursor:pointer;
}
#signup_slide .fa-close:hover{
	color:#de4545;
}
#signup_slide h2{
	color: yellow;
    position: absolute;
    top: 14%;
    left: 27%;
}
.fa-user-o{
	color: yellow;
    margin-right: 10px;
}
#underline{
	background:yellow;
	height:4px;
	margin-top: 77px;
}
#email{
	color: white;
    position: absolute;
    top: 30%;
    left: 25px;
}
.fa-user{
	color:white;
	margin-right:5px;
}
#input{
	position: absolute;
    top: 35%;
    left: 25px;
    width: 77%;
    padding: 7px;
    border: none;
    border-radius: 5px;
}
#password{
	color: white;
    position: absolute;
    top: 45%;
    left: 25px;
}
.fa-lock{
	margin-right:10px;
}
#input_2{
	position: absolute;
    top: 50%;
    left: 25px;
    width: 77%;
    padding: 7px;
    border: none;
    border-radius: 5px;
}
#login{
    padding: 13px 20px;
    background: yellow;
    border: 0;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    position: absolute;
    width: 184px;
    top: 65%;
    left: 16%;
    font-size: 16px;
}
#login:hover{
	color:red;
}
@media(max-width:700px){
	#icon{
	font-size: 26px;
    margin-top: 24px;
    margin-left: 61px;
    color: #fff702;
	}
	#manu{
	margin:27px 212px;
	color:white;
	flex:1;
	position:absolute;
	}
	#manu ul{
	display:inline-flex;
	margin-left: -33px;
	}
	#manu ul li{
	padding: 0px 9px;
	list-style:none;
	letter-spacing:none;
	cursor:pointer;
	font-size:13px;
	}
	#button{
	position:absolute;
	padding: 10px 25px;
    float: none;
    top: 70%;
    left: 12%;
	cursor:pointer;
	}
	#benner{
	position: absolute;
    top: 150px;
    left: 61px;
	float:left;
	}
	#benner h1{
	font-size:40px;
	}
	#signup_slide{
	width: 240px;
    height: 100%;
    background: black;
    position: absolute;
    left: 52%;
	transition:all .5s;
	transform:scaleX(0);
	transform-origin:right;
	opacity:0;
	}
	#signup_slide .fa-close{
	font-size: 20px;
    margin: 7px 10px;
	color: #fff;
	cursor:pointer;
	}
}

/* new page opan start */

.AN_page {
    width: 76px;
    height: 50px;
    background: yellow;
    margin-top: 64px;
    transition: all 1s;
    transform: scaleX(0);
    transform-origin: right;
    position: absolute;
    right: 0;
    top: 40%;
}

.page_hover {
	width: 30px;
    height: 50px;
    background: #333;
    position: absolute;
    right: 0%;
	top:40%;
    margin-top: 64px;
    border-radius: 5px 0px 0px 5px;
	cursor:pointer;
	transition:all 1s;
}

.page_hover_2 {
    width: 30px;
    height: 50px;
    background: #656262;
    position: absolute;
    right: 6%;
    top: 40%;
    margin-top: 64px;
    border-radius: 5px 0px 0px 5px;
    cursor: pointer;
    transition: all 1s;
}

i.fa.fa-cog {
    color: #fff;
    font-size: 25px;
    padding: 13px 4px;
}
a.A_tag {
	position: absolute;
    top: 14%;
    left: 14%;
    text-decoration: none;
    font-size: 12px;
    color: black;
    text-align: center;
    font-family: arial black;
}
/* new page opan end */
	<!Doctype html>
	<html>
	<head>
	<meta charset="width=device-width,initial-scale=1"/>
	<link rel="stylesheet" href="2nd wibpage.css"/>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
	</head>
	<body>
	<div class="hero">

	<!--Nav bar code-->
	<nav id="navBar">
	<div id="icon_div"><i class="fa fa-ravelry" aria-hidden="true" id="icon"></i><span id="RA">RA</span><span id="mylogo">R</span>
	</div>
	<!--Manu bar code-->
	<div id="manu">
	<ul>
	<li>HOME</li>
	<li>ABOUT</li>
	<li>RECIPE</li>
	</ul>
	</div>
	<!--Manu bar code end-->

	<!--button code-->
	<button id="button" title="Click for sign up"">SIGN UP</button>
	<!--button code end-->
	</nav>

	<!--baner code-->
	<div id="benner">
	<h1>Food <span id="baner_span">doesn't have<br/>a religion.</span> It is a religion</h1>
	<button id="button_2">EXPLORE</button>
	</div>
	<!--baner code end-->

	<!--vertical-bar code-->
	<i class="fa fa-bars" id="show_vertical"></i>
	<div id="vertical-bar">
	<div id="search-icon">
	<i class="fa fa-close" id="close_vertical"></i>
	<i class="fa fa-search"></i>
	</div>
	<div id="social-icon">
	<i class="fa fa-facebook"></i>
	<i class="fa fa-instagram"></i>
	<i class="fa fa-twitter"></i>
	<i class="fa fa-pinterest"></i>
	</div>
	</div>
	<!--vertical-bar code end-->

	<!--signup-slide code-->
	<div id="signup_slide">
	<i class="fa fa-close" id="close_slide"></i>

	<h2><i class="fa fa-user-o"></i>SIGN UP</h2>
	<div id="underline"></div>
	<h3 id="email" ><i class="fa fa-user"></i> Email Address</h3>
	<input id="input" type="text"/>
	<h3 id="password"><i class="fa fa-lock"></i>Password</h3>
	<input id="input_2" type="password"/>
	<button id="login">LOG IN</button>
	</div>
	<!--signup-slide code end-->

	<!-- 2nd webpage start -->
	<div class="AN_page">
	<a class="A_tag" href="file:///C:/Users/HP/Desktop/Webdisign/@@THIMPLATE@@/MY%20WIBPAGE/3rd%20Webpage/bootstrap%20design.html" target="_blank">
	3rd webpage</a>
	</div>

	<div class="page_hover page">
	<i class="fa fa-cog AN_btn" ></i>

	</div>
	<!-- 2nd webpage end -->

	</div>

	<script type="text/javascript" >
	document.querySelector("#button").addEventListener("click",show);
	function show(){
	document.getElementById("signup_slide").setAttribute("style","opacity:1;transform:scaleX(1)");
	};

	document.querySelector("#close_slide").addEventListener("click",close);
	function close(){
	document.getElementById("signup_slide").setAttribute("style","opacity:0;transform:scaleX(0)");
	}

	document.querySelector("#show_vertical").addEventListener("click",verticalShow);
	function verticalShow(){
	document.getElementById("vertical-bar").setAttribute("style","opacity:1;transform:scaleX(1)");
	}

	document.querySelector("#close_vertical").addEventListener("click",verticalClose);
	function verticalClose(){
	document.getElementById("vertical-bar").setAttribute("style","opacity:0;transform:scaleX(0)");
	}

	<!-- new page open -->

	document.querySelector(".page").addEventListener("click",function(){
	if(document.querySelector(".page").classList.contains("page_hover")){
	document.querySelector(".page").classList.remove("page_hover");
	document.querySelector(".page").classList.add("page_hover_2");
	document.querySelector(".AN_page").setAttribute("style","transform:scaleX(1)");


	}else if(document.querySelector(".page").classList.contains("page_hover_2")){
	document.querySelector(".page").classList.remove("page_hover_2");
	document.querySelector(".page").classList.add("page_hover");
	document.querySelector(".AN_page").setAttribute("style","transform:scaleX(0)");
	}
	});

	<!-- new page end -->

	</script>
	</body>
	</html>
	*{
	margin:0;
	padding:0;
	font-family:sans-serif;
	}
	.hero{
	height:100vh;
	background:linear-gradient(rgba(0, 0, 0, 0.8),rgba(12, 12, 12, 0.8)),url(1592889948304.jpg);
	background-size:cover;
	position:relative;
	}
	#icon_div{
	float:left;
	}
	#RA{
	font-family: Colonna MT;
	color: #10ff00;
	font-size: 36px;
	margin-left: 5px;
	}
	#mylogo{
	color: red;
	font-family: arial black;
	font-size: 22px;
	}
	#icon{
	font-size: 26px;
	margin-top: 24px;
	margin-left: 116px;
	color: #fff702;
	}
	#manu{
	margin:27px 212px;
	color:white;
	flex:1;
	position:absolute;
	}
	#manu ul{
	display:inline-flex;
	margin-left: 100px;
	}
	#manu ul li{
	padding: 0px 20px;
	list-style:none;
	letter-spacing:3px;
	cursor:pointer;
	}
	#manu ul li:after{
	content:'';
	width:0;
	height:2px;
	display:block;
	background:yellow;
	margin:auto;
	transition:.4s;
	}
	#manu ul li:hover:after{
	width:100%;
	}
	#button{
	padding: 10px 20px;
	float: right;
	margin-top: 25px;
	margin-right: 115px;
	background: yellow;
	border: 0;
	font-weight: bold;
	cursor:pointer;
	border-radius: 3px;
	}
	#button:hover{
	color: #ff2300;
	}
	#benner{
	position: absolute;
	top: 180px;
	left: 116px;
	}
	#benner h1{
	color: white;
	font-size:50px;
	margin-bottom:50px;
	}
	#button_2{
	padding: 10px 20px;
	background: yellow;
	border: 0;
	font-weight: bold;
	cursor:pointer;
	border-radius: 3px;
	}
	#button_2:hover{
	color: #ff2300;
	}
	#baner_span{
	color:yellow;
	}
	.fa-bars{
	color:#fff;
	position: absolute;
	left: 15px;
	top: 24px;
	cursor:pointer;
	}
	.fa-bars:hover{
	color:#de4545;
	}
	#show_vertical{
	font-size:26px;
	}
	#vertical-bar{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: #000;
	transition:all .5s;
	transform:scaleX(0);
	transform-origin:left;
	opacity:0;
	}
	#search-icon{
	height:60%;
	width:80px;
	}
	#search-icon .fa{
	margin:27px 23px;
	display:block;
	color:white;
	font-size:30px;
	cursor:pointer;
	}
	#search-icon .fa:hover{
	color:#de4545;
	}
	#social-icon{
	height:229px;
	width:80px;
	background:yellow;
	text-align:center;
	padding-top:27%;
	bottom:0;
	position:absolute;
	}
	#social-icon .fa{
	margin:15px 23px;
	display:block;
	padding:8px;
	cursor:pointer;
	border:1px solid black;
	border-radius:100%;
	}
	#social-icon .fa:hover{
	border:1px solid red;
	color:red;
	}
	#signup_slide{
	width: 264px;
	height: 100%;
	background: black;
	position: absolute;
	left: 79%;
	transition:all .5s;
	transform:scaleX(0);
	transform-origin:right;
	opacity:0;
	}
	#signup_slide .fa-close{
	font-size: 26px;
	margin: 7px 10px;
	color: #fff;
	cursor:pointer;
	}
	#signup_slide .fa-close:hover{
	color:#de4545;
	}
	#signup_slide h2{
	color: yellow;
	position: absolute;
	top: 14%;
	left: 27%;
	}
	.fa-user-o{
	color: yellow;
	margin-right: 10px;
	}
	#underline{
	background:yellow;
	height:4px;
	margin-top: 77px;
	}
	#email{
	color: white;
	position: absolute;
	top: 30%;
	left: 25px;
	}
	.fa-user{
	color:white;
	margin-right:5px;
	}
	#input{
	position: absolute;
	top: 35%;
	left: 25px;
	width: 77%;
	padding: 7px;
	border: none;
	border-radius: 5px;
	}
	#password{
	color: white;
	position: absolute;
	top: 45%;
	left: 25px;
	}
	.fa-lock{
	margin-right:10px;
	}
	#input_2{
	position: absolute;
	top: 50%;
	left: 25px;
	width: 77%;
	padding: 7px;
	border: none;
	border-radius: 5px;
	}
	#login{
	padding: 13px 20px;
	background: yellow;
	border: 0;
	font-weight: bold;
	cursor: pointer;
	border-radius: 8px;
	position: absolute;
	width: 184px;
	top: 65%;
	left: 16%;
	font-size: 16px;
	}
	#login:hover{
	color:red;
	}
	@media(max-width:700px){
	#icon{
	font-size: 26px;
	margin-top: 24px;
	margin-left: 61px;
	color: #fff702;
	}
	#manu{
	margin:27px 212px;
	color:white;
	flex:1;
	position:absolute;
	}
	#manu ul{
	display:inline-flex;
	margin-left: -33px;
	}
	#manu ul li{
	padding: 0px 9px;
	list-style:none;
	letter-spacing:none;
	cursor:pointer;
	font-size:13px;
	}
	#button{
	position:absolute;
	padding: 10px 25px;
	float: none;
	top: 70%;
	left: 12%;
	cursor:pointer;
	}
	#benner{
	position: absolute;
	top: 150px;
	left: 61px;
	float:left;
	}
	#benner h1{
	font-size:40px;
	}
	#signup_slide{
	width: 240px;
	height: 100%;
	background: black;
	position: absolute;
	left: 52%;
	transition:all .5s;
	transform:scaleX(0);
	transform-origin:right;
	opacity:0;
	}
	#signup_slide .fa-close{
	font-size: 20px;
	margin: 7px 10px;
	color: #fff;
	cursor:pointer;
	}
	}

	/* new page opan start */

	.AN_page {
	width: 76px;
	height: 50px;
	background: yellow;
	margin-top: 64px;
	transition: all 1s;
	transform: scaleX(0);
	transform-origin: right;
	position: absolute;
	right: 0;
	top: 40%;
	}

	.page_hover {
	width: 30px;
	height: 50px;
	background: #333;
	position: absolute;
	right: 0%;
	top:40%;
	margin-top: 64px;
	border-radius: 5px 0px 0px 5px;
	cursor:pointer;
	transition:all 1s;
	}

	.page_hover_2 {
	width: 30px;
	height: 50px;
	background: #656262;
	position: absolute;
	right: 6%;
	top: 40%;
	margin-top: 64px;
	border-radius: 5px 0px 0px 5px;
	cursor: pointer;
	transition: all 1s;
	}

	i.fa.fa-cog {
	color: #fff;
	font-size: 25px;
	padding: 13px 4px;
	}
	a.A_tag {
	position: absolute;
	top: 14%;
	left: 14%;
	text-decoration: none;
	font-size: 12px;
	color: black;
	text-align: center;
	font-family: arial black;
	}
	/* new page opan end */