├── Portfolio ├── MyResume.pdf ├── images │ ├── js.png │ ├── css.png │ ├── java.png │ ├── sql.png │ ├── cSharp.jpg │ ├── dotNet.png │ ├── html.webp │ ├── Studyhub.jpg │ ├── To-DO-List.png │ ├── Insta-Fashion.png │ └── Walk-In-Style.png ├── script.js ├── index.html └── style.css ├── Landing Page ├── imgs │ ├── Boots.webp │ ├── Heels.webp │ ├── Kids1.png │ ├── Kids2.png │ ├── Mens1.png │ ├── Mens2.png │ ├── Sports.jpg │ ├── icon-1.png │ ├── icon-2.png │ ├── icon-3.png │ ├── icon-4.png │ ├── Corosel2.png │ ├── Corosel3.png │ ├── Corosel4.jpg │ ├── Formals.webp │ ├── KidsShoe.jpg │ ├── Loafers.webp │ ├── Sports.webp │ ├── Womens1.png │ ├── Womens2.png │ ├── payment.png │ ├── ContactUs.png │ ├── Corosel1.webp │ ├── Flipflops.webp │ ├── KidsShoe2.jpg │ ├── ToeFloats.webp │ └── CasualSneakers.webp ├── Stylesheets │ └── UserMaster.css └── index.html ├── README.md └── Calculator ├── Calculator.html ├── Cal.css └── CalJs.js /Portfolio/MyResume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Portfolio/MyResume.pdf -------------------------------------------------------------------------------- /Portfolio/images/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Portfolio/images/js.png -------------------------------------------------------------------------------- /Portfolio/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Portfolio/images/css.png -------------------------------------------------------------------------------- /Portfolio/images/java.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Portfolio/images/java.png -------------------------------------------------------------------------------- /Portfolio/images/sql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Portfolio/images/sql.png -------------------------------------------------------------------------------- /Landing Page/imgs/Boots.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Boots.webp -------------------------------------------------------------------------------- /Landing Page/imgs/Heels.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Heels.webp -------------------------------------------------------------------------------- /Landing Page/imgs/Kids1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Kids1.png -------------------------------------------------------------------------------- /Landing Page/imgs/Kids2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Kids2.png -------------------------------------------------------------------------------- /Landing Page/imgs/Mens1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Mens1.png -------------------------------------------------------------------------------- /Landing Page/imgs/Mens2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Mens2.png -------------------------------------------------------------------------------- /Landing Page/imgs/Sports.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Sports.jpg -------------------------------------------------------------------------------- /Landing Page/imgs/icon-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/icon-1.png -------------------------------------------------------------------------------- /Landing Page/imgs/icon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/icon-2.png -------------------------------------------------------------------------------- /Landing Page/imgs/icon-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/icon-3.png -------------------------------------------------------------------------------- /Landing Page/imgs/icon-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/icon-4.png -------------------------------------------------------------------------------- /Portfolio/images/cSharp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Portfolio/images/cSharp.jpg -------------------------------------------------------------------------------- /Portfolio/images/dotNet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Portfolio/images/dotNet.png -------------------------------------------------------------------------------- /Portfolio/images/html.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Portfolio/images/html.webp -------------------------------------------------------------------------------- /Landing Page/imgs/Corosel2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Corosel2.png -------------------------------------------------------------------------------- /Landing Page/imgs/Corosel3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Corosel3.png -------------------------------------------------------------------------------- /Landing Page/imgs/Corosel4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Corosel4.jpg -------------------------------------------------------------------------------- /Landing Page/imgs/Formals.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Formals.webp -------------------------------------------------------------------------------- /Landing Page/imgs/KidsShoe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/KidsShoe.jpg -------------------------------------------------------------------------------- /Landing Page/imgs/Loafers.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Loafers.webp -------------------------------------------------------------------------------- /Landing Page/imgs/Sports.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Sports.webp -------------------------------------------------------------------------------- /Landing Page/imgs/Womens1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Womens1.png -------------------------------------------------------------------------------- /Landing Page/imgs/Womens2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Womens2.png -------------------------------------------------------------------------------- /Landing Page/imgs/payment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/payment.png -------------------------------------------------------------------------------- /Portfolio/images/Studyhub.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Portfolio/images/Studyhub.jpg -------------------------------------------------------------------------------- /Landing Page/imgs/ContactUs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/ContactUs.png -------------------------------------------------------------------------------- /Landing Page/imgs/Corosel1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Corosel1.webp -------------------------------------------------------------------------------- /Landing Page/imgs/Flipflops.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/Flipflops.webp -------------------------------------------------------------------------------- /Landing Page/imgs/KidsShoe2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/KidsShoe2.jpg -------------------------------------------------------------------------------- /Landing Page/imgs/ToeFloats.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/ToeFloats.webp -------------------------------------------------------------------------------- /Portfolio/images/To-DO-List.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Portfolio/images/To-DO-List.png -------------------------------------------------------------------------------- /Portfolio/images/Insta-Fashion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Portfolio/images/Insta-Fashion.png -------------------------------------------------------------------------------- /Portfolio/images/Walk-In-Style.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Portfolio/images/Walk-In-Style.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CODSOFT 2 | Codsoft-WebDevelopment-Internship This is a repo to maintain my codsoft internship projects 3 | -------------------------------------------------------------------------------- /Landing Page/imgs/CasualSneakers.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Annu2262/CODSOFT/HEAD/Landing Page/imgs/CasualSneakers.webp -------------------------------------------------------------------------------- /Portfolio/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | 3 | $('#menu').click(function(){ 4 | $(this).toggleClass('fa-times'); 5 | $('header').toggleClass('toggle'); 6 | }); 7 | 8 | $(window).on('scroll load',function(){ 9 | 10 | $('#menu').removeClass('fa-times'); 11 | $('header').removeClass('toggle'); 12 | 13 | if($(window).scrollTop() > 0){ 14 | $('.top').show(); 15 | }else{ 16 | $('.top').hide(); 17 | } 18 | 19 | }); 20 | 21 | // smooth scrolling 22 | 23 | $('a[href*="#"]').on('click',function(e){ 24 | 25 | e.preventDefault(); 26 | 27 | $('html, body').animate({ 28 | 29 | scrollTop : $($(this).attr('href')).offset().top, 30 | 31 | }, 32 | 500, 33 | 'linear' 34 | ); 35 | 36 | }); 37 | 38 | }); -------------------------------------------------------------------------------- /Calculator/Calculator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Calculator 9 | 10 | 11 | 12 |
13 |
0
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Calculator/Cal.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | margin: 0; 7 | background-color: #333; 8 | color: #fff; 9 | font-family: Arial, sans-serif; 10 | } 11 | 12 | .calculator { 13 | width: 300px; 14 | border: 2px solid #fff; 15 | border-radius: 10px; 16 | background-color: #444; 17 | padding: 20px; 18 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 19 | } 20 | 21 | .display { 22 | font-size: 36px; 23 | margin-bottom: 20px; 24 | padding: 10px; 25 | background-color: #555; 26 | border: 1px solid #888; 27 | border-radius: 5px; 28 | text-align: right; 29 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 30 | } 31 | 32 | .buttons { 33 | display: grid; 34 | grid-template-columns: repeat(4, 1fr); 35 | gap: 10px; 36 | } 37 | 38 | button { 39 | font-size: 24px; 40 | padding: 20px; 41 | border: none; 42 | border-radius: 5px; 43 | cursor: pointer; 44 | transition: all 0.3s ease; 45 | } 46 | 47 | .operator { 48 | background-color: #ff9500; 49 | color: #fff; 50 | } 51 | 52 | .operator:hover { 53 | background-color: #ffad33; 54 | } 55 | 56 | .number { 57 | background-color: #666; 58 | color: #fff; 59 | } 60 | 61 | .number:hover { 62 | background-color: #888; 63 | } 64 | 65 | .calculate { 66 | background-color: #4caf50; 67 | color: #fff; 68 | } 69 | 70 | .calculate:hover { 71 | background-color: #62ff84; 72 | } 73 | 74 | .clear { 75 | background-color: #ff3b30; 76 | color: #fff; 77 | } 78 | 79 | .clear:hover { 80 | background-color: #ff6655; 81 | } 82 | -------------------------------------------------------------------------------- /Calculator/CalJs.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function () { 2 | let display = document.getElementById('display'); 3 | let buttons = document.querySelectorAll('.number, .operator'); 4 | let clearButton = document.getElementById('clear'); 5 | let calculateButton = document.getElementById('calculate'); 6 | 7 | let currentInput = ''; 8 | let operator = ''; 9 | let firstOperand = ''; 10 | 11 | buttons.forEach(function (button) { 12 | button.addEventListener('click', function () { 13 | if (button.classList.contains('operator')) { 14 | if (currentInput !== '') { 15 | firstOperand = currentInput; 16 | operator = button.textContent; 17 | currentInput = ''; 18 | display.textContent = operator; 19 | } 20 | } else if (button.classList.contains('number')) { 21 | currentInput += button.textContent; 22 | display.textContent = currentInput; 23 | } 24 | }); 25 | }); 26 | 27 | clearButton.addEventListener('click', function () { 28 | currentInput = ''; 29 | operator = ''; 30 | firstOperand = ''; 31 | display.textContent = '0'; 32 | }); 33 | 34 | calculateButton.addEventListener('click', function () { 35 | if (operator !== '' && firstOperand !== '' && currentInput !== '') { 36 | let result; 37 | let secondOperand = currentInput; 38 | switch (operator) { 39 | case '+': 40 | result = parseFloat(firstOperand) + parseFloat(secondOperand); 41 | break; 42 | case '-': 43 | result = parseFloat(firstOperand) - parseFloat(secondOperand); 44 | break; 45 | case '*': 46 | result = parseFloat(firstOperand) * parseFloat(secondOperand); 47 | break; 48 | case '/': 49 | result = parseFloat(firstOperand) / parseFloat(secondOperand); 50 | break; 51 | default: 52 | result = 'Error'; 53 | } 54 | display.textContent = result; 55 | currentInput = result; 56 | operator = ''; 57 | firstOperand = ''; 58 | } 59 | }); 60 | }); 61 | -------------------------------------------------------------------------------- /Portfolio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | portfolio 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | 24 |

Annapurna Gupta

25 |

web developer

26 |
27 | 28 | 38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |
48 | 49 |

HI THERE !

50 |

I'M Annapurna Gupta

51 |

I am a web developer with a passion for UI design and functional 52 | user experiences with a creative mindset. 53 | front developer who focuse on writing clean and elegant and efficient code. 54 | I am Organized and dependable candidate successful at managing multiple priorities with a positive attitude and desirous of learning. 55 | Strong written and verbal communication skills with the ability to work well in a team environment 56 | Seeking entry-level IT opportunities to apply my skills and contribute to the growth of a company. 57 |

58 | 59 | 60 |
61 | 62 | 63 | 64 | 65 | 66 |
67 | 68 |

about me

69 | 70 |
71 | 72 |
73 |

name : Annapurna Gupta

74 |

age : 21

75 |

qualification : Bsc.IT

76 |

email : annapurnag2262@gmail.com

77 |

post : Web developer

78 |

language : hindi, English, marathi

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

my education

92 | 93 |
94 | 95 |
96 | 97 | 2023-2025 98 |

Currently pursuing MCA

99 |

Thakur Institue of Management Studies Career Development and Research, Kandiwali

100 |
101 | 102 |
103 | 104 | 2020-2023 105 |

B.SC IT

106 |

Smt.Chandibai Himathmal Mansukhani College, Ulhasnagar
CGPA : 9.30

107 |
108 | 109 |
110 | 111 | 2019-2020 112 |

HSC

113 |

New English High School And Jr. College, Ulhasnagar
percentage : 69.69%

114 |
115 | 116 |
117 | 118 | 2017-2018 119 |

SSC

120 |

R.C.Patel.High School, Borivali
percentage : 86%

121 |
122 |
123 | 124 |
125 | 126 | 127 |
128 | 129 |

my skills

130 |

Technical Skills

131 |
132 | 133 |
134 | 135 |
136 | 137 |
138 | 139 |
140 | 141 |
142 | 143 |
144 | 145 |
146 | 147 |
148 | 149 |
150 | 151 |
152 | 153 |
154 | 155 |
156 | 157 |
158 | 159 |
160 |
161 |

Soft Skills

162 |
163 | 164 | 165 |
166 | 167 |

my project

168 | 169 |
170 |
171 | 172 |

Study Hub

173 |

Static Study Website Created using Html and Css

174 |
175 |
176 | 177 |

Walk-InStyle

178 |

Online Shoe Static Website Created using Html and Css

179 |
180 |
181 | 182 |

To-Do-List

183 |

Dynamic Website Created using Html,Css And Js

184 |
185 |
186 | 187 |

Insta-Fashion

188 |

Dynamic Online Clothing Shopping Website Created using C# and Sql using .Net Framework

189 |
190 | 191 |
192 | 193 | 194 | 195 | 196 | 197 |
198 | 199 |

contact me

200 | 201 |
202 | 203 |
204 | 205 |

contact info

206 | 207 |
208 |

annapurnag2262@gmail.com

209 |

+9699287314

210 |

+9324716671

211 |

mumbai, india - 400104.

212 |
213 | 214 |
215 | 216 |
217 | 218 | 219 | 220 | 221 | 222 | 223 |
224 |
225 | 226 |
227 | 228 | 229 | 230 | 231 | 232 |
233 | 257 |
258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 279 | 280 | 281 | 282 | -------------------------------------------------------------------------------- /Landing Page/Stylesheets/UserMaster.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | outline: none; 7 | border: none; 8 | text-decoration: none; 9 | text-transform: capitalize; 10 | transition: .2s linear; 11 | } 12 | 13 | html { 14 | font-size: 50%; 15 | overflow-x: hidden; 16 | } 17 | 18 | section { 19 | padding: 2rem 9%; 20 | } 21 | 22 | .heading { 23 | text-align: center; 24 | font-size: 4rem; 25 | color: #333; 26 | padding: 1rem; 27 | margin: 2rem 0; 28 | background: rgba(255, 51, 153,.05); 29 | } 30 | 31 | .heading span { 32 | color: var(--pink); 33 | } 34 | 35 | 36 | header { 37 | position: fixed; 38 | top: 0; 39 | left: 0; 40 | right: 0; 41 | background: #fff; 42 | padding: 2rem 9%; 43 | display: flex; 44 | align-items: center; 45 | justify-content: space-between; 46 | z-index: 1000; 47 | box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); 48 | } 49 | 50 | header .logo { 51 | font-size: 3rem; 52 | color: #333; 53 | font-weight: bolder; 54 | } 55 | 56 | header .logo span { 57 | color: var(--pink); 58 | } 59 | 60 | header .navbar1 a { 61 | font-size: 2.5rem; 62 | padding: 0 1.7rem; 63 | color: #666; 64 | } 65 | 66 | header .navbar1 a:hover { 67 | color: var(--pink); 68 | } 69 | 70 | header .icon a { 71 | font-size: 2.5rem; 72 | color: #333; 73 | margin-left: 2rem; 74 | } 75 | 76 | header .icon a:hover { 77 | color: var(--pink); 78 | } 79 | 80 | header #toggler { 81 | display: none; 82 | } 83 | 84 | header .fa-bars { 85 | font-size: 3rem; 86 | color: #333; 87 | border-radius: .5rem; 88 | padding: .5rem 1.5rem; 89 | cursor: pointer; 90 | display: none; 91 | } 92 | 93 | /*Logout Button*/ 94 | .btnlogout { 95 | background: Black; 96 | border-radius: 6px; 97 | color: white; 98 | font-size: 16px; 99 | font-family: 'Merienda', cursive; 100 | display: inline; 101 | padding: 3px 10px; 102 | font-weight: bold; 103 | text-align: center; 104 | text-decoration: none; 105 | cursor: pointer; 106 | } 107 | 108 | .btnlogout:hover { 109 | background-color: lightcoral; 110 | color: #fff; 111 | } 112 | 113 | /*Contact Us Page*/ 114 | 115 | input[type=text], select, textarea { 116 | width: calc(100% - 24px); 117 | padding: 12px; 118 | border: 1px solid #ccc; 119 | border-radius: 4px; 120 | box-sizing: border-box; 121 | margin-top: 6px; 122 | margin-bottom: 16px; 123 | resize: vertical; 124 | } 125 | 126 | .coloumn-left, .coloumn-right { 127 | float: left; 128 | width: 50%; 129 | padding: 10px; 130 | box-sizing: border-box; /* Include padding and border in the element's total width and height */ 131 | } 132 | 133 | .row1:after { 134 | content: ""; 135 | display: table; 136 | clear: both; 137 | } 138 | .title { 139 | color: black; 140 | font-size: 5em; 141 | margin: 15px 20px; 142 | font-family: 'Merienda', cursive; 143 | max-height: 5em; 144 | font-weight: 600; 145 | text-align: center; 146 | } 147 | @media (max-width: 600px) { 148 | .title { 149 | font-size: 2em; 150 | max-height: 4em; 151 | font-weight: 600; 152 | } 153 | } 154 | .btnsubmit { 155 | background: Green; 156 | border-radius: 6px; 157 | color: white; 158 | font-size: 16px; 159 | font-family: 'Merienda', cursive; 160 | display: inline; 161 | padding: 8px 25px; 162 | font-weight: bold; 163 | text-align: center; 164 | text-decoration: none; 165 | cursor: pointer; 166 | } 167 | 168 | .btnsubmit:hover { 169 | background-color: lightgreen; 170 | color: #fff; 171 | } 172 | 173 | 174 | /*Icons*/ 175 | 176 | .icons-container { 177 | background: #eee; 178 | display: flex; 179 | flex-wrap: wrap; 180 | gap: 1.5rem; 181 | padding-top: 5rem; 182 | padding-bottom: 5rem; 183 | } 184 | 185 | .icons-container .icons { 186 | background: #fff; 187 | border: .1rem solid rgba(0,0,0,.1); 188 | padding: 2rem; 189 | display: flex; 190 | align-items: center; 191 | flex: 1 1 25rem; 192 | } 193 | 194 | .icons-container .icons img { 195 | height: 5rem; 196 | margin-right: 2rem; 197 | } 198 | 199 | .icons-container .icons h3 { 200 | color: #333; 201 | padding-bottom: .5rem; 202 | font-size: 1.5rem; 203 | } 204 | 205 | .icons-container .icons span { 206 | color: #555; 207 | font-size: 1.3rem; 208 | } 209 | 210 | .fa-shopping-cart { 211 | position: relative; 212 | } 213 | 214 | .cart-count { 215 | position: absolute; 216 | top: -10px; 217 | right: -10px; 218 | background-color: red; 219 | color: white; 220 | font-size: 12px; 221 | padding: 2px 5px; 222 | border-radius: 50%; 223 | } 224 | 225 | .navbar1 a { 226 | text-decoration: none; 227 | font-family: 'Merienda', cursive; 228 | } 229 | 230 | .text-banner-title { 231 | text-transform: uppercase; 232 | color: black; 233 | letter-spacing: 0.12em; 234 | font-size: 3em; 235 | margin: 50px 30px; 236 | max-height: 5em; 237 | font-weight: 600; 238 | text-align: center; 239 | } 240 | 241 | img { 242 | display: block; 243 | } 244 | /* img link container */ 245 | 246 | .img-link-container img { 247 | width: 100%; 248 | height: 95%; 249 | } 250 | 251 | .img-link-container { 252 | margin-left: 3.5%; 253 | margin-right: 3.5%; 254 | display: inline-flex; 255 | grid-template-columns: repeat(6, 15%); 256 | gap: 2%; 257 | row-gap: 0px; 258 | margin-bottom: 50px; 259 | } 260 | 261 | .img-link-container-2 img { 262 | width: 100%; 263 | } 264 | 265 | .img-link-container a { 266 | text-decoration: none; 267 | } 268 | .img-link-container a h1{ 269 | font-family: 'Merienda', cursive; 270 | margin-top: 5px; 271 | margin-bottom: 3px; 272 | text-align: center; 273 | color: black; 274 | } 275 | @media (max-width: 770px) { 276 | .img-link-container { 277 | display: flex; 278 | flex-wrap: wrap; 279 | justify-content: space-between; 280 | } 281 | 282 | .img-link-container a { 283 | width: calc(33.33% - 10px); 284 | margin-bottom: 20px; 285 | } 286 | } 287 | 288 | @media (max-width: 600px) { 289 | .text-banner-title { 290 | letter-spacing: 0.09em; 291 | font-size: 2em; 292 | max-height: 4em; 293 | font-weight: 600; 294 | } 295 | } 296 | 297 | /* Footer */ 298 | .footer { 299 | margin-top: 20px; 300 | } 301 | 302 | .footer .box-container { 303 | display: flex; 304 | flex-wrap: wrap; 305 | gap: 1.5rem; 306 | } 307 | 308 | .footer .box-container .box { 309 | flex: 1 1 25rem; 310 | } 311 | 312 | .footer .box-container .box h1 { 313 | color: #333; 314 | font-size: 2.7rem; 315 | padding: 1rem 0; 316 | font-family: 'Merienda', cursive; 317 | } 318 | 319 | .footer .box-container .box a { 320 | display: block; 321 | color: black; 322 | font-size: 2rem; 323 | padding: 1rem 0; 324 | text-decoration: none; 325 | font-family: 'Merienda', cursive; 326 | } 327 | 328 | .footer .box-container .box a:hover { 329 | color: var(--pink); 330 | text-decoration: underline; 331 | } 332 | 333 | .footer .box-container .box img { 334 | margin-top: 1rem; 335 | } 336 | 337 | .footer .credit { 338 | text-align: center; 339 | padding: 1.5rem; 340 | margin-top: 1.5rem; 341 | padding-top: 2.5rem; 342 | font-size: 2rem; 343 | color: #333; 344 | border-top: .1rem solid rgba(0,0,0,.1); 345 | padding-bottom: 3rem; 346 | } 347 | 348 | .footer .credit span { 349 | color: var(--pink); 350 | } 351 | 352 | 353 | /* media queries */ 354 | @media (max-width:991px) { 355 | 356 | html { 357 | font-size: 50%; 358 | } 359 | 360 | header { 361 | padding: 2rem; 362 | } 363 | 364 | section { 365 | padding: 2rem; 366 | } 367 | 368 | .home { 369 | background-position: left; 370 | } 371 | } 372 | 373 | @media (max-width:770px) { 374 | 375 | header .fa-bars { 376 | display: block; 377 | } 378 | 379 | header .navbar1 { 380 | position: absolute; 381 | top: 100%; 382 | left: 0; 383 | right: 0; 384 | background: #eee; 385 | border-top: .1rem solid rgba(0,0,0,.1); 386 | clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); 387 | } 388 | 389 | header #toggler:checked ~ .navbar1 { 390 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); 391 | } 392 | 393 | header .navbar1 a { 394 | padding: 2rem; 395 | background: #fff; 396 | border: .1rem solid rgba(0,0,0,.1); 397 | display: block; 398 | } 399 | 400 | .home .content h3 { 401 | font-size: 5rem; 402 | } 403 | 404 | .home .content span { 405 | font-size: 2.5rem; 406 | } 407 | 408 | .icons-container .icons h3 { 409 | font-size: 2rem; 410 | } 411 | 412 | .icons-container .icons span { 413 | font-size: 1.7rem; 414 | } 415 | } 416 | 417 | @media (max-width:450px) { 418 | 419 | html { 420 | font-size: 50%; 421 | } 422 | 423 | .heading { 424 | font-size: 3rem; 425 | } 426 | } 427 | 428 | @media (max-width:380px) { 429 | 430 | html { 431 | font-size: 45%; 432 | } 433 | 434 | .heading { 435 | font-size: 2.5rem; 436 | } 437 | } 438 | 439 | -------------------------------------------------------------------------------- /Portfolio/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600&display=swap'); 2 | 3 | :root{ 4 | --blue:#4379b7; 5 | } 6 | 7 | *{ 8 | font-family: 'Nunito', sans-serif; 9 | margin:0; padding:0; 10 | box-sizing: border-box; 11 | text-decoration: none; 12 | outline: none; border:none; 13 | text-transform: capitalize; 14 | transition: all .2s linear; 15 | } 16 | 17 | *::selection{ 18 | background:var(--blue); 19 | color:#333; 20 | } 21 | 22 | html{ 23 | font-size: 62.5%; 24 | overflow-x: hidden; 25 | } 26 | 27 | html::-webkit-scrollbar{ 28 | width:1.4rem; 29 | } 30 | 31 | html::-webkit-scrollbar-track{ 32 | background:#222; 33 | } 34 | 35 | html::-webkit-scrollbar-thumb{ 36 | background:var(--blue); 37 | } 38 | 39 | body{ 40 | background:#111; 41 | overflow-x: hidden; 42 | padding-left: 35rem; 43 | } 44 | 45 | section{ 46 | min-height: 100vh; 47 | padding:1rem; 48 | } 49 | 50 | .btn{ 51 | padding:.7rem 3rem; 52 | background:#333; 53 | color:#fff; 54 | cursor: pointer; 55 | margin-top: 1rem; 56 | font-size: 2rem; 57 | border-radius: 5rem; 58 | } 59 | 60 | .btn i{ 61 | padding:0 .5rem; 62 | font-size: 1.8rem; 63 | } 64 | 65 | .btn:hover{ 66 | background:var(--blue); 67 | } 68 | 69 | .heading{ 70 | text-align: center; 71 | margin:0 6rem; 72 | font-size: 4rem; 73 | padding:1rem; 74 | border-bottom: .1rem solid #fff4; 75 | color:#fff; 76 | } 77 | 78 | .heading span{ 79 | color:var(--blue); 80 | } 81 | 82 | header{ 83 | position: fixed; 84 | top:0; left:0; 85 | z-index: 1000; 86 | height:100%; 87 | width:35rem; 88 | background:#1a1a1a; 89 | display: flex; 90 | align-items: center; 91 | justify-content: center; 92 | flex-flow: column; 93 | text-align: center; 94 | } 95 | 96 | header .user img{ 97 | height:17rem; 98 | width:17rem; 99 | border-radius: 50%; 100 | object-fit: cover; 101 | margin-bottom: 1rem; 102 | border:.7rem solid var(--blue); 103 | } 104 | 105 | header .user .name{ 106 | font-size: 3.5rem; 107 | color:#fff; 108 | } 109 | 110 | header .user .post{ 111 | font-size: 2rem; 112 | color:#eee; 113 | } 114 | 115 | header .navbar{ 116 | width:100%; 117 | } 118 | 119 | header .navbar ul{ 120 | list-style: none; 121 | padding:1rem 3rem; 122 | } 123 | 124 | 125 | header .navbar ul li a{ 126 | display: block; 127 | padding:1rem; 128 | margin:1.5rem 0; 129 | background:#333; 130 | color:#fff; 131 | font-size: 2rem; 132 | border-radius: 5rem; 133 | } 134 | 135 | header .navbar ul li a:hover{ 136 | background:var(--blue); 137 | } 138 | 139 | #menu{ 140 | position: fixed; 141 | top:2rem; right:2rem; 142 | background:#333; 143 | color:#fff; 144 | cursor: pointer; 145 | font-size: 2.5rem; 146 | padding:1rem 1.5rem; 147 | z-index: 1000; 148 | display: none; 149 | } 150 | 151 | .home{ 152 | display: flex; 153 | justify-content: center; 154 | flex-flow: column; 155 | padding:0 15rem; 156 | } 157 | 158 | .home h3{ 159 | font-size: 2.5rem; 160 | color:#fff; 161 | } 162 | 163 | .home h1{ 164 | font-size:5rem; 165 | color:#fff; 166 | } 167 | 168 | .home h1 span{ 169 | color:var(--blue); 170 | } 171 | 172 | .home p{ 173 | font-size:2rem; 174 | color:#eee; 175 | padding: 1rem 0; 176 | } 177 | 178 | .about .row{ 179 | display: flex; 180 | align-items: center; 181 | justify-content: center; 182 | flex-wrap: wrap; 183 | padding:1rem 0; 184 | } 185 | 186 | .about .row .info{ 187 | flex:1 1 48rem; 188 | padding:2rem 1rem; 189 | padding-left: 6rem; 190 | } 191 | 192 | .about .row .info h3{ 193 | font-size: 2rem; 194 | color:var(--blue); 195 | padding:1rem 0; 196 | font-weight: normal; 197 | } 198 | 199 | .about .row .info h3 span{ 200 | color:#eee; 201 | padding:0 .5rem; 202 | } 203 | 204 | .about .row .counter{ 205 | flex:1 1 48rem; 206 | display: flex; 207 | justify-content: center; 208 | flex-wrap: wrap; 209 | } 210 | 211 | .about .row .counter .box{ 212 | width:20rem; 213 | background:#222; 214 | text-align: center; 215 | padding: 2rem; 216 | margin:2rem; 217 | } 218 | 219 | .about .row .counter .box span{ 220 | font-size: 4rem; 221 | color:var(--blue); 222 | } 223 | 224 | .about .row .counter .box h3{ 225 | font-size: 2rem; 226 | color:#fff; 227 | } 228 | 229 | .education .box-container{ 230 | display: flex; 231 | align-items: center; 232 | justify-content: space-between; 233 | flex-wrap: wrap; 234 | padding:1rem 0; 235 | padding-left: 3rem; 236 | } 237 | 238 | .education .box-container .box{ 239 | width:27rem; 240 | margin:4rem 1rem; 241 | padding-left: 4rem; 242 | border-left: .2rem solid #fff; 243 | position: relative; 244 | } 245 | 246 | .education .box-container .box span{ 247 | font-size: 1.3rem; 248 | background:#222; 249 | color:#fff; 250 | border-radius: 5rem; 251 | padding:.5rem 2.5rem; 252 | } 253 | 254 | .education .box-container .box h3{ 255 | font-size: 2rem; 256 | color:#fff; 257 | padding-top: 1.5rem; 258 | } 259 | 260 | .education .box-container .box p{ 261 | font-size: 1.4rem; 262 | color:#eee; 263 | padding: 1rem 0; 264 | } 265 | 266 | .education .box-container .box i{ 267 | position: absolute; 268 | top:-1.5rem; left:-2.5rem; 269 | height:5rem; 270 | width: 5rem; 271 | border-radius: 50%; 272 | line-height: 5rem; 273 | text-align: center; 274 | font-size: 2rem; 275 | color:#fff; 276 | background:var(--blue); 277 | } 278 | 279 | .portfolio .box-container{ 280 | display: flex; 281 | align-items: center; 282 | justify-content: center; 283 | flex-wrap: wrap; 284 | padding:2rem 0; 285 | } 286 | 287 | .portfolio .box-container .box{ 288 | height: 15rem; 289 | width: 15rem; 290 | border-radius: 1rem; 291 | margin:2rem; 292 | overflow: hidden; 293 | cursor: pointer; 294 | } 295 | 296 | .portfolio .box-container .box img{ 297 | height:100%; 298 | width:100%; 299 | object-fit: cover; 300 | } 301 | 302 | .portfolio .box-container .box:hover img{ 303 | transform: scale(0.9); 304 | } 305 | 306 | .contact .row{ 307 | display: flex; 308 | align-items: center; 309 | justify-content: center; 310 | flex-wrap: wrap; 311 | } 312 | 313 | 314 | .contact .row .content{ 315 | flex:1 1 30rem; 316 | padding:4rem; 317 | padding-bottom: 0; 318 | } 319 | 320 | .contact .row form{ 321 | flex:1 1 45rem; 322 | padding:2rem; 323 | margin:2rem; 324 | margin-bottom: 4rem; 325 | } 326 | 327 | .contact .row form .box{ 328 | padding:1.5rem; 329 | margin:1rem 0; 330 | background:#3333; 331 | color:#fff; 332 | text-transform: none; 333 | font-size: 1.7rem; 334 | width:100%; 335 | } 336 | 337 | .contact .row form .box::placeholder{ 338 | text-transform: capitalize; 339 | } 340 | 341 | .contact .row form .message{ 342 | height: 15rem; 343 | resize: none; 344 | } 345 | 346 | .contact .row .content .title{ 347 | text-transform: uppercase; 348 | color:#fff; 349 | font-size: 3rem; 350 | padding-bottom: 2rem; 351 | } 352 | 353 | .contact .row .content .info h3{ 354 | display: flex; 355 | align-items: center; 356 | font-size: 2rem; 357 | color:#eee; 358 | padding:1rem 0; 359 | font-weight: normal; 360 | } 361 | 362 | .contact .row .content .info h3 i{ 363 | padding-right: 1rem; 364 | color:var(--blue); 365 | 366 | } 367 | 368 | .top{ 369 | position: fixed; 370 | bottom:7.5rem; right: 2rem; 371 | z-index: 100; 372 | display: none; 373 | } 374 | .map{ 375 | position: relative; 376 | top: 3rem; 377 | right: 2rem; 378 | padding: 1rem; 379 | /* display: flex; */ 380 | } 381 | 382 | .education{ 383 | min-height: auto; 384 | } 385 | 386 | /* Footer */ 387 | .footer { 388 | margin-top: 20px; 389 | } 390 | 391 | .footer .box-container { 392 | display: flex; 393 | flex-wrap: wrap; 394 | gap: 1.5rem; 395 | border-top: .1rem solid #fff; 396 | } 397 | 398 | .footer .box-container .box { 399 | flex: 1 1 25rem; 400 | } 401 | 402 | .footer .box-container .box h1 { 403 | color: #4379b7; 404 | font-size: 2.7rem; 405 | padding: 1rem 0; 406 | } 407 | 408 | .footer .box-container .box a { 409 | display: block; 410 | color: rgb(255, 255, 255); 411 | font-size: 2rem; 412 | padding: 1rem 0; 413 | text-decoration: none; 414 | } 415 | 416 | .footer .box-container .box a:hover { 417 | color: var(--blue); 418 | } 419 | 420 | .footer .box-container .box img { 421 | margin-top: 1rem; 422 | } 423 | 424 | .footer .credit { 425 | text-align: center; 426 | padding: 1.5rem; 427 | margin-top: 1.5rem; 428 | padding-top: 2.5rem; 429 | font-size: 2rem; 430 | color: #fff; 431 | border-top: .1rem solid #fff; 432 | padding-bottom: 3rem; 433 | } 434 | 435 | .footer .credit span { 436 | color: var(--blue); 437 | } 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | /* media queries */ 457 | 458 | @media (max-width:1200px){ 459 | 460 | html{ 461 | font-size: 55%; 462 | } 463 | 464 | .home{ 465 | padding:1rem 4rem; 466 | } 467 | 468 | } 469 | 470 | @media (max-width:991px){ 471 | 472 | header{ 473 | left:-120%; 474 | } 475 | 476 | #menu{ 477 | display: block; 478 | } 479 | 480 | header.toggle{ 481 | left:0%; 482 | } 483 | 484 | body{ 485 | padding:0; 486 | } 487 | 488 | } 489 | 490 | @media (max-width:768px){ 491 | 492 | html{ 493 | font-size: 50%; 494 | } 495 | 496 | } 497 | 498 | @media (max-width:400px){ 499 | 500 | header{ 501 | width: 100vw; 502 | } 503 | 504 | .heading{ 505 | margin:0 3rem; 506 | } 507 | 508 | .about .row .counter .box{ 509 | width: 100%; 510 | } 511 | 512 | .education .box-container .box{ 513 | width:100%; 514 | } 515 | 516 | .portfolio .box-container .box{ 517 | width:30%; 518 | height: auto; 519 | } 520 | 521 | .contact .row form{ 522 | margin:3rem 0; 523 | } 524 | 525 | } -------------------------------------------------------------------------------- /Landing Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Walk-In-Style 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | 22 | 23 | 24 | 26 | 27 | 35 | 36 |
37 | 38 | 39 | 40 | 0 41 | 42 | 43 |
44 | 45 | 46 |
47 |
48 |
49 |
50 |
51 | 52 | 53 | 54 |
55 | 56 | 95 | 96 | 97 | 98 | 99 |
100 |

CATEGORIES TO BAG

101 |
102 | 103 | 129 | 130 | 131 | 132 | 133 |
134 |

Explore The Top Collections

135 |
136 | 137 | 157 | 158 | 159 |
160 |
161 | 162 |
163 |

Free Delivery

164 |

On All Orders Above 499

165 |
166 |
167 |
168 | 169 |
170 |

30 days Return

171 |

Moneyback Guarantee

172 |
173 |
174 |
175 | 176 |
177 |

Offers and Gifts

178 |

On All Orders

179 |
180 |
181 |
182 | 183 |
184 |

Secure Payment

185 |

Protected by PayPal

186 |
187 |
188 |
189 | 190 | 191 | 192 | 193 |
194 |

Contact Us

195 |
196 |
197 |
198 | Contact Us 199 |
200 |
201 |
202 | 203 | 204 | 205 | 206 | 207 |
208 |
209 |
210 |
211 | 212 | 213 | 214 | 215 | 216 | 217 |
218 |
219 | 253 |
254 | 255 |
256 | 257 | 258 | --------------------------------------------------------------------------------