Web Development

Friday, November 13, 2020

DRAG AND DROP TUTORIAL

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Drag and drop</title>
	<style>
	body{
	background-color: red;
	}
	.header h1{
	text-align: center;
	color: white;
	background-color: black;
	border-radius: 10px;
	padding: 5px;
	}
	.header p{
	text-align: center;
	color: rgb(219, 139, 33);
	background-color: rgb(100, 9, 70);
	border-radius: 10px;
	padding: 5px;
	font-size: 20px;
	}

	.boxes{
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	}

	.imgBox{
	background: url('profile1.jpg');
	background-size: cover;
	position: relative;
	top: 0px;
	left: 0px;
	height: 155px;
	width: 155px;
	cursor: pointer;

	}

	.whiteBox{
	display: inline-block;
	height: 155px;
	width: 155px;
	background-color: yellow;
	margin: 10px;
	border: 2px solid black;
	border-radius: 3px;
	}

	/* utility classes */
	.hold{
	border: 4px solid red;
	}

	.hide{
	display: none;
	}
	</style>
	</head>
	<body>
	<div class="header">
	<h1>Making Drag and Drop</h1>
	<p>Please use the mouse to drag and drop the image</p>

	</div>
	<div class="boxes">

	<div class="whiteBox">
	<div class="imgBox" draggable="true"></div>
	</div>
	<div class="whiteBox"></div>
	<div class="whiteBox"></div>
	<div class="whiteBox"></div>
	</div>
	<script>
	const imgBox = document.querySelector('.imgBox'),
	whiteBox = document.getElementsByClassName('whiteBox')

	imgBox.addEventListener('dragstart',(e)=>{
	e.target.className += ' hold'
	setTimeout(()=>{
	e.target.className = 'hide'
	},0)
	})

	imgBox.addEventListener('dragend',(e)=>{
	e.target.className = 'imgBox'
	})

	//for of loop
	for(items of whiteBox){
	items.addEventListener('dragover',(e)=>{
	e.preventDefault();
	})
	items.addEventListener('dragenter',(e)=>{
	// e.preventDefault();
	})
	items.addEventListener('dragleave',(e)=>{
	// e.preventDefault();
	})
	items.addEventListener('drop',(e)=>{
	// e.preventDefault();
	e.target.append(imgBox)
	//using this step and drop event listener
	// we can drop the image from one box to another
	})

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

Tuesday, November 10, 2020

IMAGE ANIMATION TUTORIAL

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Image animations</title>
	<style>
	*{
	box-sizing: border-box;
	}
	body{
	background-color: rgb(247, 206, 206);
	}
	.main-container{
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;
	}

	.main-container h1{
	color: rgb(37, 3, 100);
	font-weight: bold;
	background-color: yellow;
	padding: 5px;
	border-radius: 10px;
	}

	.main-container p{
	color: rgb(8, 179, 8);
	font-size: 20px;
	font-weight: bold;
	}

	.main-container .buttons{
	width: 500px;
	display: flex;
	justify-content: space-around;
	}

	.btn{
	padding: 5px;
	background-color: purple;
	color: white;
	width: 250px;
	font-size: 20px;
	border-radius: 6px;
	outline: none;
	margin: 10px;
	cursor: pointer;
	}

	img{
	border: 5px solid yellow;
	border-radius: 10px;
	height: 400px;
	margin: 10px;
	}

	span{
	color: red;
	}

	.animate1{
	animation: flip 1s infinite;
	}
	.animate2{
	animation: shake 2s infinite;
	}

	@keyframes flip{
	0%{
	transform: rotateY(0deg);
	}
	10%{
	transform: rotateY(36deg);
	}
	20%{
	transform: rotateY(72deg);
	}
	30%{
	transform: rotateY(108deg);
	}
	40%{
	transform: rotateY(144deg);
	}
	50%{
	transform: rotateY(180deg);
	}
	60%{
	transform: rotateY(216deg);
	}
	70%{
	transform: rotateY(252deg);
	}
	80%{
	transform: rotateY(288deg);
	}
	90%{
	transform: rotateY(324deg);
	}
	100%{
	transform: rotateY(360deg);
	}
	}
	@keyframes shake{
	0%{
	transform: rotate(1deg) translate(1px,1px);
	}
	10%{
	transform: rotate(0deg) translate(-1px,3px);
	}
	20%{
	transform: rotate(-1deg) translate(3px,1px);
	}
	30%{
	transform: rotate(3deg) translate(-1px,-1px);
	}
	40%{
	transform: rotate(1deg) translate(-1px,-3px);
	}
	50%{
	transform: rotate(-1deg) translate(3px,1px);
	}
	60%{
	transform: rotate(0deg) translate(1px,-3px);
	}
	70%{
	transform: rotate(3deg) translate(3px,-1px);
	}
	80%{
	transform: rotate(-1deg) translate(1px,-1px);
	}
	90%{
	transform: rotate(1deg) translate(3px,-3px);
	}
	100%{
	transform: rotate(0deg) translate(0px,0px);
	}
	}

	</style>
	</head>
	<body>
	<div class="main-container">
	<h1> <span> Sync Programming</span> Image animations</h1>
	<p>Click on the below buttons to see the respective animation</p>
	<div class="buttons">
	<button class="btn" onclick="flip()">Flip image</button>
	<button class="btn" onclick="shake()">Shake image</button>

	</div>
	<div class="img-container">
	<img src="dance2.jpg" alt="" id="img">
	</div>
	</div>
	<script>
	var img = document.getElementById('img');

	function flip(){
	img.classList.toggle('animate1')
	}

	function shake(){
	img.classList.toggle('animate2')

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

Sunday, November 8, 2020

IMAGE GRID TUTORAL

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Image Grid</title>
	<style>
	*{
	box-sizing: border-box;
	}
	body{
	margin: 0%;
	background-color: black;
	}
	.header{
	text-align: center;
	padding: 32px;
	color: rgb(119, 235, 119);
	}
	.row{
	display: flex;
	flex-wrap: wrap;
	padding: 0px 4px;
	height: 1000px;
	width: 1000px;
	margin-left: 270px;
	}
	.column{
	flex: 50%;
	padding: 0px 4px;
	}
	.column img{
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;

	}

	.btn{
	background-color: orange;
	width: 200px;
	margin: 10px;
	padding: 5px;
	font-size: 20px;
	border-radius: 10px;
	outline: none;
	cursor: pointer;
	}
	.btn:hover{
	background-color: purple;
	color: white;
	}
	</style>
	</head>
	<body>
	<div class="header" id="myheader">
	<h1>Sync Programming Image grid Tutorial</h1>
	<p>Click on the below buttons to view different grids</p>
	<button class="btn" onclick="one()">1</button>
	<button class="btn" onclick="two()">2</button>
	<button class="btn" onclick="three()">3</button>
	<button class="btn" onclick="four()">4</button>
	</div>

	<div class="row">
	<div class="column">
	<img src="Images/hulk vs hulkbuster.jpg" alt="">
	<img src="Images/background.png" alt="">
	<img src="Images/beautiful image bg.jpg" alt="">
	<img src="Images/dance2.jpg" alt="">
	</div>
	<div class="column">
	<img src="Images/greek mythology.jpg" alt="">
	<img src="Images/background.png" alt="">
	<img src="Images/hulk vs hulkbuster.jpg image bg.jpg" alt="">
	<img src="Images/dance2.jpg" alt="">
	</div>
	<div class="column">
	<img src="Images/back5.jpg" alt="">
	<img src="Images/light background.jpg" alt="">
	<img src="Images/beautiful image bg.jpg" alt="">
	<img src="Images/meteor js.jpg" alt="">
	</div>
	<div class="column">
	<img src="Images/hulk vs hulkbuster.jpg" alt="">
	<img src="Images/node js.png" alt="">
	<img src="Images/node js.png" alt="">
	<img src="Images/background.png" alt="">
	</div>
	</div>
	<script>
	var images = document.getElementsByClassName('column')
	function one(){
	Array.from(images).forEach(image=>{
	image.style.flex = '100%'
	})
	}
	function two(){
	Array.from(images).forEach(image=>{
	image.style.flex = '50%'
	})
	}
	function three(){
	Array.from(images).forEach(image=>{
	image.style.flex = '33%'
	})
	}
	function four(){
	Array.from(images).forEach(image=>{
	image.style.flex = '25%'
	})
	}
	</script>
	</body>
	</html>

Friday, November 6, 2020

POPUP MODAL TUTORIAL

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>syncprogramming.com</title>
	<link rel="stylesheet" href="style.css">
	<style>
	.modal{
	display: none;
	text-align: center;
	position: fixed;
	z-index: 1;
	top: 200px;
	left: 300px;
	height: 330px;
	width: 60%;
	animation: fadein 0.5s;
	}

	.modal span{
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 40px;
	cursor: pointer;
	animation: fadeout 0.5s;
	}

	.modal-header{
	margin-top: 10px;
	height: 180px;
	background-color: black;
	color: white;
	display: grid;
	place-items: center;
	animation: slide 0.5s;
	}

	.modal-content{
	color: white;
	background-color: purple;
	padding: 10px;
	height: 120px;
	animation: slide 0.5s;
	}

	@keyframes fadein{
	from{
	top: -300px;
	opacity: 0;
	}
	to{
	top: 200px;
	opacity: 1;
	}
	}
	@keyframes slide{
	from{
	/* top: -300px; */
	opacity: 0;
	}
	to{
	/* top: 200px; */
	opacity: 1;
	}
	}
	@keyframes fadeout{
	from{
	top: 200px;
	opacity: 1;
	}
	to{
	top: -300px;
	opacity: 0;
	}
	}

	.active{
	filter: blur(50px);
	pointer-events: none;
	user-select: none;
	}


	</style>

	</head>
	<body>
	<div class="con">

	<nav class="navbar" id="navbar">
	<ul>
	<li><a href="">Home</a></li>
	<li><a href="">Contact us</a></li>
	<li><a href="">Services</a></li>
	<li><a href="">About us</a></li>
	<li><a href="">Our Clients</a></li>
	</ul>

	<div class="searchbar">
	<input type="text" placeholder="SEARCH" style="text-align: center;">
	</div>
	</nav>



	<div class="main-container" id="main">
	<div class="header">
	<h1>Welcome to Sync Programming</h1>
	<p style="text-align: center;">Start your own Career</p>
	</div>
	<div class="header-button">
	<button class="getStarted" id="getStarted">Get Started</button>
	</div>
	</div>


	<div class="modal" id="modal">
	<span style="color: white;" id="close">×</span>
	<div class="modal-header">
	<h2>Hey There,welcome to Sync Programming</h2>
	</div>
	<div class="modal-content">
	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga hic nostrum, eum, eligendi at impedit esse repellendus laboriosam nam molestias id perferendis? Obcaecati similique quas provident hic autem officia labore minus consectetur magnam, et repudiandae totam laudantium quibusdam quisquam odio aspernatur assumenda esse. Sit molestiae voluptates quis numquam sed reprehenderit est magni error cumque, delectus ipsum natus corrupti autem, facere alias velit voluptas sapiente soluta exercitationem maxime ut ducimus voluptatem.</p>

	</div>
	</div>

	<script>
	var modal = document.getElementById('modal')
	var button = document.getElementById('getStarted')
	button.addEventListener('click',popup)
	function popup(){
	modal.style.display = 'block'
	document.getElementById('main').classList.toggle('active')
	document.getElementById('navbar').classList.toggle('active')
	}

	var closed = document.getElementById('close').addEventListener('click',()=>{
	modal.style.display = 'none'
	document.getElementById('main').classList.toggle('active')
	document.getElementById('navbar').classList.toggle('active')

	})


	</script>


	</body>
	</html>

Tuesday, November 3, 2020

Curtain Menu Tutorial

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>curtain Menu</title>
	<style>
	body{
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	background: url('back5.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-color: black;
	background-position: center;
	color: white;
	}

	.overlay{
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: rgb(207, 40, 40,0.9);
	overflow: hidden;
	transition: 0.5s;

	}

	.overlay a{
	padding: 8px;
	text-decoration: none;
	color: white;
	display: block;
	transition: 0.3s;
	}

	.overlay a:hover,.overlay a:focus{
	color: greenyellow;
	}

	.overlay-content{
	position: relative;
	top: 15%;
	width: 100%;
	text-align: center;
	margin-top: 30px;
	font-size: 30px;
	}

	.overlay .closeBtn{
	position: absolute;
	top: 2px;
	right: 10px;
	font-size: 50px;
	}
	</style>
	</head>
	<body>
	<div class="overlay" id="myNav">
	<a href="" class="closeBtn" onclick="closeBtn()">×</a>
	<div class="overlay-content">
	<a href="">About</a>
	<a href="">Services</a>
	<a href="">Clients</a>
	<a href="">Contact</a>
	</div>
	</div>

	<span style="cursor: pointer; font-size: 20px; font-weight: bold; padding: 20px;" onclick="openNav()">&#9776</span>
	<h2>Welcomet to sync Programming</h2>
	<p>Making a curtain menu</p>

	<script>
	function openNav(){
	document.getElementById('myNav').style.width = '100%'
	}

	function closeNav(){
	document.getElementById('myNav').style.width = '0%'
	}
	</script>
	</body>
	</html>

Sunday, November 1, 2020

DROPDOWN USING HTML CSS AND JS

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	body{
	background-color: black;
	}
	.navbar{
	overflow: hidden;
	background-color: red;
	font-family: Arial, Helvetica, sans-serif;
	}
	.navbar a{
	float: left;
	font-size: 16px;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	}

	.dropdown{
	float: left;
	overflow: hidden;
	}
	.dropdown .dropBtn{
	cursor: pointer;
	font-size: 16px;
	border: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
	}

	.navbar a:hover,.dropdown:hover,
	.dropBtn,.dropdown:focus{
	background-color: purple;
	}

	.dropdown-content{
	display: none;
	position: absolute;
	background-color: yellow;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px;
	z-index: 1;

	}

	.dropdown-content a{
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
	}
	.dropdown-content a:hover{
	background-color: greenyellow;
	}

	/* Utility class */
	.show{
	display: block;
	}
	</style>
	</head>
	<body>
	<div class="navbar">
	<a href="#">Home</a>
	<a href="#">News</a>
	<div class="dropdown">
	<button class="dropBtn" onclick="drop()">Clients <i></i></button>
	<div class="dropdown-content" id="myDropdown">
	<a href="#">Twitter</a>
	<a href="">Facebook</a>
	<a href="">Canva</a>
	</div>
	</div>
	</div>

	<h1 style="color: white; font-size: 50px;">
	Sync Programming Dropdown Tutorial
	</h1>
	<script>
	function drop(){
	document.getElementById('myDropdown').classList.toggle("show")
	}

	window.onclick = function(e){
	if(!e.target.matches('.dropBtn')){
	var myDropdown = document.getElementById('myDropdown')
	if(myDropdown.classList.contains('show')){
	myDropdown.classList.remove('show')
	}
	}
	}
	</script>
	</body>
	</html>