*, html, body { margin: 0px; padding: 0px; box-sizing: border-box; font-family: sans-serif; scroll-behavior: smooth; } /* @font-face { font-family: font; src: url("SpaceGrotesk-Bold.ttf"); } */ #preloader { background-image: url(load.gif); /* style background image*/ background-size: 3%; /* set image size */ background-repeat: no-repeat; /* style background image*/ background-origin: padding-box; /* style background image*/ background-position: center; /* style background image*/ background-color: #0f0d1c; /* set background color */ height: 100vh; /* div size */ width: 100%; /* div size */ position: fixed; /* stick to screen */ z-index: 100; /* move to front */ } /* animation */ .zoom { animation-name: zoom; /* zoom animation */ animation-duration: 0.5s; /* zoom animation */ z-index: 0; /* zoom animation */ } @keyframes zoom { from { transform: scale(1.2); } /* zoom animation */ to { transform: scale(1); } /* zoom animation */ } .slide { animation-name: slide; /* Slide animation */ animation-duration: 1s; /* Slide animation */ } @keyframes slide { 0% { color: #ededed; padding-left: 100px; font-size: 15px; } /* Slide animation */ 25% { color: #ededed; padding-left: 0px; font-size: 15px; } /* Slide animation */ 50% { color: #ffffff; padding-left: 0px; font-size: 20px; } /* Slide animation */ } /* animation end */ /* nav start */ nav { overflow: hidden; /* hide overflow */ display: flex; /* flexbox properties */ justify-content: center; /* flexbox properties */ align-items: center; /* flexbox properties */ width: 100%; /* set size */ height: 50px; /* set size */ text-align: center; /* center text */ margin-bottom: -50px; /* bottom margin */ } nav a { text-decoration: none; /* remove text decoration */ color: rgb(255, 255, 255); /* set text color */ text-shadow: 1px 1px 2px #00000079; /* add shadow */ padding: 20px; /* add padding */ margin-top: 30px; /* move text down */ letter-spacing: 2px; /* change letter spacing */ font-weight: lighter; /* remove bold text */ z-index: 10; /* set to top layer */ } /* nav end */ /* header */ .active { background-color: #ffffff; /* active dot color */ } .twodot { height: 13px; /* set size of dot */ width: 13px; /* set size of dot */ border: 2px solid white; /* add border */ border-radius: 50%; /* round corners */ margin: 8px; /* add margin */ z-index: 1; /* set infont of slide */ transition: background-color 0.6s ease; /* hover trasition */ } .twodothold { display: flex; /* flexbox properties */ justify-content: center; /* flexbox properties */ align-items: center; /* flexbox properties */ padding: 30px; /* add space inbetween dots */ margin-top: -88px; /* set dots ontop of header */ z-index: 1; /* set infont of slide */ } .twomySlides { background-color: rgba(100, 100, 100, 0.5); /* Tint color */ background-blend-mode: multiply; /* Tint overlay */ height: 100%; /* set size */ width: 100%; /* set size */ background-image: url(test.jpeg); /* style background image*/ background-repeat: no-repeat; /* style background image*/ background-origin: padding-box; /* style background image*/ background-size: cover; /* style background image*/ background-position: center; /* style background image*/ text-align: center; /* center text */ display: flex; /* flexbox properties */ justify-content: center; /* flexbox properties */ align-items: center; /* flexbox properties */ flex-flow: column; /* flexbox properties */ } header { overflow: hidden; /* hid overflow */ margin: 0px; /* remove any margin */ background-color: #2e2e2e; /* set background color if image not loaded */ height: 100vh; /* set height to screen size */ display: flex; /* flexbox properties */ justify-content: center; /* flexbox properties */ align-items: center; /* flexbox properties */ flex-direction: column; /* flexbox properties */ color: white; /* set text color */ text-shadow: 0.5px 0.5px rgba(0, 0, 0, 10%); /* add slight text shadow */ min-height: 500px; /* set min height */ } header h2 { font-size: 60px; /* set font size */ padding: 60px; /* add padding */ padding-top: 20px; /* add padding to top */ font-weight: normal; /* remove bold text */ letter-spacing: 10px; /* adjust letter spacing */ } header p { padding: 20px; /* add padding */ margin-top: -100px; /* move text up */ } /* header end */ /* top section */ .top { background-color: #ffffff; /* set background color */ height: 600px; /* set height */ display: flex; /* flexbox properties */ justify-content: center; /* flexbox properties */ align-items: center; /* flexbox properties */ flex-direction: column; /* flexbox properties */ text-align: center; /* flexbox properties */ } .top h2 { padding: 30px; /* add padding to text */ font-size: 35px; /* set font size */ text-decoration: none; /* remove underline */ font-weight: normal; /* remove bold text */ } .top p { padding: 30px; /* add padding to text */ } .top img { width: 150px; /* set image size */ } hr { border-top: 4px solid #000000; /* set top line */ height: 4px; /* set size */ width: 100px; /* set size */ margin: 10px; /* give magin */ } /* top section end */ /* work section */ .workContain { background-color: #ffffff; /* set background color */ display: flex; /* flexbox properties */ flex-direction: column; /* flexbox properties */ justify-content: center; /* flexbox properties */ align-items: center; /* flexbox properties */ width: 100%; /* set size */ overflow: hidden; /* hide overflow */ } .workContain h2 { padding-top: 40px; /* padding for top of text */ padding: 30px; /* text padding */ color: black; /* text color */ font-size: 30px; /* font size */ font-weight: normal; /* remove bold text */ } .workContain a { padding: 30px; /* text padding */ padding-bottom: 50px; /* padding for bottom of text */ text-decoration: none; /* remove underline */ color: rgb(0, 98, 151); /* set text color */ } .apps { display: flex; /* flexbox properties */ justify-content: center; /* flexbox properties */ align-items: center; /* flexbox properties */ flex-flow: row; /* flexbox properties */ width: 100%; /* set size */ overflow: hidden; /* hide overflow */ } .app { background-color: #454545; /* set tint color */ aspect-ratio: 16 / 9; /* force aspect ratio */ background-image: url(1.jpg); /* background image style */ background-repeat: no-repeat; /* background image style */ background-origin: content-box; /* background image style */ background-size: cover; /* background image style */ display: flex; /* flexbox properties */ justify-content: center; /* flexbox properties */ align-items: center; /* flexbox properties */ width: 100%; /* set size */ overflow: hidden; /* hide overflow */ } .app a { color: white; /* set text color */ text-decoration: none; /* remove bold text */ transition: backdrop-filter 0.2s; /* hover transition */ height: 100%; /* set size */ width: 100%; /* set size */ display: flex; /* flexbox properties */ flex-flow: column; /* flexbox properties */ justify-content: center; /* flexbox properties */ align-items: center; /* flexbox properties */ } .app p { font-size: 1vw; /* set font size */ color: transparent; /* set text transparent (until hover) */ text-align: center; /* center text */ transition: color 0.2s; /* hover transition */ } .app h2 { font-size: 1.5vw; /* set font size */ color: transparent; /* set text transparent (until hover) */ text-align: center; /* center text */ font-weight: bold; /* bold text */ transition: color 0.2s; /* hover transition */ } .app :hover { backdrop-filter: brightness(60%); /* give background dark tint */ } .app :hover p { color: white; /* show text */ } .app :hover h2 { color: white; /* show text */ } .apps1 { display: contents; /* show on large screens */ } .apps2 { display: none; /* hide on large screens */ } .apps3 { display: none; /* hide on large screens */ } /* work section end */ /* ad section start */ .ads { background-image: url(adsBack.jpeg); /* style for background image */ background-position: center; /* style for background image */ background-repeat: no-repeat; /* style for background image */ background-size: cover; /* style for background image */ background-blend-mode: overlay; /* blend-mode for background tint */ background-color: #3f454b; /* tint color */ height: 100vh; /* set size of div*/ color: white; /* text color */ padding: 75px; /* div padding */ display: flex; /* flexbox properties */ align-items: center; /* flexbox properties */ justify-content: center; /* flexbox properties */ flex-direction: row; /* flexbox properties */ min-height: 700px; /* set min height */ } .adText { display: flex; /* flexbox properties */ flex-direction: column; /* flexbox properties */ } .adText h2 { font-size: 70px; /* set font size */ font-weight: bolder; /* make text bolder */ width: 60%; /* cut text */ } .adText h3 { color: #c2c2c2; /* set text color */ padding: 25px 0px 0px 0px; /* add padding to top and bottom */ font-size: 19px; /* font size */ width: 60%; /* cut text */ } .adText h4 { color: #c2c2c2; /* set text color */ padding: 25px 0px 25px 0px; /* add padding to top and bottom */ font-size: 19px; /* font size */ width: 60%; /* cut text */ } .adText li { color: #c2c2c2; /* set text color */ margin-left: 20px; /* move bullet points over */ padding: 5px; /* give padding to bullet points */ } .btn { color: black; /* set btn text color */ text-decoration: none; /* remove underline */ margin-top: 30px; /* move btn down */ background-color: yellow; /* set btn color */ padding: 17px; /* set btn padding */ width: 175px; /* incease btn size */ text-align: center; /* align text */ border-radius: 50px; /* round div */ font-size: 12px; /* set font size */ margin-left: 5px; /* move div over */ transition: background-color 0.1s linear, box-shadow 0.1s linear; /* hover transition */ } .btn:hover { background-color: #f0f000; /* set btn color */ box-shadow: 0px 1px 2px #000000; /* shadow */ } .adImg img { width: 100%; /* set size */ height: 100%; /* set size */ border-radius: 10px; /* round image */ box-shadow: 2px 2px 4px #000000; /* shadow */ } .adImg { height: 90%; /* set size */ aspect-ratio: 8/12; /* for mantain aspect ratio */ } /* ad section end */ /* testimonials section start*/ .testimonials { background-image: url(Testimonials.jpg); /* background image style */ background-position-y: center; /* background image style */ background-repeat: no-repeat, repeat; /* background image style */ background-origin: padding-box; /* background image style */ background-attachment: fixed; /* background image style */ background-size: cover; /* background image style */ margin: 0px; /* remove maring */ background-color: #638bb0; /* set background color if image fails to load */ height: 500px; /* set size */ display: flex; /* flexbox properties */ justify-content: center; /* flexbox properties */ align-items: center; /* flexbox properties */ flex-direction: column; /* flexbox properties */ color: white; /* set text color */ text-shadow: 0.5px 0.5px rgba(0, 0, 0, 10%); /* add text shadow */ text-align: center; /* center text */ padding: 30px; } .testimonials h2 { font-size: 35px; /* set font size */ padding: 40px; /* add padding */ font-weight: normal; /* remove bold text */ } .testimonials hr { border-top: 4px solid #ffffff; /* set line color */ } .testimonials p { font-size: 20px; /* set font size */ } .testimonials h3 { padding: 30px; /* add padding */ font-weight: normal; /* remove bold text */ } .mySlides span { font-family: font; /* set custom font */ font-size: 60px; /* set font size */ } .dot { height: 13px; /* set size */ width: 13px; /* set size */ border: 2px solid white; /* set boder */ border-radius: 50%; /* round corners */ margin: 8px; /* add margin */ transition: background-color 0.6s ease; /* add hover transition */ } .dothold { display: flex; /* flexbox properties */ justify-content: center; /* flexbox properties */ align-items: center; /* flexbox properties */ padding: 50px; /* add padding */ } /* testimonials section end */ /* footer section */ footer { height: 300px; /* set size */ display: flex; /* flexbox properties */ justify-content: center; /* flexbox properties */ align-items: center; /* flexbox properties */ background-color: #0c151d; /* set background color */ color: white; /* set text color */ text-align: center; /* center text */ } /* footer section end */ #reveal { opacity: 0; /* scroll fade animation */ transition: 1s all ease; /* scroll fade animation */ } #reveal.active { /* scroll fade animation */ opacity: 1; /* scroll fade animation */ } /* media query section */ @media only screen and (max-width: 1200px) /* medium screens only */ { .apps1 { display: none; /* hide on medium screens */ } .apps2 { display: contents; /* show on medium screens */ } .apps3 { display: none; /* hide on medium screens */ } .app p { font-size: 2vw; /* set font size */ } .app h2 { font-size: 3vw; /* set font size */ } .adImg { display: none; /* hide image */ } .adTexth2 { width: 70%; /* set width */ } header h2 { font-size: 50px; /* set font size */ } .app :hover p { color: transparent; /* hide text */ } .app :hover h2 { color: transparent; /* hide text */ } } @media only screen and (max-width: 800px) /* small screens only */ { .apps1 { display: none; /* hide on small screens */ } .apps2 { display: none; /* hide on small screens */ } .apps3 { display: contents; /* show on small screens */ } .app p { font-size: 3vw; /* set font size */ } .app h2 { font-size: 4vw; /* set font size */ } .ads { padding: 50px; /* add padding */ } .adText { align-items: center; /* flexbox properties */ } .adText h2 { width: 100%; font-size: 35px; /* set font size */ text-align: center; /* center text */ } .adText h3 { width: 100%; font-size: 16px; /* set font size */ text-align: center; /* center text */ } .adText h4 { font-size: 16px; /* set font size */ text-align: center; /* center text */ width: 80%; /* cut text */ } .adText li { font-size: 15px; /* set font size */ padding: 2px; /* add padding */ } header h2 { font-size: 40px; /* set font size */ } .mySlides span { font-size: 25px; /* set font size */ padding: 5px; /* add padding */ } .mySlides p { font-size: 25px; /* set font size */ } #preloader { background-size: 7%; /* set image size */ } } /* media query section end */