├── zerociti (3).png
├── 6128ffaee3a15c00041a8e41.png
├── README.md
├── script.js
├── index.html
└── style.css


/zerociti (3).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amanjaiman1/port-base/HEAD/zerociti (3).png


--------------------------------------------------------------------------------
/6128ffaee3a15c00041a8e41.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amanjaiman1/port-base/HEAD/6128ffaee3a15c00041a8e41.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Personal
2 | 
3 | https://amanjaiman.me
4 | 
5 | hii this is the second branch of my github profile.
6 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
  1 | window.addEventListener("DOMContentLoaded",() => {
  2 | 	const clock = new BouncyBlockClock(".clock");
  3 | });
  4 | 
  5 | class BouncyBlockClock {
  6 | 	constructor(qs) {
  7 | 		this.el = document.querySelector(qs);
  8 | 		this.time = { a: [], b: [] };
  9 | 		this.rollClass = "clock__block--bounce";
 10 | 		this.digitsTimeout = null;
 11 | 		this.rollTimeout = null;
 12 | 		this.mod = 0 * 60 * 1000;
 13 | 
 14 | 		this.loop();
 15 | 	}
 16 | 	animateDigits() {
 17 | 		const groups = this.el.querySelectorAll("[data-time-group]");
 18 | 
 19 | 		Array.from(groups).forEach((group,i) => {
 20 | 			const { a, b } = this.time;
 21 | 
 22 | 			if (a[i] !== b[i]) group.classList.add(this.rollClass);
 23 | 		});
 24 | 
 25 | 		clearTimeout(this.rollTimeout);
 26 | 		this.rollTimeout = setTimeout(this.removeAnimations.bind(this),900);
 27 | 	}
 28 | 	displayTime() {
 29 | 		// screen reader time
 30 | 		const timeDigits = [...this.time.b];
 31 | 		const ap = timeDigits.pop();
 32 | 
 33 | 		this.el.ariaLabel = `${timeDigits.join(":")} ${ap}`;
 34 | 
 35 | 		// displayed time
 36 | 		Object.keys(this.time).forEach(letter => {
 37 | 			const letterEls = this.el.querySelectorAll(`[data-time="${letter}"]`);
 38 | 
 39 | 			Array.from(letterEls).forEach((el,i) => {
 40 | 				el.textContent = this.time[letter][i];
 41 | 			});
 42 | 		});
 43 | 	}
 44 | 	loop() {
 45 | 		this.updateTime();
 46 | 		this.displayTime();
 47 | 		this.animateDigits();
 48 | 		this.tick();
 49 | 	}
 50 | 	removeAnimations() {
 51 | 		const groups = this.el.querySelectorAll("[data-time-group]");
 52 | 
 53 | 		Array.from(groups).forEach(group => {
 54 | 			group.classList.remove(this.rollClass);
 55 | 		});
 56 | 	}
 57 | 	tick() {
 58 | 		clearTimeout(this.digitsTimeout);
 59 | 		this.digitsTimeout = setTimeout(this.loop.bind(this),1e3);
 60 | 	}
 61 | 	updateTime() {
 62 | 		const rawDate = new Date();
 63 | 		const date = new Date(Math.ceil(rawDate.getTime() / 1e3) * 1e3 + this.mod);
 64 | 		let h = date.getHours();
 65 | 		const m = date.getMinutes();
 66 | 		const s = date.getSeconds();
 67 | 		const ap = h < 12 ? "AM" : "PM";
 68 | 
 69 | 		if (h === 0) h = 12;
 70 | 		if (h > 12) h -= 12;
 71 | 
 72 | 		this.time.a = [...this.time.b];
 73 | 		this.time.b = [
 74 | 			(h < 10 ? `0${h}` : `${h}`),
 75 | 			(m < 10 ? `0${m}` : `${m}`),
 76 | 			(s < 10 ? `0${s}` : `${s}`),
 77 | 			ap
 78 | 		];
 79 | 
 80 | 		if (!this.time.a.length) this.time.a = [...this.time.b];
 81 | 	}
 82 | }
 83 | 
 84 | 
 85 | 
 86 | document.querySelector('svg').innerHTML = [...Array(11)]
 87 |     .map((_, i) => Math.pow(Math.sqrt(2), i))
 88 |     .map((s, i) => `
 89 |         <rect transform="scale(${s})rotate(${i*45})"
 90 |             stroke-width="${2/s}"
 91 |             stroke="hsl(${i*30},55%,55%)"
 92 |             width="10" height="10" x="-5" y="-5"></rect>
 93 |     `).join(',');
 94 | 
 95 | 
 96 |     document.querySelector('#contact-form').addEventListener('submit', (e) => {
 97 |     e.preventDefault();
 98 |     e.target.elements.name.value = '';
 99 |     e.target.elements.email.value = '';
100 |     e.target.elements.message.value = '';
101 |   });
102 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <title>AmanJ.me</title>
  7 |   <!-- title-icon -->
  8 |   <link rel="icon" href="chat-left-heart.svg" type="image/x-icon">
  9 | 
 10 | 
 11 |   <!-- preconnect Google API -->
 12 |   <link rel="stylesheet" href="style.css">
 13 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 14 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 15 |   <!-- Google Fonts Family -->
 16 |   <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Nunito:ital,wght@0,896;1,500&family=Oxygen&family=Playfair+Display:ital,wght@1,600&family=Sora:wght@500&family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
 17 | 
 18 | 
 19 | 
 20 |   <!-- Bootstrap  -->
 21 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 22 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 23 | 
 24 |   <!-- font awesome icon / Bootstrap icons -->
 25 |   <script src="https://kit.fontawesome.com/e203f224ab.js" crossorigin="anonymous"></script>
 26 | 
 27 | 
 28 | </head>
 29 | 
 30 | <body>
 31 | 
 32 |   <section id="title">
 33 |     <div class="container1">
 34 | 
 35 |       <!-- Nav-Bar -->
 36 |       <nav class="navbar navbar-expand-lg navbar-dark ">
 37 |         <!-- <a class="navbar-brand" href="">AmanJaiman.Me</a> -->
 38 | 
 39 |         <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
 40 |           <ul class="navbar-nav ms-auto mb-2 mb-lg-2">
 41 |             <li class="nav-item">
 42 |               <a class="nav-link" href="https://amanjaiman1.github.io/About/">𝖺𝖻𝗈𝗎𝗍()</a>
 43 |             </li>
 44 |             <li class="nav-item">
 45 |               <a class="nav-link" href="#career">𝖼𝖺𝗋𝖾𝖾𝗋()</a>
 46 |             </li>
 47 |             <li class="nav-item">
 48 |               <a class="nav-link" href="#projects">𝗉𝗋𝗈𝗃𝖾𝖼𝗍𝗌()</a>
 49 |             </li>
 50 |             <li class="nav-item">
 51 |               <a class="nav-link" href="#contact">𝖼𝗈𝗇𝗍𝖺𝖼𝗍()</a>
 52 |             </li>
 53 | 
 54 | 
 55 |           </ul>
 56 | 
 57 |         </div>
 58 | 
 59 |       </nav>
 60 | 
 61 |     </div>
 62 | 
 63 |   </section>
 64 | 
 65 | 
 66 | 
 67 |   <!-- Introduction-Part -->
 68 | 
 69 | 
 70 |   <section class="Introduction">
 71 | 
 72 |     <div class="Intro">
 73 |       <div class="col content">
 74 |         <h1 class="slide-left" id="hii">Hii<br>I'm AmanJaiman</h1><br>
 75 |         <h3 class="slide-left">Full Stack Developer</h3><br>
 76 |         <div class="container">
 77 | 		<div class="btn"><a href="#">Read more</a></div>
 78 | 		<div class="btn"><a href="#" >Contact</a></div>
 79 | 
 80 | 	</div>
 81 |       </div>
 82 |     </div>
 83 | 
 84 |   </section>
 85 | 
 86 | 
 87 |   <!-- CAREER PART -->
 88 | 
 89 |   <section class="career" id="career">
 90 |     <div class="heading">
 91 |       <h2>𝒫𝑒𝓇𝓈𝓊𝒾𝓃𝑔 𝐵.𝒯𝑒𝒸𝒽 𝒞𝒮𝐸 𝐹𝓇𝑜𝓂 -</h2><br><br><br><br>
 92 |       <h1>LOVELY PROFESSIONALY UNIVERSITY</h1><br><br><br><br>
 93 |     </div>
 94 |     <div class="careerbox">
 95 | 
 96 |       <div class="career-box">
 97 |       </div>
 98 | 
 99 |       <div class="career-box2">
100 |       </div>
101 |     </div>
102 | 
103 | 
104 |   </section>
105 | 
106 | 
107 |   <!-- WATCH PART -->
108 | 
109 |   <section class="watch">
110 |     <h1>𝓞𝓾𝓻 𝓣𝓲𝓶𝓮 𝓲𝓼 𝓟𝓻𝓮𝓬𝓲𝓸𝓾𝓼</h1>
111 |     <div class="clock" aria-label="00:00:00 AM">
112 | 	<div class="clock__block clock__block--delay2" aria-hidden="true" data-time-group>
113 | 		<div class="clock__digit-group">
114 | 			<div class="clock__digits" data-time="a">00</div>
115 | 			<div class="clock__digits" data-time="b">00</div>
116 | 		</div>
117 | 	</div>
118 | 	<div class="clock__colon"></div>
119 | 	<div class="clock__block clock__block--delay1" aria-hidden="true" data-time-group>
120 | 		<div class="clock__digit-group">
121 | 			<div class="clock__digits" data-time="a">00</div>
122 | 			<div class="clock__digits" data-time="b">00</div>
123 | 		</div>
124 | 	</div>
125 | 	<div class="clock__colon"></div>
126 | 	<div class="clock__block" aria-hidden="true" data-time-group>
127 | 		<div class="clock__digit-group">
128 | 			<div class="clock__digits" data-time="a">00</div>
129 | 			<div class="clock__digits" data-time="b">00</div>
130 | 		</div>
131 | 	</div>
132 | 	<div class="clock__block clock__block--delay2 clock__block--small" aria-hidden="true" data-time-group>
133 | 		<div class="clock__digit-group">
134 | 			<div class="clock__digits" data-time="a">PM</div>
135 | 			<div class="clock__digits" data-time="b">AM</div>
136 | 		</div>
137 | 	</div>
138 | </div>
139 |   </section>
140 | 
141 | 
142 |   <!-- PROJECT PART -->
143 | 
144 |   <section class="projects" id="projects">
145 |     <div class="container3">
146 |       <div class="box3">
147 |         <h2 class="name">ZEROCITI</h2>
148 |         <div class="circle"></div>
149 |         <img class="product" src="zerociti (3).png" />
150 |       </div>
151 |       <div class="box3">
152 |         <h2 class="name">HOTSTAR</h2>
153 |         <div class="circle"></div>
154 |         <img class="product" src="6128ffaee3a15c00041a8e41.png" />
155 |       </div>
156 |       <div class="box3">
157 |         <h2 class="name">PERSONAL PORTFOLIO</h2>
158 |         <div class="circle"></div>
159 |         <img class="product" src="" />
160 |       </div>
161 |       <script src="https://assets.codepen.io/7773162/vanilla-tilt.min.js"></script>
162 |       <script>
163 |         VanillaTilt.init(document.querySelectorAll(".box3"), {
164 |           max: 15,
165 |           speed: 300,
166 |           easing: "cubic-bezier(.03,.98,.52,.99)",
167 |           scale: 1.05,
168 |         });
169 |       </script>
170 | 
171 |   </section>
172 | 
173 | 
174 | 
175 | 
176 |   <!-- CONTACT PART -->
177 | 
178 |   <section  id="contact">
179 |     <h1 class="section-header">ⒸⓄⓃⓉⒶⒸⓉ</h1>
180 | 
181 |   <div class="contact-wrapper">
182 | 
183 |   <!-- Left contact page -->
184 | 
185 |     <form id="contact-form" class="form-horizontal" role="form">
186 | 
187 |       <div class="form-group">
188 |         <div class="col-sm-12">
189 |           <input type="text" class="form-control1" id="name" placeholder="NAME" name="name" value="" required>
190 |         </div>
191 |       </div>
192 | 
193 |       <div class="form-group">
194 |         <div class="col-sm-12">
195 |           <input type="email" class="form-control1" id="email" placeholder="EMAIL" name="email" value="" required>
196 |         </div>
197 |       </div>
198 | 
199 |       <textarea class="form-control1" rows="10" placeholder="MESSAGE" name="message" required></textarea>
200 | 
201 |       <button class="btn2 btn-primary send-button" id="submit" type="submit" value="SEND">
202 |         <div class="alt-send-button2">
203 |           <i class="fa fa-paper-plane"></i><span class="send-text">SEND</span>
204 |         </div>
205 | 
206 |       </button>
207 | 
208 |     </form>
209 | 
210 |   <!-- Left contact page -->
211 | 
212 |       <div class="direct-contact-container">
213 | 
214 |         <ul class="contact-list">
215 |           <li class="list-item"><i class="fa fa-map-marker fa-2x"><span class="contact-text place">Jaipur , Rajasthan</span></i></li>
216 | 
217 |           <li class="list-item"><i class="fa fa-phone fa-2x"><span class="contact-text phone"><a href="tel:1-212-555-5555" title="Give me a call">(+91) 6378XXXXXX</a></span></i></li>
218 | 
219 |           <li class="list-item"><i class="fa fa-envelope fa-2x"><span class="contact-text gmail"><a href="mailto:#" title="Send me an email">amanjaiman890@gmail.com</a></span></i></li>
220 | 
221 |         </ul>
222 | 
223 |         <hr>
224 |         <ul class="social-media-list">
225 |           <li><a href="https://github.com/amanjaiman1/amanjaiman1" target="_blank" class="contact-icon">
226 |             <i class="fa fa-github" aria-hidden="true"></i></a>
227 |           </li>
228 |           <li><a href="https://codepen.io/amanjaiman1" target="_blank" class="contact-icon">
229 |             <i class="fa fa-codepen" aria-hidden="true"></i></a>
230 |           </li>
231 |           <li><a href="https://twitter.com/AMANJAIMAN6" target="_blank" class="contact-icon">
232 |             <i class="fa fa-twitter" aria-hidden="true"></i></a>
233 |           </li>
234 |           <li><a href="https://www.instagram.com/amanjaiman0to1/" target="_blank" class="contact-icon">
235 |             <i class="fa fa-instagram" aria-hidden="true"></i></a>
236 |           </li>
237 |         </ul>
238 |         <hr>
239 | 
240 |         <div class="copyright">&copy; ALL OF THE RIGHTS RESERVED</div>
241 | 
242 |       </div>
243 | 
244 |   </div>
245 |   </section>
246 | 
247 | 
248 | 
249 |   <!-- THANKS PART -->
250 | 
251 | <section class="thanks">
252 |   <svg viewBox='-200,-200,400,400' width="100vw" height="100vh"></svg>
253 | </section>
254 | 
255 | 
256 | 
257 | 
258 |   <!-- Footer -->
259 | 
260 |   <footer id="footer">
261 |     <div class="header">
262 | 
263 |       <!--Content before waves-->
264 | 
265 |       <!--Waves Container-->
266 |       <div>
267 |         <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
268 |           <defs>
269 |             <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
270 |           </defs>
271 |           <g class="parallax">
272 |             <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(218, 155, 155, 0.14)" />
273 |             <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(134, 255, 193, 0.72)" />
274 |             <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 255, 252, 0.92)" />
275 |             <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(0, 40, 255, 0.23)" />
276 |           </g>
277 |         </svg>
278 |       </div>
279 |       <!--Waves end-->
280 |     </div>
281 |   </div>
282 |     <!--Header ends-->
283 | 
284 |     <!--Content starts-->
285 | 
286 |     <!--Content ends-->
287 |   </footer>
288 | 
289 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
290 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/Flip.min.js"></script>
291 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>
292 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/Observer.min.js"></script>
293 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollToPlugin.min.js"></script>
294 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/Draggable.min.js"></script>
295 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/EaselPlugin.min.js"></script>
296 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/MotionPathPlugin.min.js"></script>
297 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/PixiPlugin.min.js"></script>
298 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/TextPlugin.min.js"></script>
299 | 
300 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
301 |   <script src="https://unpkg.com/vue@3"></script>
302 |   <script src="script.js" charset="utf-8"></script>
303 | </body>
304 | 
305 | </html>
306 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
   1 | @import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap");
   2 | @import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
   3 | @import url('https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@700&display=swap');
   4 | @import url('https://fonts.googleapis.com/css?family=Monoton');
   5 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
   6 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,900;1,900&display=swap');
   7 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,900&display=swap');
   8 | @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
   9 | @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=Righteous&display=swap');
  10 | 
  11 | :root {
  12 |   --main-bg: #f8f8f8;
  13 |   --box-bg: #ffffff;
  14 |   --name-color: #232323;
  15 |   --card-bg-text: #343434;
  16 |   --hue: 223;
  17 |   --bg: hsl(var(--hue), 90%, 90%);
  18 |   --fg: hsl(var(--hue), 10%, 10%);
  19 |   --primary: hsl(var(--hue), 90%, 55%);
  20 |   --trans-dur: 0.3s;
  21 |   font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
  22 | }
  23 | 
  24 | .dark:root {
  25 |   --main-bg: #131313;
  26 |   --box-bg: #232323;
  27 |   --name-color: #f8f8f8;
  28 |   --card-bg-text: #ffffff;
  29 | }
  30 | 
  31 | * {
  32 |   margin: 0;
  33 |   padding: 0;
  34 |   box-sizing: border-box;
  35 | }
  36 | 
  37 | body {
  38 |   background: #a8c0ff;
  39 |   /* fallback for old browsers */
  40 |   background: -webkit-linear-gradient(to right, #3f2b96, #a8c0ff);
  41 |   /* Chrome 10-25, Safari 5.1-6 */
  42 |   background: linear-gradient(to right, #3f2b96, #a8c0ff);
  43 |   /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  44 | }
  45 | 
  46 | /* Section-title */
  47 | #title {
  48 |   text-align: center;
  49 |   width: 100%;
  50 |   color: #fff;
  51 |   position: sticky;
  52 |   background-position: center;
  53 |   display: flex;
  54 |   justify-content: center;
  55 |   padding-top: 20px;
  56 | }
  57 | 
  58 | .container1 {
  59 |   width: calc(100% + 30px);
  60 |   padding-right: 0;
  61 |   padding-left: 0;
  62 |   margin-left: -30px;
  63 |   overflow: hidden;
  64 | }
  65 | 
  66 | .navbar-nav {
  67 |   display: flex;
  68 |   align-items: center;
  69 |   padding: 35px -8%;
  70 | }
  71 | 
  72 | .navbar-brand {
  73 |   font-size: 5rem;
  74 |   font-weight: bold;
  75 | }
  76 | 
  77 | .nav-item {
  78 |   padding: 0 18px;
  79 | }
  80 | 
  81 | .nav-link {
  82 |   font-size: 1rem;
  83 |   background: #959595;
  84 |   background: linear-gradient(to right, #959595 0%, #0D0D0D 46%, #010101 50%, #0A0A0A 53%, #4E4E4E 76%, #383838 87%, #1B1B1B 100%);
  85 |   -webkit-background-clip: text;
  86 |   -webkit-text-fill-color: transparent;
  87 | }
  88 | 
  89 | /* / Introduction Part/ */
  90 | .Introduction {
  91 |   width: 100%;
  92 |   height: 100vh;
  93 |   position: relative;
  94 | }
  95 | 
  96 | .Intro {
  97 |   width: 500px;
  98 |   height: 500px;
  99 |   padding-top: 100px;
 100 |   display: inline-block;
 101 | }
 102 | 
 103 | .content h1 {
 104 |   text-align: left;
 105 |   font-size: 50px;
 106 |   font-weight: 600;
 107 |   background: #FCEABB;
 108 |   font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
 109 |   background: linear-gradient(to right, #FCEABB 0%, #FCCD4D 50%, #F8B500 51%, #FBDF93 100%);
 110 |   -webkit-background-clip: text;
 111 |   -webkit-text-fill-color: transparent;
 112 | }
 113 | 
 114 | .content h3 {
 115 |   font-family: 'Qwitcher Grypen', cursive;
 116 |   text-align: left;
 117 |   font-size: 50px;
 118 |   font-weight: 600;
 119 |   word-spacing: 15px;
 120 |   background: #008080;
 121 |   background: linear-gradient(to left, #008080 0%, #FFFFFF 25%, #05C1FF 50%, #FFFFFF 75%, #005757 100%);
 122 |   -webkit-background-clip: text;
 123 |   -webkit-text-fill-color: transparent;
 124 | }
 125 | 
 126 | .links {
 127 |   position: absolute;
 128 |   top: 550px;
 129 |   left: 140px;
 130 |   word-spacing: 100px;
 131 | }
 132 | 
 133 | .links a {
 134 |   color: #fff;
 135 |   text-decoration: inline-block;
 136 | }
 137 | 
 138 | .slide-left {
 139 |   animation: slideleft 1s linear forwards;
 140 | }
 141 | 
 142 | @keyframes slideleft {
 143 |   0% {
 144 |     transform: translate(20px);
 145 |     opacity: 0;
 146 |   }
 147 | 
 148 |   100% {
 149 |     transform: translate(100px);
 150 |     opacity: 1;
 151 |   }
 152 | }
 153 | 
 154 | /* h3.slide-left {
 155 |   animation-delay: 1s;
 156 | } */
 157 | .links.slide-left {
 158 |   animation-delay: 2s;
 159 | }
 160 | 
 161 | .container {
 162 |   width: 1000px;
 163 |   display: flex;
 164 |   flex-wrap: wrap;
 165 |   justify-content: space-around;
 166 |   position: relative;
 167 | }
 168 | 
 169 | .container .btn {
 170 |   position: relative;
 171 |   animation: drop 3s linear forwards;
 172 |   top: 0;
 173 |   left: 40px;
 174 |   width: 150px;
 175 |   height: 50px;
 176 |   margin: 0;
 177 |   display: inline-block;
 178 |   justify-content: center;
 179 |   align-items: center;
 180 | }
 181 | 
 182 | @keyframes drop {
 183 |   0% {
 184 |     transform: translateY(-30px) scaleY(0.9);
 185 |     opacity: 0;
 186 |   }
 187 | 
 188 |   50% {
 189 |     transform: translateY(-12px) scaleY(0.9);
 190 |     opacity: 1;
 191 |   }
 192 | 
 193 |   100% {
 194 |     transform: translateY(0px) scaleY(1);
 195 |     opacity: 1;
 196 |   }
 197 | }
 198 | 
 199 | @-webkit-keyframes shiny-btn1 {
 200 |   0% {
 201 |     -webkit-transform: scale(0) rotate(45deg);
 202 |     opacity: 0;
 203 |   }
 204 | 
 205 |   80% {
 206 |     -webkit-transform: scale(0) rotate(45deg);
 207 |     opacity: 0.5;
 208 |   }
 209 | 
 210 |   100% {
 211 |     -webkit-transform: scale(50) rotate(45deg);
 212 |     opacity: 0;
 213 |   }
 214 | }
 215 | 
 216 | .container .btn a {
 217 |   position: absolute;
 218 |   top: 0;
 219 |   left: 10px;
 220 |   width: 100%;
 221 |   height: 100%;
 222 |   display: flex;
 223 |   justify-content: center;
 224 |   align-items: center;
 225 |   background: rgba(255, 255, 255, 0.05);
 226 |   box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
 227 |   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 228 |   border-top: 1px solid rgba(255, 255, 255, 0.1);
 229 |   border-radius: 15px;
 230 |   padding: 10px;
 231 |   letter-spacing: 1px;
 232 |   text-decoration: none;
 233 |   overflow: hidden;
 234 |   color: #fff;
 235 |   font-weight: 400px;
 236 |   z-index: 1;
 237 |   transition: 0.5s;
 238 |   backdrop-filter: blur(15px);
 239 | }
 240 | 
 241 | .container .btn:hover a {
 242 |   letter-spacing: 3px;
 243 | }
 244 | 
 245 | .container .btn a::before {
 246 |   content: "";
 247 |   position: absolute;
 248 |   top: 0;
 249 |   left: 0;
 250 |   width: 50%;
 251 |   height: 100%;
 252 |   background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
 253 |   transform: skewX(45deg) translate(0);
 254 |   transition: 0.5s;
 255 |   filter: blur(0px);
 256 | }
 257 | 
 258 | .container .btn:hover a::before {
 259 |   transform: skewX(45deg) translate(200px);
 260 | }
 261 | 
 262 | .container .btn::before {
 263 |   content: "";
 264 |   position: absolute;
 265 |   left: 50%;
 266 |   transform: translatex(-50%);
 267 |   bottom: -5px;
 268 |   width: 30px;
 269 |   height: 10px;
 270 |   background: #f00;
 271 |   border-radius: 10px;
 272 |   transition: 0.5s;
 273 |   transition-delay: 0.5;
 274 | }
 275 | 
 276 | .container .btn:hover::before
 277 | 
 278 | /*lightup button*/
 279 |   {
 280 |   bottom: 0;
 281 |   height: 50%;
 282 |   width: 80%;
 283 |   border-radius: 10px;
 284 | }
 285 | 
 286 | .container .btn::after {
 287 |   content: "";
 288 |   position: absolute;
 289 |   left: 50%;
 290 |   transform: translatex(-50%);
 291 |   top: -5px;
 292 |   width: 30px;
 293 |   height: 10px;
 294 |   background: #f00;
 295 |   border-radius: 10px;
 296 |   transition: 0.5s;
 297 |   transition-delay: 0.5;
 298 | }
 299 | 
 300 | .container .btn:hover::after
 301 | 
 302 | /*lightup button*/
 303 |   {
 304 |   top: 0;
 305 |   height: 50%;
 306 |   width: 80%;
 307 |   border-radius: 10px;
 308 | }
 309 | 
 310 | .container .btn:nth-child(1)::before,
 311 | /*chnage 1*/
 312 | .container .btn:nth-child(1)::after {
 313 |   background: #ff1f71;
 314 |   box-shadow: 0 0 5px #ff1f71, 0 0 15px #ff1f71, 0 0 30px #ff1f71,
 315 |     0 0 60px #ff1f71;
 316 | }
 317 | 
 318 | .container .btn:nth-child(2)::before,
 319 | /* 2*/
 320 | .container .btn:nth-child(2)::after {
 321 |   background: #2db2ff;
 322 |   box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
 323 |     0 0 60px #2db2ff;
 324 | }
 325 | 
 326 | /* CAREER PART */
 327 | .career {
 328 |   width: 100%;
 329 |   min-height: 150vh;
 330 | }
 331 | 
 332 | .heading {
 333 |   position: relative;
 334 |   display: block;
 335 | }
 336 | 
 337 | .heading h2 {
 338 |   font-size: 2rem;
 339 |   font-weight: bold;
 340 |   text-align: center;
 341 |   font-family: 'Cinzel', serif;
 342 |   background: #008080;
 343 |   background: linear-gradient(to left, #008080 0%, #FFFFFF 25%, #05C1FF 50%, #FFFFFF 75%, #005757 100%);
 344 |   -webkit-background-clip: text;
 345 |   -webkit-text-fill-color: transparent;
 346 | }
 347 | 
 348 | .heading h1 {
 349 |   text-align: center;
 350 |   display: block;
 351 |   background: #959595;
 352 |   background: linear-gradient(to right, #959595 0%, #0D0D0D 46%, #010101 50%, #0A0A0A 53%, #4E4E4E 76%, #383838 87%, #1B1B1B 100%);
 353 |   -webkit-background-clip: text;
 354 |   -webkit-text-fill-color: transparent;
 355 | }
 356 | 
 357 | .careerbox {
 358 |   word-spacing: 200px;
 359 | }
 360 | 
 361 | .career-box {
 362 |   width: 500px;
 363 |   height: 500px;
 364 |   margin-left: 180px;
 365 |   border: 1px solid transparent;
 366 |   display: inline-block;
 367 |   background: transparent;
 368 |   border-radius: 15px;
 369 |   box-shadow: 20px 10px 500px -20px #0ff;
 370 | }
 371 | 
 372 | .career-box2 {
 373 |   width: 500px;
 374 |   height: 500px;
 375 |   border: 1px solid transparent;
 376 |   display: inline-block;
 377 |   background: transparent;
 378 |   border-radius: 15px;
 379 |   box-shadow: 20px 10px 500px -20px #0ff;
 380 | }
 381 | 
 382 | /* WATCH PART */
 383 | .watch {
 384 |   background-color: var(--bg);
 385 |   color: var(--fg);
 386 |   font: 1em/1.5 "DM Sans", sans-serif;
 387 |   height: 100vh;
 388 |   display: grid;
 389 |   place-items: center;
 390 |   transition:
 391 |     background-color var(--trans-dur),
 392 |     color var(--trans-dur);
 393 | }
 394 | 
 395 | .watch h1 {
 396 |   font-size: 100px;
 397 |   background: #B8E1FC;
 398 |   background: radial-gradient(circle farthest-corner at center center, #B8E1FC 0%, #231421 100%);
 399 |   -webkit-background-clip: text;
 400 |   -webkit-text-fill-color: transparent;
 401 | }
 402 | 
 403 | .clock {
 404 |   display: flex;
 405 |   flex-direction: column;
 406 |   flex-wrap: wrap;
 407 |   align-items: center;
 408 | }
 409 | 
 410 | .clock__block {
 411 |   background-color: hsl(var(--hue), 10%, 90%);
 412 |   border-radius: 0.5rem;
 413 |   box-shadow: 0 1rem 2rem hsla(var(--hue), 90%, 50%, 0.3);
 414 |   font-size: 3em;
 415 |   line-height: 2;
 416 |   margin: 0.75rem;
 417 |   overflow: hidden;
 418 |   text-align: center;
 419 |   width: 6rem;
 420 |   height: 6rem;
 421 |   transition:
 422 |     background-color var(--trans-dur),
 423 |     box-shadow var(--trans-dur);
 424 | }
 425 | 
 426 | .clock__block--small {
 427 |   border-radius: 0.25rem;
 428 |   box-shadow: 0 0.5rem 2rem hsla(var(--hue), 90%, 50%, 0.3);
 429 |   font-size: 1em;
 430 |   line-height: 3;
 431 |   width: 3rem;
 432 |   height: 3rem;
 433 | }
 434 | 
 435 | .clock__colon {
 436 |   display: none;
 437 |   font-size: 2em;
 438 |   opacity: 0.5;
 439 |   position: relative;
 440 | }
 441 | 
 442 | .clock__colon:before,
 443 | .clock__colon:after {
 444 |   background-color: currentColor;
 445 |   border-radius: 50%;
 446 |   content: "";
 447 |   display: block;
 448 |   position: absolute;
 449 |   top: -0.05em;
 450 |   left: -0.05em;
 451 |   width: 0.1em;
 452 |   height: 0.1em;
 453 |   transition: background-color var(--trans-dur);
 454 | }
 455 | 
 456 | .clock__colon:before {
 457 |   transform: translateY(-200%);
 458 | }
 459 | 
 460 | .clock__colon:after {
 461 |   transform: translateY(200%);
 462 | }
 463 | 
 464 | .clock__digit-group {
 465 |   display: flex;
 466 |   flex-direction: column-reverse;
 467 | }
 468 | 
 469 | .clock__digits {
 470 |   width: 100%;
 471 |   height: 100%;
 472 | }
 473 | 
 474 | .clock__block--bounce {
 475 |   animation: bounce 0.75s;
 476 | }
 477 | 
 478 | .clock__block--bounce .clock__digit-group {
 479 |   animation: roll 0.75s ease-in-out forwards;
 480 |   transform: translateY(-50%);
 481 | }
 482 | 
 483 | .clock__block--delay1,
 484 | .clock__block--delay1 .clock__digit-group {
 485 |   animation-delay: 0.1s;
 486 | }
 487 | 
 488 | .clock__block--delay2,
 489 | .clock__block--delay2 .clock__digit-group {
 490 |   animation-delay: 0.2s;
 491 | }
 492 | 
 493 | /* Dark theme */
 494 | @media (prefers-color-scheme: dark) {
 495 |   :root {
 496 |     --bg: hsl(var(--hue), 10%, 10%);
 497 |     --fg: hsl(var(--hue), 10%, 90%);
 498 |   }
 499 | 
 500 |   .clock__block {
 501 |     background-color: hsl(var(--hue), 90%, 40%);
 502 |     box-shadow: 0 1rem 2rem hsla(var(--hue), 90%, 60%, 0.4);
 503 |   }
 504 | 
 505 |   .clock__block--small {
 506 |     box-shadow: 0 0.5rem 2rem hsla(var(--hue), 90%, 60%, 0.4);
 507 |   }
 508 | }
 509 | 
 510 | /* Beyond mobile */
 511 | @media (min-width: 768px) {
 512 |   .clock {
 513 |     flex-direction: row;
 514 |   }
 515 | 
 516 |   .clock__colon {
 517 |     display: inherit;
 518 |   }
 519 | }
 520 | 
 521 | /* Animations */
 522 | @keyframes bounce {
 523 | 
 524 |   from,
 525 |   to {
 526 |     animation-timing-function: ease-in;
 527 |     transform: translateY(0);
 528 |   }
 529 | 
 530 |   50% {
 531 |     animation-timing-function: ease-out;
 532 |     transform: translateY(15%);
 533 |   }
 534 | }
 535 | 
 536 | @keyframes roll {
 537 |   from {
 538 |     transform: translateY(-50%);
 539 |   }
 540 | 
 541 |   to {
 542 |     transform: translateY(0);
 543 |   }
 544 | }
 545 | 
 546 | /* PROJECTS PART */
 547 | .projects {
 548 |   width: 100%;
 549 |   height: 200vh;
 550 | }
 551 | 
 552 | .container3 {
 553 |   top: 420px;
 554 |   margin-left: 150px;
 555 |   font-family: 'Poppins', sans-serif;
 556 |   position: relative;
 557 |   display: flex;
 558 |   justify-content: center;
 559 |   align-items: center;
 560 |   flex-wrap: wrap;
 561 |   width: 1200px;
 562 |   transform-style: preserve-3d;
 563 |   background: rgb(65, 20, 183);
 564 |   background: linear-gradient(140deg, rgba(65, 20, 183, 1) 0%, rgba(28, 9, 116, 1) 14%, rgba(52, 16, 159, 1) 25%, rgba(12, 4, 87, 1) 37%, rgba(22, 7, 107, 1) 44%, rgba(12, 4, 89, 1) 49%, rgba(39, 12, 136, 1) 49%);
 565 |   border-radius: 10px;
 566 |   box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
 567 | }
 568 | 
 569 | .container3 .box3 {
 570 |   position: relative;
 571 |   width: 300px;
 572 |   height: 400px;
 573 |   margin: 40px;
 574 |   background-image: linear-gradient(to right, #28d6ff, #00e3e2, #54eab0, #a9ea78, #f6df53);
 575 |   border-radius: 20px;
 576 |   transform-style: preserve-3d;
 577 | }
 578 | 
 579 | .container3 .box3::before {
 580 |   position: absolute;
 581 |   top: 20px;
 582 |   left: 20px;
 583 |   font-size: 6em;
 584 |   font-weight: 900;
 585 |   color: var(--card-bg-text);
 586 |   font-style: italic;
 587 |   opacity: 0;
 588 |   transition: 0.5s;
 589 | }
 590 | 
 591 | .container3 .box3::after {
 592 |   position: absolute;
 593 |   bottom: 20px;
 594 |   right: 20px;
 595 |   font-size: 4.5em;
 596 |   font-weight: 900;
 597 |   color: var(--card-bg-text);
 598 |   font-style: italic;
 599 |   opacity: 0;
 600 |   transition: 0.5s;
 601 | }
 602 | 
 603 | .container3 .box3:hover::after,
 604 | .container3 .box3:hover::before {
 605 |   opacity: 0.04;
 606 | }
 607 | 
 608 | .container3 .box3 .name {
 609 |   position: absolute;
 610 |   top: 0;
 611 |   left: 0;
 612 |   text-align: center;
 613 |   color: var(--name-color);
 614 |   width: 100%;
 615 |   transform-style: preserve-3d;
 616 |   transform: translate3d(0, 0, 75px);
 617 |   transition: 0.5s;
 618 |   opacity: 0;
 619 |   z-index: 10;
 620 | }
 621 | 
 622 | .container3 .box3:hover .name {
 623 |   top: 40px;
 624 |   opacity: 1;
 625 | }
 626 | 
 627 | .container3 .box3 .circle {
 628 |   position: absolute;
 629 |   top: 50%;
 630 |   left: 50%;
 631 |   width: 200px;
 632 |   height: 200px;
 633 |   border-radius: 50%;
 634 |   transition: 0.5s;
 635 |   background: #ffffff;
 636 |   transform-style: preserve-3d;
 637 |   z-index: 10;
 638 |   opacity: 1;
 639 |   transform: translate3d(-50%, -50%, 0px);
 640 | }
 641 | 
 642 | .container3 .box3:hover .circle {
 643 |   position: absolute;
 644 |   top: 50%;
 645 |   left: 50%;
 646 |   width: 200px;
 647 |   height: 200px;
 648 |   border-radius: 50%;
 649 |   transition: 0.5s;
 650 |   background: #ffffff;
 651 |   transform-style: preserve-3d;
 652 |   z-index: 10;
 653 |   opacity: 1;
 654 |   transform: translate3d(-50%, -50%, 35px);
 655 | }
 656 | 
 657 | .container3 .box3 .product {
 658 |   position: absolute;
 659 |   top: 46%;
 660 |   left: 50%;
 661 |   max-width: 250px;
 662 |   transition: 0.5s;
 663 |   z-index: 11;
 664 |   transition: 0.5s;
 665 |   transform-style: preserve-3d;
 666 |   transform: translate3d(-50%, -50%, 0px) rotate(0deg);
 667 | }
 668 | 
 669 | .container3 .box3:hover .product {
 670 |   transform: translate3d(-50%, -50%, 100px) rotate(-15deg);
 671 | }
 672 | 
 673 | .container3 .box3:nth-child(1) .circle,
 674 | .container3 .box3:nth-child(1) .buy {
 675 |   background: rgb(200,194,227);
 676 | background: linear-gradient(180deg, rgba(200,194,227,1) 0%, rgba(203,255,246,0.4741246840533089) 100%);
 677 | }
 678 | 
 679 | .container3 .box3:nth-child(2) .circle,
 680 | .container3 .box3:nth-child(2) .buy {
 681 |   background: #000628;
 682 | }
 683 | 
 684 | .container3 .box3:nth-child(3) .circle,
 685 | .container3 .box3:nth-child(3) .buy {
 686 |   background: #eb0e2f;
 687 | }
 688 | 
 689 | .skills {
 690 |   justify-content: center;
 691 |   align-items: center;
 692 |   min-height: 100vh;
 693 |   display: flex;
 694 |   position: relative;
 695 | }
 696 | 
 697 | /* CONTACT PART */
 698 | #contact {
 699 |   width: 100%;
 700 |   height: 100vh;
 701 |   position: relative;
 702 |   display: block;
 703 |   background-color: black;
 704 | }
 705 | 
 706 | .section-header {
 707 |   text-align: center;
 708 |   margin: 0 auto;
 709 |   padding: 40px 0;
 710 |   font: 300 60px 'Oswald', sans-serif;
 711 |   color: #fff;
 712 |   text-transform: uppercase;
 713 |   letter-spacing: 6px;
 714 | }
 715 | 
 716 | .contact-wrapper {
 717 |   display: flex;
 718 |   flex-direction: row;
 719 |   justify-content: space-between;
 720 |   margin: 0 auto;
 721 |   padding: 20px;
 722 |   position: relative;
 723 |   max-width: 840px;
 724 | }
 725 | 
 726 | /* Left contact page */
 727 | .form-horizontal {
 728 |   /*float: left;*/
 729 |   max-width: 400px;
 730 |   font-family: 'Lato';
 731 |   font-weight: 400;
 732 | }
 733 | 
 734 | .form-control1 {
 735 |     display: block;
 736 |     width: 100%;
 737 |     padding: 0.375rem 0.75rem;
 738 |     font-size: 1rem;
 739 |     font-weight: 400;
 740 |     line-height: 1.5;
 741 |     color: #212529;
 742 |     background-color: #000;
 743 |     background-clip: padding-box;
 744 |     border: 1px solid #ced4da;
 745 |     -webkit-appearance: none;
 746 |     -moz-appearance: none;
 747 |     appearance: none;
 748 |     border-radius: 0.25rem;
 749 |     transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 750 | }
 751 | 
 752 | .btn2{
 753 |   border-radius: 5px;
 754 | 
 755 | }
 756 | 
 757 | .send-button {
 758 |   margin-top: 15px;
 759 |   height: 34px;
 760 |   width: 400px;
 761 |   overflow: hidden;
 762 |   transition: all .2s ease-in-out;
 763 | }
 764 | 
 765 | .alt-send-button {
 766 |   width: 400px;
 767 |   height: 34px;
 768 |   transition: all .2s ease-in-out;
 769 | }
 770 | 
 771 | .send-text {
 772 |   display: block;
 773 |   margin-top: 10px;
 774 |   font: 700 12px 'Lato', sans-serif;
 775 |   letter-spacing: 2px;
 776 | }
 777 | 
 778 | .alt-send-button:hover {
 779 |   transform: translate3d(0px, -29px, 0px);
 780 | }
 781 | 
 782 | /* Begin Right Contact Page */
 783 | .direct-contact-container {
 784 |   max-width: 400px;
 785 | }
 786 | 
 787 | /* Location, Phone, Email Section */
 788 | .contact-list {
 789 |   list-style-type: none;
 790 |   margin-left: -30px;
 791 |   padding-right: 20px;
 792 | }
 793 | 
 794 | .list-item {
 795 |   line-height: 4;
 796 |   color: #aaa;
 797 | }
 798 | 
 799 | .contact-text {
 800 |   font: 300 18px 'Lato', sans-serif;
 801 |   letter-spacing: 1.9px;
 802 |   color: #bbb;
 803 | }
 804 | 
 805 | .place {
 806 |   margin-left: 62px;
 807 | }
 808 | 
 809 | .phone {
 810 |   margin-left: 56px;
 811 | }
 812 | 
 813 | .gmail {
 814 |   margin-left: 53px;
 815 | }
 816 | 
 817 | .contact-text a {
 818 |   color: #bbb;
 819 |   text-decoration: none;
 820 |   transition-duration: 0.2s;
 821 | }
 822 | 
 823 | .contact-text a:hover {
 824 |   color: #fff;
 825 |   text-decoration: none;
 826 | }
 827 | 
 828 | /* Social Media Icons */
 829 | .social-media-list {
 830 |   position: relative;
 831 |   font-size: 22px;
 832 |   text-align: center;
 833 |   width: 100%;
 834 |   margin: 0 auto;
 835 |   padding: 0;
 836 | }
 837 | 
 838 | .social-media-list li a {
 839 |   color: #fff;
 840 | }
 841 | 
 842 | .social-media-list li {
 843 |   position: relative;
 844 |   display: inline-block;
 845 |   height: 60px;
 846 |   width: 60px;
 847 |   margin: 10px 3px;
 848 |   line-height: 60px;
 849 |   border-radius: 50%;
 850 |   color: #fff;
 851 |   background-color: rgb(27, 27, 27);
 852 |   cursor: pointer;
 853 |   transition: all .2s ease-in-out;
 854 | }
 855 | 
 856 | .social-media-list li:after {
 857 |   content: '';
 858 |   position: absolute;
 859 |   top: 0;
 860 |   left: 0;
 861 |   width: 60px;
 862 |   height: 60px;
 863 |   line-height: 60px;
 864 |   border-radius: 50%;
 865 |   opacity: 0;
 866 |   box-shadow: 0 0 0 1px #fff;
 867 |   transition: all .2s ease-in-out;
 868 | }
 869 | 
 870 | .social-media-list li:hover {
 871 |   background-color: #fff;
 872 | }
 873 | 
 874 | .social-media-list li:hover:after {
 875 |   opacity: 1;
 876 |   transform: scale(1.12);
 877 |   transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
 878 | }
 879 | 
 880 | .social-media-list li:hover a {
 881 |   color: #000;
 882 | }
 883 | 
 884 | .copyright {
 885 |   font: 200 14px 'Oswald', sans-serif;
 886 |   color: #555;
 887 |   letter-spacing: 1px;
 888 |   text-align: center;
 889 | }
 890 | 
 891 | hr {
 892 |   border-color: rgba(255, 255, 255, .6);
 893 | }
 894 | 
 895 | /* Begin Media Queries*/
 896 | @media screen and (max-width: 850px) {
 897 |   .contact-wrapper {
 898 |     display: flex;
 899 |     flex-direction: column;
 900 |   }
 901 | 
 902 |   .direct-contact-container, .form-horizontal {
 903 |     margin: 0 auto;
 904 |   }
 905 | 
 906 |   .direct-contact-container {
 907 |     margin-top: 60px;
 908 |     max-width: 300px;
 909 |   }
 910 | 
 911 |   .social-media-list li {
 912 |     height: 60px;
 913 |     width: 60px;
 914 |     line-height: 60px;
 915 |   }
 916 | 
 917 |   .social-media-list li:after {
 918 |     width: 60px;
 919 |     height: 60px;
 920 |     line-height: 60px;
 921 |   }
 922 | }
 923 | 
 924 | @media screen and (max-width: 569px) {
 925 |   .direct-contact-container, .form-wrapper {
 926 |     float: none;
 927 |     margin: 0 auto;
 928 |   }
 929 | 
 930 |   .form-control, textarea {
 931 |     margin: 0 auto;
 932 |   }
 933 | 
 934 |   .name, .email, textarea {
 935 |     width: 280px;
 936 |   }
 937 | 
 938 |   .direct-contact-container {
 939 |     margin-top: 60px;
 940 |     max-width: 280px;
 941 |   }
 942 | 
 943 |   .social-media-list {
 944 |     left: 0;
 945 |   }
 946 | 
 947 |   .social-media-list li {
 948 |     height: 55px;
 949 |     width: 55px;
 950 |     line-height: 55px;
 951 |     font-size: 2rem;
 952 |   }
 953 | 
 954 |   .social-media-list li:after {
 955 |     width: 55px;
 956 |     height: 55px;
 957 |     line-height: 55px;
 958 |   }
 959 | }
 960 | 
 961 | @media screen and (max-width: 410px) {
 962 |   .send-button {
 963 |     width: 99%;
 964 |   }
 965 | }
 966 | 
 967 | /* THANKS PART */
 968 | .thanks {
 969 |   margin: 0;
 970 |   overflow: hidden;
 971 |   background: rgb(68, 50, 155);
 972 |   background: linear-gradient(180deg, rgba(68, 50, 155, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(6, 0, 20, 1) 76%, rgba(0, 0, 0, 1) 100%);
 973 | }
 974 | 
 975 | rect {
 976 |   fill: none;
 977 |   stroke-dasharray: 5 5;
 978 |   animation: shift 3s infinite linear;
 979 | }
 980 | 
 981 | @keyframes shift {
 982 |   100% {
 983 |     stroke-dashoffset: 20
 984 |   }
 985 | }
 986 | 
 987 | /* FOOTER PART */
 988 | .header {
 989 |   position: relative;
 990 |   text-align: center;
 991 |   background-color: black;
 992 | }
 993 | 
 994 | .logo {
 995 |   width: 50px;
 996 |   fill: white;
 997 |   padding-right: 15px;
 998 |   display: inline-block;
 999 |   vertical-align: middle;
1000 | }
1001 | 
1002 | .inner-header {
1003 |   height: 65vh;
1004 |   width: 100%;
1005 |   margin: 0;
1006 |   padding: 0;
1007 | }
1008 | 
1009 | .flex {
1010 |   /*Flexbox for containers*/
1011 |   display: flex;
1012 |   justify-content: center;
1013 |   align-items: center;
1014 |   text-align: center;
1015 | }
1016 | 
1017 | .waves {
1018 |   position: relative;
1019 |   width: 100%;
1020 |   height: 15vh;
1021 |   margin-bottom: -7px;
1022 |   /*Fix for safari gap*/
1023 |   min-height: 100px;
1024 |   max-height: 150px;
1025 | }
1026 | 
1027 | /* Animation */
1028 | .parallax>use {
1029 |   animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
1030 | }
1031 | 
1032 | .parallax>use:nth-child(1) {
1033 |   animation-delay: -2s;
1034 |   animation-duration: 7s;
1035 | }
1036 | 
1037 | .parallax>use:nth-child(2) {
1038 |   animation-delay: -3s;
1039 |   animation-duration: 10s;
1040 | }
1041 | 
1042 | .parallax>use:nth-child(3) {
1043 |   animation-delay: -4s;
1044 |   animation-duration: 13s;
1045 | }
1046 | 
1047 | .parallax>use:nth-child(4) {
1048 |   animation-delay: -5s;
1049 |   animation-duration: 20s;
1050 | }
1051 | 
1052 | @keyframes move-forever {
1053 |   0% {
1054 |     transform: translate3d(-90px, 0, 0);
1055 |   }
1056 | 
1057 |   100% {
1058 |     transform: translate3d(85px, 0, 0);
1059 |   }
1060 | }
1061 | 
1062 | /*Shrinking for mobile*/
1063 | @media (max-width: 768px) {
1064 |   .waves {
1065 |     height: 40px;
1066 |     min-height: 40px;
1067 |   }
1068 | 
1069 |   .content {
1070 |     height: 30vh;
1071 |   }
1072 | 
1073 |   h1 {
1074 |     font-size: 24px;
1075 |   }
1076 | }
1077 | 


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