| Şuanki Dizin: /home/wwwdreamtechnolo/public_html/vsacademysolapur.in/ |
| Şuanki Dosya : /home/wwwdreamtechnolo/public_html/vsacademysolapur.in/header1.php |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Header</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="assets/css/header1.css">
<!-- <link rel="stylesheet" href="assets/css/header.css"> -->
</head>
<style type="text/css">
.atag {
padding:5px;
border-radius:10px;
border:2px solid #fff;
color:white;
font-size:17px;
margin-top: -5px;
background: orange !important;
margin-left: 10px;
}
.atag:hover{
color:orange;
background-color: white !important;
}
.menu-icon{
display: none;
}
@media only screen and (max-width: 750px) {
.mobile_view
{
width:100% !important;
text-align:center;
flex-wrap:wrap;
}
.section2
{
width:100% !important;
}
.mob_v
{
display:inline-table; width:100%;
}
.website_name
{
display:none;
}
.image
{
margin-left:0px;
margin-top:10px;
}
.navbar-menu{
gap:0px !important;
}
.navbar-menu li{
padding-bottom:5px !important;
margin:2px 0px !important;
}
.content {
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.social-icons {
display: flex;
justify-content: flex-start;
}
.social-icons img {
margin: 0 5px;
}
.content p{
margin-bottom:0px !important;
}
.hide-on-mobile{
display:none !important;
}
.child{
display: flex;
}
.menu-icon{
display: block;
}
.menu-icon img{
width:30px;
height:30px;
display:flex;
}
.navbar-menu{
top:0px !important;
}
.navs {
display: none;
flex-direction: column;
width: 100%;
/* background: rgba(0, 0, 0, 0.8); */
position: absolute;
/* top: 60px; */
left: 0;
z-index: 1000;
padding: 0px !important;
border-radius: 0 0 8px 8px;
}
.navs ul {
flex-direction: column;
gap: 10px;
}
.navs ul li{
display: flex;
align-items: center;
justify-content: center;
}
.header{
width: 100%;
display: flex;
justify-content: space-between;
}
ul.dropdown:hover{
display: block;
}
}
</style>
<body>
<section class="section1">
<div class="top-section">
<div class="content mob_v">
<p class="mobile_view">Phone No:<span>+91 9096655180</span></p>
<p class="mobile_view">Email id:<span> vsacademy1983@gmail.com</span></p>
<div class="social-icons mobile_view">
<div class="mobile_view" style="flex-direction:row">
<img src="assets/social-icons/icons8-facebook-50.png" alt="Facebook" style="width:30px;height:30px">
<img src="assets/social-icons/icons8-instagram-30.png" alt="Instagram" style="width:30px;height:30px">
<img src="assets/social-icons/icons8-youtube-50.png" alt="YouTube" style="width:30px;height:30px">
</div>
<div class="mobile_view">
<a class="atag" href="sign-up-form.php">Register for Exam</a>
<a class="atag" href="login.php">Login</a>
</div>
<br />
</div>
</div>
</div>
</section>
<section class="section2">
<div class="top-bar">
<div class="image mobile_view">
<img src="assets/images/logo/vs-logo.png" alt="VS Academy Logo">
</div>
<div class="content1 website_name">
<div class="image1">
<div class="small-content hide-on-mobile">
<div class="small-text">
<h3>SWAMI SIR'S</h3>
<h5>Since: 2007</h5>
</div>
</div>
<h1 class="vs-academy hide-on-mobile">VS ACADEMY</h1>
<div class="text1 hide-on-mobile">
<hr class="academy-hr hide-on-mobile">
<h3 class="styled-heading" style="">The Way for Success</h3>
</div>
</div>
</div>
</section>
<!-- <section class="section3">
<nav class="navbar">
<ul class="navbar-menu">
<li><a href="index.php">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="our_gallery.php">Our Gallery</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="contact1.php">Add Feedback</a></li>
<li><a href="downloads.php">Downloads</a></li>
</ul>
<div class="navbar-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
// Toggle the navbar menu on mobile
document.getElementById('mobile-menu').addEventListener('click', function () {
document.querySelector('.navbar-menu').classList.toggle('active');
});
</script> -->
<section class="section3" >
<div class="navbar">
<div class="header">
<div class="menu-icon" onclick="toggleNav()"><img src="assets/images/menu.png" alt=""></div>
</div>
<nav class="navs" id="navMenu" style="margin-top: 20px;">
<ul>
<ul class="navbar-menu" >
<li><a href="index.php">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="our_gallery.php">Our Gallery</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="contact1.php">Add Feedback</a></li>
<li><a href="downloads.php">Downloads</a></li>
</ul>
</nav>
</div>
</section>
<!-- <section class="section3">
<div class="navbar">
<div class="header">
<div class="menu-icon" onclick="toggleNav()"><i class="fab fa-facebook-f" style="font-size:30px;"></i></div>
</div>
<nav class="navs" id="navMenu1">
<ul class="navbar-menu" >
<li><a href="index.php">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="our_gallery.php">Our Gallery</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="contact1.php">Add Feedback</a></li>
<li><a href="downloads.php">Downloads</a></li>
</ul>
</nav>
</div>
</section> -->
<script>
function toggleNav() {
const navMenu = document.getElementById('navMenu');
navMenu.style.display = navMenu.style.display === 'flex' ? 'none' : 'flex';
}
</script>
</body>
</html>
Linux 65-254-81-4.cprapid.com 5.14.0-284.11.1.el9_2.x86_64 #1 SMP PREEMPT_DYNAMIC Tue May 9 05:49:00 EDT 2023 x86_64
Apache
65.254.81.4