<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>VU-Daily</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media.css">
<style>
</style>
</head>
<body>
<!--move to top button start here-->
<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-arrow-up"></i></button>
<!--move to top button close here-->
<div class="container-fluid" style="background:black; color:orange;" data-spy="affix" data-offset-top="197">
<div class="col-sm-12">
<div class="col-sm-6">
<h2 class="fit" float="left"><big class="top-logo">V</big>U<small class="fit2"> Daily</small></h2>
</div>
<div class="col-sm-6">
<h2 class="home-menu1 pull-right" title="menu" style="cursor:pointer;" onclick="openNav()">    ☰ </h2>
<h2 class="openBtn home-menu2" onclick="openSearch()" style="cursor: pointer;"><i class="fa fa-search"></i></h2>
</div>
</div>
</div>
<!--search box start-->
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<!--search box close here-->
<!--menu strats here-->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a><br>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
<a class="drip" data-toggle="collapse" data-target="#demo" style="cursor:pointer;"><big>Drop</big> down </a>
<div id="demo" class="collapse"><br>
<a class="drip" href="#">home</a>
<a class="drip" href="#">home</a>
<a class="drip" href="#">home</a>
<a class="drip" href="#">home</a>
<a class="drip" href="#">home</a>
</div>
<a class="drip" data-toggle="collapse" data-target="#demo2" style="cursor:pointer;"><big>VU</big> MIDD TERM<big>+</big></a>
<div id="demo2" class="collapse"><br>
<a class="drip" href="#">home</a>
<a class="drip" href="#">home</a>
<a class="drip" href="#">home</a>
<a class="drip" href="#">home</a>
<a class="drip" href="#">home</a>
</div>
</div>
<!--menu close here-->
<!--cards strats here-->
<div class="container-fluid" style="background-image: url('images/slider.jpg'); width:100%; border-top:1px solid white;">
<div class="col-sm-12 ">
<div class="col-sm-3"><br><br>
<div class="panel">
<div class="panel-title">
</div>
<div class="panel-body">
<h2 class="title" style="margin:none; padding:none; font-size:22px;">HTML<small>,5</small><i class="small-icon fa fa-book sli-icon"></i></h2>
<button class="btn btn-danger">Learn</button>
</div>
</div>
</div>
<div class="col-sm-3"><br><br>
<div class="panel">
<div class="panel-title">
</div>
<div class="panel-body">
<h2 class="title" style="margin:none; padding:none; font-size:22px;">CSS 3<i class="small-icon fa fa-css3 sli-icon"></i></h2>
<button class="btn btn-danger">Learn</button>
</div>
</div>
</div>
<div class="col-sm-3"><br><br>
<div class="panel">
<div class="panel-title">
</div>
<div class="panel-body">
<h2 class="title" style="margin:none; padding:none; font-size:22px;">BOOTSTRAP<small>3-4</small><i class="small-icon fa fa-bold sli-icon"></i></h2>
<button class="btn btn-danger">Learn</button>
</div>
</div>
</div>
<div class="col-sm-3"><br><br>
<div class="panel">
<div class="panel-title">
</div>
<div class="panel-body">
<h2 class="title" style="margin:none; padding:none; font-size:22px;">PHP,MYSQL<i class="small-icon fa fa-code sli-icon"></i></h2>
<button class="btn btn-danger">Learn</button>
</div>
</div><br>
</div>
</div>
</div>
<!--cards close here-->
<div class="container" style="height:1200px;">
</div>
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
scroll-behavior: smooth;
transition: 0.5s;
}
* {
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, .entry-title {
font-family: Poppins,sans-serif;
}
.span {
font-size:20px;
font-weight:bold;
color:brown;
line-height: 1.8;
text-align:center;
margin-left:8px;
}
.h2 {
margin:none;
padding:none;
}
.fit {
font-size:34px;
padding:4px 20px 4px 40px;
text-shadow: 1px 1px orange;
}
.fit2 {
color:orange;
font-style:inline;
text-transform: capitalize;
font-size:15px;
}
.top-logo {
font-size:40px;
font-stretch:expanded;
font-weight:bold;
}
.home-menu1 {
font-size:24px;
color:orange;
padding-top:10px;
padding-bottom:4px;
}
.home-menu2 {
font-size:24px;
color:orange;
padding-top:10px;
padding-bottom:4px;
float:right;
}
.home-menu2:hover {
border: none;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
display:block;
text-align:center;
overflow-y: hidden;
transition: 1s;
padding-top: 40px;
overflow:auto;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: orange;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
transition: all 200ms ease-out;
}
.sidenav .closebtn {
position: absolute;
top: 0;
border:none;
color:orange;
right: 25px;
font-size: 70px;
margin-bottom: 50px;
}
.sidenav .closebtn:hover {
color:orange;
background:none;
font-size: 80px;
transition: 0.5s;
}
.hmberger {
background-color: #1fc8db;
background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
color: white;
}
<!--search box css-->
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
traansition:0.5s;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
}
.overlay-content {
position: relative;
top: 46%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: orange;
}
.overlay .closebtn:hover {
color: yellow;
font-size: 80px;
transition: 0.5s;
}
.overlay .closebtn::after{
transition: 0.5s;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: 3px solid orange;
color: white;
float: left;
width: 80%;
background: black;
}
.overlay input[type=text]:hover {
background: black;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: black;
color: orange;
font-size: 17px;
border: 3px solid orange;
cursor: pointer;
}
.overlay button:hover {
background: black;
color: orange;
}
<!--Drop down -->
.drip {
cursor:pointer;
}
<!--search css-->
.search-item {
width:100%;
}
.clue {
font-size:40px;
color:orange;
font-weight:bold;
background:black;
}
.modal {
background:black;
}
.modal-body {
background:black;
color:orange;
}
.modal-header{
background:black;
}
@media only screen and (max-width: 450px) {
.sidenav {padding-top: 100px;}
.sidenav a {font-size: 18px;}
.sidenav a {margin-left:10px;}
.closebtn {margin-top:100px;}
}
@media only screen and (max-width: 516px) {
.home-menu2{float:left;}
.home-menu2{float:left; padding:none; height:10px;}
.fit {text-align:center; padding:none; margin-top:none; height:10px;}
}
@media only screen and (max-width: 768px) {
.sidenav {padding-top: 100px;}
.sidenav a {font-size: 18px;}
.sidenav a {margin-left:10px;}
.closebtn {margin-top:100px;}
}
@media only screen and (min-width: 720px) {
.home-menu2{float:right;}
.home-menu2{float:right; padding:none; height:10px;}
.fit {padding:none; margin-top:none; height:10px;}
.sidenav {padding-top: 100px;}
.sidenav a {font-size: 18px;}
.sidenav a {margin-left:10px;}
.closebtn {margin-top:100px;}
}
@media only screen and (max-width: 516px) {
.home-menu2{float:left;}
.home-menu2{float:left; padding:none; height:10px;}
.fit {text-align:center; padding:none; margin-top:none; height:10px;}
}
@media only screen and (max-width: 768px) {
.sidenav {padding-top: 100px;}
.sidenav a {font-size: 18px;}
.sidenav a {margin-left:10px;}
.closebtn {margin-top:100px;}
}
@media only screen and (min-width: 600px) {
.home-menu2{float:right;}
.home-menu2{float:right; padding:none; height:10px;}
.fit {padding:none; margin-top:none; height:10px;}
.sidenav {padding-top: 100px;}
.sidenav a {font-size: 18px;}
.sidenav a {margin-left:10px;}
.closebtn {margin-top:100px;}
}
@media only screen and (max-width: 545px) {
.home-menu2{float:right;}
.home-menu2{float:right; padding:none; height:10px;}
.fit {padding:none; margin-top:none; height:10px;}
.sidenav {padding-top: 100px;}
.sidenav a {font-size: 18px;}
.sidenav a {margin-left:10px;}
.closebtn {margin-top:100px;}
}
html{
scroll-behavior: smooth;
behavior:smooth;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
font-size: 18px;
transition: all .25s ease-in-out; */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
z-index: 998 !important;
border: none;
outline: none;
background-color: black;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
color: orange;
transition: 0.5s;
}
.affix {
top: 0;
width: 100%;
z-index: 9999 !important;
transition:0.4s;
}
.affix + .container-fluid {
padding-top: 70px;
}
a {
color:white;
text-decoration:none;
}
a:hover {
text-decoration:none;
color:white;
font-size: 36px;
border: none;
transition: 0.5s;
}
.sli-icon {
font-size:22px;
color:white;
margin-left:8px;
}
.title{
color:white;
border-bottom:1px solid white;
}
.panel {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
transition: all 200ms ease-out;
text-align:center;
background-color: #1fc8db;
background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
border-radius:10px;
}
.panel:hover {
transform: translateY(-20px);
transition: 0.4s ease-out;
}
.mover {
transform: rotate(360deg);
}
.mover:hover{
transform: rotate(360deg);
}
<!--script for open serach start here-->
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
<!--script for open serach close here-->
<!--script for open navbar start here-->
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<!--script for open navbar close here-->
<!--script for move to top button start here-->
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!--script for move to top button close here-->
