├── images ├── js logo.png ├── Capture1.JPG ├── Capture2.JPG ├── bookstore.PNG ├── css logo.png ├── html logo.png ├── to do list.png ├── gym project.png ├── tonic project.png ├── multipost project.png ├── printing project.png ├── mealGallery screeshot.png ├── contact form shapes-mobile.svg ├── contact form background shapes.svg ├── header-shapes mobile@2x.svg └── Header bg.svg ├── js ├── storage-data.js ├── script.js └── popup-window.js ├── MIT.md ├── .github └── workflows │ └── linters.yml ├── index.html ├── README.md └── style.css /images/js logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariegrace31/portfolio_project/HEAD/images/js logo.png -------------------------------------------------------------------------------- /images/Capture1.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariegrace31/portfolio_project/HEAD/images/Capture1.JPG -------------------------------------------------------------------------------- /images/Capture2.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariegrace31/portfolio_project/HEAD/images/Capture2.JPG -------------------------------------------------------------------------------- /images/bookstore.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariegrace31/portfolio_project/HEAD/images/bookstore.PNG -------------------------------------------------------------------------------- /images/css logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariegrace31/portfolio_project/HEAD/images/css logo.png -------------------------------------------------------------------------------- /images/html logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariegrace31/portfolio_project/HEAD/images/html logo.png -------------------------------------------------------------------------------- /images/to do list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariegrace31/portfolio_project/HEAD/images/to do list.png -------------------------------------------------------------------------------- /images/gym project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariegrace31/portfolio_project/HEAD/images/gym project.png -------------------------------------------------------------------------------- /images/tonic project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariegrace31/portfolio_project/HEAD/images/tonic project.png -------------------------------------------------------------------------------- /images/multipost project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariegrace31/portfolio_project/HEAD/images/multipost project.png -------------------------------------------------------------------------------- /images/printing project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariegrace31/portfolio_project/HEAD/images/printing project.png -------------------------------------------------------------------------------- /images/mealGallery screeshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariegrace31/portfolio_project/HEAD/images/mealGallery screeshot.png -------------------------------------------------------------------------------- /js/storage-data.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector('form'); 2 | const email = document.getElementById('email'); 3 | const Fullname = document.getElementById('fullname'); 4 | const textArea = document.getElementById('textarea'); 5 | function savedData() { 6 | const formData = { 7 | fullname: Fullname.value, 8 | email: email.value, 9 | textarea: textArea.value, 10 | }; 11 | localStorage.setItem('formData', JSON.stringify(formData)); 12 | } 13 | 14 | form.addEventListener('submit', savedData); 15 | 16 | // get item from the local storage // 17 | 18 | window.addEventListener('load', () => { 19 | const dataStorage = JSON.parse(localStorage.getItem('formData')); 20 | if (dataStorage) { 21 | email.value = dataStorage.email; 22 | Fullname.value = dataStorage.fullname; 23 | textArea.value = dataStorage.textarea; 24 | } 25 | }); 26 | -------------------------------------------------------------------------------- /MIT.md: -------------------------------------------------------------------------------- 1 | ## Copyright (c) 2024 Marie Grâce Bahati 2 | MIT license 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | -------------------------------------------------------------------------------- /images/contact form shapes-mobile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | const hamburger = document.getElementById('hamburger'); 2 | const closing = document.getElementById('closingIcon'); 3 | const links = document.querySelectorAll('.mobileLinks'); 4 | const menu = document.querySelector('.nav-menu'); 5 | const body = document.querySelector('body'); 6 | 7 | // menu mobile function 8 | 9 | hamburger.addEventListener('click', () => { 10 | menu.classList.toggle('active'); 11 | body.classList.toggle('active'); 12 | }); 13 | 14 | closing.addEventListener('click', () => { 15 | menu.classList.toggle('active'); 16 | }); 17 | 18 | // this funcition is for mobile functionality 19 | links.forEach((link) => { 20 | link.addEventListener('click', () => { 21 | menu.classList.toggle('active'); 22 | body.classList.toggle('active'); 23 | }); 24 | }); 25 | 26 | // validation form 27 | 28 | const form = document.querySelector('.form'); 29 | const email = document.getElementById('email'); 30 | const errorMessage = document.querySelector('.error'); 31 | const regex = /^[a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,4}$/g; 32 | 33 | function validationForm(e) { 34 | e.preventDefault(); 35 | if (regex.test(email.value)) { 36 | form.submit(); 37 | form.reset(); 38 | } else { 39 | errorMessage.innerText = 'Email should be in lowercase'; 40 | } 41 | } 42 | 43 | form.addEventListener('submit', (e) => { 44 | validationForm(e); 45 | }); -------------------------------------------------------------------------------- /images/contact form background shapes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v3 14 | - uses: actions/setup-node@v3 15 | with: 16 | node-version: "18.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.11.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-22.04 24 | steps: 25 | - uses: actions/checkout@v3 26 | - uses: actions/setup-node@v3 27 | with: 28 | node-version: "18.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@7.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-22.04 38 | steps: 39 | - uses: actions/checkout@v3 40 | - uses: actions/setup-node@v3 41 | with: 42 | node-version: "18.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-22.04 52 | steps: 53 | - uses: actions/checkout@v3 54 | - uses: actions/setup-node@v3 55 | with: 56 | node-version: "18.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | nodechecker: 64 | name: node_modules checker 65 | runs-on: ubuntu-22.04 66 | steps: 67 | - uses: actions/checkout@v3 68 | - name: Check node_modules existence 69 | run: | 70 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi -------------------------------------------------------------------------------- /images/header-shapes mobile@2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /images/Header bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /js/popup-window.js: -------------------------------------------------------------------------------- 1 | const works = [{ 2 | title: 'To Do List', 3 | image: 'images/to do list.png', 4 | tags: ['Web development', 'Front End Dev', 2023], 5 | description: `This website allows people to add tasks and remove the completed ones.`, 6 | languages: ['HTML', 'CSS', 'JavaScript'], 7 | live: 'https://mariegrace31.github.io/To-do-List/dist/', 8 | repo: 'https://github.com/mariegrace31/To-do-List', 9 | }, { 10 | title: 'Meal Gallery', 11 | image: 'images/mealGallery screeshot.png', 12 | tags: ['WEBPACK', 'Front End Dev', 2023], 13 | description: `Meal Gallery is an innovative app that allows you to discover a variety of delicious meals 14 | from around the world. Whether you're an experienced chef or simply a food enthusiast, this app is perfect for you.`, 15 | languages: ['HTML', 'CSS', 'JavaScript'], 16 | live: 'https://mariegrace31.github.io/Meal_Gallery/dist/', 17 | repo: 'https://github.com/mariegrace31/Meal_Gallery', 18 | }, { 19 | title: 'Bookstore', 20 | image: 'images/bookstore.PNG', 21 | tags: ['Gitflow', 'Front End Dev', 2023], 22 | description: `The Bookstore is a website that displays a list of books, adds a book and, removes a selected book.`, 23 | languages: ['React', 'JavaScript', 'CSS'], 24 | live: 'https://mg-bookstore.netlify.app/', 25 | repo: 'https://github.com/mariegrace31/bookstore.git', 26 | }, 27 | { 28 | title: 'Air-pollution', 29 | image: 'images/Capture1.JPG', 30 | tags: ['CAPSTONE', 'Front End Dev', 2023], 31 | description: `This capstone is about a mobile web application to check a list of metrics(in this case,air pollution data)`, 32 | languages: ['React', 'JavaScript', 'SASS'], 33 | live: 'https://airpollution1.netlify.app/', 34 | repo: 'https://github.com/mariegrace31/react_capstone.git', 35 | }]; 36 | 37 | const worksSec = document.querySelector('.body'); 38 | 39 | works.forEach((work, i) => { 40 | const card = document.createElement('div'); 41 | card.classList.add(`works${i + 1}`, 'animate'); 42 | card.innerHTML = ` 43 | 44 |
45 |

${work.title}

46 | 51 |

52 | ${work.description} 53 |

54 |
55 | 58 |
59 | 60 |
61 | `; 62 | worksSec.appendChild(card); 63 | }); 64 | 65 | // modal functionality 66 | function popUp() { 67 | // define empty array to add the details to it 68 | const worksArr = []; 69 | 70 | works.forEach((work, i) => { 71 | const popWindow = document.createElement('div'); 72 | // change this to works1 class to 'active' for pop up modal 73 | popWindow.classList.add('modal', 'active'); 74 | popWindow.innerHTML = 75 | `
76 |
77 |

${work.title}

78 | 79 |
80 | 85 |
86 | 87 |
88 |
89 |
90 |

91 | ${work.description} 92 |

93 |
94 |
95 |
    96 | ${work.languages.map((item) => `
  • ${item}
    • `).join('')} 97 |
98 |
99 |
100 | 101 | 102 |
103 |
104 |
105 |
106 | `; 107 | worksArr.push(popWindow); 108 | }); 109 | 110 | return worksArr; 111 | } 112 | 113 | function forModal() { 114 | // here we make selector all to return an array value so we can iterate through it 115 | const showProBtn = document.querySelectorAll('.showProject'); 116 | 117 | // define a variable to have the window details 118 | const popWindow = popUp(); 119 | // loop throgh the projects buttons 120 | for (let i = 0; i < showProBtn.length; i += 1) { 121 | // add the event to each see project button 122 | showProBtn[i].addEventListener('click', () => { 123 | // remove the default classes 124 | popWindow[i].classList.add('active'); 125 | 126 | // append the detail window to the work section 127 | worksSec.appendChild(popWindow[i]); 128 | 129 | const close = document.querySelectorAll('.closeIcon'); 130 | 131 | close.forEach((btn) => { 132 | btn.addEventListener('click', () => { 133 | btn.parentElement.parentElement.parentElement.classList.remove('active'); 134 | }); 135 | }); 136 | }); 137 | } 138 | } 139 | 140 | forModal(); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | My portfolio 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 29 |
30 | 31 | 36 |
37 |
38 |
39 |

40 | Hello 👋,
Glad to see you! 41 |

42 |

43 | I'm Marie-Grace, a dedicated software developer ready to help you create your ideal product or website. 44 | Feel free to explore my portfolio to see my work and experience. If you like 45 | what you see and have a project in mind, don't hesitate to reach out. Let's create something amazing togeher! 46 |

47 |

LET'S CONNECT

48 |
49 |
    50 |
  • 51 | 52 |
    • 53 |
  • 54 | 55 |
    • 56 |
  • 57 | 58 |
    • 59 |
60 |
61 |
62 |
63 |
64 | 65 |
66 | 67 |
68 | 69 |
70 |
71 |
72 |

About Myself

73 |

74 | Hello!I'm a software developer and I can help you build a product , 75 | feature or website. Look through some of my work and experience! If 76 | you like what you see and have a project you need coded, don't 77 | hesitate to contact me. 78 |

79 |

LET'S CONNECT

80 |
81 |
    82 |
  • 83 | 84 |
    • 85 |
  • 86 | 87 |
    • 88 |
  • 89 | 90 |
    • 91 |
92 |
93 | 94 |
95 |
96 |
97 |
98 |
    99 |
  • Languages
    • 100 |
    101 |
    102 | 103 |

    JavaScript

    104 |
    105 |
    106 | 107 |

    HTML

    108 |
    109 |
    110 | 111 |

    CSS

    112 |
    113 |
    114 |
  • Frameworks
    • 115 |
    116 |
  • Skills
    • 117 |
    118 |
119 |
120 |
121 |
122 |
123 |
124 |

Contact me

125 |

126 | If you have an application you are interested in developing, a feature 127 | that you need built or a project that needs coding. I'd love to help 128 | with it! 129 |

130 |
131 |
132 | 133 | 134 | 135 | 136 |

137 | 138 | 139 |
140 |
141 |
142 |
143 | 144 | 145 | 146 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | # **Portfolio** 6 |

This portfolio project showcases my skills and expertise in software development. It includes a collection of my best projects, demonstrating proficiency in various programming languages, frameworks, and technologies. Explore the repository to witness my growth as a developer and discover the innovative projects I've created.

7 | 8 | --- 9 |
10 |
11 |
12 |
13 | 14 | 15 | ## Table of Contents 📗 16 | - [Table of Contents 📗](#table-of-contents-) 17 | - [**Built With 🛠**](#built-with-) 18 | - [**Key Features 🏷️** ](#key-features-️-) 19 | - [Live Demo🚀](#live-demo) 20 | - [**Prerequisites 🧱**](#prerequisites-) 21 | - [**Setup ⚙️**](#setup-️) 22 | - [\*\* 🏗️\*\*](#-️) 23 | - [**Usage 📂**](#usage-) 24 | - [**Future features**](#future-features) 25 | - [**Authors 👤**:](#authors-) 26 | - [**Contributing 🤝**](#contributing-) 27 | - [**Show your support 🌟**](#show-your-support-) 28 | - [**Acknowledgments 🙏**](#acknowledgments-) 29 | - [License 📝](#license-) 30 | 31 | --- 32 | 33 | ## **Built With 🛠**
34 | 35 | 41 | 42 |
43 | 44 | --- 45 | 46 | ### **Key Features 🏷️** 47 | 48 | - [Feature_1]: Project Showcase 49 | - [Feature_2]: Skills and Technologies 50 | - [Feature_3]: About Me Section and contact information 51 | 52 |

(back to top)

53 |
54 | 55 | --- 56 | 57 | ## Live Demo 🚀 58 | 59 | This project is hosted on GitHub pages, so if you want to check it online, please click [here](https://mariegrace31.github.io/portfolio_project/). 60 | 61 |

(back to top)

62 |
63 | 64 | --- 65 | 66 | ## **Prerequisites 🧱** 67 | 68 | In order to run this project you need: 69 | 70 | - A GitHub account 71 | - A web browser to view output e.g. [Microsoft Edge](https://www.microsoft.com/en-us/edge). 72 | - An IDE e.g [Visual studio code](https://code.visualstudio.com/). 73 | - [A terminal](https://code.visualstudio.com/docs/terminal/basics). 74 | 75 |
76 | 77 | --- 78 | 79 | ## **Setup ⚙️** 80 | 81 | Clone this repository:
82 | ```sh 83 | git clone https://github.com/mariegrace31/portfolio_project.git 84 | 85 | ``` 86 | Navigate to the folder 87 | ``` 88 | cd portfolio_project 89 | ``` 90 | Checkout the branch 91 | ``` 92 | git checkout main 93 | ``` 94 |
95 | 96 | --- 97 | 98 | ## ** 🏗️** 99 | 100 | Install all dependencies: 101 | 102 | ```sh 103 | npm install 104 | ``` 105 | Run the following code to fix possible JavaScript linter errors: 106 | ``` 107 | npx eslint . --fix 108 | ``` 109 | 110 | --- 111 | 112 | ## **Usage 📂** 113 | Open the page in the browser using "open with live server" in your Vs Code. 114 | 115 |

(back to top)

116 | 117 | --- 118 | 119 | 120 | ## **Authors 👤**: 121 | 122 | 👤 **Author1** 123 | 124 | - GitHub: [@mariegrace31](https://github.com/mariegrace31) 125 | - Twitter: [@mariegracebmg](https://twitter.com/mariegracebmg) 126 | - LinkedIn: [Marie Grace Bahati](https://linkedin.com/in/marie-gr%C3%A2ce-bahati-546765224) 127 | 128 | 129 | 👤 **Author2** 130 | - Github: [@tusinahmed] (https://github.com/tusinahmed) 131 | 132 | 👤 **Author3** 133 | - Github: [@Mofuhidy] (https://github.com/Mofuhidy) 134 | 135 |

(back to top)

136 | 137 |
138 | 139 | --- 140 | 141 | ## **Contributing 🤝** 142 | 143 | If you have suggestions 📝, ideas 🤔, or bug reports 🐛, please feel free to open an [issue](https://github.com/mariegrace31/portfolio_project/issues) on GitHub. 144 | Remember, every contribution, no matter how big or small, makes a difference. 145 | 146 |

(back to top)

147 | 148 |
149 | 150 | --- 151 | 152 | ## **Show your support 🌟** 153 | 154 | Thank you for taking the time to explore my GitHub project! Your support means a lot to me. If you find my project valuable and would like to contribute, here are a few ways you can support me: 155 | 156 | - **Star the project ⭐️**: Show your appreciation by starring this GitHub repository. It helps increase visibility and lets others know that the project is well-received. 157 | 158 | - **Fork the project 🍴 🎣**: If you're interested in making improvements or adding new features, feel free to fork the project. You can work on your own version and even submit pull requests to suggest changes. 159 | 160 | - **Share with others 🗺️**: Spread the word about this project. Share it on social media, mention it in relevant forums or communities, or recommend it to colleagues and friends who might find it useful. 161 | 162 |

(back to top)

163 | 164 |
165 | 166 | --- 167 | 168 | ## **Acknowledgments 🙏** 169 | 170 | I would like to express our sincere gratitude to [Microverse](https://github.com/microverseinc), the dedicated reviewers, and collaborators. Your unwavering support and feedback have played an immense role in making this journey a resounding success. Thank you for being an integral part of our achievements. 171 | 172 |

(back to top)

173 | 174 |
175 | 176 | --- 177 | 178 | ## License 📝 179 | 180 | This project is [MIT](./MIT.md) licensed. 181 | 182 |

(back to top)

183 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: 'Poppins', sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | scroll-behavior: smooth; 7 | } 8 | 9 | body.active { 10 | overflow-y: hidden; 11 | } 12 | 13 | nav { 14 | display: flex; 15 | justify-content: space-between; 16 | padding: 20px 40px; 17 | background-color: #fff; 18 | } 19 | 20 | .nav-links { 21 | display: none; 22 | } 23 | 24 | body { 25 | background-color: #f7f7f9; 26 | } 27 | 28 | .main { 29 | background: url(images/header-shapes\ mobile@2x.svg); 30 | display: flex; 31 | padding: 90px 18px; 32 | background-repeat: no-repeat; 33 | background-color: #fff; 34 | border-bottom-left-radius: 70px; 35 | height: 810px; 36 | } 37 | 38 | .logo { 39 | color: #6070ff; 40 | text-decoration: none; 41 | } 42 | 43 | .fa-bars { 44 | color: #6070ff; 45 | } 46 | 47 | h1, 48 | h2 { 49 | color: #172b4d; 50 | font-size: 35px; 51 | margin: 9px; 52 | } 53 | 54 | .presentation, 55 | .presentation2 { 56 | color: #344563; 57 | font-size: 24px; 58 | margin-left: 0; 59 | padding: 12px; 60 | } 61 | 62 | .presentation3 { 63 | color: #344563; 64 | font-size: 15px; 65 | margin-left: -10px; 66 | padding: 15px; 67 | } 68 | 69 | .connect { 70 | color: #7f8cff; 71 | font-size: 16px; 72 | margin: 9px; 73 | padding: 10px; 74 | } 75 | 76 | .icons { 77 | display: flex; 78 | margin: 9px; 79 | padding: 12px; 80 | } 81 | 82 | .icons ul { 83 | list-style: none; 84 | display: flex; 85 | gap: 15px; 86 | } 87 | 88 | .icons ul li a { 89 | color: #505f79; 90 | } 91 | 92 | .logo :hover { 93 | text-decoration: underline; 94 | } 95 | 96 | .icons ul li a :hover { 97 | color: #7f8cff; 98 | } 99 | 100 | .body { 101 | margin-top: 100px; 102 | } 103 | 104 | .works1, 105 | .works2, 106 | .works3, 107 | .works4 { 108 | padding: 25px 17px; 109 | display: flex; 110 | flex-direction: column; 111 | border: 1px solid #dfe1e6; 112 | border-radius: 16px; 113 | margin: 30px; 114 | margin-left: 22px; 115 | align-items: center; 116 | background-color: #fff; 117 | } 118 | 119 | .title { 120 | color: #172b4d; 121 | font-size: 24px; 122 | } 123 | 124 | .photo1, 125 | .photo2, 126 | .photo3, 127 | .photo4 { 128 | width: 100%; 129 | } 130 | 131 | .canopy { 132 | display: flex; 133 | justify-content: flex-start; 134 | gap: 23px; 135 | font-size: 13px; 136 | } 137 | 138 | .can { 139 | list-style: none; 140 | color: #344563; 141 | } 142 | 143 | .dev { 144 | color: #c1c7d0; 145 | } 146 | 147 | .languages ul { 148 | list-style: none; 149 | display: flex; 150 | color: #6070ff; 151 | margin-left: -15px; 152 | } 153 | 154 | .languages ul li { 155 | margin: 18px; 156 | padding: 8px; 157 | } 158 | 159 | .lang { 160 | background: #ebebff; 161 | border-radius: 8px; 162 | } 163 | 164 | .button, 165 | .button-source { 166 | border: 1px solid #6070ff; 167 | border-radius: 8px; 168 | padding: 15px; 169 | width: 160px; 170 | text-align: center; 171 | color: #396df2; 172 | font-size: 18px; 173 | background-color: #fff; 174 | } 175 | 176 | .about { 177 | padding: 90px 18px; 178 | display: flex; 179 | } 180 | 181 | .About { 182 | background-color: #fff; 183 | border-top-right-radius: 100px; 184 | padding-bottom: 100px; 185 | } 186 | 187 | .js { 188 | display: flex; 189 | gap: 20px; 190 | border-radius: 8px; 191 | background-color: #f7f7f9; 192 | margin: 20px; 193 | padding: 10px; 194 | color: #253858; 195 | align-items: center; 196 | } 197 | 198 | .list { 199 | display: flex; 200 | justify-content: space-between; 201 | width: 85%; 202 | font-size: 25px; 203 | margin: 15px 20px; 204 | } 205 | 206 | .langs { 207 | padding: 4px 10px; 208 | } 209 | 210 | hr { 211 | color: #dfe1e6; 212 | } 213 | 214 | .button:hover { 215 | cursor: pointer; 216 | color: #fff; 217 | background-color: #396df2; 218 | } 219 | 220 | .lang:hover { 221 | color: #172b4d; 222 | } 223 | 224 | .contact { 225 | background-image: url(images/contact\ form\ shapes-mobile.svg); 226 | background-repeat: no-repeat; 227 | background-color: #6070ff; 228 | background-position: right; 229 | border-top-left-radius: 55px; 230 | height: 779px; 231 | margin-top: -70px; 232 | } 233 | 234 | .contact-text { 235 | color: #ebebff; 236 | margin: 30px; 237 | text-align: center; 238 | font-size: 20px; 239 | } 240 | 241 | .contact-head { 242 | color: #ebebff; 243 | padding-top: 100px; 244 | } 245 | 246 | .form { 247 | margin: 15px; 248 | padding: 20px; 249 | } 250 | 251 | .form-info { 252 | display: flex; 253 | flex-direction: column; 254 | align-items: center; 255 | } 256 | 257 | input { 258 | background-color: #ffff; 259 | border: 1px solid #cfd8dc; 260 | border-radius: 8px; 261 | padding: 15px; 262 | margin: 8px 5px; 263 | color: #172b4d; 264 | width: 90%; 265 | } 266 | 267 | textarea { 268 | border: 1px solid #cfd8dc; 269 | border-radius: 8px; 270 | color: #b3bac5; 271 | width: 90%; 272 | height: 120px; 273 | margin: 5px; 274 | padding-top: 3px; 275 | padding-left: 12px; 276 | } 277 | 278 | .btn { 279 | border: 1px solid #6070ff; 280 | border-radius: 8px; 281 | background-color: #fff; 282 | padding: 15px; 283 | width: 160px; 284 | text-align: center; 285 | color: #396df2; 286 | font-size: 18px; 287 | align-self: normal; 288 | margin: 15px 15px; 289 | } 290 | 291 | .btn:hover { 292 | color: #fff; 293 | background-color: #6070ff; 294 | } 295 | 296 | textarea:hover { 297 | border: 1px solid #252527; 298 | } 299 | 300 | input:hover { 301 | border: 1px solid #253858; 302 | } 303 | 304 | /* DOM */ 305 | 306 | .nav-menu ul { 307 | display: flex; 308 | flex-direction: column; 309 | padding: 30px; 310 | list-style: none; 311 | margin-top: 20px; 312 | } 313 | 314 | .nav-menu { 315 | background-color: #6070ff; 316 | opacity: 0.9; 317 | height: 890px; 318 | position: absolute; 319 | margin-top: -65px; 320 | width: 100%; 321 | display: none; 322 | } 323 | 324 | .nav-menu.active { 325 | display: block; 326 | } 327 | 328 | .nav-menu ul li { 329 | margin: 15px; 330 | font-size: 22px; 331 | } 332 | 333 | .nav-menu ul li a { 334 | text-decoration: none; 335 | color: #fff; 336 | font-weight: bold; 337 | } 338 | 339 | .fa-times { 340 | color: #fff; 341 | float: right; 342 | margin-right: 40px; 343 | margin-top: 20px; 344 | } 345 | 346 | /* POPUP WINDOW */ 347 | 348 | #close { 349 | color: #505f79; 350 | } 351 | 352 | .btns { 353 | display: flex; 354 | justify-content: space-between; 355 | gap: 24vh; 356 | margin-left: -20px; 357 | } 358 | 359 | #BTN { 360 | width: 125px; 361 | margin: 12px 11px; 362 | padding: 4px; 363 | font-size: 15px; 364 | } 365 | 366 | .closeIcon { 367 | color: #505f79; 368 | } 369 | 370 | .modal { 371 | display: none; 372 | } 373 | 374 | .modal.active { 375 | display: flex; 376 | flex-direction: column; 377 | align-items: center; 378 | width: 100%; 379 | background-color: #ffffff41; 380 | height: 100vh; 381 | top: 0; 382 | left: 0; 383 | position: fixed; 384 | z-index: 1; 385 | overflow-x: hidden; 386 | backdrop-filter: blur(4px); 387 | padding: 5% 9%; 388 | } 389 | 390 | .modal-cont { 391 | width: 100%; 392 | padding: 2% 8%; 393 | border-radius: 10px; 394 | background-color: white; 395 | border: 1px solid #dfe1e6; 396 | box-shadow: 0 48px 48px rgba(37, 47, 137, 0.08); 397 | max-height: 100vh; 398 | } 399 | 400 | .title1 { 401 | font-size: 25px; 402 | } 403 | 404 | .languages1 ul { 405 | display: inline-flex; 406 | list-style: none; 407 | color: #6070ff; 408 | margin: 5px -7px; 409 | font-size: 13px; 410 | } 411 | 412 | .languages1 ul li { 413 | margin: 7px; 414 | padding: 7px; 415 | } 416 | 417 | .canopy1 { 418 | display: flex; 419 | padding-left: 5px; 420 | gap: 20px; 421 | font-size: 14px; 422 | } 423 | 424 | .can1 { 425 | list-style: none; 426 | color: #344563; 427 | } 428 | 429 | .button-source { 430 | position: absolute; 431 | right: 50px; 432 | } 433 | 434 | .canopy-nav { 435 | display: flex; 436 | justify-content: space-between; 437 | gap: 20vh; 438 | } 439 | 440 | .dev1 { 441 | color: #c1c7d0; 442 | margin-left: 8px; 443 | } 444 | 445 | @media screen and (min-width: 768px) { 446 | * { 447 | margin: 0; 448 | padding: 0; 449 | } 450 | 451 | .main { 452 | background: url(images/Header\ bg.svg); 453 | background-repeat: no-repeat; 454 | background-size: cover; 455 | background-color: #fff; 456 | border-bottom-left-radius: 150px; 457 | margin-left: 0; 458 | } 459 | 460 | body { 461 | background-color: #f7f7f9; 462 | } 463 | 464 | nav { 465 | display: flex; 466 | justify-content: space-around; 467 | padding: 15px; 468 | background-color: #fff; 469 | } 470 | 471 | .nav-links { 472 | display: flex; 473 | } 474 | 475 | .nav-links ul { 476 | display: flex; 477 | list-style: none; 478 | gap: 35px; 479 | margin-right: -50px; 480 | } 481 | 482 | .nav-links ul li a { 483 | color: #344563; 484 | text-decoration: none; 485 | font-size: 18px; 486 | } 487 | 488 | .logo { 489 | font-size: 17px; 490 | } 491 | 492 | h2 { 493 | color: #172b4d; 494 | font-size: 35px; 495 | margin: 9px; 496 | } 497 | 498 | .fa-bars { 499 | visibility: hidden; 500 | } 501 | 502 | .presentation, 503 | .presentation2 { 504 | font-size: 18px; 505 | padding-left: 0; 506 | margin-left: 10px; 507 | margin-bottom: 0; 508 | } 509 | 510 | .content { 511 | display: flex; 512 | flex-direction: column; 513 | width: 920px; 514 | height: 480px; 515 | margin: 120px 0 10px 300px; 516 | } 517 | 518 | .lang { 519 | padding-top: 0; 520 | padding-bottom: 0; 521 | } 522 | 523 | .connect { 524 | font-size: 16px; 525 | padding-left: 0; 526 | margin-top: -5px; 527 | } 528 | 529 | .icons ul li a { 530 | font-size: 20px; 531 | } 532 | 533 | .nav-links ul li a:hover { 534 | color: #6070ff; 535 | text-decoration: underline; 536 | } 537 | 538 | .list { 539 | font-size: 18px; 540 | } 541 | 542 | .icons { 543 | margin-left: 0; 544 | margin-top: -19px; 545 | padding: 12px; 546 | } 547 | 548 | .canopy { 549 | margin-left: 12px; 550 | } 551 | 552 | .presentation3 { 553 | margin-left: 0; 554 | } 555 | 556 | .button { 557 | margin-top: 15px; 558 | margin-left: 12px; 559 | padding: 13px; 560 | width: 171px; 561 | } 562 | 563 | .works1, 564 | .works2, 565 | .works3, 566 | .works4 { 567 | height: 496px; 568 | display: flex; 569 | flex-direction: row; 570 | width: 1050px; 571 | border-radius: 26px; 572 | gap: 15px; 573 | padding: 0 40px; 574 | background-color: #fff; 575 | margin-left: auto; 576 | margin-right: auto; 577 | align-items: center; 578 | } 579 | 580 | .body { 581 | margin: 60px; 582 | display: grid; 583 | gap: 40px; 584 | } 585 | 586 | .part1, 587 | .part2, 588 | .part3, 589 | .part4 { 590 | margin-top: -100px; 591 | } 592 | 593 | .languages ul { 594 | margin-left: 3px; 595 | } 596 | 597 | .languages ul li { 598 | margin: 10px; 599 | } 600 | 601 | .button:hover { 602 | background-color: #6070ff; 603 | } 604 | 605 | .photo1, 606 | .photo3 { 607 | width: 544px; 608 | height: 448px; 609 | } 610 | 611 | .photo2, 612 | .photo4 { 613 | width: 544px; 614 | height: 448px; 615 | order: 1; 616 | } 617 | 618 | .About { 619 | background-color: #fff; 620 | border-top-right-radius: 100px; 621 | width: 100%; 622 | display: flex; 623 | gap: 40px; 624 | padding: 0 90px; 625 | height: 700px; 626 | } 627 | 628 | .content2 { 629 | width: 60%; 630 | margin-left: 0; 631 | line-height: 22px; 632 | } 633 | 634 | .langs { 635 | width: 40%; 636 | margin-top: -16px; 637 | margin-right: -50px; 638 | padding: 80px 40px; 639 | } 640 | 641 | .presentation2 { 642 | font-size: 15px; 643 | } 644 | 645 | .lang-nav ul li { 646 | margin: 20px; 647 | } 648 | 649 | .lang-nav ul { 650 | margin-left: -400px; 651 | } 652 | 653 | .js { 654 | display: inline-flex; 655 | flex-direction: column; 656 | width: 100px; 657 | flex-wrap: nowrap; 658 | margin: 4px; 659 | } 660 | 661 | .contact { 662 | background-image: url(images/contact\ form\ background\ shapes.svg); 663 | background-repeat: no-repeat; 664 | background-color: #6070ff; 665 | border-top-left-radius: 120px; 666 | display: grid; 667 | align-items: center; 668 | margin-top: -100px; 669 | height: 800px; 670 | } 671 | 672 | .contact-text { 673 | display: flex; 674 | flex-direction: column; 675 | margin: 15px 400px; 676 | width: 40%; 677 | text-align: center; 678 | } 679 | 680 | .form { 681 | margin-left: 40px; 682 | } 683 | 684 | .btn { 685 | margin-left: 130px; 686 | background-color: #fff; 687 | } 688 | 689 | input { 690 | border-radius: 0; 691 | color: #172b4d; 692 | } 693 | 694 | textarea { 695 | border-radius: 0; 696 | } 697 | 698 | /* Animations */ 699 | 700 | .animate:hover { 701 | transform: scale(1.1); 702 | transition: transform 0.3s ease-out; 703 | } 704 | 705 | input::placeholder { 706 | transition: transform 0.1s ease-out; 707 | } 708 | 709 | input:hover::placeholder { 710 | transform: translateX(10px); 711 | } 712 | 713 | /* POPUP WINDOW */ 714 | .modal { 715 | display: none; 716 | } 717 | 718 | .modal.active { 719 | width: 100%; 720 | height: 100vh; 721 | padding: 5% 9%; 722 | top: 0; 723 | } 724 | 725 | .modal-cont { 726 | width: 80%; 727 | padding: 2% 2%; 728 | max-height: 100vh; 729 | } 730 | 731 | .languages1 ul { 732 | display: inline-flex; 733 | list-style: none; 734 | color: #6070ff; 735 | margin: 20px; 736 | font-size: 18px; 737 | } 738 | 739 | .languages1 ul li { 740 | margin: 13px; 741 | padding: 6px; 742 | } 743 | 744 | .canopy-nav { 745 | display: flex; 746 | justify-content: space-between; 747 | gap: 80vh; 748 | } 749 | 750 | .canopy1 { 751 | display: flex; 752 | margin-right: auto; 753 | padding-left: 0; 754 | } 755 | 756 | .can1 { 757 | list-style: none; 758 | color: #344563; 759 | } 760 | 761 | .dev1 { 762 | color: #c1c7d0; 763 | margin-left: 28px; 764 | } 765 | 766 | .present { 767 | display: flex; 768 | margin-top: 60px; 769 | } 770 | 771 | .img-cont { 772 | margin-left: auto; 773 | margin-right: auto; 774 | width: 100%; 775 | } 776 | 777 | #myimage { 778 | width: 98%; 779 | height: 60vh; 780 | border-radius: 8px; 781 | } 782 | 783 | .presentation4 { 784 | font-size: 19px; 785 | margin-top: 50px; 786 | } 787 | 788 | .lang-button { 789 | display: flex; 790 | flex-direction: column; 791 | margin-top: 15px; 792 | } 793 | 794 | #BTN { 795 | width: 127px; 796 | margin: 12px 8px; 797 | padding: 5px; 798 | font-size: 16px; 799 | } 800 | 801 | .button-source { 802 | position: absolute; 803 | right: 300px; 804 | } 805 | 806 | .btns { 807 | margin-left: 10px; 808 | } 809 | } 810 | --------------------------------------------------------------------------------