├── img
    ├── Icon.png
    ├── Logo.png
    ├── Logo (1).png
    ├── Logo (2).png
    ├── Logo (3).png
    ├── Logo (4).png
    ├── Logo (5).png
    ├── Logo (6).png
    └── Illustration.png
├── script.js
├── index.html
└── style.css


/img/Icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dostonjon21/Nexcent/HEAD/img/Icon.png


--------------------------------------------------------------------------------
/img/Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dostonjon21/Nexcent/HEAD/img/Logo.png


--------------------------------------------------------------------------------
/img/Logo (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dostonjon21/Nexcent/HEAD/img/Logo (1).png


--------------------------------------------------------------------------------
/img/Logo (2).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dostonjon21/Nexcent/HEAD/img/Logo (2).png


--------------------------------------------------------------------------------
/img/Logo (3).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dostonjon21/Nexcent/HEAD/img/Logo (3).png


--------------------------------------------------------------------------------
/img/Logo (4).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dostonjon21/Nexcent/HEAD/img/Logo (4).png


--------------------------------------------------------------------------------
/img/Logo (5).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dostonjon21/Nexcent/HEAD/img/Logo (5).png


--------------------------------------------------------------------------------
/img/Logo (6).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dostonjon21/Nexcent/HEAD/img/Logo (6).png


--------------------------------------------------------------------------------
/img/Illustration.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dostonjon21/Nexcent/HEAD/img/Illustration.png


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | // Other important pens.
 2 | // Map: https://codepen.io/themustafaomar/pen/ZEGJeZq
 3 | // Dashboard: https://codepen.io/themustafaomar/pen/jLMPKm
 4 | 
 5 | let dropdowns = document.querySelectorAll('.navbar .dropdown-toggler')
 6 | let dropdownIsOpen = false
 7 | 
 8 | // Handle dropdown menues
 9 | if (dropdowns.length) {
10 |   // Usually I don't recommend doing this (adding many event listeners to elements have the same handler)
11 |   // Instead use event delegation: https://javascript.info/event-delegation
12 |   // Why: https://gomakethings.com/why-event-delegation-is-a-better-way-to-listen-for-events-in-vanilla-js
13 |   // But since we only have two dropdowns, no problem with that. 
14 |   dropdowns.forEach((dropdown) => {
15 |     dropdown.addEventListener('click', (event) => {
16 |       let target = document.querySelector(`#${event.target.dataset.dropdown}`)
17 | 
18 |       if (target) {
19 |         if (target.classList.contains('show')) {
20 |           target.classList.remove('show')
21 |           dropdownIsOpen = false
22 |         } else {
23 |           target.classList.add('show')
24 |           dropdownIsOpen = true
25 |         }
26 |       }
27 |     })
28 |   })
29 | }
30 | 
31 | // Handle closing dropdowns if a user clicked the body
32 | window.addEventListener('mouseup', (event) => {
33 |   if (dropdownIsOpen) {
34 |     dropdowns.forEach((dropdownButton) => {
35 |       let dropdown = document.querySelector(`#${dropdownButton.dataset.dropdown}`)
36 |       let targetIsDropdown = dropdown == event.target
37 | 
38 |       if (dropdownButton == event.target) {
39 |         return
40 |       }
41 | 
42 |       if ((!targetIsDropdown) && (!dropdown.contains(event.target))) {
43 |         dropdown.classList.remove('show')
44 |       }
45 |     })
46 |   }
47 | })
48 | 
49 | // Open links in mobiles
50 | function handleSmallScreens() {
51 |   document.querySelector('.navbar-toggler')
52 |     .addEventListener('click', () => {
53 |       let navbarMenu = document.querySelector('.navbar-menu')
54 | 
55 |       if (!navbarMenu.classList.contains('active')) {
56 |         navbarMenu.classList.add('active')
57 |       } else {
58 |         navbarMenu.classList.remove('active')
59 |       }
60 |     })
61 | }
62 | 
63 | handleSmallScreens()
64 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Responsive Navbar</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.css" integrity="sha512-kJlvECunwXftkPwyvHbclArO8wszgBGisiLeuDFwNM8ws+wKIw0sv1os3ClWZOcrEB2eRXULYUsm8OVRGJKwGA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 9 | </head>
10 | <body>
11 | 
12 |     <nav class="navbar">
13 |         <div class="container">
14 |             <div class="navbar-header">
15 |                 <a href="#" class="logo"><img src="/img/Icon.png" alt=""><span>Nexcent</span></a>
16 |                 <button class="navbar-toggler" onclick="toggleMenu()">
17 |                     <span></span>
18 |                     <span></span>
19 |                     <span></span>
20 |                 </button>
21 |             </div>
22 |             <ul class="navbar-menu">
23 |                 <li><a href="#">Home</a></li>
24 |                 <li><a href="#">Features</a></li>
25 |                 <li><a href="#">Community</a></li>
26 |                 <li><a href="#">Blog</a></li>
27 |                 <li><a href="#">Pricing</a></li>
28 |             </ul>
29 |             <button class="btn"><span>Register Now <i class="ri-arrow-right-line"></i></span></button>
30 |         </div>
31 |     </nav>
32 |     <section class="home">
33 |         <div class="div"> 
34 |             <h1>
35 |                 Lessons and insights 
36 |             </h1>
37 |             <h2 class="sub">
38 |                 from 8 years
39 |             </h2>
40 |             <p>
41 |                 Where to grow your business as a photographer: site or social media?
42 |             </p>
43 |             <button class="btn2"><span>Register Now <i class="ri-arrow-right-line"></i></span></button>
44 |         </div>
45 |         <img src="/img/Illustration.png" alt="iluster">
46 |     </section>
47 | 
48 | <section class="Clients">
49 |     <h1>
50 |         Our Clients
51 |         
52 |     </h1>
53 |   
54 |     <p>
55 |         We have been working with some Fortune 500+ clients
56 |     </p>
57 |     <img src="/img/Logo.png" alt="">
58 |     <img src="/img/Logo (1).png" alt="">
59 |     <img src="/img/Logo (2).png" alt="">
60 |     <img src="/img/Logo (3).png" alt="">
61 |     <img src="/img/Logo (4).png" alt="">
62 |     <img src="/img/Logo (5).png" alt="">
63 |     <img src="img/Logo (6).png" alt="">
64 |     <h1>
65 |         salom
66 |     </h1>
67 | </section>
68 | <section>
69 |     <h1>
70 |         Manage your entire community
71 |     </h1>
72 |     <h1 class="h11">
73 |         in a single system
74 |     </h1>
75 |     <p>
76 |         Who is Nextcent suitable for?
77 |     </p>
78 |     
79 | </section>
80 | 
81 |     <script>
82 |         function toggleMenu() {
83 |             document.querySelector(".navbar-menu").classList.toggle("active");
84 |         }
85 |     </script>
86 | 
87 | </body>
88 | </html>
89 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
  2 | 
  3 | * {
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 | }
  8 | 
  9 | body {
 10 |     font-family: 'Roboto', sans-serif;
 11 | }
 12 | 
 13 | .navbar {
 14 |     background-color: #fff;
 15 |     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 16 |     padding: 1rem 1.5rem;
 17 | }
 18 | 
 19 | .container {
 20 |     max-width: 1100px;
 21 |     margin: 0 auto;
 22 |     display: flex;
 23 |     justify-content: space-between;
 24 |     align-items: center;
 25 | }
 26 | 
 27 | .navbar-header {
 28 |     display: flex;
 29 |     align-items: center;
 30 | }
 31 | 
 32 | .logo {
 33 |     font-size: 1.5rem;
 34 |     font-weight: 500;
 35 |     color: #333;
 36 |     text-decoration: none;
 37 | }
 38 | 
 39 | .navbar-menu {
 40 |     list-style: none;
 41 |     display: flex;
 42 |     gap: 1rem;
 43 | }
 44 | 
 45 | .navbar-menu li {
 46 |     display: inline-block;
 47 | }
 48 | 
 49 | .navbar-menu a {
 50 |     text-decoration: none;
 51 |     color: #333;
 52 |     padding: 0.5rem 1rem;
 53 |     transition: 0.3s;
 54 | }
 55 | 
 56 | .navbar-menu a:hover {
 57 |     color: #00ff37;
 58 | }
 59 | 
 60 | .navbar-toggler {
 61 |     display: none;
 62 |     flex-direction: column;
 63 |     gap: 5px;
 64 |     background: none;
 65 |     border: none;
 66 |     cursor: pointer;
 67 | }
 68 | 
 69 | .navbar-toggler span {
 70 |     width: 25px;
 71 |     height: 3px;
 72 |     background-color: #333;
 73 |     display: block;
 74 | }
 75 | 
 76 | 
 77 | .btn {
 78 |     width: 150px;
 79 |     height: 36px;
 80 |     border-radius: 10px;
 81 |     border:1px solid green;
 82 |     background-color: rgba(0, 128, 0, 0.63);
 83 | }
 84 | .btn span{
 85 |     font-size: 15px;
 86 |     color: #fff;
 87 | }
 88 | .btn:hover{
 89 |     background-color: green;
 90 | }
 91 | 
 92 | @media (max-width: 768px) {
 93 |     .navbar-menu {
 94 |         display: none;
 95 |         flex-direction: column;
 96 |         background: #fff;
 97 |         position: absolute;
 98 |         top: 60px;
 99 |         left: 0;
100 |         width: 100%;
101 |         padding: 1rem;
102 |         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
103 |     }
104 | 
105 |     .navbar-menu.active {
106 |         display: flex;
107 |     }
108 | 
109 |     .navbar-toggler {
110 |         display: flex;
111 |     }
112 | }
113 | 
114 | 
115 | .home h1{
116 |     font-size: 70px;
117 |     color: #4d4d4d;
118 | }
119 | .sub{
120 |     font-size: 70px;
121 |     color: green;
122 | }
123 | .div{
124 |     margin-top: 200px;
125 |     margin-left: 50px;
126 | 
127 | }
128 | .home p{
129 |     color: #929393;
130 | }
131 | .btn2{
132 |     width: 150px;
133 |     height: 36px;
134 |     border-radius: 10px;
135 |     border:1px solid green;
136 |     background-color: rgba(0, 128, 0, 0.63);
137 |     margin-top: 10px;
138 | }
139 | .btn2 span{
140 |     font-size: 15px;
141 |     color: #fff;
142 | }
143 | .btn2:hover{
144 |     background-color: green;
145 | }
146 | .home img{
147 |     margin-left: 900px;
148 |     margin-top: -300px;
149 |     width: 400px;
150 |     height: 400px;
151 | }
152 | 
153 | 
154 | .Clients h1{
155 |     color: #636363;
156 |     font-size: 40px;
157 |     text-align: center;
158 |     justify-content: space-between;
159 | }
160 | .Clients P{
161 |     color: #717171;
162 |     font-size: 20px;
163 |     text-align: center;
164 |     justify-content: space-between;
165 |     margin-top: 10px;
166 | }
167 | .Clients img{
168 |     margin-left: 150px;
169 |     margin-top: 30px;
170 |     width: 50px;
171 | }


--------------------------------------------------------------------------------