├── 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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="Cal.css">
 8 |     <title>Calculator</title>
 9 | </head>
10 | 
11 | <body>
12 |     <div class="calculator">
13 |         <div class="display" id="display">0</div>
14 |         <div class="buttons">
15 |             <button class="operator" id="add">+</button>
16 |             <button class="operator" id="subtract">-</button>
17 |             <button class="operator" id="multiply">*</button>
18 |             <button class="operator" id="divide">/</button>
19 |             <button class="number" id="seven">7</button>
20 |             <button class="number" id="eight">8</button>
21 |             <button class="number" id="nine">9</button>
22 |             <button class="number" id="four">4</button>
23 |             <button class="number" id="five">5</button>
24 |             <button class="number" id="six">6</button>
25 |             <button class="number" id="one">1</button>
26 |             <button class="number" id="two">2</button>
27 |             <button class="number" id="three">3</button>
28 |             <button class="number" id="zero">0</button>
29 |             <button class="clear" id="clear">C</button>
30 |             <button class="calculate" id="calculate">=</button>  
31 |         </div>
32 |     </div>
33 |     <script src="CalJs.js"></script>
34 | </body>
35 | 
36 | </html>
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 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>portfolio</title>
  7 |     <link rel="shortcut icon" href="/images/p logo.jpg" type="image/x-icon">
  8 | 
  9 |     <!-- font awesome cdn link  -->
 10 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
 11 | 
 12 |     <!-- custom css file link  -->
 13 |     <link rel="stylesheet" href="style.css">
 14 | 
 15 | </head>
 16 | <body>
 17 |     
 18 | <!-- header section starts  -->
 19 | 
 20 | <header>
 21 | 
 22 |     <div class="user">
 23 |         <img src="images/prasad.jpg" alt="">
 24 |         <h3 class="name">Annapurna Gupta</h3>
 25 |         <p class="post">web developer</p>
 26 |     </div>
 27 | 
 28 |     <nav class="navbar">
 29 |         <ul>
 30 |             <li><a href="#home">home</a></li>
 31 |             <li><a href="#about">about</a></li>
 32 |             <li><a href="#education">qualification</a></li>
 33 |             <li><a href="#skills">skills</a></li>
 34 |             <li><a href="#projects">projects</a></li>
 35 |             <li><a href="#contact">contact</a></li>
 36 |         </ul>
 37 |     </nav>
 38 | 
 39 | </header>
 40 | 
 41 | <!-- header section ends -->
 42 | 
 43 | <div id="menu" class="fas fa-bars"></div>
 44 | 
 45 | <!-- home section starts  -->
 46 | 
 47 | <section class="home" id="home">
 48 | 
 49 |     <h3>HI THERE !</h3>
 50 |     <h1>I'M <span>Annapurna Gupta</span></h1>
 51 |     <p>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 |     </p>
 58 |     <a href="MyResume.pdf"><button class="btn">Download CV<i class="fas fa-download"></i></button></a>
 59 | 
 60 | </section>
 61 | 
 62 | <!-- home section ends -->
 63 | 
 64 | <!-- about section starts  -->
 65 | 
 66 | <section class="about" id="about">
 67 | 
 68 | <h1 class="heading"> <span>about</span> me </h1>
 69 | 
 70 | <div class="row">
 71 | 
 72 |     <div class="info">
 73 |         <h3> <span> name : </span> Annapurna Gupta</h3>
 74 |         <h3> <span> age : </span> 21 </h3>
 75 |         <h3> <span> qualification : </span> Bsc.IT </h3>
 76 |         <h3 style="text-transform: none;"> <span> email : </span> annapurnag2262@gmail.com</h3>
 77 |         <h3> <span> post : </span> Web developer </h3>
 78 |         <h3> <span> language : </span> hindi, English, marathi</h3>
 79 |         <a href="MyResume.pdf"><button class="btn"> download CV <i class="fas fa-download"></i> </button></a>
 80 |     </div>
 81 | </div>
 82 | 
 83 | </section>
 84 | 
 85 | <!-- about section ends -->
 86 | 
 87 | <!-- education section starts  -->
 88 | 
 89 | <section class="education" id="education">
 90 | 
 91 | <h1 class="heading"> my <span>education</span> </h1>
 92 | 
 93 | <div class="box-container">
 94 | 
 95 |     <div class="box">
 96 |         <i class="fas fa-graduation-cap"></i>
 97 |         <span>2023-2025</span>
 98 |         <h3>Currently pursuing MCA</h3>
 99 |         <p>Thakur Institue of Management Studies Career Development and Research, Kandiwali</p>
100 |     </div>
101 | 
102 |     <div class="box">
103 |         <i class="fas fa-graduation-cap"></i>
104 |         <span>2020-2023</span>
105 |         <h3>B.SC IT</h3>
106 |         <p>Smt.Chandibai Himathmal Mansukhani College, Ulhasnagar<br> CGPA : 9.30</p>
107 |     </div>
108 | 
109 |     <div class="box">
110 |         <i class="fas fa-graduation-cap"></i>
111 |         <span>2019-2020</span>
112 |         <h3>HSC</h3>
113 |         <p>New English High School And Jr. College, Ulhasnagar<br> percentage : 69.69%</p>
114 |     </div>
115 | 
116 |     <div class="box">
117 |         <i class="fas fa-graduation-cap"></i>
118 |         <span>2017-2018</span>
119 |         <h3>SSC</h3>
120 |         <p>R.C.Patel.High School, Borivali<br> percentage : 86%</p>
121 |     </div>
122 | </div>
123 | 
124 | </section>
125 | <!-- skills  -->
126 | 
127 | <section class="portfolio" id="skills">
128 | 
129 |     <h1 class="heading"> my <span>skills</span> </h1>
130 |     <h1>Technical Skills</h1>
131 |     <div class="box-container">
132 |     
133 |         <div class="box">
134 |             <img src="images/html.webp" alt="">
135 |         </div>
136 |     
137 |         <div class="box">
138 |             <img src="images/css.png" alt="">
139 |         </div>
140 |     
141 |         <div class="box box1">
142 |             <img src="images/js.png" alt="">
143 |         </div>
144 |     
145 |         <div class="box">
146 |             <img src="images/java.png" alt="">
147 |         </div>
148 |         
149 |         <div class="box">
150 |             <img src="images/cSharp.jpg" alt="">
151 |         </div>
152 |     
153 |         <div class="box">
154 |             <img src="images/dotNet.png" alt="">
155 |         </div>
156 |     
157 |         <div class="box">
158 |             <img src="images/sql.png" alt="">
159 |         </div>
160 |     </div>
161 |     <h1>Soft Skills</h1>
162 |     </section>
163 | 
164 | <!-- project start  -->
165 | <section class="education" id="projects">
166 | 
167 |     <h1 class="heading"> my <span>project</span> </h1>
168 |     
169 |     <div class="box-container">
170 |         <div class="box">
171 |             <img src="images/Studyhub.jpg" alt="" style="height: 200px; width: 200px;">
172 |             <h3>Study Hub</h3>
173 |             <p>Static Study Website Created using Html and Css</p>
174 |         </div>
175 |         <div class="box">
176 |             <img src="images/Walk-In-Style.png" alt="" style="height: 200px; width: 200px;">
177 |             <h3>Walk-InStyle</h3>
178 |             <p>Online Shoe Static Website Created using Html and Css</p>
179 |         </div>
180 |         <div class="box">
181 |             <img src="images/To-DO-List.png" alt="" style="height: 200px; width: 200px;">
182 |             <h3>To-Do-List</h3>
183 |             <p>Dynamic Website Created using Html,Css And Js</p>
184 |         </div>
185 |         <div class="box">
186 |             <img src="images/Insta-Fashion.png" alt="" style="height: 200px; width: 200px;">
187 |             <h3>Insta-Fashion</h3>
188 |             <p>Dynamic Online Clothing Shopping Website Created using C# and Sql using .Net Framework</p>
189 |         </div>
190 |         
191 | </section>
192 | <!-- project  end -->
193 | 
194 | 
195 | <!-- contact section starts  -->
196 | 
197 | <section class="contact" id="contact">
198 | 
199 | <h1 class="heading"> <span>contact</span> me </h1>
200 | 
201 | <div class="row">
202 | 
203 |     <div class="content">
204 | 
205 |         <h3 class="title">contact info</h3>
206 | 
207 |         <div class="info">
208 |             <h3 style="text-transform: none;"> <i class="fas fa-envelope"></i> annapurnag2262@gmail.com </h3>
209 |             <h3> <i class="fas fa-phone"></i> +9699287314 </h3>
210 |             <h3> <i class="fas fa-phone"></i> +9324716671 </h3>
211 |             <h3> <i class="fas fa-map-marker-alt"></i> mumbai, india - 400104. </h3>
212 |         </div>
213 | 
214 |     </div>
215 | 
216 |     <form action="">
217 | 
218 |         <input type="text" placeholder="name" class="box" id="name">
219 |         <input type="email" placeholder="email" class="box"  id="email">
220 |         <input type="number" placeholder="number" class="box" id="number">
221 |         <textarea name=""  cols="30" rows="10" class="box message" placeholder="message" id="message"></textarea>
222 |         <input type="submit" class="btn" onclick="getenquiry()"> 
223 |     </form>
224 | </div>
225 | 
226 | </section>
227 | 
228 | 
229 | <!-- contact section ends -->
230 | 
231 | <!-- footer section starts -->
232 | <div>
233 |     <section class="footer">
234 |         <div class="box-container">
235 |             <div class="box">
236 |                 <h1>quick links</h1>
237 |                 <a href="#home">home</a>
238 |                 <a href="#about">About Me</a>
239 |                 <a href="#skills">Skills</a>
240 |             </div>
241 |             <div class="box">
242 |                 <h1>User links</h1>
243 |                 <a href="#education">Qualification</a>
244 |                 <a href="#projects">Projects</a>
245 |                 <a href="#contact">Contact</a>
246 |             </div>
247 |             <div class="box">
248 |                 <h1>Contact Info</h1>
249 |                 <a>9699287314</a>
250 |                 <a href="mailto:annapurnag2262@gmail.com">annapurnag2262@gmail.com</a>
251 |                 <a>Mumbai, India - 421501</a>
252 |             </div>
253 |         </div>
254 |         <div class="credit"><span>Annapurna Gupta </span>| © 2023 Copyright all rights reserved
255 |         </div>
256 |     </section>
257 | </div>
258 | <!-- footer section ends -->
259 | 
260 | <!-- jquery cdn link  -->
261 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
262 | 
263 | <!-- custom js file link  -->
264 | <script src="script.js"></script>
265 | <script>
266 |     function getenquiry() {
267 |         var name=document.getElementById("name").value;
268 |         var email=document.getElementById("email").value;
269 |         var number=document.getElementById("number").value;
270 |         var message=document.getElementById("message").value;
271 |         var url = "https://wa.me/918767614273?text=" 
272 |                     + "Name: "+ name +"%0a"
273 |                     + "Phone: "+ email +"%0a"
274 |                     + "Email: "+ number  +"%0a"
275 |                     +"message:"+ message +"%0a";
276 |         window.open(url,'_blank').focus();
277 |     }
278 | </script>
279 | 
280 | 
281 | </body>
282 | </html>


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <title>Walk-In-Style</title>
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |     <meta http-equiv="X-UA-Compatible" content="IE-edge">
  9 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
 10 |     <link href="https://fonts.googleapis.com/css2?family=Merienda:wght@700&family=Satisfy&display=swap"
 11 |         rel="stylesheet">
 12 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
 13 |     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
 14 |     <link href="StyleSheets/UserMaster.css" type="text/css" rel="stylesheet" />
 15 | </head>
 16 | 
 17 | <body>
 18 |     <div>
 19 |         <!-- header section starts -->
 20 |         <header>
 21 |             <input type="checkbox" name="" id="toggler">
 22 |             <label for="toggler" class="fas fa-bars"></label>
 23 | 
 24 |             <a style="text-decoration: none; font-family: 'Merienda', cursive" href="#"
 25 |                 class="logo">Walk-In-Style<span></span></a>
 26 | 
 27 |             <nav class="navbar1">
 28 |                 <a href="#">Home</a>
 29 |                 <a href="#">New</a>
 30 |                 <a href="#">Men</a>
 31 |                 <a href="#">Women</a>
 32 |                 <a href="#">Kids</a>
 33 |                 <a href="#">Contact</a>
 34 |             </nav>
 35 | 
 36 |             <div class="icon">
 37 |                 <a href="#" style="text-decoration: none" class="fas fa-search"></a>
 38 |                 <a href="#" style="text-decoration: none" class="fas fa-heart"></a>
 39 |                 <a href="#" style="text-decoration: none" class="fas fa-shopping-cart">
 40 |                     <span class="cart-count" id="CartBadge">0</span></a>
 41 |                 <a href="#" style="text-decoration: none" class="fas fa-user"></a>
 42 |                 <a style="text-decoration: none"><button class="btnlogout">Logout</button></a>
 43 |             </div>
 44 | 
 45 | 
 46 |         </header>
 47 |         <br />
 48 |         <br />
 49 |         <br />
 50 |         <br />
 51 |         <!-- header section ends -->
 52 | 
 53 |         <body>
 54 |             <br />
 55 |             <!-- Carousel Start -->
 56 |             <div id="carousel" class="carousel slide" data-bs-ride="carousel">
 57 |                 <div class="carousel-indicators">
 58 |                     <button type="button" data-bs-target="#carousel" data-bs-slide-to="0" class="active"
 59 |                         aria-current="true" aria-label="Slide 1"></button>
 60 |                     <button type="button" data-bs-target="#carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
 61 |                     <button type="button" data-bs-target="#carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
 62 |                     <button type="button" data-bs-target="#carousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
 63 |                 </div>
 64 |                 <div class="carousel-inner">
 65 |                     <div class="carousel-item active">
 66 |                         <a href=#">
 67 |                             <img src="imgs/Corosel1.webp" class="d-block w-100" alt="...">
 68 |                         </a>
 69 |                     </div>
 70 |                     <div class="carousel-item">
 71 |                         <a href="#">
 72 |                             <img src="imgs/Corosel2.png" class="d-block w-100" alt="...">
 73 |                         </a>
 74 |                     </div>
 75 |                     <div class="carousel-item">
 76 |                         <a href="#">
 77 |                             <img src="imgs/Corosel3.png" class="d-block w-100" alt="...">
 78 |                         </a>
 79 |                     </div>
 80 |                     <div class="carousel-item">
 81 |                         <a href="#">
 82 |                             <img src="imgs/Corosel4.jpg" class="d-block w-100" alt="...">
 83 |                         </a>
 84 |                     </div>
 85 |                 </div>
 86 |                 <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
 87 |                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 88 |                     <span class="visually-hidden">Previous</span>
 89 |                 </button>
 90 |                 <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
 91 |                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
 92 |                     <span class="visually-hidden">Next</span>
 93 |                 </button>
 94 |             </div>
 95 | 
 96 |             <!-- Carousel End -->
 97 | 
 98 |             <!-- Categories to Bag -->
 99 |             <div class="text-banner-container">
100 |                 <h1 class="text-banner-title">CATEGORIES TO BAG</h1>
101 |             </div>
102 | 
103 |             <div class="img-link-container">
104 |                 <a href="#">
105 |                     <img src="imgs/Formals.webp" /><h1>Formals</h1>
106 |                 </a>
107 |                 <a href="#">
108 |                     <img src="imgs/Heels.webp" /><h1>Heels</h1>
109 |                 </a>
110 |                 <a href="#">
111 |                     <img src="imgs/Sports.jpg" /><h1>Sports</h1>
112 |                 </a>
113 |                 <a href="#">
114 |                     <img src="imgs/Loafers.webp" /><h1>Loafers</h1>
115 |                 </a>
116 |                 <a href="#">
117 |                     <img src="imgs/Flipflops.webp" /><h1>Flip Flops</h1>
118 |                 </a>
119 |                 <a href="#">
120 |                     <img src="imgs/Boots.webp" /><h1>Boots</h1>
121 |                 </a>
122 |                 <a href="#">
123 |                     <img src="imgs/CasualSneakers.webp" /><h1>Casual Shoes</h1>
124 |                 </a>
125 |                 <a href="#">
126 |                     <img src="imgs/ToeFloats.webp" /><h1>Toe Floats</h1>
127 |                 </a>
128 |             </div>
129 | 
130 |             <!-- Categories -->
131 | 
132 |             <!-- Explore Top Brands -->
133 |             <div class="text-banner-container">
134 |                 <h1 class="text-banner-title">Explore The Top Collections</h1>
135 |             </div>
136 | 
137 |             <div class="img-link-container">
138 |                 <a href="#">
139 |                     <img src="imgs/Mens1.png" /><h1>Mens</h1>
140 |                 </a>
141 |                 <a href="#">
142 |                     <img src="imgs/Womens1.png" /><h1>Womens</h1>
143 |                 </a>
144 |                 <a href="#">
145 |                     <img src="imgs/Kids1.png" /><h1>Kids</h1>
146 |                 </a>
147 |                 <a href="#">
148 |                     <img src="imgs/Mens2.png" /><h1>Mens</h1>
149 |                 </a>
150 |                 <a href="#">
151 |                     <img src="imgs/Womens2.png" /><h1>Womens</h1>
152 |                 </a>
153 |                 <a href="#">
154 |                     <img src="imgs/Kids2.png" /><h1>Kids</h1>
155 |                 </a>
156 |             </div>
157 | 
158 |             <!-- Icons section starts  -->
159 |             <section class="icons-container">
160 |                 <div class="icons">
161 |                     <img src="imgs/icon-1.png" alt="">
162 |                     <div class="info">
163 |                         <h1><b>Free Delivery</b></h1>
164 |                         <h3><span><b>On All Orders Above 499</b></span></h3>
165 |                     </div>
166 |                 </div>
167 |                 <div class="icons">
168 |                     <img src="imgs/icon-2.png" alt="">
169 |                     <div class="info">
170 |                         <h1><b>30 days Return</b></h1>
171 |                         <h3><span><b>Moneyback Guarantee</b></span></h3>
172 |                     </div>
173 |                 </div>
174 |                 <div class="icons">
175 |                     <img src="imgs/icon-3.png" alt="">
176 |                     <div class="info">
177 |                         <h1><b>Offers and Gifts</b></h1>
178 |                         <h3><span><b>On All Orders</b></span></h3>
179 |                     </div>
180 |                 </div>
181 |                 <div class="icons">
182 |                     <img src="imgs/icon-4.png" alt="">
183 |                     <div class="info">
184 |                         <h1><b>Secure Payment</b></h1>
185 |                         <h3><span><b>Protected by PayPal</b></span></h3>
186 |                     </div>
187 |                 </div>
188 |             </section>
189 |             <!-- Icons section ends -->
190 | 
191 |             <!-- contact section starts  -->
192 | 
193 |             <section class="contact" >
194 |                 <h1 style=" text-align: center; font-size: 30px; font-family: 'Merienda', cursive">Contact Us</h1>
195 |                 <br>
196 |                 <div class="row1">
197 |                     <div class="coloumn-left">
198 |                         <img src="imgs/ContactUs.png" alt="Contact Us">
199 |                     </div>
200 |                     <div class="coloumn-right">
201 |                         <form action="">
202 |                             <input type="text" placeholder="Name" style="font-size: medium; font-family: 'Merienda', cursive">
203 |                             <input type="text" placeholder="Email" style="font-size: medium; font-family: 'Merienda', cursive">
204 |                             <input type="text" placeholder="Phone" style="font-size: medium; font-family: 'Merienda', cursive">
205 |                             <textarea class="box" placeholder="Message" cols="30" rows="8" style="font-size: medium; font-family: 'Merienda', cursive"></textarea>
206 |                             <input type="submit" value="Send Message" class="btnsubmit">
207 |                         </form>
208 |                     </div>
209 |                 </div>
210 |             </section>
211 |             
212 | 
213 | 
214 |             <!-- contact section ends -->
215 | 
216 |             <!-- footer section starts -->
217 |             <hr>
218 |             <div>
219 |                 <section class="footer">
220 |                     <div class="box-container">
221 |                         <div class="box">
222 |                             <h1>quick links</h1>
223 |                             <a href="#">home</a>
224 |                             <a href="#">men</a>
225 |                             <a href="#">women</a>
226 |                             <a href="#">kids</a>
227 |                         </div>
228 |                         <div class="box">
229 |                             <h1>User links</h1>
230 |                             <a href="#">my account</a>
231 |                             <a href="#">my order</a>
232 |                             <a href="#">my wishlist</a>
233 |                             <a href="#">kids</a>
234 |                         </div>
235 |                         <div class="box">
236 |                             <h1>locations</h1>
237 |                             <a>Mumbai</a>
238 |                             <a>Thane</a>
239 |                             <a>Surat</a>
240 |                             <a>Pune</a>
241 |                         </div>
242 |                         <div class="box">
243 |                             <h1>Contact Info</h1>
244 |                             <a>9699287314</a>
245 |                             <a>walkinstyle@gmail.com</a>
246 |                             <a>Mumbai, India - 400092</a>
247 |                             <img src="imgs/payment.png" />
248 |                         </div>
249 |                     </div>
250 |                     <div class="credit">created by <span>Annapurna Gupta </span>| © 2023 Copyright all rights reserved
251 |                     </div>
252 |                 </section>
253 |             </div>
254 |             <!-- footer section ends -->
255 |     </div>
256 | </body>
257 | 
258 | </html>


--------------------------------------------------------------------------------