mzaini30 · January 22, 2021 09:02
diff --git a/dashboard.php b/dashboard.php
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar Responsive With HTML CSS and Javascript</title>
   <meta name="viewport" content="width=350, user-scalable=no">
 </head>

 <style>
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
 
 * {
    margin: 0;
    padding: 0;
 }
 
 body {
    background: #171c24;
    min-height: 100vh;
    font-family: 'Poppins';
    overflow-x: hidden;
 }
 
 .navbar {
    width: 100%;
    background: #72A0C1;
    border-bottom: 1px solid #72A0C1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    box-sizing: border-box;
 }
 
 .logo {
    text-transform: uppercase;
 }
 
 .icon,
 .close-btn {
    display: none;
    font-size: 1.2em;
    cursor: pointer;
 }
 
 .links {
    display: flex;
    list-style: none;
 }
 
 .links li {
    margin-right: 24px;
 }
 
 .links li a {
    text-decoration: none;
    color: #575757;
    letter-spacing: -0.5px;
 }
 
 .link li a:hover {
    color: #000;
 }
 
 .backdrop {
    display: none;
    animation: 0.4s ease-in-out fadein forwards;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
 }
 
 @keyframes fadein {
    to {
        background: rgba(0, 0, 0, 0.8);
    }
 }
 
 @media (max-width: 675px) {
 
    .icon,
    .close-btn {
        display: block;
    }
 
    .icon {
        position: absolute;
        right: 24px;
    }
 
    .links {
        position: absolute;
        top: 0;
        height: 100%;
        width: 90%;
        right: -90%;
        background: #72A0C1;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        z-index: 2;
        transition: 0.3s ease-in-out;
    }
 
    .links li {
        margin-right: 0;
        margin-bottom: 40px;
        font-size: 1.5em;
    }
 
    .close-btn {
        position: absolute;
        top: 24px;
        right: -90vh;
        color: #575757;
        font-size: 2em;
        z-index: 3;
        transition: 0.3s ease-in-out;
    }
 
    .close-btn:hover {
        color: #000;
        cursor: pointer;
    }
 
    .open .links {
        right: 0;
    }
 
    .open .close-btn {
        right: 32px;
    }
 
    .open .backdrop {
        display: block;
    }
 }
   h1{
     
     text-align: center;
     font-size: 18px;
     color: white;
     
   }
   .grid {
    display: flex;
    justify-content: center;
   }
   .follower-ig img {
    width: 30%;
   }
 </style>
 
 <body>
    <nav class="navbar">
        <h3 class="logo">Ketikantangan</h3>
 
        <div class="icon"><i class="fas fa-bars"></i></div>
 
        <div class="links-wrapper active">
            <div class="backdrop"></div>
            <div class="close-btn"><i class="fas fa-times"></i></div>
            <ul class="links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Airdrop</a></li>
                <li><a href="#">Statistics</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>
    <script>
 const openIcon = document.querySelector('.icon');
 const linksWrapper = document.querySelector('.links-wrapper');
 const backdrop = document.querySelector('.backdrop');
 const closeIcon = document.querySelector('.close-btn');
 
 openIcon.addEventListener('click', () => {
    linksWrapper.classList.add('open');
 });
 closeIcon.addEventListener('click', () => {
    linksWrapper.classList.remove('open');
 });
 backdrop.addEventListener('click', () => {
    linksWrapper.classList.remove('open');
 });
    </script>
  <?php
  
  $text = $_POST['text'];
  echo "<h1>Selamat Datang $text</h1>";
  
  ?>
 
 <script src="https://kit.fontawesome.com/a076d05399.js"></script>
 <script src="teampoin/js/teampoin.js"></script>
 
 <br>
 <div class="grid">
    <div class="follower-ig">
          &nbsp;
          <img src="https://1.bp.blogspot.com/-NTxwRYK5T2g/XXh5p39qgkI/AAAAAAAAAp4/OW0L_2bVZ-IfaFxFI_InKytCOAVXoADHACLcBGAsYHQ/s1600/instagram-ig-logodud.png"/>
    </div>
    <div>
        <h1>ppppp</h1>
    </div>
 </div>
 <hr>
 </body>
 
 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Navbar Responsive With HTML CSS and Javascript</title>
	<meta name="viewport" content="width=350, user-scalable=no">
	</head>

	<style>
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

	* {
	margin: 0;
	padding: 0;
	}

	body {
	background: #171c24;
	min-height: 100vh;
	font-family: 'Poppins';
	overflow-x: hidden;
	}

	.navbar {
	width: 100%;
	background: #72A0C1;
	border-bottom: 1px solid #72A0C1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 30px;
	box-sizing: border-box;
	}

	.logo {
	text-transform: uppercase;
	}

	.icon,
	.close-btn {
	display: none;
	font-size: 1.2em;
	cursor: pointer;
	}

	.links {
	display: flex;
	list-style: none;
	}

	.links li {
	margin-right: 24px;
	}

	.links li a {
	text-decoration: none;
	color: #575757;
	letter-spacing: -0.5px;
	}

	.link li a:hover {
	color: #000;
	}

	.backdrop {
	display: none;
	animation: 0.4s ease-in-out fadein forwards;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: rgba(0, 0, 0, 0);
	cursor: pointer;
	}

	@keyframes fadein {
	to {
	background: rgba(0, 0, 0, 0.8);
	}
	}

	@media (max-width: 675px) {

	.icon,
	.close-btn {
	display: block;
	}

	.icon {
	position: absolute;
	right: 24px;
	}

	.links {
	position: absolute;
	top: 0;
	height: 100%;
	width: 90%;
	right: -90%;
	background: #72A0C1;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	z-index: 2;
	transition: 0.3s ease-in-out;
	}

	.links li {
	margin-right: 0;
	margin-bottom: 40px;
	font-size: 1.5em;
	}

	.close-btn {
	position: absolute;
	top: 24px;
	right: -90vh;
	color: #575757;
	font-size: 2em;
	z-index: 3;
	transition: 0.3s ease-in-out;
	}

	.close-btn:hover {
	color: #000;
	cursor: pointer;
	}

	.open .links {
	right: 0;
	}

	.open .close-btn {
	right: 32px;
	}

	.open .backdrop {
	display: block;
	}
	}
	h1{

	text-align: center;
	font-size: 18px;
	color: white;

	}
	.grid {
	display: flex;
	justify-content: center;
	}
	.follower-ig img {
	width: 30%;
	}
	</style>

	<body>
	<nav class="navbar">
	<h3 class="logo">Ketikantangan</h3>

	<div class="icon"><i class="fas fa-bars"></i></div>

	<div class="links-wrapper active">
	<div class="backdrop"></div>
	<div class="close-btn"><i class="fas fa-times"></i></div>
	<ul class="links">
	<li><a href="#">Home</a></li>
	<li><a href="#">Airdrop</a></li>
	<li><a href="#">Statistics</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
	</div>
	</nav>
	<script>
	const openIcon = document.querySelector('.icon');
	const linksWrapper = document.querySelector('.links-wrapper');
	const backdrop = document.querySelector('.backdrop');
	const closeIcon = document.querySelector('.close-btn');

	openIcon.addEventListener('click', () => {
	linksWrapper.classList.add('open');
	});
	closeIcon.addEventListener('click', () => {
	linksWrapper.classList.remove('open');
	});
	backdrop.addEventListener('click', () => {
	linksWrapper.classList.remove('open');
	});
	</script>
	<?php

	$text = $_POST['text'];
	echo "<h1>Selamat Datang $text</h1>";

	?>

	<script src="https://kit.fontawesome.com/a076d05399.js"></script>
	<script src="teampoin/js/teampoin.js"></script>

	<br>
	<div class="grid">
	<div class="follower-ig">

	<img src="https://1.bp.blogspot.com/-NTxwRYK5T2g/XXh5p39qgkI/AAAAAAAAAp4/OW0L_2bVZ-IfaFxFI_InKytCOAVXoADHACLcBGAsYHQ/s1600/instagram-ig-logodud.png"/>
	</div>
	<div>
	<h1>ppppp</h1>
	</div>
	</div>
	<hr>
	</body>

	</html>