[ { "path": "README.md", "content": "# Potfolio\nMy Portfolio Website\n\nLanguages Used :\n> HTML\n> CSS\n> JAVASCRIPT\n\n\n\n" }, { "path": "image/temp.txt", "content": ">> Temporary File (Nothing Special Here.....XD)\n" }, { "path": "index.html", "content": "\r\n\r\n\r\n \r\n\r\n\r\n \r\n \r\n \r\n Bhargav Tibadiya\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n
\r\n \r\n

Portfolio

\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n\r\n\r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n
Hello My Name is
\r\n
Bhargav Tibadiya
\r\n
I'm a
\r\n Hire Me \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n

About Me

\r\n
\r\n\r\n
\r\n \"My\r\n
\r\n\r\n
\r\n\r\n
I am Bhargav.
I'm A Web Developer.
\r\n

Hello I'm Professional front-end Web Developer. I have mastered technologies like HTML, CSS, BOOTSTRAP. I also have my hands on technologies like JAVASCRIPT, PHP.Turning your dream website into reality is my job. \r\n Hello I'm looking for remote work / Internship for Frontend Web Developer Position.I don't just create websites, I create websites that promote you / your business to world 24x7.Responsive Web Design always plays an important role so I Believe in quality over quantity.

\r\n Download Resume\r\n\r\n
\r\n\r\n
\r\n
\r\n
\r\n\r\n \r\n\r\n \r\n \r\n
\r\n
\r\n

My Services

\r\n
\r\n\r\n
\r\n\r\n
\r\n \r\n
Web Design
\r\n

I'm master at designing website and giving awesome & nice and fresh look to your website. I have also designed many designs for website. I am using Figma to make Layout or UI Design of any website and I have mastered it very well.\r\n

\r\n I have more than 10 fully professional design in my work experience. Those are very creative and equipped with advanced design tactics.\r\n

\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n \r\n
Web Development
\r\n

In the field of web development i have developed 3 fully functional and developed more then 20+ small fragment of website. That states my experience in the field. I love to keep upgrading my self so I keep learning new things.\r\n

\r\n My websites and fully responcive and easy to use and understand for user and owner.\r\n Its My guarantee you will never question on my designs\r\n

\r\n
\r\n\r\n
\r\n\r\n\r\n
\r\n
\r\n
\r\n\r\n \r\n\r\n \r\n \r\n
\r\n
\r\n

Skills

\r\n\r\n
\r\n\r\n
\r\n
My Creative Skills & Experiences
\r\n

Hello All I Have many skills in my armory. I am perfect at HTML and CSS and BOOTSTRAP and I use primarily those 2 languages and 1 frame-work to build, design and develop any website. I also know JAVASCRIPT and also used it to make wenbite look cool. I have also worked with PHP and DATABASE so i also have knowledge of those also I have connnected 2 website to database that both were working properly. I am also expert at UI design

\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n
\r\n HTML\r\n 95%\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n CSS\r\n 85%\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n Bootstrap\r\n 75%\r\n
\r\n\r\n
\r\n \r\n
\r\n\r\n
\r\n\r\n \r\n
\r\n\r\n
\r\n Java\r\n 80%\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n \r\n
\r\n\r\n
\r\n C++\r\n 70%\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n \r\n
\r\n\r\n
\r\n JavaScript\r\n 45%\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n PHP\r\n 30%\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n \r\n \r\n
\r\n
\r\n

Contact Me

\r\n
\r\n\r\n
\r\n
Get In Touch
\r\n

Stay Connected With me. My details are provided. I will be glad to connect with you.

\r\n
\r\n\r\n
\r\n \r\n
\r\n
Name
\r\n
Bhargav Tibadiya
\r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n
Address
\r\n
Surat, Gujarat, India
\r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n
Email
\r\n
Click Here
\r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n
Contact
\r\n
+91 91064 17766
\r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n\r\n\r\n
\r\n\r\n
Social Media
\r\n

Following are my social media accounts. i would love to have a chit-chat with you.

\r\n\r\n
\r\n \r\n
\r\n
Whatsapp
\r\n
Say Hi to me on Whatsapp
\r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n
LinkedIn
\r\n
Lets Connect
\r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n
GitHub
\r\n
Visit My Repositories
\r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n
Instagram
\r\n
Like My Pics..
\r\n
\r\n
\r\n\r\n\r\n
\r\n\r\n
\r\n
\r\n
\r\n \r\n\r\n\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n\r\n\r\n\r\n\r\n" }, { "path": "script.js", "content": "$(document).ready(function(){\r\n\r\n $(window).scroll(function(){\r\n if(this.scrollY > 20){\r\n $('.navbar').addClass('.sticky');\r\n }else{\r\n $('.navbar').removeClass('.sticky');\r\n }\r\n });\r\n \r\n $('.scroll-up-btn').click(function(){\r\n $('html').animate({scrollTop: 0}); \r\n });\r\n\r\n\r\n var typed = new Typed(\".typing\",{\r\n strings : [\"Web Developer\",\"Designer\",\"NFT Artist\",\"Freelancer\",\"Student\",\"Learner\"],\r\n typeSpeed : 80,\r\n backSpeed: 40,\r\n loop: true \r\n });\r\n\r\n \r\n // Toggle Menu\r\n \r\n $('.menu-btn').click(function(){\r\n $('.navbar .menu').toggleClass(\"active\");\r\n });\r\n\r\n}); \r\n\r\n" }, { "path": "style.css", "content": "@import url('https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');\r\n*{\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n text-decoration: none;\r\n /* justify-content: center; */\r\n align-items: center;\r\n}\r\n\r\nhtml\r\n{\r\n scroll-behavior: smooth;\r\n}\r\n\r\n.scroll-up-btn\r\n{\r\n position: fixed;\r\n height: 45px;\r\n width: 45px;\r\n background: crimson;\r\n right: 35px;\r\n bottom: 35px;\r\n text-align: center;\r\n color: #fff;\r\n font-size: 30px;\r\n line-height: 45px;\r\n z-index: 999;\r\n border-radius: 6px;\r\n transition: all 0.5s ease;\r\n}\r\n\r\n.max-width\r\n{\r\n max-width: 100%;\r\n /* max-width: 1300px; */\r\n padding: 0 80px;\r\n}\r\n\r\n/* Nav Bar Formatting >> Starts */\r\n\r\n.navbar\r\n{\r\n background: crimson;\r\n position: fixed;\r\n width: 100%;\r\n font-family: 'ubuntu',sans-serif;\r\n padding: 15px 0;\r\n transition: all 0.4s ease;\r\n z-index: 999;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n\r\n.navbar .sticky \r\n{\r\n padding: 15px 0px;\r\n background: greenyellow;\r\n}\r\n\r\n.navbar .max-width\r\n{\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n#hide{\r\n font-size: 0px;\r\n}\r\n\r\n.navbar .logo a\r\n{\r\n color: #fff;\r\n font-size: 35px;\r\n font-weight: 600;\r\n}\r\n\r\n.navbar .logo:hover a\r\n{\r\n transition: 0.5s ease;\r\n color: #000;\r\n}\r\n\r\n.navbar .logo:hover #hide\r\n{\r\n font-size: 12px;\r\n color: #000;\r\n font-weight: 800;\r\n}\r\n\r\n.navbar .logo:hover a span{\r\n transition: 0.5s ease;\r\n color: #fff;\r\n}\r\n\r\n.navbar .logo a span\r\n{\r\n color: #000;\r\n}\r\n\r\n.navbar .fas.fa-bars\r\n{\r\n display: none;\r\n}\r\n\r\n.navbar .menu li\r\n{\r\n list-style: none;\r\n display: inline-block;\r\n}\r\n\r\n.navbar .menu li a\r\n{\r\n color: #fff;\r\n font-size: 18px;\r\n font-weight: 500;\r\n margin-left: 25px;\r\n transition: color 0.4s ease;\r\n}\r\n\r\n.navbar .menu li a:hover\r\n{\r\n color: black;\r\n}\r\n\r\n\r\n/* Menu Button Styling Starts */\r\n\r\n.menu-btn\r\n{\r\n color: #fff;\r\n font-size: 25px;\r\n cursor: pointer;\r\n /* display: none; */\r\n}\r\n\r\n#menu-btn-0\r\n{\r\n color: #000;\r\n font-size: 25px;\r\n cursor: pointer;\r\n background: crimson ;\r\n height: 30px;\r\n width: 30px;\r\n border-radius: 5px;\r\n /* display: none; */\r\n}\r\n\r\n\r\n/* Menu Button Styling Ends */\r\n\r\n\r\n/* Nav Bar Formatting >> Ends */\r\n\r\n\r\n/* Home Section Formatting >> Starts */\r\n\r\n.home\r\n{\r\n display: flex;\r\n background: url(\"image/banner.jpg\") no-repeat center;\r\n background-color: black;\r\n height: 100vh;\r\n width: 100%;\r\n min-height: 500px;\r\n color: #fff;\r\n font-family: 'ubuntu',sans-serif;\r\n}\r\n\r\n.home .max-width\r\n{\r\n margin: auto 0 auto 40px ;\r\n transition: 1s ease;\r\n}\r\n\r\n.home .home-content .text-1\r\n{\r\n font-size: 27px;\r\n transition: 1s ease;\r\n}\r\n\r\n.home .home-content .text-2\r\n{\r\n font-size: 75px;\r\n font-weight: 600;\r\n margin-left: -3px;\r\n transition: 1s ease;\r\n}\r\n\r\n.home .home-content .text-3\r\n{\r\n font-size: 40px;\r\n margin: 5px 0;\r\n transition: 1s ease;\r\n}\r\n\r\n.home .home-content .text-3 span\r\n{\r\n color: crimson;\r\n font-weight: 500;\r\n}\r\n\r\n.home .home-content a\r\n{\r\n display: inline-block;\r\n background: crimson;\r\n color: #fff;\r\n font-size: 25px ;\r\n font-weight: 500;\r\n padding: 12px 36px;\r\n border-radius: 7px;\r\n margin-top: 25px;\r\n transition: 0.5s ease;\r\n border: 1.5px solid crimson;\r\n}\r\n\r\n.home .home-content a:hover\r\n{\r\n background: none;\r\n color: crimson;\r\n border: 1.5px solid crimson;\r\n}\r\n\r\n/* Home Section Formatting >> Ends */\r\n\r\n\r\n/* About Section Formatting >> Starts */\r\n\r\nsection\r\n{\r\n padding: 100px 0;\r\n}\r\n\r\n.about\r\n{\r\n font-family: 'Poppins',sans-serif;\r\n background: #222;\r\n}\r\n\r\n.about .title\r\n{\r\n position: relative;\r\n font-size: 40px;\r\n font-weight: 600;\r\n padding-bottom: 25px;\r\n text-align: center;\r\n font-family: 'ubuntu',sans-serif;\r\n margin-bottom: 60px; \r\n color: crimson;\r\n}\r\n\r\n.about .title::before\r\n{\r\n content: \"\";\r\n position: absolute;\r\n width: 180px;\r\n height: 3px;\r\n background: #fff;\r\n bottom: 0px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.about .title::after\r\n{\r\n content: \"Who I Am\";\r\n position: absolute;\r\n background: #222;\r\n bottom: -5px;\r\n left: 50%;\r\n padding: 0 7px;\r\n transform: translateX(-50%);\r\n font-size: 15px;\r\n color: crimson;\r\n}\r\n\r\n.about .about-content\r\n{\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n\r\n.about .about-content .left\r\n{\r\n width: 45%;\r\n}\r\n\r\n.about .about-content .left img\r\n{\r\n height: 500px;\r\n width: 400px;\r\n object-fit: cover;\r\n border-radius: 25px;\r\n transition: 0.5s ease;\r\n /* border-radius: 50%; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/\r\n}\r\n\r\n.about .about-content .right\r\n{\r\n width: 55%;\r\n}\r\n\r\n.about .about-content .right .text\r\n{\r\n font-size: 32px;\r\n font-weight: 400;\r\n color: #fff;\r\n}\r\n\r\n.about .about-content .right .text span\r\n{\r\n font-weight: 600;\r\n color: crimson;\r\n}\r\n\r\n.about .about-content .right p\r\n{\r\n color: #aaa;\r\n text-align: justify;\r\n padding: 15px 0;\r\n}\r\n\r\n.about .about-content .right a\r\n{\r\n display: inline-block;\r\n background: crimson;\r\n color: #fff;\r\n font-size: 20px ;\r\n font-weight: 500;\r\n padding: 10px 30px;\r\n border-radius: 7px;\r\n margin-top: 25px;\r\n transition: 0.5s ease;\r\n border: 1.5px solid crimson;\r\n}\r\n\r\n.about .about-content .right a:hover\r\n{\r\n background: none;\r\n color: crimson;\r\n border: 1.5px solid crimson;\r\n}\r\n\r\n/* About Section Formatting >> Ends */\r\n\r\n\r\n/* Service Section Formatting >> Starts */\r\n\r\n.service{\r\n font-family: 'Poppins',sans-serif;\r\n background: #111;\r\n color: #fff;\r\n margin: 0;\r\n}\r\n\r\n.service .title\r\n{\r\n position: relative;\r\n font-size: 40px;\r\n font-weight: 600;\r\n padding-bottom: 25px;\r\n text-align: center;\r\n font-family: 'ubuntu',sans-serif;\r\n margin-bottom: 60px;\r\n color: crimson;\r\n}\r\n\r\n.service .title::before\r\n{\r\n content: \"\";\r\n position: absolute;\r\n width: 180px;\r\n height: 3px;\r\n background: #fff;\r\n bottom: 0px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.service .title::after\r\n{\r\n content: \"What I Provide\";\r\n position: absolute;\r\n background: #111;\r\n bottom: -5px;\r\n left: 50%;\r\n padding: 0 5px;\r\n transform: translateX(-50%);\r\n font-size: 15px;\r\n color: crimson;\r\n}\r\n\r\n.service .service-content \r\n{\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n\r\n.service .service-content .card\r\n{\r\n width: calc(50% - 30px);\r\n background: #222; /* Color 222 | 333 */\r\n text-align: center;\r\n padding: 30px 30px;\r\n border-radius: 7px;\r\n cursor: pointer;\r\n}\r\n\r\n.service .service-content .card:hover\r\n{\r\n background: crimson;\r\n}\r\n\r\n.service .service-content .card:hover i\r\n{\r\n color: #000;\r\n}\r\n\r\n.service .service-content .card:hover .text\r\n{\r\n font-weight: 600;\r\n}\r\n\r\n\r\n.service .service-content .card i \r\n{\r\n font-size: 50px;\r\n color: crimson;\r\n}\r\n\r\n.service .service-content .card .text\r\n{\r\n font-size: 25px;\r\n font-weight: 500;\r\n margin: 7px 0;\r\n}\r\n\r\n.service .service-content .card p \r\n{\r\n text-align: justify;\r\n}\r\n\r\n.service .service-content .card .box\r\n{\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.service .service-content .card .box:hover\r\n{\r\n transform: scale(1.05);\r\n}\r\n\r\n\r\n/* Service Section Formatting >> Ends */\r\n\r\n\r\n/* Skill Section Formatting >> Starts */\r\n\r\n\r\n.skill{\r\n font-family: 'Poppins',sans-serif;\r\n background: #222;\r\n color: #fff;\r\n margin: 0;\r\n}\r\n\r\n.skill .title\r\n{\r\n position: relative;\r\n font-size: 40px;\r\n font-weight: 600;\r\n padding-bottom: 25px;\r\n text-align: center;\r\n font-family: 'ubuntu',sans-serif;\r\n margin-bottom: 60px;\r\n color: crimson;\r\n}\r\n\r\n.skill .title::before\r\n{\r\n content: \"\";\r\n position: absolute;\r\n width: 180px;\r\n height: 3px;\r\n background: #fff;\r\n bottom: 0px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.skill .title::after\r\n{\r\n content: \"What I Know\";\r\n position: absolute;\r\n background: #222;\r\n bottom: -5px;\r\n left: 50%;\r\n padding: 0 5px;\r\n transform: translateX(-50%);\r\n font-size: 15px;\r\n color: crimson;\r\n}\r\n\r\n.skill .skill-content\r\n{\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n justify-content: space-between;\r\n\r\n}\r\n\r\n.skill .skill-content .collumn \r\n{ \r\n width: calc(50% - 30px); \r\n}\r\n\r\n.skill .skill-content .left .text\r\n{\r\n font-size: 25px;\r\n font-weight: 600;\r\n margin-bottom: 10px;\r\n}\r\n\r\n.skill .skill-content .left p\r\n{\r\n text-align: justify;\r\n font-size: 18px;\r\n color: #aaa;\r\n}\r\n\r\n.skill .skill-content .left .text span{\r\n color: crimson;\r\n}\r\n\r\n.skill .skill-content .right .bars \r\n{\r\n margin-bottom: 15px;\r\n}\r\n\r\n.skill .skill-content .right .info\r\n{\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 3px;\r\n}\r\n\r\n.skill .skill-content .right .info span\r\n{\r\n font-weight: 500;\r\n font-size: 15px;\r\n}\r\n\r\n.skill .skill-content .right .line\r\n{\r\n height: 15px;\r\n width: 100%;\r\n background: #fff;\r\n position: relative;\r\n border-radius: 10px;\r\n}\r\n\r\n.skill .skill-content .right .line::before\r\n{\r\n border-radius: 100px;\r\n content: \"\";\r\n position: absolute;\r\n height: 100%;\r\n width: 80%;\r\n left: 0;\r\n top: 0;\r\n background:crimson ;\r\n}\r\n\r\n.skill .skill-content .right .html::before\r\n{\r\n width: 95%;\r\n}\r\n\r\n.skill .skill-content .right .css::before\r\n{\r\n width: 85%;\r\n}\r\n\r\n.skill .skill-content .right .bootstrap::before\r\n{\r\n width: 75%;\r\n}\r\n\r\n.skill .skill-content .right .java::before\r\n{\r\n width: 80%;\r\n}\r\n\r\n.skill .skill-content .right .cpp::before\r\n{\r\n width: 70%;\r\n}\r\n\r\n.skill .skill-content .right .javascript::before\r\n{\r\n width: 45%;\r\n}\r\n\r\n.skill .skill-content .right .php::before\r\n{\r\n width: 30%;\r\n}\r\n\r\n\r\n.skill .skill-content .right .bars:hover\r\n{\r\n transform: scale(1.05);\r\n transition: all 0.5s ease;\r\n}\r\n\r\n\r\n\r\n/* Skill Section Formatting >> Ends */\r\n\r\n\r\n/* Contact Section Formatting >> Starts */\r\n\r\n\r\n\r\n\r\n\r\n.contact{\r\n font-family: 'Poppins',sans-serif;\r\n background: #111;\r\n color: #fff;\r\n margin: 0;\r\n}\r\n\r\n.contact .title\r\n{\r\n position: relative;\r\n font-size: 40px;\r\n font-weight: 600;\r\n padding-bottom: 25px;\r\n text-align: center;\r\n font-family: 'ubuntu',sans-serif;\r\n margin-bottom: 60px;\r\n color: crimson;\r\n}\r\n\r\n.contact .title::before\r\n{\r\n content: \"\";\r\n position: absolute;\r\n width: 180px;\r\n height: 3px;\r\n background: #fff;\r\n bottom: 0px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.contact .title::after\r\n{\r\n content: \"Get In Touch\";\r\n position: absolute;\r\n background: #111;\r\n bottom: -5px;\r\n left: 50%;\r\n padding: 0 5px;\r\n transform: translateX(-50%);\r\n font-size: 15px;\r\n color: crimson;\r\n}\r\n\r\n.contact .contact-content\r\n{\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n justify-content: space-between;\r\n\r\n}\r\n\r\n\r\n.contact .contact-content .collumn \r\n{\r\n width: calc(50% - 30px);\r\n}\r\n\r\n.contact .contact-content .right .text\r\n{\r\n margin-top: -20px;\r\n}\r\n.contact .contact-content .collumn .text\r\n{\r\n font-size: 23.5px;\r\n font-weight: 600;\r\n margin-bottom: 10px;\r\n top: 0;\r\n color: crimson;\r\n}\r\n\r\n.contact .contact-content .collumn p\r\n{\r\n text-align: justify;\r\n padding: 10px 0;\r\n}\r\n\r\n.contact .contact-content .collumn .icon\r\n{\r\n margin: 10px 0;\r\n}\r\n\r\n.contact .contact-content .row \r\n{\r\n display: flex;\r\n align-items: center;\r\n height: 65px;\r\n}\r\n\r\n.contact .contact-content .row .info\r\n{\r\n margin-left: 50px;\r\n\r\n}\r\n\r\n.contact .contact-content .row i\r\n{\r\n color: crimson;\r\n font-size: 25px;\r\n}\r\n\r\n.contact .contact-content .row .fas.fa-envelope \r\n{\r\n font-size: 20px;\r\n}\r\n\r\n.contact .contact-content .row .info .head\r\n{\r\n font-weight: 600;\r\n font-size: 20px;\r\n}\r\n\r\n.contact .contact-content .row .info .sub-title, \r\n.contact .contact-content .row .info .sub-title a\r\n{\r\n color: #999;\r\n}\r\n\r\n.contact .contact-content .row .info a\r\n{\r\n color: #fff;\r\n text-decoration: none;\r\n}\r\n\r\n\r\n/* contact Section Formatting >> Ends */\r\n\r\n\r\nfooter\r\n{\r\n padding: 30px 23px;\r\n background: #000;\r\n font-size: 22px;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Poppins',sans-serif;\r\n margin: 0;\r\n}\r\n\r\nfooter span a, footer span+span\r\n{\r\n color: crimson;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/* >> Responcive Design Formatting << */\r\n\r\n@media (max-width: 1200px){\r\n .about .about-content .left img\r\n {\r\n height: 437px;\r\n width: 350px;\r\n }\r\n\r\n}\r\n\r\n@media (max-width: 1100px){\r\n .home .max-width{\r\n margin-left: 0px;\r\n }\r\n\r\n .about .about-content .left img\r\n {\r\n height: 394px;\r\n width: 315px;\r\n }\r\n\r\n footer\r\n {\r\n font-size: 18px;\r\n }\r\n}\r\n\r\n@media (max-width: 1000px){\r\n .max-width{\r\n padding: 0 50px;\r\n }\r\n\r\n .about .about-content .left img\r\n {\r\n height: 373px;\r\n width: 300px;\r\n }\r\n\r\n}\r\n\r\n\r\n@media (max-width: 900px){\r\n .max-width{\r\n padding: 0 50px;\r\n }\r\n \r\n .menu-btn {\r\n color: #fff;\r\n display: block;\r\n z-index: 999;\r\n }\r\n .navbar .menu{\r\n position: fixed;\r\n height: 100vh;\r\n width: 100%;\r\n left: -100%;\r\n top: 0;\r\n background: #111;\r\n text-align: center;\r\n padding-top: 55px;\r\n transition: 0.3s ease ;\r\n }\r\n\r\n .navbar .fas.fa-bars\r\n {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding-top: 2px;\r\n }\r\n\r\n .navbar .menu.active\r\n {\r\n left: 0;\r\n }\r\n\r\n #menu-btn-0\r\n {\r\n background: #fff;\r\n }\r\n\r\n .navbar .menu li\r\n {\r\n display: block;\r\n }\r\n\r\n .navbar .menu li a \r\n {\r\n display: inline-block;\r\n margin: 20px 0;\r\n font-size: 25px;\r\n }\r\n\r\n .home .home-content .text-2\r\n {\r\n font-size: 70px;\r\n }\r\n \r\n .home .home-content .text-3\r\n {\r\n font-size: 30px;\r\n }\r\n\r\n .home .home-content a\r\n {\r\n font-size: 20px;\r\n padding: 8px 24px;\r\n }\r\n \r\n .max-width\r\n {\r\n max-width: 100%;\r\n transition: all 0.5s ease;\r\n }\r\n\r\n .about .about-content .collumn\r\n {\r\n width: 50%;\r\n }\r\n\r\n .about .about-content .left img{\r\n height: 350px;\r\n width: 350px;\r\n border-radius: 350px;\r\n } \r\n\r\n .about .about-content .left{\r\n display: flex;\r\n justify-content: center;\r\n margin: 0 auto 60px;\r\n }\r\n\r\n .about .about-content .right{\r\n flex: 100%;\r\n }\r\n\r\n .service .service-content .card{\r\n width: calc(50% - 10px);\r\n margin-bottom: 25px;\r\n }\r\n\r\n .skill .skill-content .collumn {\r\n width: calc(100% - 10px);\r\n margin-bottom: 25px;\r\n }\r\n\r\n .service .service-content .card .text\r\n {\r\n font-size: 20px;\r\n }\r\n \r\n .service .service-content .card p \r\n {\r\n font-size: 16px;\r\n }\r\n\r\n .skill .skill-content .right .line\r\n {\r\n height: 25px;\r\n border-radius: 13px;\r\n }\r\n\r\n .skill .skill-content .left .text\r\n {\r\n font-size: 20px;\r\n \r\n }\r\n\r\n .skill .skill-content .left p\r\n {\r\n font-size: 16px;\r\n }\r\n\r\n .contact .contact-content .collumn {\r\n width: calc(100% - 10px);\r\n margin-bottom: 25px;\r\n }\r\n\r\n footer\r\n {\r\n font-size: 14px;\r\n }\r\n\r\n}\r\n\r\n@media (max-width: 800px){ \r\n .about .about-content .left img{\r\n height: 300px;\r\n width: 300px;\r\n border-radius: 300px;\r\n }\r\n}\r\n \r\n@media (max-width: 700px){ \r\n .about .about-content .left img{\r\n height: 270px;\r\n width: 270px;\r\n border-radius: 300px;\r\n }\r\n\r\n .service .service-content .card{\r\n width: calc(100% - 10px);\r\n margin-bottom: 25px;\r\n }\r\n\r\n \r\n\r\n}\r\n\r\n\r\n@media (max-width: 675px){\r\n\r\n .home .home-content .text-2{\r\n font-size: 55px;\r\n }\r\n \r\n .home .home-content .text-3{\r\n font-size: 25px;\r\n }\r\n \r\n .home{\r\n background: black;\r\n }\r\n}\r\n\r\n@media (max-width: 650px){ \r\n .about .about-content .left img{\r\n height: 250px;\r\n width: 250px;\r\n border-radius: 250px;\r\n }\r\n footer\r\n {\r\n font-size: 12px;\r\n }\r\n}\r\n\r\n@media (max-width: 600px){ \r\n .about .about-content .left img{\r\n height: 200px;\r\n width: 200px;\r\n border-radius: 200px;\r\n }\r\n \r\n .skill .skill-content .right .line\r\n {\r\n height: 20px;\r\n border-radius: 13px;\r\n }\r\n}\r\n" } ]