├── img ├── hero.png ├── icon.png ├── logo.png ├── secure.jpg ├── simple.jpg ├── user-1.jpg ├── user-2.jpg ├── user-3.jpg ├── powerful.jpg ├── secure-lazy.jpg ├── simple-lazy.jpg └── powerful-lazy.jpg ├── README.md ├── script.js ├── style.css └── index.html /img/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masudranashawon/virus-guard/HEAD/img/hero.png -------------------------------------------------------------------------------- /img/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masudranashawon/virus-guard/HEAD/img/icon.png -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masudranashawon/virus-guard/HEAD/img/logo.png -------------------------------------------------------------------------------- /img/secure.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masudranashawon/virus-guard/HEAD/img/secure.jpg -------------------------------------------------------------------------------- /img/simple.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masudranashawon/virus-guard/HEAD/img/simple.jpg -------------------------------------------------------------------------------- /img/user-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masudranashawon/virus-guard/HEAD/img/user-1.jpg -------------------------------------------------------------------------------- /img/user-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masudranashawon/virus-guard/HEAD/img/user-2.jpg -------------------------------------------------------------------------------- /img/user-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masudranashawon/virus-guard/HEAD/img/user-3.jpg -------------------------------------------------------------------------------- /img/powerful.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masudranashawon/virus-guard/HEAD/img/powerful.jpg -------------------------------------------------------------------------------- /img/secure-lazy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masudranashawon/virus-guard/HEAD/img/secure-lazy.jpg -------------------------------------------------------------------------------- /img/simple-lazy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masudranashawon/virus-guard/HEAD/img/simple-lazy.jpg -------------------------------------------------------------------------------- /img/powerful-lazy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masudranashawon/virus-guard/HEAD/img/powerful-lazy.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Virus Guard: An Antivirus Landing page application 2 | 3 | ### What is Virus Guard? 4 | 5 | Virus Guard is an antivirus landing page designed to provide customers with a platform to purchase antivirus software. The page features a clean and modern design, allowing customers to easily navigate and learn about the various antivirus software options available. Built with HTML, CSS, and JavaScript, the landing page provides a seamless user experience, allowing customers to quickly and efficiently purchase the antivirus software they need. With its focus on ease-of-use and user-friendly design, Virus Guard is an ideal solution for those looking to protect their devices and data from threats. 6 |
7 |
8 | This project is a front-end design of the website, built using HTML, CSS & JavaScript. Currently, the website does not include any functionality for user authentication. 9 | 10 | ### Features: 11 | 12 | 1. Built with HTML, CSS, JavaScript 13 | 2. Lazy Loading functionality has been implemented using intersection observer 14 | 3. Testimonial Slider section with key event 15 | 16 | ### How can you check the project code? 17 | 18 | Download or clone this repo and run the following command in the terminal: 19 | 20 | 1. Clone the repository 21 | 22 | ``` 23 | git clone https://github.com/masudranashawon/virus-guard.git 24 | ``` 25 | 26 | 2. Run this command or open in editor 27 | ``` 28 | code . 29 | ``` 30 | 31 | ### View the app (Hosted on Netlify): 32 | 33 | https://virus-guard.netlify.app/ 34 | 35 | ### Tools: 36 | 37 | HTML, CSS, JavaScript 38 | 39 | ### Contributing 40 | 41 | If you're interested in contributing to this project, please feel free to fork the repository and submit pull requests. 42 | 43 | Please let me know if you have any other questions or concerns. I'll be happy to help! 44 | 45 | ## Thanks for visiting this repository! 46 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | ///////////////////////////////////////////////////////////// 4 | // Elements 5 | ///////////////////////////////////////////////////////////// 6 | 7 | const modal = document.querySelector('.modal'); 8 | const overlay = document.querySelector('.overlay'); 9 | const btnsOpenModal = document.querySelectorAll('.btn--show-modal'); 10 | const btnCloseModal = document.querySelector('.btn--close-modal'); 11 | const nav = document.querySelector('.nav'); 12 | const navLinks = document.querySelector('.nav__links'); 13 | const header = document.querySelector('.header'); 14 | const toggleBtn = document.querySelector('.nav__toggle'); 15 | const btnScrollTo = document.querySelector('.btn--scroll-to'); 16 | const allSections = document.querySelectorAll('.section'); 17 | const section1 = document.querySelector('#section--1'); 18 | const tabsContainer = document.querySelector('.operations__tab-container'); 19 | const tabs = document.querySelectorAll('.operations__tab'); 20 | const tabsContent = document.querySelectorAll('.operations__content'); 21 | const cookieBody = document.querySelector('.cookie'); 22 | const cookieCloseBtn = document.querySelector('.cookie__close'); 23 | const imgTargets = document.querySelectorAll('img[data-src]'); 24 | const slides = document.querySelectorAll('.slide'); 25 | const slider = document.querySelector('.slider'); 26 | const btnLeft = document.querySelector('.slider__btn--left'); 27 | const btnRight = document.querySelector('.slider__btn--right'); 28 | const dotContainer = document.querySelector('.dots'); 29 | 30 | //Cookie 31 | cookieCloseBtn.addEventListener('click', function () { 32 | cookieBody.classList.add('hidden'); 33 | cookieBody.style.bottom = '-12rem'; 34 | }); 35 | 36 | // Sticky navbar 37 | const navHight = nav.getBoundingClientRect().height; 38 | 39 | function sticky(entries) { 40 | const entrie = entries[0]; 41 | if (!entrie.isIntersecting) nav.classList.add('sticky'); 42 | else nav.classList.remove('sticky'); 43 | } 44 | 45 | const headerObserver = new IntersectionObserver(sticky, { 46 | root: null, //viewport 47 | threshold: 0, 48 | rootMargin: `${navHight}px`, 49 | }); 50 | 51 | headerObserver.observe(header); 52 | 53 | // reveal section 54 | function revealSection(entries, observer) { 55 | const [entry] = entries; 56 | if (!entry.isIntersecting) return; 57 | entry.target.classList.remove('section--hidden'); 58 | observer.unobserve(entry.target); 59 | } 60 | 61 | const sectionObserver = new IntersectionObserver(revealSection, { 62 | root: null, 63 | threshold: 0, 64 | rootMargin: '200px', 65 | }); 66 | 67 | allSections.forEach((section) => { 68 | sectionObserver.observe(section); 69 | section.classList.add('section--hidden'); 70 | }); 71 | 72 | // Modal window 73 | function openModal(e) { 74 | e.preventDefault(); 75 | modal.classList.remove('hidden'); 76 | overlay.classList.remove('hidden'); 77 | } 78 | 79 | function closeModal() { 80 | modal.classList.add('hidden'); 81 | overlay.classList.add('hidden'); 82 | } 83 | 84 | btnsOpenModal.forEach((btn) => btn.addEventListener('click', openModal)); 85 | 86 | btnCloseModal.addEventListener('click', closeModal); 87 | overlay.addEventListener('click', closeModal); 88 | 89 | document.addEventListener('keydown', function (e) { 90 | if (e.key === 'Escape' && !modal.classList.contains('hidden')) { 91 | closeModal(); 92 | } 93 | }); 94 | 95 | // Scroll behaviors 96 | navLinks.addEventListener('click', function (e) { 97 | e.preventDefault(); 98 | if (e.target.classList.contains('nav__link')) { 99 | const attr = e.target.getAttribute('href'); 100 | document.querySelector(attr).scrollIntoView({ behavior: 'smooth' }); 101 | } 102 | }); 103 | 104 | // Toggle navber 105 | toggleBtn.addEventListener('click', function () { 106 | if (navLinks.classList.contains('nav__open')) { 107 | navLinks.classList.remove('nav__open'); 108 | document.querySelector('html').style.overflow = 'visible'; 109 | } else { 110 | navLinks.classList.add('nav__open'); 111 | document.querySelector('html').style.overflow = 'hidden'; 112 | } 113 | navLinks.addEventListener('click', function () { 114 | navLinks.classList.contains('nav__open') && 115 | navLinks.classList.remove('nav__open'); 116 | document.querySelector('html').style.overflow = 'visible'; 117 | }); 118 | }); 119 | 120 | // Learn more scroll 121 | btnScrollTo.addEventListener('click', function () { 122 | section1.scrollIntoView({ behavior: 'smooth' }); 123 | }); 124 | 125 | //Lazy loading 126 | function loadImg(entries, observer) { 127 | const entry = entries[0]; 128 | if (!entry.isIntersecting) return; 129 | entry.target.src = entry.target.dataset.src; 130 | entry.target.addEventListener('load', function () { 131 | entry.target.classList.remove('lazy-img'); 132 | }); 133 | } 134 | 135 | const imgObserver = new IntersectionObserver(loadImg, { 136 | root: null, 137 | threshold: 0, 138 | rootMargin: '252px', 139 | }); 140 | 141 | imgTargets.forEach((img) => imgObserver.observe(img)); 142 | 143 | // Tabbed components 144 | tabsContainer.addEventListener('click', function (e) { 145 | const btn = e.target.closest('.operations__tab'); 146 | 147 | if (!btn) return; 148 | 149 | tabs.forEach((tab) => tab.classList.remove('operations__tab--active')); 150 | tabsContent.forEach((content) => 151 | content.classList.remove('operations__content--active') 152 | ); 153 | 154 | btn.classList.add('operations__tab--active'); 155 | document 156 | .querySelector(`.operations__content--${btn.dataset.tab}`) 157 | .classList.add('operations__content--active'); 158 | }); 159 | 160 | // Slider 161 | let currentSlide = 0; 162 | let maxSlide = slides.length - 1; 163 | 164 | //Dots 165 | function creatingDots() { 166 | slides.forEach((_, i) => { 167 | const dot = ``; 168 | dotContainer.insertAdjacentHTML('beforeend', dot); 169 | }); 170 | } 171 | 172 | creatingDots(); 173 | 174 | //Activate dots 175 | function activateDots(slide) { 176 | document 177 | .querySelectorAll('.dots__dot') 178 | .forEach((dot) => dot.classList.remove('dots__dot--active')); 179 | document 180 | .querySelector(`.dots__dot[data-slide="${slide}"]`) 181 | .classList.add('dots__dot--active'); 182 | } 183 | activateDots(0); 184 | 185 | function updateSlide(cs) { 186 | slides.forEach( 187 | (sl, i) => (sl.style.transform = `translateX(${100 * (i - cs)}%)`) 188 | ); 189 | } 190 | 191 | updateSlide(0); 192 | 193 | function previousSlide() { 194 | if (currentSlide === 0) currentSlide = maxSlide; 195 | else currentSlide--; 196 | updateSlide(currentSlide); 197 | activateDots(currentSlide); 198 | } 199 | 200 | function nextSlide() { 201 | if (currentSlide === maxSlide) currentSlide = 0; 202 | else currentSlide++; 203 | updateSlide(currentSlide); 204 | activateDots(currentSlide); 205 | } 206 | 207 | //Dots handler 208 | dotContainer.addEventListener('click', function (e) { 209 | if (e.target.classList.contains('dots__dot')) { 210 | activateDots(e.target.dataset.slide); 211 | updateSlide(e.target.dataset.slide); 212 | } 213 | }); 214 | 215 | // keyboard 216 | document.addEventListener('keydown', function (e) { 217 | e.key === 'ArrowLeft' && previousSlide(); 218 | e.key === 'ArrowRight' && nextSlide(); 219 | }); 220 | 221 | // button handles 222 | btnLeft.addEventListener('click', previousSlide); 223 | btnRight.addEventListener('click', nextSlide); 224 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-primary: #24cbc8; 3 | --color-secondary: #ff768b; 4 | --color-tertiary: #ff7a42; 5 | --color-primary-darker: #139e9c; 6 | --color-secondary-darker: #c94559; 7 | --color-tertiary-darker: #d35e2c; 8 | --color-primary-opacity: #24cbc856; 9 | --color-secondary-opacity: #ff768b56; 10 | --color-tertiary-opacity: #ff7b4256; 11 | --gradient-primary: linear-gradient(to top left, #139e9c, #24cbc8); 12 | --gradient-secondary: linear-gradient(to top left, #d35e2c, #ff7a42); 13 | } 14 | 15 | ::-webkit-scrollbar { 16 | width: 9px; 17 | } 18 | 19 | ::-webkit-scrollbar-track { 20 | background-color: rgb(55, 56, 61); 21 | } 22 | 23 | ::-webkit-scrollbar-thumb { 24 | background-color: #24cbc8; 25 | height: 10%; 26 | border-radius: 1rem; 27 | } 28 | 29 | ::-webkit-scrollbar-thumb:hover { 30 | background-color: #139e9c; 31 | } 32 | 33 | * { 34 | margin: 0; 35 | padding: 0; 36 | box-sizing: border-box; 37 | } 38 | 39 | html { 40 | font-size: 62.5%; 41 | overflow-x: hidden; 42 | } 43 | 44 | body { 45 | font-family: 'Poppins', sans-serif; 46 | font-weight: 300; 47 | color: #444; 48 | line-height: 1.9; 49 | background-color: #f3f3f3; 50 | overflow-x: hidden; 51 | } 52 | 53 | .section { 54 | padding: 15rem 3rem; 55 | border-top: 1px solid #ddd; 56 | transition: transform 2s, opacity 2s; 57 | } 58 | 59 | .section--hidden { 60 | opacity: 0; 61 | transform: translateY(20rem); 62 | } 63 | 64 | .section__title { 65 | max-width: 80rem; 66 | margin: 0 auto 8rem auto; 67 | } 68 | 69 | .section__description { 70 | font-size: 1.8rem; 71 | font-weight: 600; 72 | text-transform: uppercase; 73 | color: var(--color-primary); 74 | margin-bottom: 1rem; 75 | } 76 | 77 | .section__header { 78 | font-size: 4rem; 79 | line-height: 1.3; 80 | font-weight: 500; 81 | } 82 | 83 | .btn { 84 | display: inline-block; 85 | background-color: var(--color-primary); 86 | font-size: 1.6rem; 87 | font-family: inherit; 88 | font-weight: 500; 89 | border: none; 90 | padding: 1.25rem 4.5rem; 91 | border-radius: 10rem; 92 | cursor: pointer; 93 | transition: all 0.3s; 94 | } 95 | 96 | .btn:hover { 97 | background-color: var(--color-primary-darker); 98 | } 99 | 100 | .btn--text { 101 | display: inline-block; 102 | background: none; 103 | font-size: 1.7rem; 104 | font-family: inherit; 105 | font-weight: 500; 106 | color: var(--color-primary); 107 | border: none; 108 | border-bottom: 1px solid currentColor; 109 | padding-bottom: 2px; 110 | cursor: pointer; 111 | transition: all 0.3s; 112 | } 113 | 114 | p { 115 | color: #666; 116 | } 117 | 118 | button:focus { 119 | outline: none; 120 | } 121 | 122 | img { 123 | transition: filter 0.5s; 124 | } 125 | 126 | .lazy-img { 127 | filter: blur(20px); 128 | } 129 | 130 | .nav { 131 | display: flex; 132 | justify-content: space-between; 133 | align-items: center; 134 | height: 9rem; 135 | width: 100%; 136 | padding: 0 6rem; 137 | z-index: 100; 138 | animation: revealNav 1.5s 1; 139 | } 140 | 141 | @keyframes revealNav { 142 | from { 143 | transform: translateY(-5vw); 144 | opacity: 0; 145 | } 146 | to { 147 | transform: translateY(0); 148 | opacity: 1; 149 | } 150 | } 151 | 152 | .nav.sticky { 153 | position: fixed; 154 | background-color: rgba(255, 255, 255, 0.75); 155 | backdrop-filter: blur(10px); 156 | -webkit-backdrop-filter: blur(10px); 157 | } 158 | 159 | .nav__logo { 160 | height: 4.6rem; 161 | transition: all 0.3s; 162 | } 163 | 164 | .nav__links { 165 | display: flex; 166 | align-items: center; 167 | list-style: none; 168 | } 169 | 170 | .nav__links li:last-child a { 171 | font-weight: 500; 172 | } 173 | 174 | .nav__item { 175 | margin-left: 4rem; 176 | } 177 | 178 | .nav__link:link, 179 | .nav__link:visited { 180 | font-size: 1.7rem; 181 | font-weight: 400; 182 | color: inherit; 183 | text-decoration: none; 184 | display: block; 185 | transition: all 0.3s; 186 | } 187 | 188 | .nav__link--btn:link, 189 | .nav__link--btn:visited { 190 | padding: 0.8rem 2.5rem; 191 | border-radius: 3rem; 192 | background-color: var(--color-primary); 193 | color: #222; 194 | } 195 | 196 | .nav__link--btn:hover, 197 | .nav__link--btn:active { 198 | color: inherit; 199 | background-color: var(--color-primary-darker); 200 | color: #333; 201 | } 202 | 203 | .nav__toggle { 204 | display: none; 205 | } 206 | 207 | .header { 208 | padding: 0 3rem; 209 | height: 100vh; 210 | display: flex; 211 | flex-direction: column; 212 | align-items: center; 213 | } 214 | 215 | .header__title { 216 | flex: 1; 217 | max-width: 115rem; 218 | display: grid; 219 | grid-template-columns: 3fr 2fr; 220 | row-gap: 3rem; 221 | align-content: center; 222 | justify-content: center; 223 | align-items: start; 224 | justify-items: start; 225 | } 226 | 227 | .header__left { 228 | animation: revealHeaderLeft 1.5s 1; 229 | } 230 | 231 | .header__right { 232 | animation: revealHeaderRight 1.5s 1; 233 | } 234 | 235 | @keyframes revealHeaderLeft { 236 | from { 237 | transform: translateX(-20rem); 238 | opacity: 0; 239 | } 240 | to { 241 | transform: translateX(0); 242 | opacity: 1; 243 | } 244 | } 245 | 246 | @keyframes revealHeaderRight { 247 | from { 248 | transform: translateX(20rem); 249 | opacity: 0; 250 | } 251 | to { 252 | transform: translateX(0); 253 | opacity: 1; 254 | } 255 | } 256 | 257 | h1 { 258 | font-size: 5.5rem; 259 | line-height: 1.35; 260 | } 261 | 262 | h4 { 263 | font-size: 2.4rem; 264 | font-weight: 500; 265 | } 266 | 267 | .header__img { 268 | width: 100%; 269 | grid-column: 2 / 3; 270 | grid-row: 1 / span 4; 271 | transform: translateY(-6rem); 272 | } 273 | 274 | .highlight { 275 | position: relative; 276 | } 277 | 278 | .highlight::after { 279 | display: block; 280 | content: ''; 281 | position: absolute; 282 | bottom: 0; 283 | left: 0; 284 | height: 100%; 285 | width: 100%; 286 | z-index: -1; 287 | opacity: 0.7; 288 | transform: scale(1.07, 1.05) skewX(-15deg); 289 | background-image: var(--gradient-primary); 290 | } 291 | 292 | .features { 293 | display: grid; 294 | grid-template-columns: 1fr 1fr; 295 | gap: 4rem; 296 | margin: 0 12rem; 297 | } 298 | 299 | .features__img { 300 | width: 100%; 301 | } 302 | 303 | .features__feature { 304 | align-self: center; 305 | justify-self: center; 306 | width: 70%; 307 | font-size: 1.5rem; 308 | } 309 | 310 | .features__icon { 311 | display: flex; 312 | align-items: center; 313 | justify-content: center; 314 | background-color: var(--color-primary-opacity); 315 | height: 5.5rem; 316 | width: 5.5rem; 317 | border-radius: 50%; 318 | margin-bottom: 2rem; 319 | } 320 | 321 | .features__icon svg { 322 | height: 2.5rem; 323 | width: 2.5rem; 324 | fill: var(--color-primary); 325 | } 326 | 327 | .features__header { 328 | font-size: 2rem; 329 | margin-bottom: 1rem; 330 | } 331 | 332 | .operations { 333 | max-width: 100rem; 334 | margin: 12rem auto 0 auto; 335 | background-color: #fff; 336 | } 337 | 338 | .operations__tab-container { 339 | display: flex; 340 | justify-content: center; 341 | } 342 | 343 | .operations__tab { 344 | margin-right: 2.5rem; 345 | transform: translateY(-50%); 346 | } 347 | 348 | .operations__tab span { 349 | margin-right: 1rem; 350 | font-weight: 600; 351 | display: inline-block; 352 | } 353 | 354 | .operations__tab--1 { 355 | background-color: var(--color-secondary); 356 | } 357 | 358 | .operations__tab--1:hover { 359 | background-color: var(--color-secondary-darker); 360 | } 361 | 362 | .operations__tab--3 { 363 | background-color: var(--color-tertiary); 364 | margin: 0; 365 | } 366 | 367 | .operations__tab--3:hover { 368 | background-color: var(--color-tertiary-darker); 369 | } 370 | 371 | .operations__tab--active { 372 | transform: translateY(-66%); 373 | } 374 | 375 | .operations__content { 376 | display: none; 377 | font-size: 1.7rem; 378 | padding: 2.5rem 7rem 6.5rem 7rem; 379 | } 380 | 381 | .operations__content--active { 382 | display: grid; 383 | grid-template-columns: 7rem 1fr; 384 | column-gap: 3rem; 385 | row-gap: 0.5rem; 386 | } 387 | 388 | .operations__header { 389 | font-size: 2.25rem; 390 | font-weight: 500; 391 | align-self: center; 392 | } 393 | 394 | .operations__icon { 395 | display: flex; 396 | align-items: center; 397 | justify-content: center; 398 | height: 7rem; 399 | width: 7rem; 400 | border-radius: 50%; 401 | } 402 | 403 | .operations__icon svg { 404 | height: 2.75rem; 405 | width: 2.75rem; 406 | } 407 | 408 | .operations__content p { 409 | grid-column: 2; 410 | } 411 | 412 | .operations__icon--1 { 413 | background-color: var(--color-secondary-opacity); 414 | } 415 | 416 | .operations__icon--2 { 417 | background-color: var(--color-primary-opacity); 418 | } 419 | 420 | .operations__icon--3 { 421 | background-color: var(--color-tertiary-opacity); 422 | } 423 | 424 | .operations__icon--1 svg { 425 | fill: var(--color-secondary-darker); 426 | } 427 | 428 | .operations__icon--2 svg { 429 | fill: var(--color-primary); 430 | } 431 | 432 | .operations__icon--3 svg { 433 | fill: var(--color-tertiary); 434 | } 435 | 436 | .slider { 437 | max-width: 100rem; 438 | height: 50rem; 439 | margin: 0 auto; 440 | position: relative; 441 | overflow: hidden; 442 | } 443 | 444 | .slide { 445 | position: absolute; 446 | top: 0; 447 | width: 100%; 448 | height: 50rem; 449 | display: flex; 450 | align-items: center; 451 | justify-content: center; 452 | transition: transform 1s; 453 | } 454 | 455 | .slide > img { 456 | width: 100%; 457 | height: 100%; 458 | object-fit: cover; 459 | } 460 | 461 | .slider__btn { 462 | position: absolute; 463 | top: 50%; 464 | z-index: 10; 465 | border: none; 466 | background: rgba(255, 255, 255, 0.7); 467 | font-family: inherit; 468 | color: #333; 469 | border-radius: 50%; 470 | height: 5.5rem; 471 | width: 5.5rem; 472 | font-size: 3.25rem; 473 | cursor: pointer; 474 | } 475 | 476 | .slider__btn--left { 477 | left: 6%; 478 | transform: translate(-50%, -50%); 479 | } 480 | 481 | .slider__btn--right { 482 | right: 6%; 483 | transform: translate(50%, -50%); 484 | } 485 | 486 | .dots { 487 | position: absolute; 488 | bottom: 5%; 489 | left: 50%; 490 | transform: translateX(-50%); 491 | display: flex; 492 | } 493 | 494 | .dots__dot { 495 | border: none; 496 | background-color: #b9b9b9; 497 | opacity: 0.7; 498 | height: 1rem; 499 | width: 1rem; 500 | border-radius: 50%; 501 | margin-right: 1.75rem; 502 | cursor: pointer; 503 | transition: all 0.5s; 504 | } 505 | 506 | .dots__dot:last-child { 507 | margin: 0; 508 | } 509 | 510 | .dots__dot--active { 511 | background-color: #888; 512 | opacity: 1; 513 | } 514 | 515 | .testimonial { 516 | width: 65%; 517 | position: relative; 518 | } 519 | 520 | .testimonial::before { 521 | content: '\201C'; 522 | position: absolute; 523 | top: -5.7rem; 524 | left: -6.8rem; 525 | line-height: 1; 526 | font-size: 20rem; 527 | font-family: inherit; 528 | color: var(--color-primary); 529 | z-index: -1; 530 | } 531 | 532 | .testimonial__header { 533 | font-size: 2.25rem; 534 | font-weight: 500; 535 | margin-bottom: 1.5rem; 536 | } 537 | 538 | .testimonial__text { 539 | font-size: 1.7rem; 540 | margin-bottom: 3.5rem; 541 | color: #666; 542 | } 543 | 544 | .testimonial__author { 545 | margin-left: 3rem; 546 | font-style: normal; 547 | display: grid; 548 | grid-template-columns: 6.5rem 1fr; 549 | column-gap: 2rem; 550 | } 551 | 552 | .testimonial__photo { 553 | grid-row: 1 / span 2; 554 | width: 6.5rem; 555 | border-radius: 50%; 556 | } 557 | 558 | .testimonial__name { 559 | font-size: 1.7rem; 560 | font-weight: 500; 561 | align-self: end; 562 | margin: 0; 563 | } 564 | 565 | .testimonial__location { 566 | font-size: 1.5rem; 567 | } 568 | 569 | .section__title--testimonials { 570 | margin-bottom: 4rem; 571 | } 572 | 573 | .section--sign-up { 574 | background-color: #37383d; 575 | border-top: none; 576 | border-bottom: 1px solid #444; 577 | text-align: center; 578 | padding: 10rem 3rem; 579 | } 580 | 581 | .section--sign-up .section__header { 582 | color: #fff; 583 | text-align: center; 584 | } 585 | 586 | .section--sign-up .section__title { 587 | margin-bottom: 6rem; 588 | } 589 | 590 | .section--sign-up .btn { 591 | font-size: 1.9rem; 592 | padding: 2rem 5rem; 593 | } 594 | 595 | .footer { 596 | padding: 10rem 3rem; 597 | background-color: #37383d; 598 | } 599 | 600 | .footer__nav { 601 | list-style: none; 602 | display: flex; 603 | justify-content: center; 604 | margin-bottom: 5rem; 605 | } 606 | 607 | .footer__item { 608 | margin-right: 4rem; 609 | } 610 | 611 | .footer__link { 612 | font-size: 1.6rem; 613 | color: #eee; 614 | text-decoration: none; 615 | } 616 | 617 | .footer__logo { 618 | height: 6rem; 619 | display: block; 620 | margin: 0 auto; 621 | margin-bottom: 5rem; 622 | } 623 | 624 | .footer__copyright { 625 | font-size: 1.4rem; 626 | color: #aaa; 627 | text-align: center; 628 | } 629 | 630 | .modal { 631 | position: fixed; 632 | top: 50%; 633 | left: 50%; 634 | transform: translate(-50%, -50%); 635 | max-width: 60rem; 636 | background-color: #f3f3f3; 637 | padding: 5rem 6rem; 638 | box-shadow: 0 4rem 6rem rgba(0, 0, 0, 0.3); 639 | z-index: 1000; 640 | border-radius: 0.8rem; 641 | transition: all 0.5s; 642 | } 643 | 644 | .overlay { 645 | position: fixed; 646 | top: 0; 647 | left: 0; 648 | width: 100%; 649 | height: 100%; 650 | background-color: rgba(0, 0, 0, 0.5); 651 | backdrop-filter: blur(4px); 652 | z-index: 100; 653 | transition: all 0.5s; 654 | } 655 | 656 | .modal__header { 657 | font-size: 3.25rem; 658 | margin-bottom: 4.5rem; 659 | line-height: 1.5; 660 | } 661 | 662 | .modal__form { 663 | margin: 0 3rem; 664 | display: grid; 665 | grid-template-columns: 1fr 2fr; 666 | align-items: center; 667 | gap: 2.5rem; 668 | } 669 | 670 | .modal__form label { 671 | font-size: 1.7rem; 672 | font-weight: 500; 673 | } 674 | 675 | .modal__form input { 676 | font-size: 1.7rem; 677 | padding: 1rem 1.5rem; 678 | border: 1px solid #ddd; 679 | border-radius: 0.5rem; 680 | transition: all 0.3s; 681 | } 682 | 683 | .modal__form input:focus { 684 | outline: none; 685 | border-color: #24cbc8; 686 | } 687 | 688 | .modal__form button { 689 | grid-column: 1 / span 2; 690 | justify-self: center; 691 | margin-top: 1rem; 692 | } 693 | 694 | .btn--close-modal { 695 | font-family: inherit; 696 | color: inherit; 697 | position: absolute; 698 | top: 0.5rem; 699 | right: 2rem; 700 | font-size: 4rem; 701 | cursor: pointer; 702 | border: none; 703 | background: none; 704 | } 705 | 706 | .hidden { 707 | visibility: hidden; 708 | opacity: 0; 709 | } 710 | 711 | .cookie { 712 | position: fixed; 713 | bottom: 0; 714 | left: 0; 715 | z-index: 99; 716 | background-color: #37383d; 717 | width: 100%; 718 | height: 12rem; 719 | display: flex; 720 | align-items: center; 721 | justify-content: space-evenly; 722 | font-size: 1.6rem; 723 | box-shadow: 0 -1rem 1rem rgba(0, 0, 0, 0.1); 724 | transition: all 1s; 725 | animation: revealCookie 1.5s 1; 726 | } 727 | 728 | .cookie p { 729 | color: #eee; 730 | } 731 | 732 | @keyframes revealCookie { 733 | from { 734 | bottom: -12rem; 735 | opacity: 0; 736 | } 737 | to { 738 | bottom: 0; 739 | opacity: 1; 740 | } 741 | } 742 | 743 | @media screen and (max-width: 1024px) { 744 | .nav__item { 745 | margin-left: 0; 746 | } 747 | 748 | .nav__links li a { 749 | font-size: 2.5rem !important; 750 | } 751 | 752 | .nav__links { 753 | display: none; 754 | opacity: 0; 755 | visibility: hidden; 756 | } 757 | 758 | .nav__links.nav__open { 759 | display: flex; 760 | flex-direction: column; 761 | background-color: rgb(255, 255, 255); 762 | position: absolute; 763 | height: 100vh; 764 | width: 100vw; 765 | top: 0; 766 | left: 0; 767 | z-index: 200; 768 | justify-content: center; 769 | gap: 3rem; 770 | opacity: 1; 771 | visibility: visible; 772 | transition: all 0.3s; 773 | } 774 | 775 | .nav__toggle { 776 | display: block; 777 | width: 3.5rem; 778 | height: 3.5rem; 779 | border: none; 780 | outline: none; 781 | background-color: transparent; 782 | cursor: pointer; 783 | transition: all 0.3s; 784 | z-index: 201; 785 | } 786 | 787 | .nav__toggle:hover { 788 | color: #24cbc8; 789 | } 790 | 791 | .header__title { 792 | max-width: 115rem; 793 | display: grid; 794 | grid-template-columns: 1fr; 795 | gap: 10rem; 796 | place-items: center; 797 | text-align: center; 798 | } 799 | 800 | .header__right { 801 | width: 75vw; 802 | } 803 | 804 | .features { 805 | grid-template-columns: 1fr; 806 | } 807 | 808 | .features__feature { 809 | width: 100%; 810 | } 811 | 812 | .features__feature:nth-child(3) { 813 | grid-row: 4; 814 | } 815 | } 816 | 817 | @media screen and (max-width: 768px) { 818 | .cookie { 819 | flex-direction: column; 820 | height: 25rem; 821 | } 822 | 823 | .slider { 824 | height: 70rem; 825 | } 826 | 827 | .slide { 828 | height: 70rem; 829 | } 830 | 831 | .footer__nav { 832 | flex-direction: column; 833 | align-items: center; 834 | } 835 | 836 | .footer__item { 837 | margin-right: 0; 838 | } 839 | } 840 | 841 | @media screen and (max-width: 612px) { 842 | html { 843 | font-size: 50%; 844 | } 845 | } 846 | 847 | @media screen and (max-width: 545px) { 848 | .header__title h1 { 849 | font-size: 4rem; 850 | } 851 | 852 | .section__header { 853 | font-size: 3rem; 854 | } 855 | 856 | .cookie { 857 | padding: 2rem; 858 | } 859 | 860 | .features { 861 | margin: 0 1rem; 862 | } 863 | 864 | .operations__content--active { 865 | row-gap: 1rem; 866 | display: flex; 867 | justify-content: space-evenly; 868 | align-content: center; 869 | flex-direction: column; 870 | align-items: center; 871 | } 872 | 873 | .operations__content { 874 | font-size: 1.7rem; 875 | padding: 2rem 2rem 2.5rem 2rem; 876 | } 877 | 878 | #section--2 .operations span { 879 | display: none; 880 | } 881 | 882 | .btn { 883 | font-weight: 400; 884 | padding: 1rem 2.5rem; 885 | border-radius: 0.3rem; 886 | margin-right: 0; 887 | } 888 | 889 | .slider { 890 | height: 90rem; 891 | } 892 | 893 | .slide { 894 | height: 90rem; 895 | } 896 | 897 | .modal { 898 | max-width: 50rem; 899 | background-color: #f3f3f3; 900 | padding: 6rem 2rem; 901 | } 902 | } 903 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Virus Guard - A super secure anti-virus & web security! 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 66 | 67 | 68 |
69 |
70 | 71 |

72 | No more 73 | virus 74 | just
75 | use 76 | antivirus 77 |

78 |

The antivirus you can always trust.

79 | 80 |
81 |
82 | 83 |
84 |
85 |
86 | 87 |
88 | 89 |
90 |
91 |

Features

92 |

93 | Everything you need in an anti-virus and more. 94 |

95 |
96 | 97 |
98 | 103 |
104 |
105 | 113 | 118 | 119 |
120 |
100% secure solutions
121 |

122 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem 123 | maiores at quos, mollitia saepe nisi molestiae nulla asperiores 124 | debitis nihil voluptatem voluptate minus harum inventore 125 | recusandae odio officia illum laudantium? 126 |

127 |
128 | 129 |
130 |
131 | 139 | 144 | 145 |
146 |
More powerful kits
147 |

148 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam 149 | nesciunt quod velit dolorem ad nostrum animi sequi minima. 150 | Nesciunt accusamus at molestias. Corporis impedit totam iusto 151 | voluptatem dicta, accusantium quisquam. 152 |

153 |
154 | 159 | 160 | 165 |
166 |
167 | 175 | 180 | 181 |
182 |
Simple & fastest malware killer
183 |

184 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 185 | Perferendis officiis adipisci architecto in cupiditate error odio, 186 | aperiam, molestias quidem non saepe earum. Commodi nam aliquid 187 | libero asperiores, quibusdam eveniet eum? 188 |

189 |
190 |
191 |
192 | 193 | 194 |
195 |
196 |

Operations

197 |

198 | Everything as simple as possible, but no simpler. 199 |

200 |
201 | 202 |
203 |
204 | 210 | 213 | 216 |
217 |
220 |
221 | 229 | 234 | 235 |
236 |
237 | Free offline anti-virus solutions for you 238 |
239 |

240 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla 241 | consequatur numquam amet repudiandae beatae officia saepe 242 | architecto deleniti tempore suscipit repellendus, veniam odio 243 | cupiditate ex, quos laboriosam assumenda doloribus quasi 244 | molestiae, odit soluta ab laudantium. Pariatur autem asperiores, 245 | quas iste dolorem eligendi itaque quos ab, consequuntur in nihil 246 | assumenda ducimus! 247 |

248 |
249 | 250 |
251 |
252 | 260 | 265 | 266 |
267 |
268 | 30 days free-trial available, no credit card required 269 |
270 |

271 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi 272 | inventore velit possimus voluptas dolorum porro totam, ab dolorem 273 | deleniti, enim error, consequatur officia? Sed ullam dolorum quae 274 | officiis cumque iste ut pariatur accusantium debitis rem, dolorem 275 | quos veniam nam autem corrupti aliquid perferendis nulla fuga 276 | vitae sapiente possimus magnam animi! 277 |

278 |
279 |
280 |
281 | 289 | 294 | 295 |
296 |
Money back guarantee at any time
297 |

298 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta 299 | blanditiis odit nostrum ullam harum minima cumque voluptas 300 | mollitia ipsam maxime! Aliquam consequuntur magnam eligendi 301 | laborum corrupti nesciunt quos sit, doloremque fuga blanditiis 302 | commodi culpa rem accusantium esse voluptatem ut asperiores? 303 | Mollitia molestiae sunt at, ut ea rem sed? Odio, nobis. 304 |

305 |
306 |
307 |
308 | 309 | 310 |
311 |
312 |

Testimonials

313 |

314 | Millions of Developer are already making their lifes simpler. 315 |

316 |
317 | 318 |
319 |
320 |
321 |
322 | Best web security solution ever! 323 |
324 |
325 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 326 | Accusantium quas quisquam non? Quas voluptate nulla minima 327 | deleniti optio ullam nesciunt, numquam corporis et asperiores 328 | laboriosam sunt, praesentium suscipit blanditiis. Necessitatibus 329 | id alias reiciendis, perferendis facere pariatur dolore veniam 330 | autem esse non voluptatem saepe provident nihil molestiae. 331 |
332 |
333 | 334 |
Sarah Parker
335 |

California, USA

336 |
337 |
338 |
339 | 340 |
341 |
342 |
343 | The fastest malware and ransomware remover ever! 344 |
345 |
346 | Quisquam itaque deserunt ullam, quia ea repellendus provident, 347 | ducimus neque ipsam modi voluptatibus doloremque, corrupti 348 | laborum. Incidunt numquam perferendis veritatis neque 349 | repellendus. Lorem, ipsum dolor sit amet consectetur adipisicing 350 | elit. Illo deserunt exercitationem deleniti. 351 |
352 |
353 | 354 |
Miyah Miles
355 |

London, UK

356 |
357 |
358 |
359 | 360 |
361 |
362 |
363 | Finally free from old-school anti-virus 364 |
365 |
366 | Debitis, nihil sit minus suscipit magni aperiam vel tenetur 367 | incidunt commodi architecto numquam omnis nulla autem, 368 | necessitatibus blanditiis modi similique quidem. Odio aliquam 369 | culpa dicta beatae quod maiores ipsa minus consequatur error 370 | sunt, deleniti saepe aliquid quos inventore sequi. 371 | Necessitatibus id alias reiciendis, perferendis facere. 372 |
373 |
374 | 375 |
Rebecca Tyre
376 |

Lisbon, Portugal

377 |
378 |
379 |
380 | 381 | 382 |
383 |
384 |
385 | 386 | 387 |
388 |
389 |

390 | The best day to join Tera Guard was one year ago. The second best is 391 | today! 392 |

393 |
394 | 397 |
398 |
399 | 400 | 401 | 431 | 432 | 433 | 449 | 450 | 451 | 452 |
453 |

454 | We have use your cookies to improve our functionalities and analytics. 455 |

456 | 457 |
458 | 459 | 460 | --------------------------------------------------------------------------------