├── 01 Feb 2023 | Project With Mock up with design -1 ├── assets │ └── avtar.png ├── index.html └── styles │ └── style.css ├── 06 Feb 2023 └── meta │ └── index.html ├── 06 March 2023 ├── Part One.js ├── Part Three.js └── Part Two.js ├── 07 Feb 2023 └── index.html ├── 08 Feb 2023 ├── index.html └── media.html ├── 09 Feb 2022 ├── index.html └── style.css ├── 10 Feb 2023 ├── assets │ ├── github.png │ ├── hambrger.png │ ├── image.png │ ├── linkedin.png │ ├── outlook.png │ ├── pc-image.png │ └── waving-hand.png ├── index.html └── style.css ├── 11 Feb 2023 ├── Beats │ ├── Icons │ │ ├── Group.svg │ │ ├── battery.png │ │ ├── bluetooth.png │ │ ├── caseLogo.png │ │ ├── charger.png │ │ ├── facebook.png │ │ ├── group.png │ │ ├── instagram.png │ │ ├── linkedin.png │ │ ├── mic.png │ │ ├── productLogo.png │ │ ├── rightArrow.png │ │ ├── shoppingBag.png │ │ ├── specsLogo.png │ │ ├── twitter.png │ │ └── upArrow.png │ ├── Photos │ │ ├── amazonLogo.png │ │ ├── appleLogo.png │ │ ├── beatsLogo.png │ │ ├── black.png │ │ ├── blue.png │ │ ├── buyNowSectionImage.png │ │ ├── caseImage.png │ │ ├── mainImage.png │ │ ├── nightBlack.png │ │ ├── onEar.png │ │ ├── redBlack.png │ │ ├── specsImage.png │ │ ├── spotifyLogo.png │ │ ├── twilightGray.png │ │ └── youtubeLogo.png │ ├── index.html │ └── style.css ├── Multi-Page Website │ ├── about │ │ ├── about.css │ │ └── about.html │ ├── contact │ │ ├── contact.css │ │ └── contact.html │ ├── images │ │ ├── bottomAngle.png │ │ ├── doctor.png │ │ ├── greenBox.png │ │ ├── logo.png │ │ ├── mouse.png │ │ ├── stethoscope.png │ │ ├── topAngle.png │ │ └── yellowBox.png │ ├── index.html │ ├── output.png │ └── style.css └── Real Estate │ ├── Icons │ ├── Logo.svg │ ├── facebook.png │ ├── featureImageBg1.svg │ ├── featureImageBg2.png │ ├── instagram.png │ ├── logoName.svg │ ├── mail.png │ └── twitter.png │ ├── Photos │ ├── cardImage1.png │ ├── cardImage2.png │ ├── cardImage3.png │ ├── cardImage4.png │ ├── cardImage5.png │ ├── cardImage6.png │ ├── cardImage7.png │ ├── cardImage8.png │ ├── cardImage9.png │ ├── featuresImage1.png │ ├── featuresImage2.png │ └── mainBackground.png │ ├── index.html │ └── style.css ├── 19 Jan 2023 └── index.html ├── 2 Feb | Project With Mock Up Design ├── assets │ ├── img1.png │ ├── img2.png │ ├── img3.png │ └── logo.png ├── index.html └── style │ └── style.css ├── 20 Jan 2023 └── index.html ├── 27 Feb 2023 ├── ColorChanger │ ├── index.html │ ├── script.js │ └── style.css ├── Part 1 │ └── index.html ├── Part 2 │ └── index.html └── Part 3 │ ├── index.html │ └── part3.html ├── 29 Jan ├── layout.html ├── positons.html └── zindex.html ├── 30 Jan └── flexbox.html ├── 31 Jan ├── creatingalbum.html └── grid.html ├── Assignment_01(HTML+CSS) ├── Output │ └── Project_1.png ├── assets │ ├── pexels-maxyne-barcel-10402282 1.png │ ├── scrool.png │ └── white-logo.png ├── index.html └── style.css ├── Assignment_02(HTML+CSS) ├── Output │ └── Project_2.png ├── assets │ ├── Header Illustration.png │ └── Logo.png ├── index.html └── style.css ├── Assignment_03(HTML+CSS) ├── Output │ └── Project_3.png ├── assets │ ├── bg.png │ └── white-logo.png ├── index.html └── style.css ├── DOM Assignment ├── Counter App │ ├── index.html │ ├── script.js │ └── style.css └── Event Listener Project │ ├── 01 onclick │ ├── index.html │ ├── script.js │ └── style.css │ ├── 02 dubbleClick │ ├── index.html │ ├── script.js │ └── style.css │ ├── 03 mouseOver │ ├── index.html │ ├── script.js │ └── style.css │ ├── 04 mouseOut │ ├── index.html │ ├── script.js │ └── style.css │ ├── 05 onKeyPress │ ├── index.html │ ├── script.js │ └── style.css │ └── 06 keydown_keyup │ ├── index.html │ ├── script.js │ └── style.css └── Time Table Project with HTML └── index.html /01 Feb 2023 | Project With Mock up with design -1/assets/avtar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/01 Feb 2023 | Project With Mock up with design -1/assets/avtar.png -------------------------------------------------------------------------------- /01 Feb 2023 | Project With Mock up with design -1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Project 1 13 | 14 | 15 | 16 | 17 |
18 | 33 |
34 | 35 |
36 | 37 |
38 |

Hello, I am a Web Developer

39 |

40 | I am an aspiring Full Stack JavaScript Developer , who is 41 | currently working as a Freelancer for 42 | National and International Client. 43 |

44 |
45 | 46 |
47 | Avatar 48 |
49 | 50 |
51 |
52 |
53 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /01 Feb 2023 | Project With Mock up with design -1/styles/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | overflow: hidden; 6 | } 7 | body { 8 | height: 100vh; 9 | width: 100vw; 10 | background-color: #edf1fd; 11 | display: flex; 12 | flex-direction: column; 13 | justify-content: space-between; 14 | } 15 | 16 | li { 17 | list-style: none; 18 | cursor: pointer; 19 | } 20 | 21 | a { 22 | text-decoration: none; 23 | } 24 | 25 | button { 26 | background-color: rgb(18, 155, 155); 27 | padding: 4px 10px; 28 | cursor: pointer; 29 | color: white; 30 | border: 1px solid white; 31 | border-radius: 5px; 32 | font-weight: 700; 33 | width: fit-content; 34 | } 35 | 36 | button:hover { 37 | background-color: white; 38 | color: rgb(18, 155, 155); 39 | border: 1px solid black; 40 | } 41 | 42 | header { 43 | padding: 15px 0; 44 | } 45 | nav { 46 | display: flex; 47 | width: 100%; 48 | align-items: center; 49 | justify-content: space-around; 50 | } 51 | 52 | nav .logo { 53 | font-weight: 700; 54 | font-size: 25px; 55 | } 56 | 57 | nav ul { 58 | display: flex; 59 | align-items: center; 60 | gap: 30px; 61 | font-weight: 500; 62 | } 63 | 64 | nav ul li:hover { 65 | text-decoration: underline; 66 | font-weight: 900; 67 | } 68 | 69 | .search-field { 70 | display: flex; 71 | gap: 30px; 72 | } 73 | 74 | input { 75 | padding: 4px 10px; 76 | } 77 | 78 | .hero-section { 79 | display: flex; 80 | align-items: center; 81 | } 82 | 83 | .hero-left-section { 84 | width: 60%; 85 | padding: 0 8%; 86 | } 87 | 88 | .hero-left-section h1 { 89 | font-weight: 800; 90 | font-size: 38px; 91 | margin-bottom: 16px; 92 | } 93 | .hero-left-section h1 span { 94 | color: rgb(18, 155, 155); 95 | font-weight: 900; 96 | background-color: #dfdfe0; 97 | padding: 0 15px; 98 | } 99 | 100 | .hero-left-section p { 101 | font-weight: 500; 102 | font-size: 30px; 103 | } 104 | 105 | .hero-left-section p span { 106 | font-size: 25px; 107 | font-weight: 700; 108 | color: rgb(18, 155, 155); 109 | } 110 | 111 | .hero-right-section { 112 | display: flex; 113 | flex-direction: column; 114 | width: 40%; 115 | align-items: center; 116 | justify-content: center; 117 | gap: 30px; 118 | } 119 | .hero-right-section-btn { 120 | display: flex; 121 | align-items: center; 122 | gap: 30px; 123 | } 124 | 125 | .hero-right-section img { 126 | height: 300px; 127 | width: 300px; 128 | border-radius: 50%; 129 | } 130 | 131 | footer { 132 | font-weight: 600; 133 | display: flex; 134 | padding: 20px 0; 135 | justify-content: space-around; 136 | } 137 | 138 | footer ul { 139 | display: flex; 140 | align-items: center; 141 | gap: 30px; 142 | } 143 | -------------------------------------------------------------------------------- /06 Feb 2023/meta/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 15 | 16 | 17 | 18 | Meta 19 | 20 | 21 |

PWSKILLS Full Stack Web Developement !@#$%^&*()

22 |

23 | 24 | 25 | -------------------------------------------------------------------------------- /06 March 2023/Part One.js: -------------------------------------------------------------------------------- 1 | const powerTwo = (n) => { 2 | return n ** 2 3 | } 4 | 5 | function powerCube(powerTwo, n){ 6 | return powerTwo(n) * n 7 | } 8 | 9 | // console.log(powerCube(powerTwo, 3)); 10 | 11 | function sayHello(){ 12 | return () => { 13 | console.log("Hello Hitesh"); 14 | } 15 | } 16 | 17 | let guessValue = sayHello() 18 | // console.log(guessValue); 19 | 20 | // guessValue() 21 | 22 | 23 | const higherOrder = n => { 24 | const oneFun = m => { 25 | const twoFun = p => { 26 | return m + n + p 27 | } 28 | return twoFun 29 | } 30 | return oneFun 31 | } 32 | 33 | console.log(higherOrder(2)(3)(4)) 34 | 35 | 36 | const myNums = [2, 3, 4, 5] 37 | 38 | const sumArray = arr => { 39 | let total = 0 40 | arr.forEach(function(element){ 41 | total += element 42 | }); 43 | return total 44 | } 45 | 46 | // console.log(sumArray(myNums)); 47 | 48 | function oneMoreHello(){ 49 | console.log("Hello hitesh ! ", Math.random()); 50 | } 51 | 52 | setInterval(oneMoreHello, 1000) 53 | 54 | // setTimeout(oneMoreHello, 2000) -------------------------------------------------------------------------------- /06 March 2023/Part Three.js: -------------------------------------------------------------------------------- 1 | let pattern = 'pw' 2 | 3 | let regExOne = new RegExp(pattern) 4 | 5 | let flag = 'gi' 6 | let regExTwo = new RegExp(pattern, flag) 7 | 8 | let regExThree = /pw/gi 9 | 10 | const strToCheck = "PW is growing at a rapid speed and recently they are working on Pwskills to create skills based pwcontent" 11 | 12 | const result = regExThree.test(strToCheck) 13 | console.log(result); 14 | 15 | const anotherResult = strToCheck.match(regExThree) 16 | console.log(anotherResult); 17 | 18 | const oneMoreResult = strToCheck.replace(regExThree, 'p-w') 19 | console.log(oneMoreResult); 20 | 21 | const webUrl = "https://pwskills.com/hitesh%20choudhary" 22 | 23 | const useableUrl = webUrl.replace(/%\d0/, '-') 24 | console.log(useableUrl); -------------------------------------------------------------------------------- /06 March 2023/Part Two.js: -------------------------------------------------------------------------------- 1 | let arr = [2, 3, 4] 2 | 3 | arr.forEach(function(element, index, arr){ 4 | console.log(index, element, arr); 5 | }) 6 | 7 | arr.forEach((element, index, arr) => { 8 | console.log("arrow: ", index, element, arr); 9 | }) 10 | 11 | const heros = ["naagraj", "doga", "dhruva", "maniraj"] 12 | 13 | 14 | heros.forEach((el) => { console.log(el.toUpperCase())}) 15 | 16 | arr.map(function(element, index, arr){ 17 | console.log(element, index, arr); 18 | }) 19 | 20 | heros.map((h) => console.log(h.toUpperCase())) 21 | 22 | //filter 23 | console.log(heros); 24 | const herosWithRaj = heros.filter((h) => { 25 | return h.endsWith('raj') 26 | }) 27 | console.log(herosWithRaj); 28 | 29 | //shopping cart 30 | 31 | const cartBill = [20, 30, 50] 32 | const sumOfCartBill = cartBill.reduce((prev, curr) => prev+curr, 0) 33 | console.log(sumOfCartBill); 34 | 35 | const gameScore = [200, 100, 310, 300, 250, 150] 36 | 37 | //check if all values are numbers 38 | console.log(typeof gameScore[1]); 39 | const gameScoreCheck = gameScore.every((v) => typeof v === 'number') 40 | console.log("check: ", gameScoreCheck); 41 | 42 | // find score above 200 43 | 44 | const above200 = gameScore.find((score) => score > 200 ) 45 | 46 | console.log(above200); 47 | 48 | 49 | // findIndex 50 | // some 51 | // sort -------------------------------------------------------------------------------- /07 Feb 2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | units 8 | 23 | 24 | 25 |
26 |
Hello World
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /08 Feb 2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hello 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /08 Feb 2023/media.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Media Query 8 | 41 | 42 | 43 |
44 |
Large Screen
45 |
Laptop Screen
46 |
Tablet Screen
47 |
Mobile Screen
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /09 Feb 2022/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Media Queries 9 | 10 | 11 | 12 | 13 | 14 |

This is a Media Query demo page.

15 |

Screen size : 1440px

16 |

Screen size : 1024px

17 |

Screen size : 768px

18 |

Screen size : 425px

19 | 20 | 21 | -------------------------------------------------------------------------------- /09 Feb 2022/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | background-color: aquamarine; 4 | } 5 | 6 | h1 { 7 | font-size: 60px; 8 | text-align: center; 9 | } 10 | 11 | .laptop_large, 12 | .laptop, 13 | .tablet, 14 | .mobile { 15 | font-size: 40px; 16 | text-align: center; 17 | display: none; 18 | } 19 | 20 | /* media queries using max-width */ 21 | 22 | /* @media screen and (max-width: 1440px) { 23 | body { 24 | background-color: brown; 25 | } 26 | 27 | .laptop_large { 28 | display: block; 29 | } 30 | } 31 | 32 | 33 | @media screen and (max-width: 1024px) { 34 | body { 35 | background-color: chartreuse; 36 | } 37 | 38 | .laptop_large { 39 | display: none; 40 | } 41 | 42 | .laptop { 43 | display: block; 44 | } 45 | } 46 | 47 | 48 | @media screen and (max-width: 768px) { 49 | body { 50 | background-color: darkorange; 51 | } 52 | 53 | .laptop_large { 54 | display: none; 55 | } 56 | 57 | .laptop { 58 | display: none; 59 | } 60 | 61 | .tablet { 62 | display: block; 63 | } 64 | } 65 | 66 | 67 | @media screen and (max-width: 425px) { 68 | body { 69 | background-color: darkolivegreen; 70 | } 71 | 72 | .laptop_large { 73 | display: none; 74 | } 75 | 76 | .laptop { 77 | display: none; 78 | } 79 | 80 | .tablet { 81 | display: none; 82 | } 83 | 84 | .mobile { 85 | display: block; 86 | } 87 | } */ 88 | 89 | /* media queries with min-width */ 90 | 91 | @media screen and (min-width: 0px) { 92 | body { 93 | background-color: crimson; 94 | } 95 | 96 | .mobile { 97 | display: block; 98 | } 99 | } 100 | 101 | @media screen and (min-width: 425px) { 102 | body { 103 | background-color: aqua; 104 | } 105 | 106 | .mobile { 107 | display: none; 108 | } 109 | 110 | .tablet { 111 | display: block; 112 | } 113 | } 114 | 115 | @media screen and (min-width: 768px) { 116 | body { 117 | background-color: darkgoldenrod; 118 | } 119 | 120 | .mobile { 121 | display: none; 122 | } 123 | 124 | .tablet { 125 | display: none; 126 | } 127 | 128 | .laptop { 129 | display: block; 130 | } 131 | } 132 | 133 | @media screen and (min-width: 1024px) { 134 | body { 135 | background-color: forestgreen; 136 | } 137 | 138 | .mobile { 139 | display: none; 140 | } 141 | 142 | .tablet { 143 | display: none; 144 | } 145 | 146 | .laptop { 147 | display: none; 148 | } 149 | 150 | .laptop_large { 151 | display: block; 152 | } 153 | } 154 | 155 | /* media queries using both min width and max width */ 156 | 157 | /* 158 | @media screen and (min-width:425px) and (max-width: 768px) { 159 | body { 160 | background-color: darkgrey; 161 | } 162 | } */ 163 | -------------------------------------------------------------------------------- /10 Feb 2023/assets/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/10 Feb 2023/assets/github.png -------------------------------------------------------------------------------- /10 Feb 2023/assets/hambrger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/10 Feb 2023/assets/hambrger.png -------------------------------------------------------------------------------- /10 Feb 2023/assets/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/10 Feb 2023/assets/image.png -------------------------------------------------------------------------------- /10 Feb 2023/assets/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/10 Feb 2023/assets/linkedin.png -------------------------------------------------------------------------------- /10 Feb 2023/assets/outlook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/10 Feb 2023/assets/outlook.png -------------------------------------------------------------------------------- /10 Feb 2023/assets/pc-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/10 Feb 2023/assets/pc-image.png -------------------------------------------------------------------------------- /10 Feb 2023/assets/waving-hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/10 Feb 2023/assets/waving-hand.png -------------------------------------------------------------------------------- /10 Feb 2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 | 23 |
24 |
25 |
26 | hello 27 |

Hi Everyone

28 |
29 |
30 |

31 | Mark Anderson 32 |

33 |

34 | Developer 35 |

36 |
37 |
38 |
39 | pc-image 40 |
41 |
42 | 43 |
44 |
45 |
46 |
47 |

Projects

48 |
49 |
50 |
51 |
52 | project-image 53 |

Project 1

54 |
55 |
56 | project-image 57 |

Project 2

58 |
59 |
60 | project-image 61 |

Project 3

62 |
63 |
64 | project-image 65 |

Project 4

66 |
67 |
68 |
69 |
70 | 85 | 86 | -------------------------------------------------------------------------------- /10 Feb 2023/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | background-color: #111827; 6 | color: white; 7 | } 8 | img:hover{ 9 | cursor: pointer; 10 | } 11 | nav{ 12 | margin: 20px; 13 | } 14 | nav ul{ 15 | display: flex; 16 | flex-direction: row; 17 | justify-content: right; 18 | align-items: center; 19 | gap: 20px; 20 | } 21 | nav ul li{ 22 | list-style-type: none; 23 | font-size: 20px; 24 | } 25 | img[alt="menu"]{ 26 | width: 20px; 27 | display: none; 28 | } 29 | .home-option{ 30 | padding: 5px 10px; 31 | background: rgb(100, 100, 224); 32 | border-radius: 15px; 33 | } 34 | 35 | .intro{ 36 | max-width: 100vw; 37 | margin: 20px; 38 | display: flex; 39 | flex-direction: row; 40 | justify-content: center; 41 | align-items: center; 42 | gap: 30px; 43 | } 44 | .intro-line-1{ 45 | display: flex; 46 | flex-direction: row; 47 | align-items: center; 48 | gap: 10px; 49 | font-size: 30px; 50 | } 51 | .intro-line-2{ 52 | display: flex; 53 | flex-direction: column; 54 | justify-content: center; 55 | gap: 10px; 56 | } 57 | .intro-line-2 h1{ 58 | font-size: 60px; 59 | } 60 | .intro-line-2 h2{ 61 | font-size: 35px; 62 | color: rgb(197, 197, 89); 63 | } 64 | .projects{ 65 | margin-top: 70px; 66 | display: flex; 67 | flex-direction: column; 68 | justify-content: center; 69 | align-items: center; 70 | } 71 | .projects div h1{ 72 | font-size: 40px; 73 | } 74 | .horizontal-divider{ 75 | height: 10px; 76 | width: 135px; 77 | background-color: blue; 78 | border-radius: 20px; 79 | margin-bottom: 20px; 80 | } 81 | .project-list{ 82 | display: grid; 83 | grid-template-columns: 1fr 1fr; 84 | align-items: center; 85 | justify-content: center; 86 | row-gap: 20px; 87 | column-gap: 20px; 88 | } 89 | img[alt="hello"]{ 90 | height: 45px; 91 | } 92 | img[alt="pc-image"]{ 93 | width: 30vw; 94 | } 95 | img[alt="project-image"]{ 96 | width: 20vw; 97 | } 98 | .project{ 99 | display: flex; 100 | flex-direction: column; 101 | justify-content: center; 102 | align-items: center; 103 | } 104 | .contact{ 105 | margin: 50px; 106 | display: flex; 107 | flex-direction: column; 108 | justify-content: center; 109 | align-items: center; 110 | gap: 15px; 111 | 112 | } 113 | .contact div h1{ 114 | font-size: 40px; 115 | } 116 | .horizontal-divider-contact{ 117 | height: 10px; 118 | width: 200px; 119 | background-color: blue; 120 | border-radius: 20px; 121 | margin-bottom: 20px; 122 | } 123 | .socials{ 124 | display: flex; 125 | justify-content: center; 126 | align-items: center; 127 | gap: 15px; 128 | } 129 | img[alt="social"]{ 130 | width: 30px; 131 | } 132 | 133 | @media screen and (max-width: 576px) { 134 | nav ul{ 135 | display: none; 136 | } 137 | img[alt="menu"]{ 138 | display: block; 139 | } 140 | .intro{ 141 | display: flex; 142 | flex-direction: column; 143 | } 144 | img[alt="pc-image"]{ 145 | width: 60vw; 146 | } 147 | .intro-line-1{ 148 | display: flex; 149 | flex-direction: column; 150 | justify-content: center; 151 | align-items: center; 152 | gap: 10px; 153 | font-size: 20px; 154 | } 155 | .intro-line-2 h1{ 156 | font-size: 40px; 157 | } 158 | .intro-line-2 h2{ 159 | font-size: 25px; 160 | text-align: center; 161 | } 162 | .project-list{ 163 | display: grid; 164 | grid-template-columns: 1fr; 165 | align-items: center; 166 | justify-content: center; 167 | row-gap: 20px; 168 | column-gap: 20px; 169 | } 170 | img[alt="project-image"]{ 171 | width: 55vw; 172 | } 173 | .projects div h1{ 174 | font-size: 35px; 175 | } 176 | .contact div h1{ 177 | font-size: 35px; 178 | } 179 | .horizontal-divider-contact{ 180 | height: 10px; 181 | width: 180px; 182 | background-color: blue; 183 | border-radius: 20px; 184 | margin-bottom: 20px; 185 | } 186 | 187 | 188 | } -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/Group.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/battery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/battery.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/bluetooth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/bluetooth.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/caseLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/caseLogo.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/charger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/charger.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/facebook.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/group.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/instagram.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/linkedin.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/mic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/mic.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/productLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/productLogo.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/rightArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/rightArrow.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/shoppingBag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/shoppingBag.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/specsLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/specsLogo.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/twitter.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Icons/upArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Icons/upArrow.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/amazonLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/amazonLogo.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/appleLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/appleLogo.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/beatsLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/beatsLogo.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/black.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/blue.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/buyNowSectionImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/buyNowSectionImage.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/caseImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/caseImage.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/mainImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/mainImage.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/nightBlack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/nightBlack.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/onEar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/onEar.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/redBlack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/redBlack.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/specsImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/specsImage.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/spotifyLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/spotifyLogo.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/twilightGray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/twilightGray.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/Photos/youtubeLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Beats/Photos/youtubeLogo.png -------------------------------------------------------------------------------- /11 Feb 2023/Beats/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Beats Landing Page 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 20 | 21 | 22 | 23 | 36 | 37 | 38 |
39 | main image 40 |
41 | on ear logo 42 |

Beats 3

43 |

Overview

44 |

45 | Enjoy award-winning Beats sound with wireless listening freedom and a 46 | sleek, streamlined design with comfortable padded earphones, 47 | delivering first-rate playback. 48 |

49 |
50 | shopping bag 51 |

Add to Bag

52 | N399K 53 |
54 |
55 |
56 | 57 | 58 |
59 | apple logo 60 | spotify logo 61 | amazon logo 62 | youtube logo 63 |
64 | 65 | 66 |
67 | 68 | 73 | 74 |
75 | 76 |
77 | 78 |
79 | bluetooth 80 |

Connection

81 |

Bluetooth v5.2

82 |
83 | 84 |
85 | battery 86 |

Battery

87 |

Duration 40h

88 |
89 | 90 |
91 | charger 92 |

Load

93 |

Fast Charge 4.2-AAC

94 |
95 | 96 |
97 | mic 98 |

Microphone

99 |

Supports Apple Siri and Google

100 |
101 |
102 | 103 | 104 | specification headphone image 108 |
109 |
110 | 111 | 112 |
113 | 114 | 115 | 116 | 117 |
118 | case image 123 | 124 |
125 |

126 | With a comfortable and adaptable case so that you can store it 127 | whenever you want, and keep your durability forever. 128 |

129 |

130 | group 131 | More Info 132 |

133 |
134 |
135 |
136 | 137 | 138 |
139 |
140 |

Immense yourself in your music

141 |

Buy Now, up to 40% off.

142 |
143 | shopping bag 144 |

Buy Now

145 |
146 |
147 | 148 | buy now 149 |
150 | 151 | 152 |
153 | 154 | 155 | 156 | 157 |
158 | 159 |
160 | black 161 |
162 |

163 | Black
164 | N299K 165 |

166 | 167 |
168 | shopping bag 169 |
170 |
171 |
172 | 173 | 174 |
175 | red black 180 |
181 |

182 | Red Black
183 | N299K 184 |

185 | 186 |
187 | shopping bag 188 |
189 |
190 |
191 | 192 | 193 |
194 | Night Black 199 |
200 |

201 | Night Black
202 | N299K 203 |

204 | 205 |
206 | shopping bag 207 |
208 |
209 |
210 | 211 | 212 |
213 | blue 214 |
215 |

216 | Blue
217 | N299K 218 |

219 | 220 |
221 | shopping bag 222 |
223 |
224 |
225 | 226 | 227 |
228 | twilight 233 |
234 |

235 | Black
236 | N299K 237 |

238 | 239 |
240 | shopping bag 241 |
242 |
243 |
244 |
245 |
246 | 247 | 248 | 292 | 293 | 294 | -------------------------------------------------------------------------------- /11 Feb 2023/Beats/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | outline: 0; 5 | box-sizing: border-box; 6 | background: #0f0f10; 7 | font-family: "Poppins", sans-serif; 8 | color: #ffffff; 9 | } 10 | 11 | /* removing the default css of a tags */ 12 | a { 13 | text-decoration: none; 14 | } 15 | 16 | /* removing the default css of li tags */ 17 | li { 18 | list-style: none; 19 | } 20 | 21 | body { 22 | margin: 0 15vw; 23 | } 24 | 25 | /* designing the navigation menu */ 26 | nav { 27 | display: flex; 28 | width: 100%; 29 | align-items: center; 30 | justify-content: space-between; 31 | padding: 30px 0; 32 | } 33 | 34 | nav img { 35 | width: 25px; 36 | height: 25px; 37 | } 38 | 39 | nav ul { 40 | display: flex; 41 | } 42 | 43 | nav ul li { 44 | margin-right: 40px; 45 | } 46 | 47 | nav ul li a { 48 | font-weight: 700; 49 | font-size: 14px; 50 | color: white; 51 | } 52 | 53 | nav ul li:first-child a{ 54 | font-weight: 700; 55 | font-size: 14px; 56 | } 57 | 58 | .nav-right-section { 59 | display: flex; 60 | align-items: center; 61 | } 62 | 63 | .nav-right-section button { 64 | background: #1e1e21; 65 | border-radius: 8px; 66 | font-weight: 300; 67 | font-size: 14px; 68 | padding: 10px 40px; 69 | } 70 | 71 | /* designing the main section */ 72 | main { 73 | display: flex; 74 | align-items: flex-start; 75 | margin-top: 30px; 76 | position: relative; 77 | } 78 | 79 | .mainImg { 80 | width: 230px; 81 | position: relative; 82 | top: -250px; 83 | left: 70px; 84 | } 85 | 86 | .main { 87 | margin-left: 180px; 88 | } 89 | 90 | .onEarImg { 91 | width: 320px; 92 | margin-left: 50px; 93 | } 94 | 95 | .main h1 { 96 | font-weight: 600; 97 | font-size: 46px; 98 | margin-bottom: 25px; 99 | } 100 | 101 | .main h4 { 102 | font-weight: 500; 103 | font-size: 16px; 104 | margin-bottom: 25px; 105 | } 106 | 107 | .main p { 108 | width: 65%; 109 | font-size: 12px; 110 | font-weight: 300; 111 | color: #bdc0c2; 112 | line-height: 25px; 113 | margin-bottom: 25px; 114 | } 115 | 116 | .shopping-bag-section { 117 | display: flex; 118 | align-items: center; 119 | gap: 20px; 120 | background: #1e1e21; 121 | border-radius: 8px; 122 | width: fit-content; 123 | padding: 10px 25px; 124 | } 125 | 126 | .shopping-bag-section img { 127 | width: 15px; 128 | background-color: transparent; 129 | } 130 | 131 | .shopping-bag-section p { 132 | margin-bottom: 0; 133 | color: white; 134 | background-color: transparent; 135 | } 136 | 137 | .shopping-bag-section span { 138 | background-color: transparent; 139 | } 140 | 141 | /* designing the social media section */ 142 | .social-media-section { 143 | display: flex; 144 | align-items: center; 145 | justify-content: space-around; 146 | padding: 0 50px; 147 | position: relative; 148 | top: -50px; 149 | margin-bottom: 40px; 150 | } 151 | 152 | .social-media-section img { 153 | scale: 0.8; 154 | } 155 | 156 | /* designing the specification section */ 157 | .specification { 158 | display: flex; 159 | flex-direction: column; 160 | align-items: center; 161 | } 162 | 163 | .specification-logo, 164 | .case-logo { 165 | scale: 0.8; 166 | margin-bottom: 20px; 167 | } 168 | 169 | .specification-list { 170 | display: flex; 171 | } 172 | 173 | .specification-list img { 174 | scale: 0.8; 175 | } 176 | 177 | .specification-list-items div { 178 | margin-bottom: 20px; 179 | } 180 | 181 | .specification-list-items div img { 182 | scale: 0.8; 183 | } 184 | 185 | .specification-list-items div p { 186 | font-size: 12px; 187 | } 188 | 189 | .specification-list-items div p:last-child { 190 | color: #bdc0c2; 191 | font-size: 10px; 192 | margin-top: 5px; 193 | width: 70%; 194 | } 195 | 196 | .specification-list-items div:first-child, 197 | .specification-list-items div:last-child { 198 | margin-left: 30px; 199 | } 200 | 201 | /* designing the case section */ 202 | .case { 203 | margin-top: 80px; 204 | display: flex; 205 | flex-direction: column; 206 | align-items: center; 207 | } 208 | 209 | .case-item { 210 | display: flex; 211 | gap: 30px; 212 | align-items: center; 213 | justify-content: center; 214 | } 215 | 216 | .case-item-img { 217 | scale: 0.8; 218 | /* width: 50%; */ 219 | } 220 | 221 | .case-item div { 222 | width: 20%; 223 | } 224 | 225 | .case-item div p:first-child { 226 | color: #bdc0c2; 227 | font-size: 12px; 228 | font-weight: 400; 229 | line-height: 25px; 230 | margin-bottom: 20px; 231 | } 232 | 233 | .case-item div p:last-child img { 234 | scale: 0.8; 235 | background-color: transparent; 236 | } 237 | 238 | .case-item div p:last-child { 239 | width: fit-content; 240 | background: #1e1e21; 241 | border-radius: 8px; 242 | display: flex; 243 | align-items: center; 244 | gap: 20px; 245 | font-size: 12px; 246 | padding: 10px 20px; 247 | } 248 | 249 | /* buy product section */ 250 | .buy-product { 251 | background: #181a1b; 252 | border-radius: 12px; 253 | display: flex; 254 | align-items: center; 255 | justify-content: center; 256 | gap: 50px; 257 | margin-top: 70px; 258 | padding: 40px 0; 259 | } 260 | 261 | .buy-product div, 262 | .buy-product p, 263 | .buy-product h3, 264 | .buy-product img { 265 | background-color: transparent; 266 | } 267 | 268 | .buy-product div { 269 | width: 25%; 270 | } 271 | 272 | .buy-product div h3 { 273 | font-weight: 600; 274 | font-size: 18px; 275 | margin-bottom: 15px; 276 | } 277 | 278 | .buy-product div p { 279 | color: #bdc0c2; 280 | font-size: 14px; 281 | margin-bottom: 15px; 282 | } 283 | 284 | .buy-product div div { 285 | display: flex; 286 | align-items: center; 287 | width: fit-content; 288 | background: #000000; 289 | border-radius: 8px; 290 | padding: 10px 20px; 291 | } 292 | 293 | .buy-product div div img { 294 | scale: 0.8; 295 | margin-right: 10px; 296 | } 297 | 298 | .buy-product div div p { 299 | margin-bottom: 0; 300 | font-size: 12px; 301 | color: white; 302 | } 303 | 304 | /* designing the product section for displaying the items */ 305 | .product { 306 | display: flex; 307 | flex-direction: column; 308 | margin: 0 150px; 309 | } 310 | 311 | .product-logo { 312 | display: flex; 313 | flex-direction: column; 314 | } 315 | 316 | .product-logo { 317 | scale: 0.3; 318 | } 319 | 320 | .product-items { 321 | display: flex; 322 | align-items: center; 323 | flex-wrap: wrap; 324 | gap: 50px; 325 | padding-left: 50px; 326 | } 327 | 328 | .product-card { 329 | position: relative; 330 | width: 130px; 331 | height: 130px; 332 | background: #181a1b; 333 | border-radius: 8px; 334 | } 335 | 336 | .product-img { 337 | width: 75px; 338 | height: 100px; 339 | position: absolute; 340 | z-index: 100; 341 | top: -40px; 342 | left: 28px; 343 | } 344 | 345 | .product-img, 346 | .product-card p, 347 | .product-card span, 348 | .product-card img, 349 | .product-card div { 350 | background-color: transparent; 351 | } 352 | 353 | .product-info { 354 | position: absolute; 355 | bottom: 0; 356 | width: 100%; 357 | display: flex; 358 | align-items: flex-end; 359 | justify-content: space-between; 360 | padding: 10px 15px; 361 | } 362 | 363 | .product-info p { 364 | font-size: 12px; 365 | } 366 | 367 | .product-info p span { 368 | color: #bdc0c2; 369 | } 370 | 371 | .product-info div { 372 | background: #0a0a0b; 373 | border-radius: 8px; 374 | padding: 2px 6px; 375 | } 376 | 377 | .product-info div img { 378 | width: 13px; 379 | height: 13px; 380 | } 381 | 382 | /* designing the footer section */ 383 | footer{ 384 | margin: 100px 0; 385 | display: flex; 386 | align-items: flex-start; 387 | justify-content: space-between; 388 | position: relative; 389 | } 390 | 391 | .footer-logo{ 392 | scale: 0.8; 393 | } 394 | 395 | ul li a{ 396 | font-size: 12px; 397 | color: #BDC0C2; 398 | } 399 | 400 | ul li:first-child a{ 401 | font-size: 16px; 402 | font-weight: 400; 403 | color: white; 404 | } 405 | 406 | ul li:first-child{ 407 | margin-bottom: 10px; 408 | } 409 | 410 | .footer-subscription{ 411 | display: flex; 412 | flex-direction: column; 413 | gap: 30px; 414 | } 415 | 416 | .footer-subscription div:first-child{ 417 | background: #181A1B; 418 | border-radius: 8px; 419 | padding: 5px 10px; 420 | display: flex; 421 | } 422 | 423 | .footer-subscription div:first-child input{ 424 | border: none; 425 | background-color: transparent; 426 | } 427 | 428 | .subscribe-button{ 429 | background: #0A0A0B; 430 | border-radius: 8px; 431 | padding: 10px 20px; 432 | border: none; 433 | display: flex; 434 | align-items: center; 435 | gap: 10px; 436 | } 437 | 438 | .subscribe-button img{ 439 | scale: 0.8; 440 | } 441 | 442 | .subscribe-button p{ 443 | font-size: 12px; 444 | } 445 | 446 | .footer-subscription div:last-child img{ 447 | margin-right: 10px; 448 | scale: 0.8; 449 | } 450 | 451 | .arrow-up{ 452 | position: absolute; 453 | right: -160px; 454 | scale: 0.8; 455 | } -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/about/about.css: -------------------------------------------------------------------------------- 1 | /* css reset */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | outline: 0; 6 | box-sizing: border-box; 7 | font-family: "IBM Plex Sans", sans-serif; 8 | } 9 | 10 | body { 11 | max-width: 1440px; 12 | background-color: #f0f4f5; 13 | overflow: hidden; 14 | margin: auto; 15 | } 16 | 17 | /* designing the navigation menu */ 18 | nav { 19 | height: 15vh; 20 | display: flex; 21 | align-items: center; 22 | justify-content: space-between; 23 | padding: 0 5%; 24 | } 25 | 26 | /* designing the logo */ 27 | nav img { 28 | width: 150px; 29 | } 30 | 31 | /* desiging the navigation menu links */ 32 | nav ul { 33 | display: flex; 34 | align-items: center; 35 | } 36 | 37 | nav ul li { 38 | list-style: none; 39 | margin-right: 50px; 40 | font-weight: 600; 41 | } 42 | 43 | nav ul li:first-child { 44 | font-weight: 700; 45 | color: #20bc7e; 46 | } 47 | 48 | a { 49 | text-decoration: none; 50 | color: black; 51 | } 52 | 53 | /* designing the main section */ 54 | main { 55 | height: 85vh; 56 | display: flex; 57 | flex-direction: column; 58 | align-items: center; 59 | justify-content: center; 60 | padding: 0 5%; 61 | } 62 | 63 | .hospitalDescription { 64 | width: 50%; 65 | text-align: center; 66 | } 67 | 68 | .hospitalDescription h1 { 69 | margin-bottom: 20px; 70 | color: #20BC7E; 71 | } 72 | 73 | .hospitalDescription p { 74 | font-size: 18px; 75 | font-weight: 400; 76 | } 77 | 78 | /* desinging the achievement card */ 79 | .achievement { 80 | display: flex; 81 | align-items: center; 82 | gap: 50px; 83 | margin-top: 50px; 84 | } 85 | 86 | .achievementCard { 87 | width: 200px; 88 | height: 100px; 89 | border-radius: 10px; 90 | box-shadow: 0 0 10px black; 91 | display: flex; 92 | flex-direction: column; 93 | align-items: center; 94 | justify-content: center; 95 | } 96 | 97 | .achievementCard span { 98 | font-size: 25px; 99 | font-weight: 700; 100 | color: #20BC7E; 101 | } 102 | 103 | .achievementCard p { 104 | font-size: 20px; 105 | font-weight: 500; 106 | } 107 | -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/about/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hospital Page 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 32 | 33 | 34 |
35 | 36 |
37 |

Best and Experienced Faculties

38 |

39 | We had bring the best experts of medical field to provide you the best 40 | service as possible. We are trying our best to serve the world with 41 | our facilities, so that everyone can have a proper medical facility to 42 | avail. 43 |

44 |
45 | 46 | 47 |
48 |
49 | 20+ 50 |

Doctors

51 |
52 | 53 |
54 | 50,000+ 55 |

Customers

56 |
57 | 58 |
59 | 500+ 60 |

Students

61 |
62 |
63 |
64 | 65 | 66 | -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/contact/contact.css: -------------------------------------------------------------------------------- 1 | /* css reset */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | outline: 0; 6 | box-sizing: border-box; 7 | font-family: "IBM Plex Sans", sans-serif; 8 | } 9 | 10 | body { 11 | max-width: 1440px; 12 | background-color: #f0f4f5; 13 | overflow: hidden; 14 | margin: auto; 15 | } 16 | 17 | /* designing the navigation menu */ 18 | nav { 19 | height: 15vh; 20 | display: flex; 21 | align-items: center; 22 | justify-content: space-between; 23 | padding: 0 5%; 24 | } 25 | 26 | /* designing the logo */ 27 | nav img { 28 | width: 150px; 29 | } 30 | 31 | /* desiging the navigation menu links */ 32 | nav ul { 33 | display: flex; 34 | align-items: center; 35 | } 36 | 37 | nav ul li { 38 | list-style: none; 39 | margin-right: 50px; 40 | font-weight: 600; 41 | } 42 | 43 | nav ul li:first-child { 44 | font-weight: 700; 45 | color: #20bc7e; 46 | } 47 | 48 | a { 49 | text-decoration: none; 50 | color: black; 51 | } 52 | 53 | /* designing the main section and form */ 54 | main{ 55 | height: 85vh; 56 | display: flex; 57 | align-items: center; 58 | justify-content: center; 59 | } 60 | 61 | form{ 62 | width: 350px; 63 | box-shadow: 0 0 10px black; 64 | border-radius: 10px; 65 | padding: 20px; 66 | display: flex; 67 | flex-direction: column; 68 | gap: 15px; 69 | } 70 | 71 | form h1{ 72 | text-align: center; 73 | } 74 | 75 | form div{ 76 | display: flex; 77 | flex-direction: column; 78 | } 79 | 80 | form div label{ 81 | font-size: 18px; 82 | font-weight: 500; 83 | margin-bottom: 5px; 84 | } 85 | 86 | form div input{ 87 | border: transparent; 88 | border-radius: 10px; 89 | padding: 5px 10px; 90 | } 91 | 92 | form div textarea{ 93 | resize: none; 94 | height: 100px; 95 | border: transparent; 96 | border-radius: 10px; 97 | padding: 5px 10px; 98 | } 99 | 100 | form button{ 101 | border: transparent; 102 | border-radius: 10px; 103 | background: #20BC7E; 104 | color: white; 105 | font-size: 18px; 106 | font-weight: bold; 107 | padding: 10px; 108 | cursor: pointer; 109 | } -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/contact/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hospital Page 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 32 | 33 | 34 |
35 | 36 |
37 |

Contact Form

38 | 39 |
40 | 41 | 42 |
43 | 44 |
45 | 46 | 47 |
48 | 49 |
50 | 51 | 52 |
53 | 54 | 55 |
56 |
57 | 58 | 59 | -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/images/bottomAngle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Multi-Page Website/images/bottomAngle.png -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/images/doctor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Multi-Page Website/images/doctor.png -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/images/greenBox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Multi-Page Website/images/greenBox.png -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Multi-Page Website/images/logo.png -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/images/mouse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Multi-Page Website/images/mouse.png -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/images/stethoscope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Multi-Page Website/images/stethoscope.png -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/images/topAngle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Multi-Page Website/images/topAngle.png -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/images/yellowBox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Multi-Page Website/images/yellowBox.png -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hospital Page 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 32 | 33 | 34 |
35 | 36 |
37 | topAngle 38 |

Complete Health Care Solutions for Everyone

39 |

40 | We're always available for our Patients with emergen problems. You can 41 | easily reach us 24/7. We focused on highest quality. 42 |

43 | bottomAngle 48 | stethoscope 53 | 54 | mouse 55 |
56 | 57 | 58 |
59 | greenBox 60 | yellowBox 61 | doctor 62 |
63 |
64 | 65 | 66 | -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Multi-Page Website/output.png -------------------------------------------------------------------------------- /11 Feb 2023/Multi-Page Website/style.css: -------------------------------------------------------------------------------- 1 | /* css reset */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | outline: 0; 6 | box-sizing: border-box; 7 | font-family: "IBM Plex Sans", sans-serif; 8 | } 9 | 10 | body { 11 | max-width: 1440px; 12 | background-color: #f0f4f5; 13 | overflow: hidden; 14 | margin: auto; 15 | } 16 | 17 | /* designing the navigation menu */ 18 | nav { 19 | height: 15vh; 20 | display: flex; 21 | align-items: center; 22 | justify-content: space-between; 23 | padding: 0 5%; 24 | } 25 | 26 | /* designing the logo */ 27 | nav img { 28 | width: 150px; 29 | } 30 | 31 | /* desiging the navigation menu links */ 32 | nav ul { 33 | display: flex; 34 | align-items: center; 35 | } 36 | 37 | nav ul li { 38 | list-style: none; 39 | margin-right: 50px; 40 | font-weight: 600; 41 | } 42 | 43 | nav ul li:first-child { 44 | font-weight: 700; 45 | color: #20bc7e; 46 | } 47 | 48 | a { 49 | text-decoration: none; 50 | color: black; 51 | } 52 | 53 | /* designing the hero section */ 54 | main { 55 | display: flex; 56 | align-items: center; 57 | justify-content: center; 58 | height: 85vh; 59 | } 60 | 61 | main section { 62 | width: 50%; 63 | } 64 | 65 | .leftSection { 66 | margin-left: 5%; 67 | position: relative; 68 | } 69 | 70 | .topAngle { 71 | width: 25px; 72 | } 73 | 74 | .leftSection h1 { 75 | font-size: 70px; 76 | } 77 | 78 | .leftSection p { 79 | color: #7c7c7c; 80 | font-size: 18px; 81 | margin: 20px 0; 82 | } 83 | 84 | .bottomAngle { 85 | width: 25px; 86 | position: absolute; 87 | right: 25px; 88 | } 89 | 90 | .stethoscope { 91 | position: absolute; 92 | width: 90%; 93 | top: -60px; 94 | right: -25%; 95 | z-index: -1; 96 | } 97 | 98 | .mouse { 99 | position: absolute; 100 | right: -30px; 101 | bottom: 0; 102 | width: 30px; 103 | } 104 | 105 | .leftSection button { 106 | color: white; 107 | border: none; 108 | padding: 15px 40px; 109 | border-radius: 40px; 110 | background-color: #20bc7e; 111 | font-size: 25px; 112 | font-weight: 700; 113 | } 114 | 115 | /* designing the right section */ 116 | .greenBox, 117 | .yellowBox { 118 | position: absolute; 119 | right: 0; 120 | } 121 | 122 | .greenBox { 123 | width: 35%; 124 | bottom: 30px; 125 | } 126 | 127 | .yellowBox { 128 | width: 30%; 129 | bottom: 50px; 130 | } 131 | 132 | .doctor { 133 | position: absolute; 134 | right: 0; 135 | bottom: 0; 136 | height: 90%; 137 | } 138 | -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Icons/Logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Icons/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Icons/facebook.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Icons/featureImageBg1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Icons/featureImageBg2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Icons/featureImageBg2.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Icons/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Icons/instagram.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Icons/logoName.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Icons/mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Icons/mail.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Icons/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Icons/twitter.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Photos/cardImage1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Photos/cardImage1.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Photos/cardImage2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Photos/cardImage2.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Photos/cardImage3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Photos/cardImage3.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Photos/cardImage4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Photos/cardImage4.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Photos/cardImage5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Photos/cardImage5.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Photos/cardImage6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Photos/cardImage6.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Photos/cardImage7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Photos/cardImage7.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Photos/cardImage8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Photos/cardImage8.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Photos/cardImage9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Photos/cardImage9.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Photos/featuresImage1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Photos/featuresImage1.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Photos/featuresImage2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Photos/featuresImage2.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/Photos/mainBackground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/11 Feb 2023/Real Estate/Photos/mainBackground.png -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Real State 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 33 |
34 | 35 |
36 |

Home That Makes
You Living Life!

37 |

38 | Are you looking for amazing Real estate? Don't worry! we got it for 39 | you 40 |

41 | 42 |
43 |
44 | 45 | 46 |
47 | named logo 48 | named logo 49 | named logo 50 | named logo 51 | named logo 52 |
53 | 54 | 55 |
56 |

Our Best Estate,
are Modern!

57 | 58 | 59 |
60 | 61 |
62 | cardImage1 63 | 64 |
65 | 66 |
67 |

Mixtownia

68 |

$205,500

69 |
70 | 71 | 72 |
73 |
74 | 75 | 76 |
77 | cardImage2 78 | 79 |
80 | 81 |
82 |

Mixtownia

83 |

$205,500

84 |
85 | 86 | 87 |
88 |
89 | 90 | 91 |
92 | cardImage3 93 | 94 |
95 | 96 |
97 |

Mixtownia

98 |

$205,500

99 |
100 | 101 | 102 |
103 |
104 | 105 | 106 |
107 | cardImage4 108 | 109 |
110 | 111 |
112 |

Mixtownia

113 |

$205,500

114 |
115 | 116 | 117 |
118 |
119 | 120 | 121 |
122 | cardImage5 123 | 124 |
125 | 126 |
127 |

Mixtownia

128 |

$205,500

129 |
130 | 131 | 132 |
133 |
134 | 135 | 136 |
137 | cardImage6 138 | 139 |
140 | 141 |
142 |

Mixtownia

143 |

$205,500

144 |
145 | 146 | 147 |
148 |
149 | 150 | 151 |
152 | cardImage7 153 | 154 |
155 | 156 |
157 |

Mixtownia

158 |

$205,500

159 |
160 | 161 | 162 |
163 |
164 | 165 | 166 |
167 | cardImage8 168 | 169 |
170 | 171 |
172 |

Mixtownia

173 |

$205,500

174 |
175 | 176 | 177 |
178 |
179 | 180 | 181 |
182 | cardImage9 183 | 184 |
185 | 186 |
187 |

Mixtownia

188 |

$205,500

189 |
190 | 191 | 192 |
193 |
194 |
195 |
196 | 197 | 198 |
199 | 200 |
201 | image background 202 | feature image 1 203 |
204 | 205 | 206 |
207 |

Modern, Trendy, Affordable

208 |

209 | Lorem ipsum dolor sit amet consectetur adipisicing elit, Dolorem quo 210 | rem officia nisi exercitationem porro? 211 |

212 | 213 |
214 |
215 | 216 | 217 |
218 | 219 |
220 |

Unique House for Long Term!

221 |

222 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem quo 223 | rem officia nisi exercitationem porro? 224 |

225 | 226 |
227 | 228 | 229 |
230 | image background 231 | feature image 2 232 |
233 |
234 | 235 | 236 |
237 |

Subscribe to Our Newsletter
For Weekly Article Update.

238 |

239 | We have real estate-related blog so we can share our thoughts and 240 | rutinity in our blog that updated weekly. We will not spam you, we 241 | promise. 242 |

243 | 244 | 245 |
246 |
247 | mail 248 | 249 |
250 | 251 |
252 |
253 | 254 | 255 | 300 | 301 | 302 | -------------------------------------------------------------------------------- /11 Feb 2023/Real Estate/style.css: -------------------------------------------------------------------------------- 1 | /* css reset */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: "Manrope"; 7 | } 8 | 9 | /* removing default styling of li items */ 10 | li { 11 | list-style: none; 12 | } 13 | 14 | /* removing the default decoration of a tags */ 15 | a { 16 | text-decoration: none; 17 | } 18 | 19 | /* giving default design to every button */ 20 | button { 21 | background: #6663e9; 22 | border: none; 23 | border-radius: 30px; 24 | padding: 10px 30px; 25 | color: #ffffff; 26 | font-weight: 800; 27 | font-size: 18px; 28 | } 29 | 30 | body { 31 | background-color: #f6f8fa; 32 | } 33 | 34 | header { 35 | background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 36 | url("./Photos/mainBackground.png"); 37 | background-position: center; 38 | background-repeat: no-repeat; 39 | background-size: cover; 40 | height: 125vh; 41 | position: relative; 42 | } 43 | 44 | /* designing the navigation menu */ 45 | nav { 46 | display: flex; 47 | align-items: center; 48 | justify-content: space-around; 49 | padding: 25px 0; 50 | } 51 | 52 | nav img { 53 | height: 45px; 54 | width: 120px; 55 | } 56 | 57 | nav ul { 58 | display: flex; 59 | align-items: center; 60 | } 61 | 62 | nav ul li a { 63 | color: #ffffff; 64 | margin-right: 50px; 65 | font-size: 18px; 66 | } 67 | 68 | hr { 69 | margin: 0 100px; 70 | } 71 | 72 | /* designing the div inside the header */ 73 | header div { 74 | color: #ffffff; 75 | margin-left: 150px; 76 | margin-top: 85px; 77 | } 78 | 79 | header div h1 { 80 | font-size: 72px; 81 | margin-bottom: 30px; 82 | } 83 | 84 | header div p { 85 | font-size: 18px; 86 | margin-bottom: 30px; 87 | font-weight: 500; 88 | width: 410px; 89 | } 90 | 91 | /* designing the multiple logos box */ 92 | .my-logos { 93 | background-color: #fff; 94 | margin: 0 35px; 95 | height: 190px; 96 | display: flex; 97 | align-items: center; 98 | justify-content: space-evenly; 99 | border-radius: 30px; 100 | position: relative; 101 | bottom: 100px; 102 | } 103 | 104 | .my-logos img { 105 | width: 156px; 106 | height: 38px; 107 | } 108 | 109 | /* designing the wrapper section of the cards */ 110 | .cards-wrapper-section h1 { 111 | font-weight: 800; 112 | font-size: 60px; 113 | text-align: center; 114 | letter-spacing: 0.01em; 115 | } 116 | 117 | .cards-wrapper { 118 | display: flex; 119 | flex-wrap: wrap; 120 | align-items: center; 121 | justify-content: center; 122 | gap: 10px; 123 | margin-top: 50px; 124 | position: relative; 125 | } 126 | 127 | /* designing the card image */ 128 | .card { 129 | flex-basis: 30%; 130 | display: flex; 131 | flex-direction: column; 132 | align-items: center; 133 | justify-content: center; 134 | position: relative; 135 | } 136 | 137 | /* giving different margin top value to position cards */ 138 | .cards-wrapper div:nth-child(2) { 139 | margin-top: 50px; 140 | } 141 | .cards-wrapper div:nth-child(3) { 142 | margin-top: 100px; 143 | } 144 | .cards-wrapper div:nth-child(4) { 145 | margin-top: 160px; 146 | } 147 | .cards-wrapper div:nth-child(5) { 148 | margin-top: 100px; 149 | } 150 | .cards-wrapper div:nth-child(6) { 151 | margin-top: 40px; 152 | } 153 | .cards-wrapper div:nth-child(7) { 154 | margin-top: 40px; 155 | } 156 | .cards-wrapper div:nth-child(8) { 157 | margin-top: 100px; 158 | } 159 | .cards-wrapper div:nth-child(9) { 160 | margin-top: 160px; 161 | } 162 | 163 | .card img { 164 | width: 366px; 165 | height: 400px; 166 | border-radius: 20px; 167 | } 168 | 169 | /* designing the card box of card */ 170 | .card-box { 171 | width: 326px; 172 | height: 121px; 173 | border-radius: 20px; 174 | background: #ffffff; 175 | box-shadow: 0px 4px 120px rgba(58, 86, 78, 0.2); 176 | position: absolute; 177 | bottom: -60px; 178 | padding: 15px 20px; 179 | display: flex; 180 | align-items: center; 181 | justify-content: space-between; 182 | } 183 | 184 | .card-box button { 185 | font-weight: 800; 186 | font-size: 15px; 187 | width: 114px; 188 | height: 52px; 189 | } 190 | 191 | .card-box div h3 { 192 | font-weight: 700; 193 | font-size: 24px; 194 | margin-bottom: 10px; 195 | } 196 | 197 | .card-box div p { 198 | font-weight: 800; 199 | font-size: 20px; 200 | color: #6663e8; 201 | text-shadow: 0px 4px 60px rgba(0, 0, 0, 0.05); 202 | } 203 | 204 | /* designing both the features section of the website */ 205 | .features-section { 206 | display: flex; 207 | align-items: center; 208 | justify-content: center; 209 | margin-top: 250px; 210 | } 211 | 212 | .features-section div { 213 | width: 50%; 214 | } 215 | 216 | .first-feature-section div:first-child img:first-child { 217 | position: absolute; 218 | left: -80px; 219 | z-index: -1; 220 | width: 726px; 221 | height: 456px; 222 | } 223 | 224 | .features-section div:first-child img:last-child { 225 | position: relative; 226 | width: 405px; 227 | height: 405px; 228 | border-radius: 51px; 229 | bottom: 55px; 230 | left: 110px; 231 | } 232 | 233 | /* designing the second div of feature box */ 234 | .features-section h1 { 235 | font-weight: 800; 236 | font-size: 60px; 237 | letter-spacing: 0.01em; 238 | margin-bottom: 30px; 239 | } 240 | 241 | .features-section p { 242 | font-weight: 500; 243 | font-size: 18px; 244 | color: #585c65; 245 | margin-bottom: 40px; 246 | max-width: 80%; 247 | } 248 | 249 | .features-section button { 250 | font-weight: 700; 251 | } 252 | 253 | /* designing the second feature section */ 254 | .second-feature-section { 255 | display: flex; 256 | align-items: center; 257 | justify-content: center; 258 | } 259 | 260 | .second-feature-section div { 261 | width: 50%; 262 | } 263 | 264 | .second-feature-section div:last-child{ 265 | position: relative; 266 | } 267 | 268 | .second-feature-section div:last-child img:first-child { 269 | position: absolute; 270 | right: 0; 271 | width: 726px; 272 | height: 456px; 273 | bottom: -220px; 274 | } 275 | 276 | .second-feature-section div:last-child img:last-child { 277 | position: absolute; 278 | width: 405px; 279 | height: 405px; 280 | border-radius: 51px; 281 | right: 135px; 282 | bottom: -110px; 283 | } 284 | 285 | .second-feature-section div:first-child { 286 | padding: 0 50px; 287 | } 288 | 289 | .second-feature-section div:first-child h1 { 290 | width: 90%; 291 | } 292 | 293 | /* designing the newsletter section */ 294 | .newsletter { 295 | margin: 100px 70px; 296 | background: #6663e9; 297 | box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.05); 298 | border-radius: 70px; 299 | display: flex; 300 | flex-direction: column; 301 | align-items: center; 302 | justify-content: center; 303 | gap: 30px; 304 | padding: 70px 0; 305 | color: #ffffff; 306 | text-align: center; 307 | } 308 | 309 | .newsletter h1 { 310 | font-weight: 800; 311 | font-size: 60px; 312 | } 313 | 314 | .newsletter p { 315 | font-weight: 400; 316 | font-size: 18px; 317 | width: 55%; 318 | } 319 | 320 | /* designing the form */ 321 | .newsletter form { 322 | display: flex; 323 | align-items: center; 324 | gap: 20px; 325 | } 326 | 327 | .newsletter form div { 328 | display: flex; 329 | align-items: center; 330 | gap: 20px; 331 | background: #5654d1; 332 | border-radius: 40px; 333 | width: 468px; 334 | height: 61px; 335 | padding: 0 20px; 336 | } 337 | 338 | .newsletter form input { 339 | background-color: transparent; 340 | border: none; 341 | } 342 | 343 | .newsletter form button { 344 | background: #ffffff; 345 | box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.05); 346 | border-radius: 40px; 347 | width: 174px; 348 | height: 61px; 349 | color: #6663e9; 350 | } 351 | 352 | /* designing the footer area */ 353 | footer { 354 | display: flex; 355 | align-items: flex-start; 356 | margin: 0 100px; 357 | justify-content: space-between; 358 | margin-bottom: 80px; 359 | } 360 | 361 | footer div:first-child { 362 | display: flex; 363 | flex-direction: column; 364 | gap: 30px; 365 | } 366 | 367 | footer div:first-child img { 368 | width: 150px; 369 | } 370 | 371 | footer div:first-child div img { 372 | width: 45px; 373 | height: 45px; 374 | margin-right: 20px; 375 | } 376 | 377 | footer div:first-child p { 378 | width: 323px; 379 | font-weight: 400; 380 | font-size: 20px; 381 | } 382 | 383 | /* designing the footer links */ 384 | .footer-links { 385 | display: flex; 386 | align-items: flex-start; 387 | justify-content: space-between; 388 | gap: 120px; 389 | } 390 | 391 | .footer-links-content { 392 | display: flex; 393 | flex-direction: column; 394 | } 395 | 396 | .footer-links-content ul li a { 397 | color: black; 398 | } 399 | 400 | .footer-links-content ul li:first-child { 401 | font-weight: 700; 402 | font-size: 20px; 403 | } 404 | 405 | .footer-links-content ul li{ 406 | margin-bottom: 25px; 407 | } -------------------------------------------------------------------------------- /19 Jan 2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Class 19 | HTML 5 | 6 | 7 | 8 |

Hello World

9 |

Hello World

10 |

Hello World

11 |

Hello World

12 |
Hello World
13 |
Hello World
14 |

Lorem ipsum dolor sit, amet consectetur adipisicing.

15 | 16 | 17 | Anurag 18 | 19 | Anurag 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /2 Feb | Project With Mock Up Design/assets/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/2 Feb | Project With Mock Up Design/assets/img1.png -------------------------------------------------------------------------------- /2 Feb | Project With Mock Up Design/assets/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/2 Feb | Project With Mock Up Design/assets/img2.png -------------------------------------------------------------------------------- /2 Feb | Project With Mock Up Design/assets/img3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/2 Feb | Project With Mock Up Design/assets/img3.png -------------------------------------------------------------------------------- /2 Feb | Project With Mock Up Design/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/2 Feb | Project With Mock Up Design/assets/logo.png -------------------------------------------------------------------------------- /2 Feb | Project With Mock Up Design/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Headphone 8 | 9 | 10 | 11 | 12 | 13 | 21 |
22 | 23 |
24 |

Be Focus and Productive

25 |

Not just an ordinary headphones. It's designed for meditation.

26 | 27 |
28 | 29 |
30 |
31 | Image 1 32 | Image 2 33 |
34 | Image 3 35 |
36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /2 Feb | Project With Mock Up Design/style/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | background-color: #f9f5ed; 6 | } 7 | nav { 8 | padding: 20px 10%; 9 | height: 15vh; 10 | } 11 | nav ul { 12 | display: flex; 13 | align-items: center; 14 | } 15 | 16 | nav ul li { 17 | list-style: none; 18 | margin-right: 5%; 19 | font-weight: 600; 20 | } 21 | 22 | nav ul li img { 23 | width: 100px; 24 | } 25 | 26 | main { 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | } 31 | 32 | .leftmain { 33 | width: 40%; 34 | } 35 | 36 | .leftmain h1 { 37 | font-size: 60px; 38 | } 39 | 40 | .leftmain p { 41 | margin: 5% 0; 42 | } 43 | 44 | .leftmain button { 45 | padding: 15px 20px; 46 | font-size: 18px; 47 | color: white; 48 | font-weight: 600; 49 | border: none; 50 | background-color: #3b855b; 51 | border-radius: 10px; 52 | } 53 | 54 | .rightmain { 55 | /* width: 60%; */ 56 | padding: 7%; 57 | } 58 | 59 | .rightmain div img { 60 | width: 30%; 61 | } 62 | 63 | .rightmain div img:first-child { 64 | margin-right: 20px; 65 | } 66 | 67 | .rightmain div { 68 | margin-bottom: 20px; 69 | } 70 | 71 | .rightmain > img { 72 | width: 64%; 73 | } 74 | -------------------------------------------------------------------------------- /20 Jan 2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 18 | 19 | 20 | 21 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, tenetur!

22 |

I am anurag mentor at PW Skills

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 |
    59 |

    60 |

    61 |
    62 | 63 |
    64 | 70 |
    71 |
    72 |
    73 | 84 |
    85 |

    86 |
    87 | 88 | 89 | -------------------------------------------------------------------------------- /27 Feb 2023/ColorChanger/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript DOM Project 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /27 Feb 2023/ColorChanger/script.js: -------------------------------------------------------------------------------- 1 | const btn = document.getElementById("button"); 2 | const randomColor = () => { 3 | let val = "0123456789ABCDEF"; 4 | let cons = "#"; 5 | 6 | for (let i = 0; i < 6; i++) { 7 | cons = cons + val[Math.floor(Math.random() * 16)]; 8 | } 9 | return cons; 10 | }; 11 | 12 | console.log(randomColor()); 13 | 14 | function changeRandomColor() { 15 | document.body.style.backgroundColor = randomColor(); 16 | } 17 | 18 | btn.addEventListener("click", changeRandomColor); 19 | -------------------------------------------------------------------------------- /27 Feb 2023/ColorChanger/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | button { 8 | padding: 16px; 9 | font-size: 20px; 10 | border-radius: 25px; 11 | background-color: #808080; 12 | } 13 | -------------------------------------------------------------------------------- /27 Feb 2023/Part 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM Part 1 8 | 9 | 10 | 11 |

    Hello Namaste

    12 | 13 | 18 | 19 |

    Hey

    20 |

    namaste

    21 |

    Hola

    22 | 23 | 24 |

    Hello

    25 |

    Hola

    26 |

    Hey

    27 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /27 Feb 2023/Part 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM - JavaScript 8 | 9 | 10 |

    Removing HTML Element

    11 | 16 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /27 Feb 2023/Part 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM Part 3 8 | 9 | 10 | 11 |

    Hello Bacho - PWSKIILS

    12 |

    13 | 14 | 15 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /27 Feb 2023/Part 3/part3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

    Hello PW Skills

    11 |

    12 | 13 | 14 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /29 Jan/layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Layout 8 | 16 | 17 | 18 |
    19 | 20 | 21 | -------------------------------------------------------------------------------- /29 Jan/positons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Position Porperty 8 | 32 | 33 | 34 | 35 |
    36 |
    37 |
    38 |
    39 |
    40 | 41 | 42 | -------------------------------------------------------------------------------- /29 Jan/zindex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Overflow and Z-index 8 | 33 | 34 | 35 | 36 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora

    37 | 38 |
    39 |
    40 | 41 | 42 | -------------------------------------------------------------------------------- /30 Jan/flexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex 8 | 42 | 43 | 44 | 45 |
    46 |
    Box 1
    47 |
    Box 2
    48 |
    Box 3
    49 |
    50 | 51 | 52 | -------------------------------------------------------------------------------- /31 Jan/creatingalbum.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Album 8 | 49 | 50 | 51 | 52 |
    53 |
    54 |
    55 |
    56 |
    57 |
    58 |
    59 |
    60 |
    61 |
    62 | 2 | 3 | 4 | 5 | 6 | 7 | Grid 8 | 51 | 52 | 53 | 54 |
    55 |
    56 |
    Box1
    57 |
    58 |
    59 |
    60 |
    61 |
    62 |
    63 |
    64 |
    65 |
    66 |
    67 | 68 | 69 | -------------------------------------------------------------------------------- /Assignment_01(HTML+CSS)/Output/Project_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/Assignment_01(HTML+CSS)/Output/Project_1.png -------------------------------------------------------------------------------- /Assignment_01(HTML+CSS)/assets/pexels-maxyne-barcel-10402282 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/Assignment_01(HTML+CSS)/assets/pexels-maxyne-barcel-10402282 1.png -------------------------------------------------------------------------------- /Assignment_01(HTML+CSS)/assets/scrool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/Assignment_01(HTML+CSS)/assets/scrool.png -------------------------------------------------------------------------------- /Assignment_01(HTML+CSS)/assets/white-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/Assignment_01(HTML+CSS)/assets/white-logo.png -------------------------------------------------------------------------------- /Assignment_01(HTML+CSS)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 | 22 | Document 23 | 24 | 25 |
    26 |
    27 | 43 |
    44 | 45 |
    46 |
    47 |

    48 | A Restaurant That Only Serves Delicious Food 49 |

    50 | 51 |
    52 |
    53 | bottom-logo 54 |
    55 |
    56 |
    57 |
    58 |
    59 | 60 | 61 | -------------------------------------------------------------------------------- /Assignment_01(HTML+CSS)/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "Red Rose", cursive; 6 | } 7 | 8 | body { 9 | width: 100%; 10 | height: 100%; 11 | background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 12 | url("./assets/pexels-maxyne-barcel-10402282 1.png"); 13 | background-size: cover; 14 | background-attachment: fixed; 15 | } 16 | 17 | /* ------------------------------ */ 18 | /* ---------- NAVBAR ------------ */ 19 | /* ------------------------------ */ 20 | 21 | .navbar { 22 | display: flex; 23 | justify-content: space-between; 24 | align-items: center; 25 | padding: 0 60px 0 60px; 26 | margin-top: 55px; 27 | } 28 | 29 | .list { 30 | display: flex; 31 | align-items: center; 32 | gap: 63px; 33 | list-style: none; 34 | font-family: "Red Rose"; 35 | font-style: normal; 36 | font-weight: 400; 37 | font-size: 18px; 38 | line-height: 22px; 39 | color: #ffc233; 40 | } 41 | 42 | .logo, 43 | .list-item { 44 | cursor: pointer; 45 | } 46 | 47 | .button-small { 48 | padding: 12px 40px; 49 | background-color: #ff505f; 50 | border: none; 51 | font-family: "Red Rose"; 52 | font-style: normal; 53 | font-weight: 700; 54 | font-size: 24px; 55 | line-height: 30px; 56 | color: #ffffff; 57 | cursor: pointer; 58 | } 59 | 60 | /* ------------------------------ */ 61 | /* ---------- HERO ------------ */ 62 | /* ------------------------------ */ 63 | 64 | .hero { 65 | max-width: 1154px; 66 | margin: 0 auto; 67 | text-align: center; 68 | margin-top: 119px; 69 | } 70 | 71 | .hero-heading { 72 | font-family: "Dela Gothic One", cursive; 73 | font-style: normal; 74 | font-weight: 400; 75 | font-size: 104px; 76 | line-height: 114px; 77 | /* or 110% */ 78 | color: #ffc233; 79 | } 80 | 81 | .button-large { 82 | background: #ff505f; 83 | font-family: "Red Rose"; 84 | font-style: normal; 85 | font-weight: 700; 86 | font-size: 32px; 87 | line-height: 40px; 88 | color: #ffffff; 89 | border: none; 90 | padding: 24px 56px; 91 | margin-top: 64px; 92 | cursor: pointer; 93 | } 94 | 95 | .bottom { 96 | position: absolute; 97 | bottom: 20px; 98 | right: 40px; 99 | } 100 | -------------------------------------------------------------------------------- /Assignment_02(HTML+CSS)/Output/Project_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/Assignment_02(HTML+CSS)/Output/Project_2.png -------------------------------------------------------------------------------- /Assignment_02(HTML+CSS)/assets/Header Illustration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/Assignment_02(HTML+CSS)/assets/Header Illustration.png -------------------------------------------------------------------------------- /Assignment_02(HTML+CSS)/assets/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/Assignment_02(HTML+CSS)/assets/Logo.png -------------------------------------------------------------------------------- /Assignment_02(HTML+CSS)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 16 | Document 17 | 18 | 19 |
    20 |
    21 | 38 |
    39 | 40 |
    41 | 58 |
    59 |
    60 | 61 | 62 | -------------------------------------------------------------------------------- /Assignment_02(HTML+CSS)/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | 8 | .container { 9 | max-width: 130rem; 10 | margin: 0 auto; 11 | padding: 0 119px; 12 | } 13 | 14 | .navbar-container { 15 | display: flex; 16 | align-items: center; 17 | justify-content: space-between; 18 | margin-top: 69px; 19 | } 20 | 21 | .grow-list { 22 | flex-grow: 1; 23 | padding-left: 62px; 24 | } 25 | 26 | .list { 27 | display: flex; 28 | align-items: center; 29 | list-style: none; 30 | gap: 36px; 31 | font-family: "Poppins"; 32 | font-style: normal; 33 | font-weight: 400; 34 | font-size: 16px; 35 | line-height: 24px; 36 | color: #000; 37 | } 38 | 39 | .list li { 40 | cursor: pointer; 41 | } 42 | 43 | .list li:hover { 44 | color: #5955b3; 45 | } 46 | 47 | .nav-button { 48 | padding: 14px 28px; 49 | background-color: #5955b3; 50 | border: none; 51 | border-radius: 12px; 52 | font-family: "Poppins"; 53 | font-style: normal; 54 | font-weight: 500; 55 | font-size: 16px; 56 | line-height: 24px; 57 | display: flex; 58 | align-items: center; 59 | text-align: center; 60 | color: #ffffff; 61 | } 62 | 63 | .banner-container { 64 | display: flex; 65 | align-items: center; 66 | justify-content: space-between; 67 | margin-top: 55px; 68 | } 69 | 70 | .heading-text { 71 | font-family: "Poppins"; 72 | font-style: normal; 73 | font-weight: 600; 74 | font-size: 64px; 75 | line-height: 74px; 76 | color: #3c2f60; 77 | } 78 | 79 | .heading-text span { 80 | color: #5955b3; 81 | } 82 | 83 | .description { 84 | font-family: "Poppins"; 85 | font-style: normal; 86 | font-weight: 400; 87 | font-size: 16px; 88 | line-height: 26px; 89 | letter-spacing: 0.01em; 90 | color: #828282; 91 | margin-top: 28px; 92 | } 93 | 94 | .btn { 95 | margin-top: 72px; 96 | } 97 | -------------------------------------------------------------------------------- /Assignment_03(HTML+CSS)/Output/Project_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/Assignment_03(HTML+CSS)/Output/Project_3.png -------------------------------------------------------------------------------- /Assignment_03(HTML+CSS)/assets/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/Assignment_03(HTML+CSS)/assets/bg.png -------------------------------------------------------------------------------- /Assignment_03(HTML+CSS)/assets/white-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwlive/fullstackwebdevelopment/e8c859fa6653a77a6c36ba42b519fcec36df61f3/Assignment_03(HTML+CSS)/assets/white-logo.png -------------------------------------------------------------------------------- /Assignment_03(HTML+CSS)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 20 | 21 | Document 22 | 23 | 24 |
    25 |
    26 | 44 |
    45 | 46 |
    47 |
    48 |

    Lets build a better tomorrow, together.

    49 |

    50 | Buy 1 Token. Join the DAO. Change the world 51 |

    52 | 53 |
    54 |
    55 |
    56 | 57 | 58 | -------------------------------------------------------------------------------- /Assignment_03(HTML+CSS)/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | 8 | /* ------------------------------ */ 9 | /* ---------- NAVBAR ------------ */ 10 | /* ------------------------------ */ 11 | 12 | .navbar { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | padding: 31px 83px; 17 | height: 94px; 18 | background-color: #000; 19 | } 20 | 21 | .grow-list { 22 | flex-grow: 1; 23 | } 24 | 25 | img { 26 | width: 92px; 27 | height: 32px; 28 | } 29 | 30 | .line { 31 | width: 1px; 32 | height: 50px; 33 | background-color: #fff; 34 | margin-left: 63px; 35 | } 36 | 37 | .list { 38 | display: flex; 39 | align-items: center; 40 | gap: 63px; 41 | list-style: none; 42 | font-family: "Poppins"; 43 | font-style: normal; 44 | font-weight: 600; 45 | font-size: 16px; 46 | line-height: 24px; 47 | color: #ffffff; 48 | margin-left: 64px; 49 | } 50 | 51 | .logo, 52 | .list-item { 53 | cursor: pointer; 54 | } 55 | 56 | .button-small { 57 | padding: 7px 28px; 58 | background: #ba0cc5; 59 | border-radius: 6px; 60 | border: none; 61 | font-family: "Poppins"; 62 | font-style: normal; 63 | font-weight: 600; 64 | font-size: 16px; 65 | line-height: 24px; 66 | color: #ffffff; 67 | cursor: pointer; 68 | } 69 | 70 | /* ------------------------------ */ 71 | /* ---------- HERO ------------ */ 72 | /* ------------------------------ */ 73 | 74 | .hero { 75 | background-image: url("./assets/bg.png"); 76 | background-size: cover; 77 | background-attachment: fixed; 78 | height: 91.5vh; 79 | text-align: center; 80 | } 81 | 82 | .hero-heading { 83 | max-width: 846px; 84 | margin: 0 auto; 85 | font-style: normal; 86 | font-weight: 700; 87 | font-size: 80px; 88 | line-height: 98px; 89 | text-align: center; 90 | color: #ffffff; 91 | padding-top: 172px; 92 | } 93 | 94 | .hero-description { 95 | font-family: "Poppins"; 96 | font-style: normal; 97 | font-weight: 500; 98 | font-size: 30px; 99 | line-height: 45px; 100 | color: #ffffff; 101 | } 102 | 103 | .button-large { 104 | background: #ba0cc5; 105 | border-radius: 11.2308px; 106 | font-family: "Poppins"; 107 | font-style: normal; 108 | font-weight: 600; 109 | font-size: 29.9487px; 110 | line-height: 45px; 111 | color: #ffffff; 112 | border: none; 113 | padding: 14px 22px; 114 | margin-top: 64px; 115 | cursor: pointer; 116 | } 117 | -------------------------------------------------------------------------------- /DOM Assignment/Counter App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Counter App 8 | 9 | 10 | 11 | 12 | 13 | 14 |
    15 |

    Counter App

    16 | 17 |
    18 | 19 | 0 20 | 21 |
    22 | 23 | 24 | 25 |
    26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /DOM Assignment/Counter App/script.js: -------------------------------------------------------------------------------- 1 | // getting the html elements 2 | const decrementBtn = document.getElementById("decrementBtn"); 3 | const incrementBtn = document.getElementById("incrementBtn"); 4 | const resetBtn = document.getElementById("resetBtn"); 5 | const displayValue = document.getElementById("displayValue"); 6 | 7 | // for decrement button click 8 | decrementBtn.addEventListener("click", () => { 9 | const value = Number(displayValue.innerText); 10 | if (value > 0) { 11 | displayValue.innerText = value - 1; 12 | } else { 13 | alert("Negative value not allowed"); 14 | } 15 | }); 16 | 17 | // for increment button click 18 | incrementBtn.addEventListener("click", () => { 19 | const value = Number(displayValue.innerText); 20 | if (value >= 10) { 21 | alert("10+ values are not allowed"); 22 | } else { 23 | displayValue.innerText = value + 1; 24 | } 25 | }); 26 | 27 | // for reset button click 28 | resetBtn.addEventListener("click", () => { 29 | displayValue.innerText = 0; 30 | }); 31 | -------------------------------------------------------------------------------- /DOM Assignment/Counter App/style.css: -------------------------------------------------------------------------------- 1 | /* css reset */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | outline: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | } 15 | 16 | /* designing the counter container */ 17 | .container { 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | flex-direction: column; 22 | gap: 10px; 23 | box-shadow: 0 0 5px black; 24 | padding: 20px; 25 | border-radius: 5px; 26 | } 27 | 28 | /* designing the buttons */ 29 | button { 30 | padding: 5px 15px; 31 | font-size: 20px; 32 | font-weight: bold; 33 | } 34 | 35 | #displayValue { 36 | font-size: 25px; 37 | padding: 5px 15px; 38 | border: 1px solid black; 39 | } 40 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/01 onclick/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Onclick 9 | 10 | 11 |
    12 |

    Click me 👇

    13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/01 onclick/script.js: -------------------------------------------------------------------------------- 1 | // click event 2 | 3 | // An element receives a click event when a pointing device button (such as a mouse's primary mouse button) 4 | // is both pressed and released while the pointer is located inside the element. 5 | 6 | // If the button is pressed on one element and the pointer is moved outside the element before the button is released, 7 | // the event is fired on the most specific ancestor element that contained both elements. 8 | 9 | const boxElement = document.getElementById("box"); 10 | 11 | // add a click event listener to the element 12 | boxElement.addEventListener("click", function () { 13 | alert("you just clicked me 👍"); 14 | }); 15 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/01 onclick/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | 8 | #box { 9 | width: 20rem; 10 | background-color: green; 11 | cursor: pointer; 12 | color: white; 13 | text-align: center; 14 | border-radius: 5px; 15 | font-size: 25px; 16 | } 17 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/02 dubbleClick/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | ondblclick 9 | 10 | 11 |
    12 |

    Click me twice 👇👇

    13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/02 dubbleClick/script.js: -------------------------------------------------------------------------------- 1 | // dbclick event 2 | 3 | // The dblclick event fires when a pointing device button (such as a mouse's primary button) 4 | // is double-clicked; that is, when it's rapidly clicked twice on a single element within a very short span of time. 5 | 6 | const boxElement = document.getElementById("box"); 7 | 8 | // adding a dblclick event listener to the element 9 | boxElement.addEventListener("dblclick", function () { 10 | alert("doubleClick event is working properly 👍"); 11 | }); 12 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/02 dubbleClick/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | 8 | #box { 9 | width: 20rem; 10 | background-color: green; 11 | cursor: pointer; 12 | color: white; 13 | text-align: center; 14 | border-radius: 5px; 15 | font-size: 25px; 16 | } 17 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/03 mouseOver/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | MouseOver 9 | 10 | 11 |
    12 |

    Restricted Area 🙅

    13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/03 mouseOver/script.js: -------------------------------------------------------------------------------- 1 | // mouseover 2 | // The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) 3 | // is used to move the cursor onto the element or one of its child elements. 4 | 5 | const boxElement = document.getElementById("box"); 6 | 7 | // add a mouseover event listener to the element 8 | boxElement.addEventListener("mouseover", function () { 9 | alert( 10 | "you entered in Restricted Area 🙅 (mouse over event is working properly)" 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/03 mouseOver/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | 8 | #box { 9 | width: 20rem; 10 | background-color: green; 11 | cursor: pointer; 12 | color: white; 13 | text-align: center; 14 | border-radius: 5px; 15 | font-size: 25px; 16 | } 17 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/04 mouseOut/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | mouseOut 9 | 10 | 11 |
    12 |

    Safe Zone 😃

    13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/04 mouseOut/script.js: -------------------------------------------------------------------------------- 1 | // mouseout event 2 | 3 | // The mouseout event is fired at an Element when a pointing device (usually a mouse) 4 | // is used to move the cursor so that it is no longer contained within the element or one of its children. 5 | 6 | const boxElement = document.getElementById("box"); 7 | 8 | // add a mouseout event listener to the element 9 | boxElement.addEventListener("mouseout", function () { 10 | alert("you left the safe zone 🙅 (mouse out event working properly)"); 11 | }); 12 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/04 mouseOut/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | 8 | #box { 9 | width: 20rem; 10 | background-color: green; 11 | cursor: pointer; 12 | color: white; 13 | text-align: center; 14 | border-radius: 5px; 15 | font-size: 25px; 16 | } 17 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/05 onKeyPress/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | KeyPress 8 | 9 | 10 | 11 |
    12 |

    13 | 14 |
    15 | 16 | 17 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/05 onKeyPress/script.js: -------------------------------------------------------------------------------- 1 | //keypress 2 | 3 | // The keypress event is fired when a key that produces a character value is pressed down. 4 | 5 | 6 | 7 | let inputBox = document.getElementById('input-box') 8 | let display = document.getElementById('display') 9 | 10 | 11 | // // adding a keypress event listener to the inputbox 12 | inputBox.addEventListener('keypress', function(e){ 13 | display.innerText ="you have Pressed " + e.key 14 | }) -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/05 onKeyPress/style.css: -------------------------------------------------------------------------------- 1 | #display { 2 | color: red; 3 | } 4 | 5 | #input-box { 6 | font-size: 25px; 7 | } 8 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/06 keydown_keyup/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | keyDown 8 | 9 | 10 | 11 |
    12 |
    Press any key :)
    13 |
    14 | 15 | 16 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/06 keydown_keyup/script.js: -------------------------------------------------------------------------------- 1 | // keydown and keyup event 2 | 3 | // keydown 4 | // The keydown event is fired when a key is pressed 5 | 6 | //keyup 7 | // The keyup event is fired when a key is released. 8 | 9 | let container = document.getElementById("container"); 10 | let display = document.getElementById("display"); 11 | 12 | // adding a keydown event listener to the document 13 | document.addEventListener("keydown", function (e) { 14 | display.style.color = "red"; 15 | display.innerText = e.key + " is keyDown"; 16 | }); 17 | 18 | // adding a keyup event listener to the document 19 | document.addEventListener("keyup", function (e) { 20 | display.style.color = "green"; 21 | display.innerText = e.key + " is keyUp"; 22 | }); 23 | -------------------------------------------------------------------------------- /DOM Assignment/Event Listener Project/06 keydown_keyup/style.css: -------------------------------------------------------------------------------- 1 | #container { 2 | height: 100vh; 3 | } 4 | 5 | #display { 6 | font-size: 50px; 7 | } 8 | -------------------------------------------------------------------------------- /Time Table Project with HTML/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mini Project | Time Table 8 | 9 | 10 | 11 | 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 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 |
    Time Table
    Day/LectureI
    09:00 - 09:30    		II
    09:00 - 09:30    		III
    09:00 - 09:30    		LunchIV
    09:00 - 09:30    		V
    09:00 - 09:30    		VI
    09:00 - 09:30
    MondaySubject ISubject IISubject IIILunch BreakSubject IVSubject VSubject VI
    TuesdaySubject ISubject IISubject IIISubject IVSubject VSubject VI
    WednesdaySubject ISubject IISubject IIISubject IVSubject VSubject VI
    ThursdaySubject ISubject IISubject IIISubject IVSubject VSubject VI
    FridaySubject ISubject IISubject IIISubject IVSubject VSubject VI
    SaturdaySubject ISubject IISubject IIINo Lecture
    83 | 84 | --------------------------------------------------------------------------------