├── Calculator ├── math2.webp ├── calc.js ├── calc.css └── calc.html ├── Portfolio ├── img │ ├── favicon.png │ ├── hero │ │ ├── hero.png │ │ └── port.jpg │ ├── works │ │ ├── 01.jpg │ │ ├── 02.jpg │ │ ├── 03.jpg │ │ ├── 04.jpg │ │ ├── 05.jpg │ │ └── 06.jpg │ ├── icons │ │ ├── open.svg │ │ ├── close.svg │ │ └── arrow_up.svg │ ├── social_icons │ │ ├── xing.svg │ │ ├── instagram.svg │ │ ├── facebook.svg │ │ ├── linkedin.svg │ │ └── github.svg │ └── services │ │ ├── 02.svg │ │ ├── 03.svg │ │ └── 01.svg ├── js │ └── main.js ├── css │ ├── reset.css │ ├── media.css │ └── main.css └── index.html ├── Landing Page ├── games │ ├── ETS2.jpg │ ├── gta5.png │ ├── gtavc.jpg │ ├── nfs.jfif │ ├── pubg.jpg │ └── rdd2.jfif ├── background │ ├── car.jpeg │ ├── img1.jpg │ ├── img2.jpg │ └── img3.jpg ├── land2.css └── land.html └── README.md /Calculator/math2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Calculator/math2.webp -------------------------------------------------------------------------------- /Portfolio/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Portfolio/img/favicon.png -------------------------------------------------------------------------------- /Landing Page/games/ETS2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Landing Page/games/ETS2.jpg -------------------------------------------------------------------------------- /Landing Page/games/gta5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Landing Page/games/gta5.png -------------------------------------------------------------------------------- /Landing Page/games/gtavc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Landing Page/games/gtavc.jpg -------------------------------------------------------------------------------- /Landing Page/games/nfs.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Landing Page/games/nfs.jfif -------------------------------------------------------------------------------- /Landing Page/games/pubg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Landing Page/games/pubg.jpg -------------------------------------------------------------------------------- /Landing Page/games/rdd2.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Landing Page/games/rdd2.jfif -------------------------------------------------------------------------------- /Portfolio/img/hero/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Portfolio/img/hero/hero.png -------------------------------------------------------------------------------- /Portfolio/img/hero/port.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Portfolio/img/hero/port.jpg -------------------------------------------------------------------------------- /Portfolio/img/works/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Portfolio/img/works/01.jpg -------------------------------------------------------------------------------- /Portfolio/img/works/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Portfolio/img/works/02.jpg -------------------------------------------------------------------------------- /Portfolio/img/works/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Portfolio/img/works/03.jpg -------------------------------------------------------------------------------- /Portfolio/img/works/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Portfolio/img/works/04.jpg -------------------------------------------------------------------------------- /Portfolio/img/works/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Portfolio/img/works/05.jpg -------------------------------------------------------------------------------- /Portfolio/img/works/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Portfolio/img/works/06.jpg -------------------------------------------------------------------------------- /Landing Page/background/car.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Landing Page/background/car.jpeg -------------------------------------------------------------------------------- /Landing Page/background/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Landing Page/background/img1.jpg -------------------------------------------------------------------------------- /Landing Page/background/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Landing Page/background/img2.jpg -------------------------------------------------------------------------------- /Landing Page/background/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navdeep-04/Web_Development/HEAD/Landing Page/background/img3.jpg -------------------------------------------------------------------------------- /Portfolio/img/icons/open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Portfolio/img/icons/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Portfolio/img/social_icons/xing.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Portfolio/img/social_icons/instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Portfolio/img/icons/arrow_up.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Portfolio/img/social_icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /Portfolio/img/social_icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | -------------------------------------------------------------------------------- /Portfolio/img/social_icons/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /Portfolio/img/services/02.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Portfolio/js/main.js: -------------------------------------------------------------------------------- 1 | const nav = document.querySelector("#nav"); 2 | const navBtn = document.querySelector("#nav-btn"); 3 | const navBtnImg = document.querySelector("#nav-btn-img"); 4 | 5 | //Preloader 6 | function hidePreloader() { 7 | const preloader = document.getElementById("preloader"); 8 | preloader.style.display = "none"; 9 | } 10 | 11 | window.addEventListener("load", function () { 12 | setTimeout(hidePreloader, 1700); 13 | }); 14 | 15 | //Hamburger menu 16 | navBtn.onclick = () => { 17 | if (nav.classList.toggle("open")) { 18 | navBtnImg.src = "img/icons/close.svg"; 19 | } else { 20 | navBtnImg.src = "img/icons/open.svg"; 21 | } 22 | }; 23 | 24 | //Sticky header & goToTop button 25 | window.addEventListener("scroll", function () { 26 | const header = document.querySelector("#header"); 27 | const hero = document.querySelector("#home"); 28 | let triggerHeight = hero.offsetHeight - 170; 29 | 30 | if (window.scrollY > triggerHeight) { 31 | header.classList.add("header-sticky"); 32 | goToTop.classList.add("reveal"); 33 | } else { 34 | header.classList.remove("header-sticky"); 35 | goToTop.classList.remove("reveal"); 36 | } 37 | }); 38 | 39 | //AOS animations settings 40 | AOS.init({ 41 | once: true, 42 | }); 43 | -------------------------------------------------------------------------------- /Calculator/calc.js: -------------------------------------------------------------------------------- 1 | function appendChar(char) { 2 | const display = document.getElementById("display"); 3 | const expression = document.getElementById("expression"); 4 | display.value += char; // Append character to the display 5 | expression.value = display.value; // Show expression 6 | } 7 | 8 | function clearDisplay() { 9 | document.getElementById("display").value = ""; 10 | document.getElementById("expression").value = ""; // Clear expression 11 | } 12 | 13 | function deleteChar() { 14 | const display = document.getElementById("display"); 15 | const expression = document.getElementById("expression"); 16 | display.value = display.value.slice(0, -1); // Remove last character from display 17 | expression.value = display.value; // Update expression 18 | } 19 | 20 | function calculate() { 21 | const display = document.getElementById("display"); 22 | const expression = document.getElementById("expression"); 23 | try { 24 | const result = eval(display.value); // Evaluate the expression 25 | display.value = result; // Display the result 26 | expression.value = expression.value + " = " + result; // Update the expression with result 27 | } catch { 28 | display.value = "Error"; // Handle errors 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /Calculator/calc.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-image: url('math2.webp'); 9 | background-size: cover; 10 | font-family: 'Arial', sans-serif; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | height: 100vh; 15 | background-color: #f0f0f0; 16 | 17 | } 18 | 19 | .calculator { 20 | background-color: #333; 21 | padding: 20px; 22 | border-radius: 10px; 23 | box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); 24 | max-width: 400px; 25 | width: 100%; 26 | } 27 | 28 | .display { 29 | width: 100%; 30 | height: 60px; 31 | background-color: #222; 32 | color: #00ff00; 33 | font-size: 2em; 34 | text-align: right; 35 | padding: 15px; 36 | border: none; 37 | border-radius: 5px; 38 | margin-bottom: 15px; 39 | box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); 40 | } 41 | 42 | .buttons { 43 | display: grid; 44 | grid-template-columns: repeat(4, 1fr); 45 | gap: 15px; 46 | } 47 | 48 | button { 49 | padding: 20px; 50 | font-size: 1.5em; 51 | background-color: #444; 52 | color: white; 53 | border: none; 54 | border-radius: 10px; 55 | cursor: pointer; 56 | transition: background-color 0.3s; 57 | } 58 | 59 | button:hover { 60 | background-color: #555; 61 | } 62 | 63 | button.zero { 64 | grid-column: span 2; 65 | } 66 | 67 | button.equal { 68 | background-color: #00aa00; 69 | } 70 | 71 | button.equal:hover { 72 | background-color: #008800; 73 | } -------------------------------------------------------------------------------- /Portfolio/img/services/03.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Portfolio/css/reset.css: -------------------------------------------------------------------------------- 1 | /* Reset and base styles */ 2 | * { 3 | padding: 0px; 4 | margin: 0px; 5 | border: none; 6 | } 7 | 8 | *, 9 | *::before, 10 | *::after { 11 | box-sizing: border-box; 12 | } 13 | 14 | /* Links */ 15 | 16 | a, 17 | a:link, 18 | a:visited { 19 | text-decoration: none; 20 | } 21 | 22 | a:hover { 23 | text-decoration: none; 24 | } 25 | 26 | /* Common */ 27 | 28 | aside, 29 | nav, 30 | footer, 31 | header, 32 | section, 33 | main { 34 | display: block; 35 | } 36 | 37 | h1, 38 | h2, 39 | h3, 40 | h4, 41 | h5, 42 | h6, 43 | p { 44 | font-size: inherit; 45 | font-weight: inherit; 46 | } 47 | 48 | ul, 49 | ul li { 50 | list-style: none; 51 | } 52 | 53 | img { 54 | vertical-align: top; 55 | } 56 | 57 | img, 58 | svg { 59 | max-width: 100%; 60 | height: auto; 61 | } 62 | 63 | address { 64 | font-style: normal; 65 | } 66 | 67 | /* Form */ 68 | 69 | input, 70 | textarea, 71 | button, 72 | select { 73 | font-family: inherit; 74 | font-size: inherit; 75 | color: inherit; 76 | background-color: transparent; 77 | } 78 | 79 | input::-ms-clear { 80 | display: none; 81 | } 82 | 83 | button, 84 | input[type="submit"] { 85 | display: inline-block; 86 | box-shadow: none; 87 | background-color: transparent; 88 | background: none; 89 | cursor: pointer; 90 | } 91 | 92 | input:focus, 93 | input:active, 94 | button:focus, 95 | button:active { 96 | outline: none; 97 | } 98 | 99 | button::-moz-focus-inner { 100 | padding: 0; 101 | border: 0; 102 | } 103 | 104 | label { 105 | cursor: pointer; 106 | } 107 | 108 | legend { 109 | display: block; 110 | } 111 | -------------------------------------------------------------------------------- /Portfolio/img/services/01.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | (Level 1) 4 | 5 | Task 1:- PORTFOLIO PAGE Creating a personal portfolio using CSS and HTML is a popular beginner web development project. Header Section: Add your name or a logo at the top. Optionally, include a brief introduction or tagline. About Section: Insert an image of yourself. Write a short bio highlighting your skills and experience. Skills Section: List your key skills or areas of expertise. Projects Section: Showcase samples of your work or projects. Include project titles, descriptions, and images. Resume Section: Provide a link to download your resume in PDF format. Contact Section: Include your contact information, such as email address and phone number. Footer: Add a copyright notice and any additional links or information. 6 | 7 | 8 | Task 2:- LANDING PAGE A landing page is an ideal web development project for beginners. It requires basic knowledge of HTML and CSS. Through this project, you'll learn to create columns, divide sections, arrange items, and add headers and footers. The most important aspect is unleashing your creativity to design an impressive page. Pay attention to alignments, padding, color palette, boxes, and other elements. Be mindful of CSS to avoid overlapping elements. In short, a landing page project allows you to apply HTML and CSS skills, encouraging your creativity while ensuring a visually appealing and user-friendly design 9 | 10 | Task 3:- CALCULATOR To create a basic calculator using CSS, HTML, and JavaScript, you'll need to implement an interactive interface with buttons for addition, subtraction, multiplication, and division operations. The calculator should have a display screen to show user input and results. Utilize CSS grid system for button alignments. Use event listeners, if-else statements, operators, and loops to handle user input and perform calculations. This project requires some skill but can be done with basic knowledge of these technologies. 11 | -------------------------------------------------------------------------------- /Calculator/calc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Calculator 7 | 8 | 9 | 10 |
11 |

Calculator

12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 |
53 |
54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /Landing Page/land2.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: Arial, sans-serif; 9 | line-height: 1.6; 10 | } 11 | 12 | header { 13 | background-color: #333; 14 | color: #fff; 15 | padding: 20px 0; 16 | text-align: center; 17 | } 18 | 19 | nav ul { 20 | list-style-type: none; 21 | margin: 0; 22 | padding: 0; 23 | } 24 | 25 | nav ul li { 26 | display: inline; 27 | margin-right: 20px; 28 | } 29 | 30 | nav ul li a { 31 | color: white; 32 | text-decoration: none; 33 | } 34 | 35 | .hero { 36 | background-image: url('background/car.jpeg'); 37 | background-size: cover; 38 | background-position: center; 39 | height: 85vh; 40 | display: flex; 41 | justify-content: center; 42 | align-items: center; 43 | text-align: center; 44 | color: white; 45 | } 46 | 47 | .hero h2 { 48 | font-size: 3rem; 49 | } 50 | 51 | .cta-button { 52 | display: inline-block; 53 | background-color: #ff0000; 54 | color: #fff; 55 | padding: 10px 20px; 56 | text-decoration: none; 57 | margin-top: 20px; 58 | border-radius: 5px; 59 | } 60 | 61 | .features { 62 | padding: 40px; 63 | text-align: center; 64 | background-color: #f4f4f4; 65 | background-image: url("background/img1.jpg"); 66 | background-size: cover; 67 | background-position: center; 68 | height: 55vh; 69 | } 70 | 71 | .feature-list { 72 | display: flex; 73 | justify-content: space-around; 74 | } 75 | 76 | .feature-item { 77 | width: 30%; 78 | background: #fff; 79 | padding: 20px; 80 | margin: 10px; 81 | border-radius: 10px; 82 | box-shadow: 0 4px 8px rgba(0,0,0,0.1); 83 | } 84 | 85 | /* Styling for game section */ 86 | .games { 87 | padding: 40px; 88 | background-color: #fff; 89 | background-image: url('background/img2.jpg'); 90 | text-align: center; 91 | } 92 | 93 | /* Styling for individual game items */ 94 | .game-item { 95 | width: 30%; /* Each game takes up 30% of the available space */ 96 | display: inline-block; 97 | margin: 10px; 98 | padding: 10px; 99 | background-color: #f4f4f4; 100 | border-radius: 10px; 101 | text-align: center; 102 | box-shadow: 0 4px 8px rgba(0,0,0,0.1); 103 | } 104 | 105 | /* Styling for game images */ 106 | .game-image { 107 | width: 300px; /* Set fixed width */ 108 | height: 200px; /* Set fixed height */ 109 | object-fit: fill; /* Crops the image to fit within the dimensions */ 110 | 111 | } 112 | 113 | /* Play button styling */ 114 | .play-button { 115 | display: inline-block; 116 | background-color: #333; 117 | color: #fff; 118 | padding: 10px 20px; 119 | text-decoration: none; 120 | margin-top: 10px; 121 | border-radius: 5px; 122 | font-weight: bold; 123 | } 124 | 125 | 126 | .contact { 127 | padding: 40px; 128 | background-color: #333; 129 | color: #fff; 130 | text-align: center; 131 | } 132 | 133 | .contact form { 134 | max-width: 600px; 135 | margin: 0 auto; 136 | } 137 | 138 | .contact form input, .contact form textarea { 139 | width: 100%; 140 | padding: 10px; 141 | margin: 10px 0; 142 | } 143 | 144 | footer { 145 | padding: 20px; 146 | background-color: #222; 147 | color: #fff; 148 | text-align: center; 149 | } 150 | -------------------------------------------------------------------------------- /Portfolio/css/media.css: -------------------------------------------------------------------------------- 1 | @media (max-width: 1320px) { 2 | .container-lg { 3 | max-width: 120rem; 4 | } 5 | 6 | .hero-content { 7 | padding: 0; 8 | } 9 | 10 | .header-nav { 11 | padding: 0; 12 | } 13 | 14 | .service-card { 15 | padding: 0 1rem; 16 | } 17 | } 18 | 19 | @media (max-width: 1200px) { 20 | .container { 21 | max-width: 97.5rem; 22 | } 23 | 24 | .title { 25 | font-size: 4rem; 26 | } 27 | 28 | .logo { 29 | font-size: 2.6rem; 30 | } 31 | 32 | .hero-heading { 33 | font-size: 7rem; 34 | } 35 | 36 | .about-skills { 37 | min-width: 60%; 38 | padding-left: 0; 39 | } 40 | 41 | .about-content { 42 | padding-right: 0; 43 | } 44 | 45 | .service-card-title { 46 | font-size: 1.8rem; 47 | } 48 | 49 | .project-box { 50 | max-width: 45.4rem; 51 | } 52 | 53 | .about, 54 | .projects, 55 | .contact { 56 | padding: 8rem 0; 57 | } 58 | } 59 | 60 | @media (max-width: 977px) { 61 | html { 62 | font-size: 62%; 63 | } 64 | 65 | .container { 66 | max-width: 72rem; 67 | } 68 | 69 | .title { 70 | font-size: 3.6rem; 71 | } 72 | 73 | .header { 74 | padding: 0; 75 | } 76 | 77 | .about-row { 78 | row-gap: 5rem; 79 | margin-bottom: 5rem; 80 | } 81 | 82 | .about-descr { 83 | font-size: 1.52rem; 84 | } 85 | 86 | .nav-list { 87 | display: none; 88 | } 89 | 90 | .nav-btn { 91 | display: block; 92 | } 93 | 94 | .nav.open .nav-list { 95 | position: fixed; 96 | top: 0; 97 | bottom: 0; 98 | left: 0; 99 | right: 0; 100 | background-color: #fff; 101 | z-index: 1; 102 | padding: 4.6rem 3rem; 103 | display: flex; 104 | flex-direction: column; 105 | row-gap: 4rem; 106 | font-size: 3rem; 107 | font-weight: 500; 108 | } 109 | 110 | .nav-link { 111 | color: #c0c0c0; 112 | } 113 | 114 | .nav-link.active { 115 | color: #0c1618; 116 | } 117 | 118 | .nav-btn { 119 | position: absolute; 120 | z-index: 9; 121 | top: 3rem; 122 | right: 3rem; 123 | } 124 | 125 | .nav.open .nav-btn { 126 | position: fixed; 127 | } 128 | 129 | .header-nav { 130 | margin-bottom: 0rem; 131 | } 132 | 133 | .hero { 134 | padding-top: 16rem; 135 | } 136 | 137 | .hero-greeting { 138 | font-size: 1.6rem; 139 | } 140 | .hero-heading { 141 | font-size: 5.2rem; 142 | } 143 | .hero-heading-subtitle { 144 | font-size: 1.6rem; 145 | } 146 | 147 | .social-links-row { 148 | column-gap: 1.7rem; 149 | margin: 3rem 0 3rem; 150 | } 151 | 152 | .hero-img { 153 | padding: 0; 154 | } 155 | 156 | .btn { 157 | font-size: 1.1rem; 158 | padding: 0 2rem; 159 | } 160 | 161 | .services-row { 162 | justify-content: center; 163 | row-gap: 5rem; 164 | } 165 | .service-card { 166 | flex: 0 0 30.5rem; 167 | } 168 | 169 | .service-card-img { 170 | height: 4rem; 171 | } 172 | 173 | .project-box { 174 | max-width: 32.7rem; 175 | } 176 | 177 | .about, 178 | .projects, 179 | .contact { 180 | padding: 7rem 0; 181 | } 182 | 183 | .about-title, 184 | .projects-title, 185 | .contact-title { 186 | margin-bottom: 3rem; 187 | } 188 | } 189 | 190 | @media (max-width: 720px) { 191 | .container { 192 | max-width: 54.5rem; 193 | } 194 | 195 | .logo { 196 | font-size: 2.4rem; 197 | } 198 | 199 | .nav.open .nav-list { 200 | row-gap: 2rem; 201 | font-size: 2rem; 202 | font-weight: 500; 203 | } 204 | 205 | .hero-row { 206 | row-gap: 4rem; 207 | } 208 | 209 | .hero-content, 210 | .hero-img { 211 | text-align: center; 212 | flex: 0 0 100%; 213 | max-width: 100%; 214 | } 215 | 216 | .about-social-list { 217 | display: block; 218 | } 219 | 220 | .about-skills, 221 | .about-content, 222 | .service-card { 223 | flex: 0 0 100%; 224 | max-width: 100%; 225 | } 226 | 227 | .project-box { 228 | max-width: 100%; 229 | } 230 | 231 | .footer-copyright p { 232 | font-size: 1.2rem; 233 | } 234 | } 235 | 236 | @media (max-width: 406px) { 237 | html { 238 | font-size: 50%; 239 | } 240 | 241 | .footer-copyright p { 242 | font-size: 1.2rem; 243 | } 244 | } 245 | -------------------------------------------------------------------------------- /Landing Page/land.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Online Games - Play Now 8 | 9 | 10 | 11 |
12 | 15 | 23 |
24 | 25 |
26 |
27 |

Play the Best Online Games!

28 |

Discover, Play, and Win with our exciting collection of games. Get started now!

29 | Explore Games 30 |
31 |
32 | 33 |
34 |

Why Choose Us?

35 |
36 |
37 |

Fast & Secure

38 |

Enjoy a seamless gaming experience with top-notch security.

39 |
40 |
41 |

Huge Game Library

42 |

Access hundreds of games, from action to puzzles, all in one place.

43 |
44 |
45 |

Compete Globally

46 |

Join players from around the world and show your skills.

47 |
48 |
49 |
50 | 51 |
52 |

Our Games

53 |
54 | 55 |
56 | Action Blast 57 |

NFS MOST WANTED

58 |

A real racing game.

59 | Play Now 60 |
61 | 62 |
63 | Brain Teasers 64 |

PUBG

65 |

Action with multiplayer game.

66 | Play Now 67 |
68 | 69 |
70 | Racing Fury 71 |

GTA 5

72 |

Experience the entertainment blockbuster.

73 | Play Now 74 |
75 | 76 |
77 | Action Blast 78 |

EURO TRUCK SIMULATOR 2

79 |

Vehicle simulation game.

80 | Play Now 81 |
82 | 83 |
84 | Brain Teasers 85 |

GTA VICE CITY

86 |

Open world game.

87 | Play Now 88 |
89 | 90 |
91 | Racing Fury 92 |

RED DEAD REDEMPTION 2

93 |

shooter video game.

94 | Play Now 95 |
96 |
97 |
98 | 99 |
100 |

Contact Us

101 |
102 | 103 | 104 | 105 | 106 |
107 |
108 | 109 | 112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /Portfolio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Navdeep 7 | 8 | 9 | 10 | 17 | 18 | 19 | 20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 | 58 | 59 |
60 |
61 |
68 |
69 | Hello, I am 70 |

Navdeep S

71 | Software Developer 74 |
75 | 108 |
109 | 110 |
111 | My Portfolio 112 | Contact Me 113 |
114 |
115 |
116 | Cartoon</a> 119 | 121 |
122 |
123 |
124 |
125 | 126 |
127 |
128 |
129 |

About Me

130 |
131 |
132 |
133 |

134 | I am currently studying B.Tech Information Technology in K.Ramakrishnan college of engineering (KRCE). 135 | Besides, I am a Software Developer with a passion for coding and 136 | problem solving. 137 |

138 |
139 | Download CV 140 |
141 |
142 |
143 |
144 |
Java
145 |
70%
146 |
147 |
148 |
149 |
Web design
150 |
80%
151 |
152 |
153 |
154 |
C
155 |
65%
156 |
157 |
158 |
159 |
160 |
161 |
162 | 163 |

App Development

164 |

165 | 166 |

167 |
168 | 169 |
170 | 171 |

Frontend Development

172 |

173 | 174 |

175 |
176 | 177 |
178 | 179 |

UI/UX Design

180 |

181 | 182 |

183 |
184 |
185 |
186 |
187 | 188 |
189 |
190 |
191 |

Projects

192 |
193 | 194 |
195 | 196 |
197 | 198 | 199 |
200 |
201 |
Web design
202 |

UI/UX Design

203 |
204 |
205 | 206 |
207 |
208 | 209 | 210 |
211 |
212 |
Landing Page
213 |

UI/UX Design, Web Development

214 |
215 |
216 | 217 |
218 |
219 | 220 | 221 |
222 |
223 |
Portfolio
224 |

Web Development

225 |
226 |
227 | 228 |
229 | 230 |
231 |
232 |
233 | 234 |
235 |
236 |
237 |

Contact

238 |
239 |
240 |

241 | 242 |
243 | Let's talk and work together! 244 |

245 |
246 | 247 |
248 |
249 | 250 | 256 |
257 | 258 | 266 |
267 | 268 |
269 | Send Message 270 |
271 |
272 |
273 | 274 | 315 | 316 |
317 | 318 | Back to top 320 |
321 | 322 | 328 | 329 | 330 | 331 | -------------------------------------------------------------------------------- /Portfolio/css/main.css: -------------------------------------------------------------------------------- 1 | @import "./reset.css"; 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); 3 | 4 | :root { 5 | --primary-bg-color: #f7fbfd; 6 | --primary-accent: #0c1618; 7 | --secondary-accent: #6f1d1b; 8 | 9 | --main-text-color: #0c1618; 10 | --gray-text-color: #565a5b; 11 | 12 | --white-color: #fff; 13 | --gray-color: #e9e8e8; 14 | --gray-color-2: #c0c0c0; 15 | --gray-color-3: #e6e6e6; 16 | 17 | --color-preloader-bg: var(--white-color); 18 | --color-dots: #1a1a1a; 19 | } 20 | 21 | /* Common styles */ 22 | html { 23 | font-size: 62.5%; 24 | scroll-behavior: smooth; 25 | overflow-x: hidden; 26 | } 27 | 28 | body { 29 | color: var(--main-text-color); 30 | font-family: "Poppins", sans-serif; 31 | } 32 | 33 | .container { 34 | padding: 0 3.2rem; 35 | max-width: 120rem; 36 | margin: 0 auto; 37 | } 38 | 39 | .container-lg { 40 | max-width: 160rem; 41 | } 42 | 43 | .title { 44 | font-size: 4.4rem; 45 | font-weight: 600; 46 | text-align: center; 47 | } 48 | 49 | .btn { 50 | display: inline-block; 51 | height: 5.2rem; 52 | font-weight: 500; 53 | font-size: 1.2rem; 54 | text-transform: uppercase; 55 | letter-spacing: 0.3em; 56 | line-height: 5.2rem; 57 | padding: 0 3.6rem; 58 | margin: 0 1.2rem 1.6rem 0; 59 | color: var(--white-color); 60 | text-decoration: none; 61 | text-align: center; 62 | white-space: nowrap; 63 | cursor: pointer; 64 | transition: all 0.3s; 65 | background-color: var(--primary-accent); 66 | border: 2px solid var(--primary-accent); 67 | transition: all 0.3s ease-in; 68 | } 69 | 70 | .btn:hover, 71 | .btn:focus { 72 | background-color: var(--secondary-accent); 73 | border-color: var(--secondary-accent); 74 | color: var(--white-color); 75 | outline: 0; 76 | } 77 | 78 | .btn:active { 79 | background-color: #8b4a48; 80 | } 81 | 82 | .btn-white { 83 | background: transparent; 84 | font-weight: 700; 85 | border: 2px solid var(--primary-accent); 86 | color: var(--primary-accent); 87 | transition: all 0.3s ease-in; 88 | } 89 | 90 | .btn-white:hover, 91 | .btn-white:focus { 92 | background: var(--primary-accent); 93 | border: 2px solid var(--primary-accent); 94 | color: var(--white-color); 95 | } 96 | 97 | .btn-white:active { 98 | background-color: #3c4446; 99 | } 100 | 101 | .btn-red { 102 | background: var(--secondary-accent); 103 | border: 2px solid var(--secondary-accent); 104 | color: var(--white-color); 105 | transition: all 0.3s ease-in; 106 | } 107 | 108 | .btn-red:hover, 109 | .btn-red:focus { 110 | background: var(--primary-accent); 111 | border: 2px solid var(--primary-accent); 112 | } 113 | 114 | .btn-red:active { 115 | background-color: #3c4446; 116 | } 117 | 118 | h5 { 119 | font-size: 15px; 120 | letter-spacing: 2px; 121 | line-height: 23px; 122 | font-weight: 600; 123 | text-transform: uppercase; 124 | } 125 | 126 | .white { 127 | color: var(--white-color); 128 | } 129 | 130 | /* Header */ 131 | .header { 132 | z-index: 100; 133 | background-color: transparent; 134 | height: 7.2rem; 135 | width: 100%; 136 | position: absolute; 137 | top: 0; 138 | left: 0; 139 | padding: 2.5rem 0; 140 | } 141 | 142 | .header-nav { 143 | display: flex; 144 | justify-content: space-between; 145 | align-items: center; 146 | padding: 0 2.5rem; 147 | height: 7.2rem; 148 | } 149 | 150 | .header-sticky { 151 | position: fixed; 152 | top: 0; 153 | left: 0; 154 | width: 100%; 155 | z-index: 1999; 156 | background-color: rgba(255, 255, 255, 0.95); 157 | box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.07); 158 | padding-top: 0; 159 | padding-bottom: 0; 160 | animation: slideInDown 0.3s ease-in-out; 161 | } 162 | 163 | @keyframes slideInDown { 164 | 0% { 165 | transform: translateY(-100%); 166 | visibility: visible; 167 | } 168 | 169 | 100% { 170 | transform: translateY(0); 171 | } 172 | } 173 | 174 | .logo { 175 | position: relative; 176 | padding: 0 1.2rem 0.3rem 0; 177 | line-height: 1; 178 | font-weight: 600; 179 | font-size: 3.2rem; 180 | color: var(--main-text-color); 181 | } 182 | 183 | .logo span { 184 | color: var(--secondary-accent); 185 | font-size: 4rem; 186 | } 187 | 188 | .nav-list { 189 | display: flex; 190 | column-gap: 2.6rem; 191 | font-weight: 400; 192 | font-size: 1.6rem; 193 | } 194 | 195 | .nav-btn { 196 | display: none; 197 | } 198 | 199 | .nav-link { 200 | color: var(--gray-text-color); 201 | } 202 | 203 | .nav-link.active { 204 | color: var(--secondary-accent); 205 | font-weight: 600; 206 | } 207 | 208 | /* Hero section */ 209 | .hero { 210 | position: relative; 211 | padding-top: 18rem; 212 | background-color: var(--primary-bg-color); 213 | } 214 | 215 | .hero-row { 216 | display: flex; 217 | flex-wrap: wrap; 218 | } 219 | 220 | .hero-content { 221 | text-align: left; 222 | align-self: center; 223 | flex: 0 0 58.3333%; 224 | padding: 2rem; 225 | } 226 | 227 | .hero-greeting { 228 | font-size: 2rem; 229 | font-weight: 400; 230 | text-transform: uppercase; 231 | letter-spacing: 0.3rem; 232 | color: var(--secondary-accent); 233 | } 234 | 235 | .hero-heading { 236 | margin: 0.5rem 0; 237 | font-weight: 500; 238 | font-size: 8rem; 239 | line-height: 1.2; 240 | } 241 | 242 | .hero-heading-subtitle { 243 | font-size: 2rem; 244 | font-weight: 400; 245 | } 246 | 247 | .hero-img { 248 | flex: 0 0 41.6667%; 249 | text-align: right !important; 250 | padding: 0 1.5rem; 251 | } 252 | 253 | .hero-img img { 254 | max-width: 100%; 255 | height: auto; 256 | vertical-align: bottom; 257 | } 258 | 259 | .about-social-list { 260 | display: flex; 261 | } 262 | 263 | .social-links-row { 264 | display: flex; 265 | justify-content: center; 266 | align-items: center; 267 | column-gap: 2rem; 268 | margin: 4rem 0 4rem; 269 | } 270 | 271 | .social-links-row a { 272 | height: 2.4rem; 273 | width: 2.4rem; 274 | filter: invert(35%) sepia(11%) saturate(160%) hue-rotate(145deg) 275 | brightness(88%) contrast(80%); 276 | transition: all 0.3s ease-in-out; 277 | } 278 | 279 | .social-links-row a:hover { 280 | filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(305deg) 281 | brightness(97%) contrast(103%); 282 | } 283 | 284 | /* About section */ 285 | .about { 286 | padding: 10rem 0; 287 | } 288 | 289 | .about-title { 290 | margin-bottom: 4rem; 291 | } 292 | 293 | .about-row { 294 | display: flex; 295 | justify-content: center; 296 | flex-wrap: wrap; 297 | row-gap: 6rem; 298 | margin-bottom: 8rem; 299 | } 300 | 301 | .about-descr { 302 | font-size: 1.6rem; 303 | font-weight: 400; 304 | line-height: 1.7; 305 | color: var(--gray-text-color); 306 | } 307 | 308 | .about-content { 309 | flex: 60%; 310 | padding-right: 3rem; 311 | } 312 | 313 | .about-skills { 314 | min-width: 45rem; 315 | padding-left: 3rem; 316 | } 317 | 318 | .skill { 319 | position: relative; 320 | display: block; 321 | width: 100%; 322 | margin-bottom: 3rem; 323 | } 324 | 325 | .skill-title, 326 | .skill-percent { 327 | display: inline-block; 328 | font-size: 1.2rem; 329 | font-weight: 700; 330 | text-transform: uppercase; 331 | letter-spacing: 0.1rem; 332 | } 333 | 334 | .skill-percent { 335 | float: right; 336 | } 337 | 338 | .skillbar { 339 | height: 0.4rem; 340 | background-color: var(--secondary-accent); 341 | } 342 | 343 | .skillbar:before { 344 | background: var(--gray-color); 345 | content: ""; 346 | height: 0.4rem; 347 | position: absolute; 348 | width: 100%; 349 | z-index: -1; 350 | } 351 | 352 | .about-download-btn { 353 | margin-top: 4rem; 354 | } 355 | 356 | .services-row { 357 | display: flex; 358 | row-gap: 6rem; 359 | flex-wrap: wrap; 360 | justify-content: space-between; 361 | } 362 | 363 | .service-card { 364 | flex: 33.33333333%; 365 | } 366 | 367 | .service-card-img { 368 | display: block; 369 | height: 5rem; 370 | margin: 0 auto 2rem; 371 | filter: invert(33%) sepia(7%) saturate(243%) hue-rotate(145deg) 372 | brightness(94%) contrast(81%); 373 | } 374 | 375 | .service-card-title { 376 | text-align: center; 377 | text-transform: uppercase; 378 | letter-spacing: 0.2rem; 379 | margin-bottom: 1rem; 380 | font-weight: 600; 381 | font-size: 2rem; 382 | } 383 | 384 | .service-card p { 385 | font-size: 1.5rem; 386 | line-height: 1.7; 387 | text-align: center; 388 | color: var(--gray-text-color); 389 | } 390 | 391 | /* Works */ 392 | .projects { 393 | padding: 10rem 0; 394 | background-color: var(--primary-bg-color); 395 | } 396 | 397 | .projects-title { 398 | text-align: center; 399 | margin-bottom: 4rem; 400 | } 401 | 402 | .projects-row { 403 | display: flex; 404 | flex-wrap: wrap; 405 | justify-content: center; 406 | } 407 | 408 | .project-box { 409 | position: relative; 410 | overflow: hidden; 411 | display: block; 412 | max-width: 51rem; 413 | } 414 | 415 | .project-box a { 416 | display: inline-block; 417 | } 418 | 419 | .project-box:hover .project-mask { 420 | opacity: 1; 421 | visibility: visible; 422 | } 423 | 424 | .project-box:hover .project-mask .project-caption { 425 | bottom: 30px; 426 | opacity: 1; 427 | } 428 | 429 | .project-box:hover .project-img { 430 | transform: scale(1.1); 431 | transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s; 432 | width: 100%; 433 | } 434 | 435 | .project-img { 436 | transform: scale(1); 437 | width: 100%; 438 | transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s; 439 | } 440 | 441 | .project-mask { 442 | background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); 443 | height: 100%; 444 | position: absolute; 445 | transition: all 0.5s ease-in-out 0s; 446 | width: 100%; 447 | top: 0; 448 | left: 0; 449 | opacity: 0; 450 | visibility: hidden; 451 | overflow: hidden; 452 | } 453 | 454 | .project-mask p { 455 | text-transform: uppercase; 456 | font-size: 1.1rem; 457 | letter-spacing: 0.15rem; 458 | font-weight: 400; 459 | margin-top: 0; 460 | text-align: left; 461 | } 462 | 463 | .project-mask .project-caption { 464 | position: absolute; 465 | bottom: -6rem; 466 | left: 0; 467 | padding-left: 3rem; 468 | padding-right: 3rem; 469 | text-align: left; 470 | transition: all 0.5s ease-in-out 0s; 471 | opacity: 0; 472 | } 473 | 474 | .project-mask p { 475 | text-transform: uppercase; 476 | font-size: 1.1rem; 477 | letter-spacing: 0.15rem; 478 | font-weight: 400; 479 | margin-top: 0; 480 | text-align: left; 481 | } 482 | 483 | /* Contact */ 484 | .contact { 485 | padding: 10rem 0; 486 | text-align: center; 487 | } 488 | 489 | .contact-title { 490 | margin-bottom: 4rem; 491 | } 492 | 493 | .contact-content { 494 | font-size: 1.8rem; 495 | margin: 0 auto 2rem; 496 | } 497 | 498 | .contact form { 499 | max-width: 50rem; 500 | margin: 2rem auto; 501 | text-align: center; 502 | } 503 | 504 | .contact form .input-box { 505 | display: flex; 506 | justify-content: space-between; 507 | flex-wrap: wrap; 508 | } 509 | 510 | .contact form .input-box input, 511 | .contact form textarea { 512 | width: 100%; 513 | padding: 1.5rem; 514 | font-size: 1.5rem; 515 | color: var(--gray-text-color); 516 | border: 0.1rem solid var(--gray-color-2); 517 | margin: 0.7rem 0; 518 | } 519 | 520 | .contact form .input-box input { 521 | width: 100%; 522 | } 523 | 524 | .contact form textarea { 525 | resize: none; 526 | } 527 | 528 | /* Footer */ 529 | .footer { 530 | background-color: var(--primary-accent); 531 | color: var(--gray-color-3); 532 | } 533 | 534 | .footer-row { 535 | display: flex; 536 | flex-direction: column; 537 | column-gap: 2rem; 538 | align-items: center; 539 | padding: 4rem 0; 540 | } 541 | 542 | .footer-social { 543 | margin-top: 0; 544 | } 545 | 546 | .footer-social a:hover { 547 | filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) 548 | brightness(102%) contrast(102%); 549 | } 550 | 551 | .footer-copyright { 552 | font-size: 1.6rem; 553 | } 554 | 555 | /* "go to top" button */ 556 | .goToTop { 557 | z-index: 599; 558 | position: fixed; 559 | width: 4rem; 560 | height: 4rem; 561 | background-color: var(--gray-color); 562 | top: auto; 563 | left: auto; 564 | right: 3rem; 565 | bottom: 3rem; 566 | cursor: pointer; 567 | opacity: 0; 568 | border-radius: 0.2rem; 569 | transition: opacity 350ms; 570 | } 571 | 572 | .goToTop a { 573 | display: flex; 574 | align-items: center; 575 | justify-content: center; 576 | width: 100%; 577 | height: 100%; 578 | filter: invert(4%) sepia(23%) saturate(2306%) hue-rotate(148deg) 579 | brightness(91%) contrast(90%); 580 | } 581 | 582 | .goToTop img { 583 | height: 1.6rem; 584 | width: 1.6rem; 585 | } 586 | 587 | .goToTop:hover { 588 | filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) 589 | brightness(102%) contrast(102%); 590 | } 591 | 592 | .goToTop.reveal { 593 | display: block; 594 | cursor: pointer; 595 | opacity: 1; 596 | transition: all 0.3s; 597 | } 598 | 599 | /* Preloader with jumping dots */ 600 | #preloader { 601 | position: fixed; 602 | display: flex; 603 | flex-flow: row wrap; 604 | justify-content: center; 605 | align-items: center; 606 | background: var(--color-preloader-bg); 607 | z-index: 3000; 608 | height: 100vh; 609 | width: 100vw; 610 | opacity: 1; 611 | overflow: hidden; 612 | transition: opacity 0.5s ease-out; 613 | } 614 | 615 | .jumping-dots { 616 | position: relative; 617 | width: 6px; 618 | height: 6px; 619 | padding: 0; 620 | display: inline-block; 621 | } 622 | 623 | .jumping-dots > div { 624 | position: absolute; 625 | content: ""; 626 | top: 0; 627 | left: 0; 628 | width: 6px; 629 | height: 6px; 630 | background: var(--color-dots); 631 | border-radius: 50%; 632 | } 633 | 634 | .jumping-dots > div:nth-of-type(1) { 635 | left: 20px; 636 | } 637 | 638 | .jumping-dots > div:nth-of-type(3) { 639 | left: -20px; 640 | } 641 | 642 | .jumping-dots > div { 643 | animation: jumping-dots 1.2s infinite ease; 644 | animation-delay: 0.2s; 645 | } 646 | 647 | .jumping-dots > div:nth-of-type(1) { 648 | animation-delay: 0.4s; 649 | } 650 | 651 | .jumping-dots > div:nth-of-type(3) { 652 | animation-delay: 0s; 653 | } 654 | 655 | @keyframes jumping-dots { 656 | 0% { 657 | top: 0; 658 | } 659 | 660 | 40% { 661 | top: -6px; 662 | } 663 | 664 | 80% { 665 | top: 0; 666 | } 667 | } 668 | --------------------------------------------------------------------------------