├── .vscode └── settings.json ├── img ├── Git.png ├── css.png ├── msg.png ├── seo.png ├── twt.png ├── Figma.png ├── email.png ├── html.png ├── phone.png ├── twt2.png ├── uiux.png ├── Adobe XD.png ├── GitHub.png ├── Google.png ├── Html 5.png ├── Nodejs.png ├── Rocket.png ├── Rocket1.png ├── Twitter.png ├── adobe-xd.png ├── git (2).png ├── myImage.png ├── node-js.png ├── Bootstrap.png ├── Instagram.png ├── JavaScript.png ├── Web Design.png ├── WordPress.png ├── WordPress1.png ├── github (7).png ├── photoshop.png ├── project01.png ├── project02.png ├── project03.png ├── project04.png ├── project05.png ├── react (2).png ├── CSS Filetype.png ├── React Native.png ├── bootstrap 1.png ├── Adobe Photoshop.png ├── javascript (1).png ├── LinkedIn Circled.png ├── icons8-figma-512.png └── Girl is working on laptop at a remote job.png ├── Favicon ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── apple-touch-icon.png ├── android-chrome-192x192.png ├── android-chrome-512x512.png └── site.webmanifest ├── cv └── divya kumari's Resume-hackerresume.pdf ├── js ├── form.js └── script.js ├── .github └── workflows │ └── greetings.yml ├── LICENSE ├── CODE_OF_CONDUCT.md ├── README.md ├── about.html ├── projects.html ├── pricing.html ├── index.html └── css └── style.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5502 3 | } -------------------------------------------------------------------------------- /img/Git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/Git.png -------------------------------------------------------------------------------- /img/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/css.png -------------------------------------------------------------------------------- /img/msg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/msg.png -------------------------------------------------------------------------------- /img/seo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/seo.png -------------------------------------------------------------------------------- /img/twt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/twt.png -------------------------------------------------------------------------------- /img/Figma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/Figma.png -------------------------------------------------------------------------------- /img/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/email.png -------------------------------------------------------------------------------- /img/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/html.png -------------------------------------------------------------------------------- /img/phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/phone.png -------------------------------------------------------------------------------- /img/twt2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/twt2.png -------------------------------------------------------------------------------- /img/uiux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/uiux.png -------------------------------------------------------------------------------- /img/Adobe XD.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/Adobe XD.png -------------------------------------------------------------------------------- /img/GitHub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/GitHub.png -------------------------------------------------------------------------------- /img/Google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/Google.png -------------------------------------------------------------------------------- /img/Html 5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/Html 5.png -------------------------------------------------------------------------------- /img/Nodejs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/Nodejs.png -------------------------------------------------------------------------------- /img/Rocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/Rocket.png -------------------------------------------------------------------------------- /img/Rocket1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/Rocket1.png -------------------------------------------------------------------------------- /img/Twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/Twitter.png -------------------------------------------------------------------------------- /img/adobe-xd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/adobe-xd.png -------------------------------------------------------------------------------- /img/git (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/git (2).png -------------------------------------------------------------------------------- /img/myImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/myImage.png -------------------------------------------------------------------------------- /img/node-js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/node-js.png -------------------------------------------------------------------------------- /img/Bootstrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/Bootstrap.png -------------------------------------------------------------------------------- /img/Instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/Instagram.png -------------------------------------------------------------------------------- /img/JavaScript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/JavaScript.png -------------------------------------------------------------------------------- /img/Web Design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/Web Design.png -------------------------------------------------------------------------------- /img/WordPress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/WordPress.png -------------------------------------------------------------------------------- /img/WordPress1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/WordPress1.png -------------------------------------------------------------------------------- /img/github (7).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/github (7).png -------------------------------------------------------------------------------- /img/photoshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/photoshop.png -------------------------------------------------------------------------------- /img/project01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/project01.png -------------------------------------------------------------------------------- /img/project02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/project02.png -------------------------------------------------------------------------------- /img/project03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/project03.png -------------------------------------------------------------------------------- /img/project04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/project04.png -------------------------------------------------------------------------------- /img/project05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/project05.png -------------------------------------------------------------------------------- /img/react (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/react (2).png -------------------------------------------------------------------------------- /Favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/Favicon/favicon.ico -------------------------------------------------------------------------------- /img/CSS Filetype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/CSS Filetype.png -------------------------------------------------------------------------------- /img/React Native.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/React Native.png -------------------------------------------------------------------------------- /img/bootstrap 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/bootstrap 1.png -------------------------------------------------------------------------------- /img/Adobe Photoshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/Adobe Photoshop.png -------------------------------------------------------------------------------- /img/javascript (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/javascript (1).png -------------------------------------------------------------------------------- /Favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/Favicon/favicon-16x16.png -------------------------------------------------------------------------------- /Favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/Favicon/favicon-32x32.png -------------------------------------------------------------------------------- /img/LinkedIn Circled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/LinkedIn Circled.png -------------------------------------------------------------------------------- /img/icons8-figma-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/icons8-figma-512.png -------------------------------------------------------------------------------- /Favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/Favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /Favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/Favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /Favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/Favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /cv/divya kumari's Resume-hackerresume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/cv/divya kumari's Resume-hackerresume.pdf -------------------------------------------------------------------------------- /img/Girl is working on laptop at a remote job.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workhome124/Freelance-Web-Developer-Portfolio/HEAD/img/Girl is working on laptop at a remote job.png -------------------------------------------------------------------------------- /Favicon/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /js/form.js: -------------------------------------------------------------------------------- 1 | const formSubmit=document.querySelector(".formSubmit") 2 | const formInputAll = document.querySelectorAll(".form input"); 3 | const btnSubmit = document.querySelector(".button"); 4 | //set flag so that it alert only once time 5 | let flag = true; 6 | btnSubmit.addEventListener("click", (e) => { 7 | e.preventDefault(); 8 | //setting back to true so that next time it will check again 9 | flag=true 10 | formInputAll.forEach((item) => { 11 | formSubmitCheck(item); 12 | }); 13 | //submiting form after all check pass 14 | if(flag){ 15 | 16 | formSubmit.submit() 17 | 18 | } 19 | 20 | 21 | }); 22 | 23 | function formSubmitCheck(item) { 24 | if (flag === true) { 25 | if (item.value.trim() == undefined || item.value.trim() == "") { 26 | alert("Please provide correct Input"); 27 | flag = false; 28 | 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /.github/workflows/greetings.yml: -------------------------------------------------------------------------------- 1 | name: Greetings 2 | 3 | on: [pull_request_target, issues] 4 | 5 | jobs: 6 | greeting: 7 | runs-on: ubuntu-latest 8 | permissions: 9 | issues: write 10 | pull-requests: write 11 | steps: 12 | - uses: actions/first-interaction@v1 13 | with: 14 | repo-token: ${{ secrets.GITHUB_TOKEN }} 15 | issue-message: "Congratulations, @${{ github.actor }}! 🎉 Thank you for creating your issue for the Freelance web developer template. Your contribution is greatly appreciated and we look forward to working with you to resolve the issue. Keep up the great work! Should you have any queries or require guidance, do not hesitate to ask." 16 | pr-message: "Great job, @${{ github.actor }}! 🎉 Thank you for submitting your pull request for the Freelance web developer template. Our dedicated team will review it diligently.Your contribution is valuable and we appreciate your efforts to improve our project." 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Divya Kumari 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | let date = new Date(); 2 | let year = date.getFullYear(); 3 | document.getElementById("year").innerHTML = year; 4 | 5 | 6 | // footer 7 | 8 | class Footer extends HTMLElement { 9 | connectedCallback() { 10 | this.innerHTML = ` 11 |
12 |
13 |
14 |
15 | Divya k 16 |

I’m Divya Kumari, a junior and talented Web Designer with front end development skills.

17 |
18 | 21 |
22 |
23 | 35 |
36 | 43 |
44 |
45 |
46 | 47 | 48 | `; 49 | } 50 | } 51 | 52 | // customElements.define("main-header", Header); 53 | customElements.define("main-footer", Footer); 54 | 55 | // Back to top 56 | const amountScrolled = 200; 57 | const btnBackToTop = document.querySelector('.back-to-top'); 58 | 59 | const backToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' }); 60 | const toggleBtnBackToTop = () => { 61 | window.scrollY > amountScrolled 62 | ? btnBackToTop.classList.add('back-to-top_show') 63 | : btnBackToTop.classList.remove('back-to-top_show'); 64 | } 65 | 66 | btnBackToTop.addEventListener('click', backToTop); 67 | window.addEventListener('scroll', toggleBtnBackToTop); 68 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | email. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Freelance Web Developer Portfolio Template ✨

2 | 3 | 4 | ## A clean, beautiful, and responsive portfolio template for Developers! 5 | image 6 | 7 | 8 | Welcome to the Freelance Web Developer Portfolio Template, an open-source project to help web developers showcase their skills and work in a professional manner. This template provides a customizable and responsive portfolio website, allowing you to create a stunning online presence to attract clients and employers. 9 | 10 | To view a live example, **[click here](https://iamdivyak.netlify.app/)**. 11 | 12 | ## Features 13 | 14 | - **Responsive Design**: Your portfolio will look great on various devices and screen sizes. 15 | - **Customizable**: Easily modify content, images, and styles to suit your personal brand. 16 | - **Projects Showcase**: Display your projects with details, images, and links. 17 | - **Contact Form**: Include a contact form for potential clients and collaborators to reach out to you. 18 | - **Skills and Services**: Showcase your skills and services to highlight what you can offer. 19 | - **Blog Section**: Share your thoughts, insights, and knowledge with a built-in blog section. 20 | - **SEO Friendly**: Optimize your portfolio for search engines to increase your online visibility. 21 | 22 | ## Getting Started 23 | 24 | 1. **Fork the Repository**: Start by forking this repository to your GitHub account. 25 | 26 | 2. **Clone the Repository**: Clone the forked repository to your local development environment: 27 | 28 | ```bash 29 | git clone https://github.com/yourusername/Freelance-Web-Developer-Portfolio-Template.git 30 | 31 | To get your personal portfolio. Customize your portfolio theme by using your own color scheme. Feel free to use it as-is or personalize it as much as you want. 32 | 33 | If you'd like to **contribute** and make this much better for other users, have a look at [Issues](https://github.com/Iamdivyak/Freelance-Web-Developer-Portfolio-Template/issues) or feel free to create an issue that helps to make the portfolio more batter. 34 | 35 | 36 | ## 🖼️ Figma Design of the Website 37 | 38 | - Visite the design file [Figma Design](https://www.figma.com/file/wKcuUSuG9uEbaXL4TytRzG/my-profile%2Fportfolio-design?type=design&node-id=0%3A1&mode=design&t=TgSPcyjNpZr9n8YT-1) 39 | 40 | 41 | ## 💻 Tech Stack 42 | 43 | - [HTML5](https://developer.mozilla.org/en-US/docs/Glossary/HTML5) - HTML is the standard markup language for Web pages 44 | - [JavaScript](https://tc39.es/) - JS is an Open source runtime environment, built on the Chrome browser's V8 engine 45 | - [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) - CSS describes how HTML elements should be displayed 46 | - [Bootstrap](https://getbootstrap.com/docs/5.0/getting-started/introduction/) - A popular framework for building responsive, mobile-first sites. 47 | 48 | ## 🚀 Quick start 49 | 50 | Contributions are welcome! If you have any ideas, suggestions, or bug fixes, please feel free to open an [issue](https://github.com/Iamdivyak/Freelance-Web-Developer-Portfolio-Template/issues) and submit a pull request. Make sure to follow the project's code of conduct. 51 | 52 | > **Note**: If you are new to open source contributions, you can refer to [this](https://opensource.guide/how-to-contribute/) guide by GitHub. 53 | 54 | > **Warning**: Please do not spam the repository with unnecessary PRs. Please create PRs if and only if you are assigned to the respective issue. Make sure to follow the project's [code of conduct](/CODE_OF_CONDUCT.md). 55 | 56 | ### Installation 57 | 58 | 1. Clone the repo 59 | 60 | ```sh 61 | git clone https://github.com/Iamdivyak/Freelance-Web-Developer-Portfolio-Template.git 62 | ``` 63 | 64 | 2. Open the **index.html** file 65 | 66 | 3. Have fun! 67 | 68 | ### Creating A Pull Request 69 | 70 | 1. Fork the Project 71 | 2. Clone your forked repository 72 | 73 | ```sh 74 | git clone https://github.com//Freelance-Web-Developer-Portfolio-Template.git 75 | ``` 76 | 3. Now go ahead and create a new branch and move to the branch 77 | ```sh 78 | git checkout -b fix-issue- 79 | ``` 80 | 4. After you have added your changes, follow the following command chain 81 | Check the changed files 82 | ```sh 83 | git status -s 84 | ``` 85 | 86 | 5. Add all the files to the staging area 87 | ```sh 88 | git add . 89 | ``` 90 | or 91 | ```sh 92 | git add 93 | ``` 94 | 6. Commit your changes 95 | ```sh 96 | git commit -m "" 97 | ``` 98 | 7. Push your changes 99 | ```sh 100 | git push origin fix-issue- 101 | ``` 102 | 8. Open a Pull Request 103 | 104 | ## Thanks to all Contributors 💪 105 | Your contribution is the root of the success of this project. 106 | 107 | Also Give it a Star 🌟, If you loved contributing to the project. 108 | Let's connect on my [Github](https://github.com/Iamdivyak) for more such projects !! 109 | 110 | 111 | 112 | 113 | 114 | ## 👩‍💻 Project Admin 115 | 116 | 117 | 118 | 127 | 128 |
119 | 120 | 121 |
Divya Kumari 122 | 123 |
124 | 👩‍💻Admin 125 | 126 |
129 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Divya Kumari | About Me 22 | 23 | 24 | 25 | 26 | 50 | 51 | 52 | 53 | 54 |
55 |
56 |

-ABOUT

57 |
58 |

ABOUT ME

59 |
60 |
61 |

62 | I’m Divya Kumari, a junior and talented Web Designer with front end development skills. I am passionate about leveraging my diverse backgrounds to decipher challenging problems and create delightful experiences. I honed my skills at web development, Front-End Web Development, UI design and SEO analytics. 63 |

64 | I develop websites with HTML, CSS and JavaScript. I have top skills in using design softwares like Figma, Adobe XD, and PhotoShop. 65 |

66 | I develop websites with HTML, CSS and JavaScript. I have top skills in using design softwares like Figma, Adobe XD, and PhotoShop. 67 | 68 | 69 |

70 |
71 | HIRE ME 72 | 73 | Download CV 74 | 75 |
76 |
77 | Girl is working on laptop at a remote job.png 78 |
79 |
80 |
81 |
82 |
83 | 84 |
85 |
86 |

-CONTACT

87 |
88 |

GET IN TOUCH

89 |

I am available to work on your projects and bring your ideas to life. 90 | I am just a click away.

91 |
92 |
93 | 94 |
95 | 98 |
99 | 105 | 106 |
107 |
108 |
109 |
110 |
111 | 112 |
113 |
114 | 115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 | 123 | 124 | 125 | 126 |
© Portfolio Pvt. Ltd. All Rights Reserved.
127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /projects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Divya Kumari | Portfolio 22 | 23 | 24 | 25 | 26 | 50 | 51 | 52 | 53 | 54 |
55 |
56 |

-PROJECTS

57 |
58 |

FEATURED WORK

59 |

I am passionate about building scalable Websites, creating effective solutions, and learning every day to grow professionally in the IT field.

60 |
61 |
62 |
63 |
64 | GitHub 65 | Live Web 66 |
67 |
68 |
69 |
70 | GitHub 71 | Live Web 72 |
73 | 74 |
75 |
76 |
77 | GitHub 78 | Live Web 79 |
80 | 81 |
82 |
83 |
84 | GitHub 85 | Live Web 86 |
87 | 88 |
89 |
90 |
91 | GitHub 92 | Live Web 93 |
94 | 95 |
96 |
97 |
98 |
99 | 100 | 101 | 102 |
103 |
104 |

-CONTACT

105 |
106 |

GET IN TOUCH

107 |

I am available to work on your projects and bring your ideas to life. 108 | I am just a click away.

109 |
110 |
111 | 112 |
113 | 116 |
117 | 123 | 124 |
125 |
126 |
127 |
128 |
129 | 130 |
131 |
132 | 133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 | 141 | 142 | 143 |
© Portfolio Pvt. Ltd. All Rights Reserved.
144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | -------------------------------------------------------------------------------- /pricing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 18 | 24 | 25 | 26 | 32 | 33 | 34 | 35 | 36 | 40 | 41 | 42 | 43 | Divya Kumari | Portfolio 44 | 51 | 52 | 53 | 54 | 55 | 79 | 80 | 81 |
82 |
83 |

-PRICING

84 |
85 |

PRICES AND PLANS

86 |

87 | Plans designed for every business. Our services are carefully 88 | designed to help you make the best choice for your business. 89 |

90 |
91 |
92 |
93 |
UI/UX Design
94 |
Rs. 1500
95 |
96 |
✔ 1 home page design
97 |
✔ 4 side page design
98 |
✔ Responsive design
99 |
✔ Prototype
100 |
✔ Source file
101 | 102 |
103 |
104 |
Web Design
105 |
Rs. 2500
106 |
107 |
✔ 1 home page design
108 |
✔ 4 side page design
109 |
✔ Responsive design
110 |
✔ Prototype
111 |
✔ Source file
112 | 113 |
114 |
115 |
SEO
116 |
Rs. 1500
117 |
118 |
✔ 10 keyword research
119 |
✔ Meta description
120 |
✔ h1, h2, h3 tags
121 |
✔ Image alt tags
122 |
✔ 2 page optimization
123 | 124 |
125 |
126 |
Wordpress
127 |
Rs. 3000
128 |
129 |
✔ 1 home page design
130 |
✔ 4 side page design
131 |
✔ Responsive design
132 |
✔ Prototype
133 |
✔ Source file
134 | 135 |
136 |
137 |
Google ADs
138 |
Rs. 2500
139 |
140 |
✔ 1 home page design
141 |
✔ 4 side page design
142 |
✔ Responsive design
143 |
✔ Prototype
144 |
✔ Source file
145 | 146 |
147 | 148 |
149 |
150 |
151 | 152 | 153 |
154 |
155 |

-CONTACT

156 |
157 |

GET IN TOUCH

158 |

159 | I am available to work on your projects and bring your ideas to 160 | life. I am just a click away. 161 |

162 |
163 |
164 |
165 | 169 |
170 | 181 |
182 |
183 |
184 |
185 |
186 | 187 |
188 |
196 | 197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 | 205 | 206 | 207 |
208 | © Portfolio Pvt. Ltd. All Rights Reserved. 209 |
210 | 211 | 212 | 213 | 214 | 215 | 216 | 221 | 222 | 223 | 224 | 225 | 226 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 24 | Divya Kumari | Portfolio 25 | 26 | 27 | 28 | 29 | 30 | 54 | 55 | 56 | 57 |
58 |
59 | 60 |
61 | 62 |
63 |
64 |

-INTRODUCTION

65 |

Hi There!👋

66 |

I'm Divya Kumari

67 |

I help startup to create stunning websites, 68 | that make impact on market.

69 | 70 | Let’s create an awesome website ! 71 | 77 |
78 | 79 |
80 |
81 | 82 |
83 |
84 | 85 |
86 |
87 | 88 | 89 |
90 |
91 |

-PROJECTS

92 |
93 |

FEATURED WORK

94 |

I love making websites that can grow big, finding useful solutions, and always learning to get better in the IT world.

95 |
96 |
97 |
98 |
99 | GitHub 100 | Live Web 101 |
102 |
103 |
104 |
105 | GitHub 106 | Live Web 107 |
108 | 109 |
110 |
111 |
112 | GitHub 113 | Live Web 114 |
115 | 116 |
117 |
118 |
119 | GitHub 120 | Live Web 121 |
122 | 123 |
124 |
125 |
126 | GitHub 127 | Live Web 128 |
129 | 130 |
131 |
132 |
133 |
134 | 135 | 136 | 137 |
138 |
139 |

-SERVICES

140 |
141 |

SERVICES I PROVIDE

142 |

The goal is not to build a website. The goal is to build your business.

143 |
144 |
145 | 146 |
147 |
148 | ui/ux design 149 |

UI/UX Design

150 |

I work with certain design tools to create high-fidelity designs and prototypes. I design accessible and 151 | usable products which aid business growth.

152 |
153 | 154 |
155 |
156 |
157 | ui/ux design 158 |

Web Development

159 |

I use various web technologies to develop attractive websites which converts visitors to customers. I 160 | develop creative and responsive website layouts.

161 |
162 | 163 |
164 |
165 |
166 | ui/ux design 167 |

Wordpress

168 |

WordPress is a free and open-source content management system written in PHP and paired with a MySQL or 169 | MariaDB database with supported HTTPs. 170 |

171 |

172 |
173 |
174 |
175 | ui/ux design 176 |

Google AD's

177 |

Grow your business with Google Ads · Get in front of customers when they're searching for businesses like 178 | yours on Google Search and Maps. 179 |

180 |

181 |
182 | 183 |
184 |
185 |
186 | 187 | 188 |
189 |
190 |

-SKILLS

191 |
192 |

AREA OF EXPERTISE

193 |

Let's kickstart your project and collaborate to build something amazing. I'll bring my skills to make your next project shine.

194 |
195 |
196 |
197 |
198 | 199 |

HTML

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

CSS

206 |
207 |
208 |
209 |
210 | 211 |

JAVASCRIPT

212 |
213 |
214 |
215 |
216 | 217 |

BOOTSTRAP

218 |
219 |
220 |
221 |
222 | 223 |

Node.js

224 |
225 |
226 |
227 |
228 | 229 |

React

230 |
231 |
232 |
233 |
234 | 235 |

Git

236 |
237 |
238 |
239 |
240 | 241 |

GitHub

242 |
243 |
244 |
245 |
246 | 247 |

Adobe XD

248 |
249 |
250 |
251 |
252 | 253 |

Photoshop

254 |
255 |
256 |
257 |
258 | 259 |

Figma

260 |
261 |
262 |
263 |
264 | 265 |

WordPress

266 |
267 |
268 |
269 |
270 |
271 | 272 |
273 |
274 | 275 |

HAVE A PROJECT IN MIND?

276 |

Turn your dream website into reality with us. Let's get started!

277 | 278 | 279 | 280 | Let’s create an awesome website 281 | 282 | 283 |
284 |
285 | 286 |
287 |
288 |

-ABOUT

289 |
290 |

ABOUT ME

291 |
292 |
293 |

294 | I'm Divya Kumari, a junior Web Designer with front-end development skills. I'm enthusiastic about using my varied experiences to solve complex problems and craft enjoyable user experiences. My expertise lies in web development, front-end web development, UI design, and SEO analytics. 295 |

296 | I develop websites with HTML, CSS and JavaScript. I have top skills in using design softwares like Figma, 297 | Adobe XD, and PhotoShop. 298 |

299 | 300 | 301 |

302 |
303 | HIRE ME 304 | 305 | Download CV 306 | 307 |
308 |
309 | Girl is working on laptop at a remote job.png 311 |
312 |
313 |
314 |
315 |
316 | 317 |
318 |
319 |

-CONTACT

320 |
321 |

GET IN TOUCH

322 |

I'm here and ready to bring your project ideas to life. Just a click away!

323 |
324 |
325 | 326 |
327 | 330 |
331 | 337 | 338 |
339 |
340 |
341 |
342 |
343 | 344 |
345 |
346 | 347 |
348 |
349 |
350 |
351 |
352 |
353 |
354 | 355 | 356 | 357 |
© Portfolio Pvt. Ltd. All Rights Reserved.
358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 371 | 372 | 373 | 374 | 375 | 376 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap'); 2 | /* utility */ 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | :root{ 7 | font-size: 65%; 8 | } 9 | body{ 10 | font-size: 1.6rem; 11 | 12 | } 13 | 14 | .container-fluid{ 15 | max-width: 85%; 16 | } 17 | .bg{ 18 | background-color: #FEF4F2; 19 | } 20 | .section{ 21 | padding: 4rem 0; 22 | } 23 | h1.custom-h1{ 24 | font-size: 2.5rem; 25 | line-height: 3rem; 26 | font-weight: 700; 27 | text-align: center; 28 | font-family: 'Montserrat'; 29 | font-style: normal; 30 | 31 | padding-top: 3rem; 32 | 33 | } 34 | h2{ 35 | font-family:'Montserrat'; 36 | font-weight: 600; 37 | font-size: 2rem; 38 | line-height: 4rem; 39 | padding-top: 1.5rem; 40 | } 41 | h3{ 42 | margin-bottom: 2rem; 43 | } 44 | p.para{ 45 | font-family: 'Nunito'; 46 | font-style: normal; 47 | font-weight: 400; 48 | font-size: 1.5rem; 49 | line-height: 1.8rem; 50 | margin: 0 auto 2rem ; 51 | color: #0D0F16; 52 | } 53 | /* navbar */ 54 | .navbar{ 55 | background-color: #FEF4F2 !important; 56 | margin: 0 auto; 57 | } 58 | .navbar-brand{ 59 | font-family: 'Satisfy', cursive; 60 | font-size: 4.4rem; 61 | color: #0D0F16; 62 | } 63 | .navbar-collapse{ 64 | font-family: 'Montserrat', sans-serif; 65 | font-size: 1.4rem; 66 | font-weight: 900; 67 | line-height: 2rem; 68 | 69 | } 70 | 71 | /* custom nav-bar toggler*/ 72 | 73 | 74 | .navbar-toggler { 75 | width: 20px; 76 | height: 20px; 77 | position: relative; 78 | transition: .5s ease-in-out; 79 | } 80 | .navbar-toggler, 81 | .navbar-toggler:focus, 82 | .navbar-toggler:active, 83 | .navbar-toggler-icon:focus { 84 | outline: none; 85 | box-shadow: none; 86 | border: 0; 87 | } 88 | 89 | .navbar-toggler span{ 90 | margin: 0; 91 | padding: 0; 92 | } 93 | 94 | .toggler-icon{ 95 | display: block; 96 | position: absolute; 97 | height: 0.3rem; 98 | width: 100%; 99 | background: #0D0F16; 100 | border-radius: 0.1rem; 101 | opacity: 1; 102 | left: 0; 103 | transform: rotate(0deg); 104 | transition: .25s ease-in-out; 105 | } 106 | .middle-bar{ 107 | margin-top: 0; 108 | 109 | } 110 | .navbar-toggler .top-bar{ 111 | margin-top: 0; 112 | transform: rotate(135deg); 113 | } 114 | .navbar-toggler .middle-bar{ 115 | opacity: 0; 116 | } 117 | .navbar-toggler .bottom-bar{ 118 | margin: 0; 119 | transform: rotate(-135deg); 120 | } 121 | 122 | .navbar-toggler.collapsed .top-bar{ 123 | margin-top: -20px; 124 | transform: rotate(0deg); 125 | } 126 | .navbar-toggler.collapsed .middle-bar{ 127 | opacity: 1; 128 | filter: alpha(opacity=100); 129 | } 130 | .navbar-toggler.collapsed .bottom-bar{ 131 | margin-top: 20px; 132 | transform: rotate(0deg); 133 | } 134 | 135 | a.my-cv { 136 | text-decoration: none; 137 | font-family: 'Montserrat', sans-serif; 138 | color: #F87474; 139 | font-size: 1.4rem; 140 | padding: 1.2rem 1.6rem; 141 | border: .1rem solid #F87474; 142 | border-radius: .5rem; 143 | background-color: #FEF4F2 !important; 144 | /* transition: background .5s, border 0.5s, color 0.5s ease-in-out; Add a 0s transition for the specified properties */ 145 | } 146 | 147 | a.my-cv:hover { 148 | background: linear-gradient(90deg, rgba(79,1,1,1) 0%, rgba(242,79,79,1) 81%); /* Add your desired gradient colors */ 149 | color: white; 150 | font-weight: 600; 151 | border: .1rem solid white; 152 | transition: all 1s ease-in-out; 153 | /* Add a 0s transition for the specified properties */ 154 | } 155 | 156 | 157 | 158 | 159 | 160 | /* first-section */ 161 | .first-section{ 162 | background-color: #FEF4F2; 163 | padding-top: 9rem; 164 | 165 | } 166 | .title{ 167 | color:#F26C4F; 168 | font-size: 1.6rem; 169 | font-weight: 400; 170 | font-family: 'Montserrat'; 171 | line-height: 2rem; 172 | } 173 | .intro .hi{ 174 | font-family: 'Montserrat'; 175 | font-style: normal; 176 | font-weight: 800; 177 | font-size: 1.6rem; 178 | line-height: 3rem; 179 | color: #0D0F16; 180 | } 181 | .intro .my-name{ 182 | font-family: 'Satisfy'; 183 | font-style: normal; 184 | font-weight: 400; 185 | font-size: 4rem; 186 | line-height: 5.5rem; 187 | color: #000000; 188 | } 189 | .intro .slogun{ 190 | font-family: 'Nunito'; 191 | font-style: normal; 192 | font-weight: 500; 193 | font-size: 1.6rem; 194 | line-height: 150%; 195 | margin: 0 auto 2rem ; 196 | color: #0D0F16; 197 | } 198 | .intro .my-name span{ 199 | color: #F26C4F; 200 | } 201 | .first-section img{ 202 | max-width: 30rem; 203 | 204 | } 205 | .img{ 206 | display: flex; 207 | justify-content: center; 208 | 209 | } 210 | /* home page button */ 211 | 212 | .homeBtn { 213 | text-decoration: none; 214 | font-family: 'Montserrat'; 215 | line-height: 3.2rem; 216 | font-weight: 500; 217 | font-size: 1.4rem; 218 | color: white; 219 | /* background: #F26C4F; */ 220 | background: linear-gradient(90deg, #F26C4F 0%, #F26C4F 81%); 221 | border-radius: .2rem; 222 | padding: .6rem 2rem; 223 | cursor: pointer; 224 | /* transition: background 1s, border 0.5s, color 0.5s ease-in-out; */ 225 | /* Add a 0s transition for the specified properties */ 226 | } 227 | 228 | .homeBtn:hover { 229 | color: white; 230 | font-weight: 500; 231 | animation: animatedGradient .5s .2s ease 1 both; 232 | transition: all 1s ease-in; 233 | } 234 | 235 | @keyframes animatedGradient{ 236 | 0%{ 237 | background: linear-gradient(90deg, #660303c9 0%, #e02929c9 81%); 238 | } 239 | 25%{ 240 | background: linear-gradient(90deg, #660303da 0%, #e02929da 81%); 241 | } 242 | 50%{ 243 | background: linear-gradient(90deg, #660303ec 0%, #e02929ec 81%); 244 | } 245 | 75%{ 246 | background: linear-gradient(90deg, #660303ef 0%, #e02929ef 81%); 247 | } 248 | 100%{ 249 | background: linear-gradient(90deg, #660303 0%, #e02929 81%); 250 | } 251 | } 252 | 253 | 254 | 255 | 256 | 257 | /* second section */ 258 | .second-section{ 259 | background: #FFFFFF; 260 | } 261 | 262 | 263 | /* project section */ 264 | .item1, .item2, .item3, .item4, .item5{ 265 | background-position: center; 266 | background-size: cover; 267 | background-repeat: no-repeat; 268 | position: relative; 269 | box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; 270 | } 271 | .item1 { grid-area: one; 272 | background-image: url(../img/project05.png); 273 | 274 | } 275 | .item2 { 276 | grid-area: two; 277 | background-image: url(../img/project02.png); 278 | } 279 | .item3 { grid-area: three; background-image: url(../img/project03.png); } 280 | .item4 { grid-area: four; background-image: url(../img/project04.png); } 281 | .item5 { grid-area: five; background-image: url(../img/project01.png);} 282 | 283 | .project-grid { 284 | display: grid; 285 | grid-template-areas: 286 | 'one one two' 287 | 'three four five'; 288 | gap: 10px; 289 | padding: 10px; 290 | } 291 | 292 | .project-grid > div { 293 | text-align: center; 294 | padding: 100px 0; 295 | font-size: 30px; 296 | border-radius: 10px; 297 | } 298 | .project-grid .layer{ 299 | 300 | background-color: transparent; 301 | opacity: 1; 302 | width: 100%; 303 | height: 100%; 304 | position:absolute; 305 | top:0; 306 | left:0; 307 | border-radius: 10px; 308 | /* transition: background 0.5s, color .5s, font-weight .5s ease-in-out ; Add a 0s transition for the specified properties */ 309 | 310 | display:flex; 311 | justify-content: center; 312 | align-items: center; 313 | gap:15px; 314 | } 315 | /* .project-grid .layer:hover{ 316 | /* background: linear-gradient(90deg, rgba(245, 245, 245, 0.5) 0%, rgb(238, 236, 236,0.5) 81%) !important; */ 317 | 318 | /* } */ 319 | 320 | .layer a{ 321 | border-radius: 10px; 322 | overflow: auto; 323 | padding: 6px 10px; 324 | color: #ececec; 325 | opacity: 0; 326 | transition: 0.7s; 327 | background-color: #ff7777; 328 | border: #F87474; 329 | } 330 | 331 | .layer:hover a{ 332 | opacity: 1; 333 | } 334 | .layer a:hover{ 335 | background-color: #f54343; 336 | border: #F87474; 337 | } 338 | 339 | /* services */ 340 | .service img{ 341 | width: 3.5rem; 342 | padding-bottom: 2rem; 343 | } 344 | 345 | .services{ 346 | display: flex; 347 | justify-content: center; 348 | flex-wrap: wrap; 349 | 350 | } 351 | .service-section{ 352 | max-width: 300px; 353 | padding: 2rem; 354 | border-radius: 10px; 355 | background-color: white; 356 | border: 1px solid rgba(242, 108, 79, 0.1); 357 | margin: 4rem; 358 | transition: 500ms; 359 | box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; 360 | } 361 | 362 | .service-section:hover{ 363 | transform:scale(1.2); 364 | transition:transform 1s ease-in; 365 | } 366 | 367 | /* skills section */ 368 | 369 | .items { 370 | display: grid; 371 | margin: 2rem auto; 372 | border: 2px solid rgb(218, 218, 218); 373 | transition: all .4s ease-in-out; 374 | border-radius: 7px; 375 | background-color: #ffffff; 376 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); 377 | padding: 25px 25px 25px 25px; 378 | place-items: center; 379 | grid-gap: 10px; 380 | margin: 20px; 381 | padding: 20px; 382 | 383 | 384 | } 385 | 386 | .items:hover { 387 | transform: scale(1.1); 388 | } 389 | 390 | .items img { 391 | width: 5.5rem; 392 | place-items: centre; 393 | } 394 | 395 | .items p { 396 | font-weight: 400; 397 | } 398 | .skill{ 399 | width: 250px; 400 | 401 | 402 | 403 | } 404 | 405 | .skills { 406 | display: grid; 407 | justify-items: center; 408 | grid-gap: 4px; 409 | text-align: center; 410 | align-items: center; 411 | justify-content: space-evenly; 412 | 413 | } 414 | @media (min-width: 1024px) { 415 | .skills { 416 | grid-template-columns: repeat(4, 1fr); 417 | grid-template-rows: repeat(3, 1fr); 418 | 419 | } 420 | 421 | } 422 | 423 | /* Tablet View: 3 columns */ 424 | @media (max-width: 1023px) and (min-width: 768px) { 425 | .skills { 426 | grid-template-columns: repeat(3, 1fr); 427 | grid-template-rows: repeat(4, 1fr); 428 | 429 | } 430 | 431 | } 432 | 433 | /* Mobile View: 2 columns */ 434 | @media (max-width: 767px) { 435 | .skills { 436 | grid-template-columns: repeat(2, 1fr); 437 | grid-template-rows: repeat(6, 1fr); 438 | 439 | } 440 | 441 | } 442 | /* 443 | .items{ 444 | margin: 2rem auto;; 445 | } 446 | 447 | .items img{ 448 | width: 3.5rem; 449 | } 450 | .items p{ 451 | font-weight: 500; 452 | } 453 | .skills{ 454 | display: flex; 455 | justify-content: center; 456 | flex-wrap: wrap; 457 | align-items: center; 458 | text-align: center; 459 | 460 | } 461 | 462 | .skill{ 463 | width: 220px; 464 | 465 | } 466 | 467 | .border1{ 468 | border-color:rgba(242, 108, 79, 0.5); 469 | border-width: 0px 0px 1px 0px; 470 | border-style: solid; 471 | } 472 | 473 | .border_bottom{ 474 | border-color:rgba(242, 108, 79, 0.5); 475 | border-width: 0px 0px 1px 0px; 476 | border-style: solid; 477 | } 478 | .border_right, .border3{ 479 | border-right: 1px solid rgba(242, 108, 79, 0.5); 480 | } 481 | .border3, .border7{ 482 | border-left: 1px solid rgba(242, 108, 79, 0.5); 483 | } 484 | .border10{ 485 | border-right: 1px solid rgba(242, 108, 79, 0.5); 486 | } 487 | 488 | */ 489 | 490 | /* ----------cta-------- */ 491 | .pos-relative{ 492 | position: relative; 493 | } 494 | 495 | .pos-relative img{ 496 | position: absolute; 497 | width: 200px; 498 | left: 0; 499 | bottom: 0; 500 | opacity: 0.5; 501 | } 502 | 503 | /* -----------ABOUT SECTION-------------- */ 504 | 505 | .img-sec img{ 506 | 507 | width: 350px; 508 | 509 | 510 | } 511 | 512 | .About-section .homeBtn { 513 | text-decoration: none; 514 | font-family: 'Montserrat'; 515 | line-height: 3.2rem; 516 | font-weight: 500; 517 | font-size: 1.4rem; 518 | color: white; 519 | background: #F26C4F; 520 | border-radius: .2rem; 521 | padding: 1.2rem 1.6rem; 522 | margin-right: 2rem; 523 | cursor: pointer; 524 | /* transition: background .5s, border 0.5s, color 0.5s ease-in-out; */ 525 | } 526 | 527 | .About-section .homeBtn:hover { 528 | background: linear-gradient(90deg, rgba(79,1,1,1) 0%, rgba(242,79,79,1) 81%) !important; ; /* Add your desired gradient colors */ 529 | color: white; 530 | font-weight: 500; 531 | } 532 | 533 | 534 | /* --------------contact ------------------ */ 535 | 536 | .contact img{ 537 | width: 50px; 538 | } 539 | .contact a{ 540 | display: block; 541 | text-decoration: none; 542 | color: #000000; 543 | font-family: 'Nunito'; 544 | font-style: normal; 545 | font-weight: 400; 546 | font-size: 1.8rem; 547 | line-height: 150%; 548 | padding: 1.5rem 0; 549 | } 550 | .social-media{ 551 | margin-top: 4rem; 552 | } 553 | .social-media img{ 554 | width: 40px; 555 | transition: 300ms ease-in; 556 | 557 | } 558 | .social-media img:hover{ 559 | transform:scale(1.2) rotate(-45deg); 560 | } 561 | .social-media a{ 562 | margin: auto 1.5rem; 563 | } 564 | 565 | .contact-section .row{ 566 | display: flex; 567 | /* flex-direction:unset; */ 568 | } 569 | 570 | /* form design */ 571 | input, textarea, button[type="submit"]{ 572 | border-radius: 20px; 573 | background: #FEF4F2; 574 | border: 1px solid rgba(0, 0, 0, 0.2); 575 | 576 | } 577 | 578 | textarea{ 579 | width: 90%; 580 | height: 180px; 581 | text-indent: 20px; 582 | } 583 | 584 | input[type="text"]{ 585 | width: 90%; 586 | height: 40px; 587 | margin: 10px auto; 588 | 589 | 590 | } 591 | input { 592 | text-indent:20px; 593 | } 594 | input[type="email"]{ 595 | width: 44%; 596 | height: 40px; 597 | margin: 10px auto; 598 | 599 | } 600 | input[type="number"]{ 601 | width: 44%; 602 | height: 40px; 603 | margin: 10px auto; 604 | } 605 | input[type="submit"]{ 606 | width: 90%; 607 | height: 40px; 608 | margin: 20px auto; 609 | 610 | } 611 | 612 | ::placeholder { 613 | padding-left: 15px; 614 | font-family: 'Nunito'; 615 | font-style: normal; 616 | font-weight: 500; 617 | font-size: 14px; 618 | line-height: 41px; 619 | color: rgba(41, 41, 41, 0.5); 620 | } 621 | button[type="submit"] { 622 | background: #F87474; 623 | border: 1px solid #F87474; 624 | border-radius: 20px; 625 | font-family: 'Nunito'; 626 | font-style: normal; 627 | font-weight: 600; 628 | font-size: 16px; 629 | line-height: 41px; 630 | color: #FFFFFF; 631 | margin-top: 20px; 632 | padding: 0 15px; 633 | /* transition: background .5s, border 0.5s, color 0.5s ease-in-out; Add a 0s transition for the specified properties */ 634 | } 635 | 636 | button[type="submit"]:hover { 637 | background: linear-gradient(90deg, rgba(79,1,1,1) 0%, rgba(242,79,79,1) 81%) !important; ; /* Add your desired gradient colors */ 638 | border: 1px solid #ffffff; 639 | color: rgb(255, 255, 255); 640 | } 641 | 642 | /* footer */ 643 | 644 | footer{ 645 | background-color: #FEF4F2; 646 | /* flex-basis: 30%; */ 647 | } 648 | .footer{ 649 | display: flex; 650 | justify-content: flex-start; 651 | flex-wrap: wrap; 652 | } 653 | .footer .navbar-brand:hover{ 654 | color: #ff7777; 655 | } 656 | .footer div{ 657 | width: 32%; 658 | } 659 | .social-links img{ 660 | width: 40px; 661 | transition: 300ms ease-in; 662 | } 663 | .social-links img:hover{ 664 | transform:scale(1.2) rotate(-45deg); 665 | 666 | } 667 | .social-links a img{ 668 | margin-bottom: 20px; 669 | 670 | } 671 | 672 | ul{ 673 | list-style: none; 674 | } 675 | .quike-links ul li{ 676 | margin-bottom: 25px; 677 | 678 | } 679 | .quike-links a:hover{ 680 | color: #212121; 681 | text-decoration: underline; 682 | 683 | } 684 | a{ 685 | text-decoration: none; 686 | color: rgb(67, 67, 67); 687 | font-size: medium; 688 | font-weight: 600; 689 | 690 | } 691 | 692 | .footer-bottom{ 693 | color: #ececec; 694 | font-family: 'Nunito'; 695 | font-style: normal; 696 | font-weight: 400; 697 | font-size: 14px; 698 | line-height: 22px; 699 | text-align: center; 700 | 701 | background-color: rgba(0, 0, 0, 0.9); 702 | 703 | } 704 | 705 | .back-to-top { 706 | margin: 0 !important; 707 | padding: 0 !important; 708 | background: #fff; 709 | height: 0px; 710 | width: 0px; 711 | overflow: hidden; 712 | border-radius: 50px; 713 | color: transparent; 714 | clear: both; 715 | visibility: hidden; 716 | position: fixed; 717 | cursor: pointer; 718 | display: block; 719 | border: none; 720 | right: 50px; 721 | bottom: 75px; 722 | font-size: 0px; 723 | outline: 0 !important; 724 | z-index: 99; 725 | transition: all .3s ease-in-out; 726 | } 727 | 728 | .back-to-top:hover, 729 | .back-to-top:active, 730 | .back-to-top:focus { 731 | outline: 0 !important; 732 | } 733 | 734 | .back-to-top::before, 735 | .back-to-top::after { 736 | content: ""; 737 | display: block; 738 | /* vertical-align: middle; */ 739 | border-bottom: solid 10px #EA5D5F; 740 | border-left: solid 10px transparent; 741 | line-height: 0; 742 | border-right: solid 10px transparent; 743 | height: 0; 744 | margin: 18px auto 0; 745 | width: 0; 746 | border-radius:20px; 747 | visibility: hidden; 748 | } 749 | 750 | .back-to-top_show::after, 751 | .back-to-top_show::before { 752 | visibility: visible; 753 | } 754 | 755 | .back-to-top::after { 756 | border-bottom-color:#fff; 757 | position: relative; 758 | top:-24px; 759 | } 760 | 761 | .back-to-top_show { 762 | display: block; 763 | background: #fff; 764 | color: #00ab6c; 765 | font-size: 25px; 766 | right: 25px; 767 | bottom: 50px; 768 | height: 50px; 769 | width: 50px; 770 | visibility: visible; 771 | box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25); 772 | } 773 | 774 | .back-to-top_show:active { 775 | box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25); 776 | } 777 | 778 | 779 | 780 | .pricing-plans { 781 | display: flex; 782 | flex-wrap: wrap; 783 | justify-content: center; 784 | 785 | } 786 | 787 | .card { 788 | display: flex; 789 | flex-wrap: wrap; 790 | justify-content: center; 791 | 792 | 793 | width: 260px; 794 | max-width: 100%; 795 | border: 2px solid black; 796 | border-radius: 7px; 797 | padding: 23px; 798 | text-align: center; 799 | margin: 10px; 800 | display: inline-block; 801 | margin-bottom: 40px; 802 | align-items: center; 803 | } 804 | 805 | .title1 { 806 | font-size: 25px; 807 | text-align: center; 808 | font-family: "Inter", cursive; 809 | color: #F26C4F; 810 | } 811 | 812 | .pricing { 813 | font-size: 18px; 814 | margin: 10px; 815 | font-family: "Inter", cursive; 816 | } 817 | 818 | .line { 819 | width: 205px; 820 | align-items: center; 821 | border: 1px solid rgb(144, 143, 143); 822 | margin-top: 8px; 823 | } 824 | 825 | .item { 826 | font-size: 16px; 827 | margin: 20px 0; 828 | text-align: left; 829 | font-family: "Inter", cursive; 830 | } 831 | 832 | .button { 833 | margin-top: 9px; 834 | border: 1px solid #F26C4F; 835 | background-color: white; 836 | color: #F26C4F; 837 | border-radius: 5px; 838 | padding: 8px 18px; 839 | cursor: pointer; 840 | font-family: "Inter", cursive; 841 | } 842 | 843 | /* break point at 768px */ 844 | @media screen and (max-width: 768px){ 845 | .card { 846 | align-items: center; 847 | } 848 | } 849 | 850 | 851 | @media screen and (min-width:768px) { 852 | 853 | .border_bottom{ 854 | border: none; 855 | } 856 | 857 | } 858 | @media screen and (max-width:479px) { 859 | .skill{ 860 | width: 160px; 861 | } 862 | } 863 | 864 | @media screen and (max-width:360px) { 865 | .skill{ 866 | width: 150px; 867 | } 868 | 869 | } 870 | 871 | @media screen and (max-width:768px) { 872 | 873 | .border3, .border7, .border10{ 874 | border-left: none; 875 | } 876 | 877 | 878 | .border2{ 879 | border-width: 0px 0px 1px 0px; 880 | } 881 | .container-fluid{ 882 | max-width: 95%; 883 | } 884 | body{ 885 | text-align: center; 886 | } 887 | 888 | .navbar-brand{ 889 | font-size: 3.2rem; 890 | } 891 | /* a.navbar-brand:hover{ 892 | color: #F87474 !important; 893 | } */ 894 | .navbar-collapse{ 895 | padding-bottom: 2rem; 896 | 897 | } 898 | .intro{ 899 | padding: 1rem 0; 900 | } 901 | .row{ 902 | display: flex; 903 | flex-flow: column-reverse; 904 | } 905 | .first-section img{ 906 | max-width: 15rem; 907 | 908 | 909 | } 910 | .first-section{ 911 | padding-top: 4rem; 912 | } 913 | .title{ 914 | display: none; 915 | } 916 | 917 | /* project grid */ 918 | 919 | .project-grid { 920 | display: grid; 921 | grid-template-areas: 922 | 'one' 923 | 'two' 924 | 'three' 925 | 'four' 926 | 'five'; 927 | gap: 40px; 928 | margin: 1.2rem 2rem; 929 | } 930 | 931 | .project-grid .layer{ 932 | position: relative; 933 | 934 | } 935 | .layer a{ 936 | opacity: 1; 937 | background-color: #ff7777; 938 | border: #F87474; 939 | } 940 | /* skills */ 941 | 942 | .skill{ 943 | width: 170px; 944 | } 945 | form{ 946 | display: block; 947 | } 948 | /* footer */ 949 | .footer div{ 950 | width: 100%; 951 | } 952 | .social-links{ 953 | display: flex; 954 | justify-content: center; 955 | } 956 | .social-links a img{ 957 | margin: auto 20px; 958 | 959 | } 960 | .footer-bottom{ 961 | font-size: 11px; 962 | } 963 | } 964 | 965 | 966 | 967 | @media screen and (min-width:768px) and (max-width: 992px){ 968 | 969 | span.toggler-icon{ 970 | display: none; 971 | } 972 | .skill{ 973 | width: 170px; 974 | } 975 | .border_bottom{ 976 | border-width: 0px 0px 1px 0px; 977 | border-style: solid; 978 | } 979 | .borderSL, .border3{ 980 | border-right-width: none; 981 | } 982 | .border3{ 983 | border-left: none; 984 | } 985 | } 986 | 987 | --------------------------------------------------------------------------------