| <!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> |
No comments:
Post a Comment