├── .gitignore ├── images ├── Icon.png ├── modal.png ├── Group-2.png ├── MyLogo.png ├── Vector.png ├── Menu-icon.png ├── Multipost.png ├── Icon -GitHub.png ├── github-icon.png ├── medium-icon.png ├── twitter-icon.png ├── webportfolio.png ├── Icon - Angelist.png ├── Icon - Linkedin.png ├── Icon - Twitter.png ├── Img Placeholder.png ├── ImgPlaceholder.png ├── angelist-icon.png ├── background-img.png ├── linkedin-icon.png ├── Img-Placeholder-2.png ├── 6-2-vector-free-download-png.png ├── Icon - Mail.svg ├── illustration-about me.svg └── Illustration-header.svg ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── package.json ├── LICENSE ├── .github └── workflows │ └── linters.yml ├── README.md ├── index.html ├── script.js └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /images/Icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/Icon.png -------------------------------------------------------------------------------- /images/modal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/modal.png -------------------------------------------------------------------------------- /images/Group-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/Group-2.png -------------------------------------------------------------------------------- /images/MyLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/MyLogo.png -------------------------------------------------------------------------------- /images/Vector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/Vector.png -------------------------------------------------------------------------------- /images/Menu-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/Menu-icon.png -------------------------------------------------------------------------------- /images/Multipost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/Multipost.png -------------------------------------------------------------------------------- /images/Icon -GitHub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/Icon -GitHub.png -------------------------------------------------------------------------------- /images/github-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/github-icon.png -------------------------------------------------------------------------------- /images/medium-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/medium-icon.png -------------------------------------------------------------------------------- /images/twitter-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/twitter-icon.png -------------------------------------------------------------------------------- /images/webportfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/webportfolio.png -------------------------------------------------------------------------------- /images/Icon - Angelist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/Icon - Angelist.png -------------------------------------------------------------------------------- /images/Icon - Linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/Icon - Linkedin.png -------------------------------------------------------------------------------- /images/Icon - Twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/Icon - Twitter.png -------------------------------------------------------------------------------- /images/Img Placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/Img Placeholder.png -------------------------------------------------------------------------------- /images/ImgPlaceholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/ImgPlaceholder.png -------------------------------------------------------------------------------- /images/angelist-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/angelist-icon.png -------------------------------------------------------------------------------- /images/background-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/background-img.png -------------------------------------------------------------------------------- /images/linkedin-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/linkedin-icon.png -------------------------------------------------------------------------------- /images/Img-Placeholder-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/Img-Placeholder-2.png -------------------------------------------------------------------------------- /images/6-2-vector-free-download-png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Aljuaifari/The-Portfolio/HEAD/images/6-2-vector-free-download-png.png -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "extends": ["airbnb-base"], 13 | "rules": { 14 | "no-shadow": "off", 15 | "no-param-reassign": "off", 16 | "eol-last": "off", 17 | "import/extensions": [ 18 | 1, 19 | { 20 | "js": "always", 21 | "json": "always" 22 | } 23 | ] 24 | }, 25 | "ignorePatterns": ["dist/", "build/"] 26 | } 27 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 9 | } 10 | ], 11 | "scss/at-rule-no-unknown": [ 12 | true, 13 | { 14 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 15 | } 16 | ], 17 | "csstree/validator": true 18 | }, 19 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 20 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio_site", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel-eslint": "^10.1.0", 14 | "eslint": "^7.32.0", 15 | "eslint-config-airbnb-base": "^14.2.1", 16 | "eslint-plugin-import": "^2.27.5", 17 | "hint": "^2.0.0", 18 | "stylelint": "^13.13.1", 19 | "stylelint-config-standard": "^21.0.0", 20 | "stylelint-csstree-validator": "^1.9.0", 21 | "stylelint-scss": "^3.21.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Abbas Aljuaifari 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 | -------------------------------------------------------------------------------- /images/Icon - Mail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.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 71 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |
6 | 7 |

The Portfolio

8 | 9 |
10 | 11 | 12 | 13 | # 📗 Table of Contents 14 | 15 | - [📖 About the Project](#about-project) 16 | - [🛠 Built With](#built-with) 17 | - [Key Features](#key-features) 18 | - [🚀 Live Demo](#live-demo) 19 | - [💻 Getting Started](#getting-started) 20 | - [Setup](#setup) 21 | - [Prerequisites](#prerequisites) 22 | - [Install](#install) 23 | - [Usage](#usage) 24 | - [Run tests](#run-tests) 25 | - [👥 Authors](#authors) 26 | - [🔭 Future Features](#future-features) 27 | - [🤝 Contributing](#contributing) 28 | - [⭐️ Show your support](#support) 29 | - [🙏 Acknowledgements](#acknowledgements) 30 | - [📝 License](#license) 31 | 32 | 33 | 34 | # 📖 [The-Portfolio] 35 | 36 | **[The-Portfolio]** In this project, I'm learning how to set up a professional interface and set up my first mobile version portfolio that presents the work on my projects it is still on going and it needs more work but everything is coming together soon! 37 | 38 | ## 🛠 Built With 39 | 40 |
41 | Client 42 | 47 |
48 | 49 | 50 | 51 | ### Key Features 52 | 53 | - **[HTML Form]** 54 | - **[Semantic tags]** 55 | - **[CSS Flexbox]** 56 | - **[CSS Grid]** 57 | - **[Responiveness]** 58 | - **[ Javascript ]** 59 | 60 |

(back to top)

61 | 62 | 63 | 64 | ## 🚀 Live Demo 65 | 66 | - [Live Demo Link](https://abbas-aljuaifari.github.io/The-Portfolio/) 67 | 68 |

(back to top)

69 | 70 | 71 | 72 | ## 💻 Getting Started 73 | 74 | To get a local copy up and running, follow these steps downbelow! 75 | 76 | ### Prerequisites 77 | 78 | In order to run this project you need: 79 | 80 | - Web browser 81 | - Git-syn 82 | - Code editor 83 | 84 | ### Setup 85 | 86 | Clone this repository to your desired folder: 87 | 88 | git clone https://github.com/Abbas-Aljuaifari/The-Portfolio.git 89 | 90 | ### Install 91 | 92 | Install this project run the command: 93 | 94 | ``` 95 | 96 | npm install 97 | 98 | ``` 99 | 100 | ### Usage 101 | 102 | To run the project: 103 | 104 | - Clone this repo to your local machine. 105 | 106 | ### Run tests 107 | 108 | To run tests, run the following command: 109 | 110 | - Track HTML linter errors run: 111 | 112 | ``` 113 | npx hint . 114 | ``` 115 | 116 | - Track CSS linter errors run: 117 | 118 | ``` 119 | npx stylelint "**/*.{css,scss}" 120 | ``` 121 | 122 | - Track JavaScript linter errors run: 123 | 124 | ``` 125 | npx eslint . 126 | ``` 127 | 128 |

(back to top)

129 | 130 | 131 | 132 | ## 👥 Author 133 | 134 | 👤 **Abbas-Aljuaifari** 135 | 136 | - GitHub: [@Abbas-Aljuaifari](https://github.com/Abbas-Aljuaifari) 137 | - LinkedIn: [Abbas(fares)Aljuaifari](https://www.linkedin.com/in/abbas-aljuaifari-17a018261/) 138 | 139 |

(back to top)

140 | 141 | 142 | 143 | ## :busts_in_silhouette: Collabrations 144 | 145 | :bust_in_silhouette: **JansueT** 146 | 147 | - GitHub: [@githubhandle](https://github.com/JansueT) 148 | - instagram: [@cansuetas](https://instagram.com/cansuetas) 149 | - twitter: [@cansu8tas](https://twitter.com/cansu8tas) 150 | - linkedIn: [@LinkedIn](https://www.linkedin.com/in/cansu-tas-467844251/) 151 | 152 | 153 | 154 | ## 🔭 Future Features 155 | 156 | - **[ Add more soled animations and transition ]** 157 | - **[ PC Version ]** 158 | - **[ Update my showcase section ]** 159 | 160 |

(back to top)

161 | 162 | 163 | 164 | ## 🤝 Contributing 165 | 166 | Contributions, issues, and feature requests are welcome! 167 | 168 | Feel free to check the [issues page](../../issues/). 169 | 170 |

(back to top)

171 | 172 | 173 | 174 | ## ⭐️ Show your support 175 | 176 | If you like this project follow me on github! 177 | 178 | - GitHub: [@Abbas-Aljuaifari](https://github.com/Abbas-Aljuaifari) 179 | 180 |

(back to top)

181 | 182 | 183 | 184 | ## 🙏 Acknowledgments 185 | 186 | I would like to thank my team on supporting me with this journey! 187 | 188 |

(back to top)

189 | 190 | 191 | 192 | ## 📝 License 193 | 194 | This project is [MIT](./LICENSE) licensed. 195 | 196 |

(back to top)

197 | -------------------------------------------------------------------------------- /images/illustration-about me.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /images/Illustration-header.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Abbas Aljuaifari 8 | 9 | 10 | 11 | 12 | 13 | 20 | 21 | 22 | 26 | 27 | 28 |
29 |
30 | 35 | 46 |
47 |
48 | 49 | 68 | 69 | 70 |
71 |
72 |
73 |

Hey There. I'm Abbas

74 |
75 |
76 |

I'm a Software Developer

77 |

78 | I can help you build a product , feature or website Look through 79 | some of my work and experience! If you like what you see and have a 80 | project you need coded, don’t hesitate to contact me. 81 |

82 |
83 |
84 | 85 | 127 |
128 | 129 |
130 |
131 |

My Recent Works

132 | 141 | 142 | 143 |
144 |
145 |
146 |
147 | 148 |
149 |
150 |
151 |

About me

152 |

153 | Hello I'm a software developer! I can help you build a product , 154 | feature or website Look through some of my work and experience! If 155 | you like what you see and have a project you need coded, don't 156 | hestiate to contact me. 157 |

158 | 161 |
162 |
163 | img 164 |
165 |
166 | 175 | 176 | 177 | 178 |
179 | 205 | 224 | 249 |
250 |
251 | 252 |
253 |

254 | I'm always interested in hearing about new projects, so if you'd like to 255 | chat please get in touch. 256 |

257 |
263 |
264 |
265 | 266 | 273 |
274 |
275 |
276 | 277 | 283 |
284 |
285 | 286 | 292 |
293 |
294 | 295 |
296 |
297 |
298 | 299 | 300 | 341 | 342 | 343 | 344 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const unionButton = document.querySelector('.menu-button'); 2 | const crossButton = document.querySelector('.cross-button'); 3 | const hamBar = document.querySelector('.ham-bar'); 4 | const scrollToLinks = document.querySelectorAll('.scroll'); 5 | 6 | function showMobileMenu() { 7 | hamBar.style.display = 'block'; 8 | } 9 | 10 | function hideMobileMenu() { 11 | hamBar.style.display = 'none'; 12 | } 13 | 14 | function scrollSection(sectionId) { 15 | const section = document.getElementById(sectionId); 16 | if (section) { 17 | section.scrollIntoView({ behavior: 'smooth' }); 18 | } 19 | } 20 | 21 | scrollToLinks.forEach((link) => { 22 | link.addEventListener('click', (event) => { 23 | event.preventDefault(); 24 | const sectionId = link.getAttribute('href'); 25 | scrollSection(sectionId); 26 | hideMobileMenu(); 27 | }); 28 | }); 29 | 30 | unionButton.addEventListener('click', showMobileMenu); 31 | crossButton.addEventListener('click', hideMobileMenu); 32 | 33 | document.addEventListener('DOMContentLoaded', () => { 34 | const form = document.getElementById('contact-forms'); 35 | const username = document.getElementById('fullname'); 36 | const email = document.getElementById('email'); 37 | 38 | function setError(elm, msg) { 39 | const inputControl = elm.parentElement; 40 | const errorDiv = inputControl.querySelector('.error'); 41 | errorDiv.innerText = msg; 42 | inputControl.classList.add('error'); 43 | } 44 | 45 | function clearError(elm) { 46 | const inputControl = elm.parentElement; 47 | const errorDiv = inputControl.querySelector('.error'); 48 | errorDiv.innerText = ''; 49 | inputControl.classList.remove('error'); 50 | } 51 | 52 | function isLowerCase(str) { 53 | return str === str.toLowerCase(); 54 | } 55 | 56 | function validateFormInputs() { 57 | const usernameValue = username.value.trim(); 58 | const emailValue = email.value.trim(); 59 | 60 | clearError(username); 61 | clearError(email); 62 | 63 | if (usernameValue === '') { 64 | setError(username, 'Full Name is required'); 65 | } 66 | 67 | if (emailValue === '') { 68 | setError(email, 'Email is required'); 69 | } else if (!isLowerCase(emailValue)) { 70 | setError(email, 'Email must be in lowercase'); 71 | } else { 72 | // Validation is OK, submit the form 73 | form.submit(); 74 | } 75 | } 76 | 77 | form.addEventListener('submit', (event) => { 78 | event.preventDefault(); 79 | validateFormInputs(); 80 | }); 81 | }); 82 | 83 | // Work Projects Data 84 | 85 | const projects = [ 86 | { 87 | main: true, 88 | name: 'Multi-Post Stories', 89 | image: './images/Img Placeholder.png', 90 | image2: './images/ImgPlaceholder.png', 91 | image3: './images/modal.png', 92 | description: 93 | 'A daily selection of privately personalized reads; no accounts or sign-ups required. This has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a standard dummy text.', 94 | tags: ['HTML', 'CSS', 'Bootstrap', 'Ruby'], 95 | demoLink: 'https://abbas-aljuaifari.github.io/The-Portfolio/', 96 | codeLink: 'https://github.com/Abbas-Aljuaifari/The-Portfolio', 97 | }, 98 | 99 | { 100 | main: false, 101 | name: 'Profesional Art Printing Data More', 102 | image: './images/Img-Placeholder-2.png', 103 | image2: './images/ImgPlaceholder.png', 104 | image3: './images/6-2-vector-free-download-png.png', 105 | description: 106 | 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industrys standard.', 107 | tags: ['HTML', 'Bootstrap', 'Ruby'], 108 | demoLink: 'https://abbas-aljuaifari.github.io/The-Portfolio/', 109 | codeLink: 'https://github.com/Abbas-Aljuaifari/The-Portfolio', 110 | }, 111 | { 112 | main: false, 113 | name: 'Multi-Post Stories', 114 | image: './images/Multipost.png', 115 | image2: './images/ImgPlaceholder.png', 116 | image3: './images/Img Placeholder.png', 117 | description: 118 | 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industrys standard.', 119 | tags: ['HTML', 'Bootstrap', 'Ruby'], 120 | demoLink: 'https://abbas-aljuaifari.github.io/The-Portfolio/', 121 | codeLink: 'https://github.com/Abbas-Aljuaifari/The-Portfolio', 122 | }, 123 | { 124 | main: false, 125 | name: 'Website Portfolio ', 126 | image: './images/webportfolio.png', 127 | image2: './images/ImgPlaceholder.png', 128 | image3: './images/modal.png', 129 | description: 130 | 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industrys standard.', 131 | tags: ['HTML', 'Bootstrap', 'Ruby'], 132 | demoLink: 'https://abbas-aljuaifari.github.io/The-Portfolio/', 133 | codeLink: 'https://github.com/Abbas-Aljuaifari/The-Portfolio', 134 | }, 135 | 136 | { 137 | main: false, 138 | name: 'Profesional Art Printing Data More', 139 | image: './images/Img-Placeholder-2.png', 140 | image2: './images/ImgPlaceholder.png', 141 | image3: './images/6-2-vector-free-download-png.png', 142 | description: 143 | 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industrys standard.', 144 | tags: ['HTML', 'Bootstrap', 'Ruby'], 145 | demoLink: 'https://abbas-aljuaifari.github.io/The-Portfolio/', 146 | codeLink: 'https://github.com/Abbas-Aljuaifari/The-Portfolio', 147 | }, 148 | { 149 | main: false, 150 | name: 'Multi-Post Stories', 151 | image: './images/Multipost.png', 152 | image2: './images/ImgPlaceholder.png', 153 | image3: './images/Img Placeholder.png', 154 | description: 155 | 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industrys standard.', 156 | tags: ['HTML', 'Bootstrap', 'Ruby'], 157 | demoLink: 'https://abbas-aljuaifari.github.io/The-Portfolio/', 158 | codeLink: 'https://github.com/Abbas-Aljuaifari/The-Portfolio', 159 | }, 160 | { 161 | main: false, 162 | name: 'Website Portfolio ', 163 | image: './images/webportfolio.png', 164 | image2: './images/ImgPlaceholder.png', 165 | image3: './images/modal.png', 166 | description: 167 | 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industrys standard.', 168 | tags: ['HTML', 'Bootstrap', 'Ruby'], 169 | demoLink: 'https://abbas-aljuaifari.github.io/The-Portfolio/', 170 | codeLink: 'https://github.com/Abbas-Aljuaifari/The-Portfolio', 171 | }, 172 | ]; 173 | 174 | const projectsContainer = document.querySelector('#main-grid'); 175 | const projectCardsContainer = document.querySelector('#card-holder'); 176 | 177 | projects.forEach((project, index) => { 178 | if (project.main) { 179 | const tagsList = project.tags 180 | .map((tag) => `
  • ${tag}
    • `) 181 | .join(''); 182 | 183 | const projectDisplay = ` 184 | ${project.image2} 185 |
    186 |

    ${project.name}

    187 |

    188 | ${project.description} 189 |

    190 | 193 | See Project 194 |
    195 | `; 196 | 197 | projectsContainer.innerHTML = ` 198 |
    199 | ${projectDisplay} 200 |
    201 | `; 202 | } else { 203 | const tagsList = project.tags 204 | .map((tag) => `
  • ${tag}
    • `) 205 | .join(''); 206 | 207 | const projectCard = ` 208 |
    209 |

    210 | ${project.name} 211 |

    212 |

    213 | ${project.description} 214 |

    215 | 218 |
    219 |
    220 | See Project 221 |
    222 | `; 223 | 224 | const cardHolder = document.createElement('div'); 225 | cardHolder.classList.add('work-card'); 226 | cardHolder.style.backgroundImage = `url(${project.image})`; 227 | cardHolder.innerHTML = projectCard; 228 | 229 | // Add event listener to change background image on hover 230 | cardHolder.addEventListener('mouseenter', () => { 231 | cardHolder.style.backgroundImage = `url(${project.image2})`; 232 | }); 233 | cardHolder.addEventListener('mouseleave', () => { 234 | cardHolder.style.backgroundImage = `url(${project.image})`; 235 | }); 236 | 237 | projectCardsContainer.appendChild(cardHolder); 238 | } 239 | }); 240 | 241 | // Deatils Popup window 242 | 243 | const popup = document.createElement('div'); 244 | function createPopup(project) { 245 | popup.innerHTML = ` 246 | `; 324 | document.body.appendChild(popup); 325 | } 326 | 327 | const buttons = document.querySelectorAll('.card-button, .project-button'); 328 | 329 | buttons.forEach((button, index) => { 330 | button.addEventListener('click', () => { 331 | const project = projects[index]; 332 | createPopup(project); 333 | 334 | const xPopup = document.getElementById('x-popup'); 335 | xPopup.addEventListener('click', () => { 336 | popup.remove(); 337 | }); 338 | }); 339 | }); 340 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --my-font-crete: "Crete Round", serif; 3 | --font-sans: "Roboto", sans-serif; 4 | --font-inter: "Inter", sans-serif; 5 | --nav-background: #3c3a39; 6 | --main-background: #1c1a19; 7 | --font-white: #fff; 8 | --font-orange: #ff6b00; 9 | --font-blue: #091e42; 10 | --font-contact-form: #172b4d; 11 | --font-black: #000; 12 | --border-menu: #6f6c6b; 13 | --font-menu: #fff5e1; 14 | } 15 | 16 | /* Base */ 17 | *, 18 | ::after, 19 | ::before { 20 | box-sizing: border-box; 21 | padding: 0; 22 | margin: 0; 23 | scroll-behavior: smooth; 24 | text-decoration: none; 25 | outline: none; 26 | border: none; 27 | } 28 | 29 | body { 30 | background-color: var(--main-background); 31 | color: var(--font-white); 32 | font-family: var(--font-inter); 33 | font-style: normal; 34 | } 35 | 36 | a { 37 | text-decoration: none; 38 | color: var(--font-white); 39 | } 40 | 41 | ul { 42 | list-style-type: none; 43 | } 44 | 45 | .flex-center { 46 | display: flex; 47 | align-items: center; 48 | } 49 | 50 | .btn { 51 | font-family: var(--font-inter); 52 | color: var(--font-white); 53 | background: var(--font-orange); 54 | padding: 12px; 55 | gap: 10px; 56 | font-style: normal; 57 | font-weight: 700; 58 | font-size: 17px; 59 | line-height: 24px; 60 | letter-spacing: 0.03em; 61 | cursor: pointer; 62 | } 63 | 64 | .btn:hover { 65 | background: #fff5e1; 66 | border: 1px solid var(--font-orange); 67 | color: var(--font-orange); 68 | } 69 | 70 | .btn:active { 71 | background: #e05304; 72 | color: var(--font-white); 73 | } 74 | 75 | .btn:disabled { 76 | background: #f4f1f0; 77 | color: #5b5957; 78 | } 79 | 80 | /* Navbar */ 81 | 82 | .head-nav-lists { 83 | display: none; 84 | } 85 | 86 | .header { 87 | background: var(--nav-background); 88 | display: flex; 89 | justify-content: space-between; 90 | align-items: center; 91 | padding: 30px 20px; 92 | font-family: var(--font-sans); 93 | font-weight: 700; 94 | font-size: 18px; 95 | height: 10vh; 96 | } 97 | 98 | .menu-button { 99 | display: flex; 100 | justify-content: center; 101 | width: 24px; 102 | height: 24px; 103 | border: none; 104 | background-color: transparent; 105 | cursor: pointer; 106 | } 107 | 108 | .open { 109 | background: url("./images/Menu-icon.png") no-repeat; 110 | padding: 20px; 111 | } 112 | 113 | /* navbar starts */ 114 | 115 | .ham-bar { 116 | position: absolute; 117 | height: 100%; 118 | width: 100%; 119 | background-color: var(--nav-background); 120 | display: none; 121 | } 122 | 123 | .ham-menu-options a { 124 | text-decoration: none; 125 | } 126 | 127 | .ham-menu-options { 128 | padding-top: 60px; 129 | padding-left: 17px; 130 | } 131 | 132 | .ham-menu-list { 133 | color: var(--font-menu); 134 | font-style: normal; 135 | font-weight: 700; 136 | font-size: 32px; 137 | list-style: none; 138 | padding-left: 20px; 139 | margin: 20px 20px; 140 | border-bottom: 1px solid var(--border-menu); 141 | display: block; 142 | line-height: 44px; 143 | } 144 | 145 | .cross-button { 146 | background: none; 147 | border: none; 148 | float: right; 149 | padding-right: 29px; 150 | padding-top: 39px; 151 | cursor: pointer; 152 | } 153 | 154 | .union-bar { 155 | padding-right: 6%; 156 | padding-top: 1.2%; 157 | } 158 | 159 | .menu-options { 160 | display: none; 161 | } 162 | 163 | /* main */ 164 | 165 | .home-section { 166 | height: 590px; 167 | display: flex; 168 | justify-content: center; 169 | flex-direction: column; 170 | padding: 20px; 171 | background-color: var(--main-background); 172 | align-items: flex-start; 173 | line-height: 24px; 174 | gap: 12px; 175 | background-image: url("./images/background-img.png"); 176 | background-repeat: no-repeat; 177 | background-position-x: 100%; 178 | background-position-y: 115%; 179 | } 180 | 181 | .home-page-header { 182 | font-family: var(--my-font-crete); 183 | color: var(--font-orange); 184 | font-weight: 400; 185 | font-size: 56px; 186 | letter-spacing: 0.37px; 187 | line-height: 114%; 188 | } 189 | 190 | .discription-header { 191 | font-family: var(--font-sans); 192 | font-weight: bold; 193 | font-size: 24px; 194 | display: flex; 195 | align-items: center; 196 | margin: 10px 0; 197 | } 198 | 199 | .discription-paragraph { 200 | font-family: "Poppins", sans-serif; 201 | font-weight: 400; 202 | font-size: 16px; 203 | line-height: 24px; 204 | } 205 | 206 | .media-icons-container { 207 | display: flex; 208 | align-items: center; 209 | } 210 | 211 | .media-icon { 212 | margin: 5px; 213 | } 214 | 215 | /* work section */ 216 | 217 | .work-section-container { 218 | width: 100%; 219 | background: var(--font-white); 220 | color: var(--main-background); 221 | padding: 20px 1.4rem; 222 | } 223 | 224 | .work-title-card { 225 | width: 100%; 226 | display: grid; 227 | grid-template-columns: 1fr; 228 | gap: 2.4rem; 229 | margin-bottom: 80px; 230 | } 231 | 232 | .work-project-display { 233 | width: 100%; 234 | display: grid; 235 | grid-template-columns: 1fr; 236 | gap: 2.4rem; 237 | margin-bottom: 80px; 238 | } 239 | 240 | .work-title-heading { 241 | margin-top: 100px; 242 | font-weight: 400; 243 | font-size: 40px; 244 | line-height: 52px; 245 | font-family: var(--my-font-crete); 246 | font-style: normal; 247 | } 248 | 249 | .title-separator { 250 | width: calc(90% - 0px / 2 + 0.5px); 251 | } 252 | 253 | .placeholder-image { 254 | width: 100%; 255 | } 256 | 257 | .work-title-post { 258 | display: flex; 259 | flex-direction: column; 260 | align-items: flex-start; 261 | gap: 12px; 262 | } 263 | 264 | .post-heading { 265 | font-size: 32px; 266 | font-family: var(--my-font-crete); 267 | font-style: normal; 268 | font-weight: 400; 269 | line-height: 44px; 270 | color: var(--font-blue); 271 | } 272 | 273 | .post-description { 274 | color: var(--font-blue); 275 | font-family: var(--font-inter); 276 | font-style: normal; 277 | font-weight: 400; 278 | font-size: 16px; 279 | line-height: 24px; 280 | } 281 | 282 | .tag-list { 283 | display: flex; 284 | flex-direction: row; 285 | padding: 0; 286 | gap: 12px; 287 | } 288 | 289 | .tag-items { 290 | box-sizing: border-box; 291 | padding: 10px 12px; 292 | background: var(--font-white); 293 | border: 1px solid #8993a4; 294 | font-family: var(--font-inter); 295 | font-style: normal; 296 | font-weight: 500; 297 | font-size: 15px; 298 | line-height: 20px; 299 | color: var(--font-blue); 300 | } 301 | 302 | .card-holder { 303 | display: grid; 304 | grid-template-columns: 1fr; 305 | row-gap: 24px; 306 | } 307 | 308 | .work-card { 309 | display: flex; 310 | flex-direction: column; 311 | background-size: cover; 312 | padding-top: 72px; 313 | transition: background-image 0.3s ease; 314 | } 315 | 316 | .info-holder { 317 | display: flex; 318 | flex-direction: column; 319 | align-items: flex-start; 320 | padding: 8px 16px; 321 | gap: 12px; 322 | color: var(--font-white); 323 | } 324 | 325 | .project-heading { 326 | font-family: var(--my-font-crete); 327 | font-style: normal; 328 | font-weight: 400; 329 | font-size: 32px; 330 | line-height: 44px; 331 | } 332 | 333 | .card-description { 334 | font-family: var(--font-inter); 335 | font-style: normal; 336 | font-weight: 400; 337 | font-size: 16px; 338 | line-height: 24px; 339 | } 340 | 341 | .card-items { 342 | padding: 10px 12px; 343 | background-color: #fff3; 344 | font-family: var(--font-inter); 345 | font-style: normal; 346 | font-weight: 500; 347 | font-size: 15px; 348 | line-height: 20px; 349 | } 350 | 351 | .button-section { 352 | margin-top: 22px; 353 | } 354 | 355 | .card-button { 356 | padding: 13px 0; 357 | justify-content: center; 358 | letter-spacing: 0.03em; 359 | } 360 | 361 | .work-card:hover .info-holder { 362 | opacity: 0; 363 | } 364 | 365 | /* About */ 366 | 367 | .about { 368 | text-align: center; 369 | background: var(--main-background); 370 | padding: 0%; 371 | margin: 0%; 372 | } 373 | 374 | .about-me-header { 375 | font-family: var(--my-font-crete); 376 | color: var(--font-orange); 377 | font-style: normal; 378 | font-weight: 400; 379 | font-size: 72px; 380 | line-height: 88px; 381 | letter-spacing: 0.37px; 382 | padding-top: 100px; 383 | } 384 | 385 | .about-me-description { 386 | margin: 20px; 387 | text-align: left; 388 | font-family: var(--font-inter); 389 | font-style: normal; 390 | font-weight: 400; 391 | font-size: 16px; 392 | line-height: 24px; 393 | color: #fff; 394 | } 395 | 396 | .my-resume-button { 397 | margin: 10px 20px; 398 | font-family: var(--font-inter); 399 | color: var(--font-white); 400 | background: var(--font-orange); 401 | padding: 12px; 402 | gap: 10px; 403 | font-style: normal; 404 | font-weight: 700; 405 | font-size: 17px; 406 | line-height: 24px; 407 | letter-spacing: 0.03em; 408 | display: flex; 409 | align-items: center; 410 | transition: background-color 1s linear; 411 | } 412 | 413 | .about-illustration { 414 | width: 100%; 415 | text-align: right; 416 | padding-top: -80px; 417 | } 418 | 419 | .about-line { 420 | width: 90%; 421 | border: none; 422 | margin: 30px auto; 423 | border-top: 1px solid white; 424 | } 425 | 426 | .about-separator { 427 | width: calc(90% - 0px / 2 + 0.5px); 428 | border: 1px solid var(--font-white); 429 | } 430 | 431 | /* SKILLS */ 432 | 433 | .my-skills { 434 | display: flex; 435 | flex-direction: column; 436 | align-items: center; 437 | padding: 120px 24px 38px; 438 | gap: 24px; 439 | color: #fff; 440 | } 441 | 442 | .skills-header { 443 | font-family: var(--font-inter); 444 | font-style: normal; 445 | font-weight: 700; 446 | font-size: 32px; 447 | line-height: 44px; 448 | } 449 | 450 | .my-skill-list { 451 | font-family: var(--font-inter); 452 | font-style: normal; 453 | font-weight: 400; 454 | font-size: 22px; 455 | line-height: 43px; 456 | text-align: center; 457 | } 458 | 459 | /* contact form */ 460 | 461 | .contact-section { 462 | display: flex; 463 | width: 100%; 464 | justify-content: center; 465 | background: white; 466 | padding: 24px; 467 | flex-direction: column; 468 | } 469 | 470 | .contact-section h2 { 471 | font-family: Roboto, sans-serif; 472 | font-weight: 700; 473 | color: #172b4d; 474 | text-align: center; 475 | font-size: 2em; 476 | padding-top: 5vh; 477 | margin: 15px; 478 | } 479 | 480 | .inputs-textarea { 481 | margin-bottom: 10px; 482 | } 483 | 484 | .inputs input { 485 | width: 100%; 486 | border-bottom: 0.5px solid lightgray; 487 | padding: 2vh 0 2vh 2vh; 488 | } 489 | 490 | .inputs .error { 491 | color: red; 492 | font-size: 1rem; 493 | } 494 | 495 | .inputs textarea { 496 | width: 100%; 497 | height: 20vh; 498 | background: #fbf8f7; 499 | margin: 2vh 0; 500 | padding: 2vh 2vh 0; 501 | font-family: var(--font-inter); 502 | font-style: italic; 503 | font-size: 15px; 504 | } 505 | 506 | .submit { 507 | display: flex; 508 | justify-content: center; 509 | margin-bottom: 100px; 510 | } 511 | 512 | .submit-btn { 513 | width: 40%; 514 | background: var(--font-orange); 515 | padding: 4%; 516 | color: var(--font-white); 517 | font-size: 1em; 518 | border: none; 519 | font-family: var(--font-inter); 520 | font-weight: 700; 521 | transition: background-color 1s linear; 522 | cursor: pointer; 523 | } 524 | 525 | .submit-btn:hover { 526 | background: #fff5e1; 527 | border: 1px solid var(--font-orange); 528 | color: var(--font-orange); 529 | } 530 | 531 | .submit-btn:active { 532 | background: #e05304; 533 | color: var(--font-white); 534 | } 535 | 536 | .submit-btn:disabled { 537 | background: #f4f1f0; 538 | color: #5b5957; 539 | } 540 | 541 | footer ul { 542 | justify-content: center; 543 | } 544 | 545 | .form-media-icons { 546 | margin: 0; 547 | display: flex; 548 | width: 100%; 549 | justify-content: center; 550 | align-items: center; 551 | border-top: 1px solid #dfe1e6; 552 | padding-top: 3vh; 553 | padding-bottom: 7vh; 554 | color: #505f79; 555 | background-color: var(--font-white); 556 | background-repeat: no-repeat; 557 | background-position: bottom; 558 | } 559 | 560 | .contac-separator { 561 | width: calc(100% - 0px / 2 + 0.5px); 562 | border: 1px solid var(--font-black); 563 | } 564 | 565 | @media screen and (min-width: 768px) { 566 | .head-nav-lists { 567 | display: flex; 568 | flex-direction: row; 569 | font-family: var(--font-inter); 570 | font-size: 15px; 571 | line-height: 20px; 572 | margin-right: 10px; 573 | } 574 | 575 | .head-nav-lists li { 576 | padding: 10px; 577 | } 578 | 579 | .my-logo { 580 | margin-left: 55px; 581 | transition: width 2s, height 2s, background-color 2s, rotate 2s; 582 | } 583 | 584 | .my-logo:hover { 585 | rotate: 360deg; 586 | } 587 | 588 | .menu-button { 589 | display: none; 590 | } 591 | 592 | .home-section { 593 | display: flex; 594 | background-image: url("./images/Illustration-header.svg"); 595 | background-size: 42%; 596 | background-position-x: 100%; 597 | background-position-y: 61%; 598 | flex-direction: row-reverse; 599 | align-items: center; 600 | justify-content: flex-end; 601 | } 602 | 603 | .home-page { 604 | width: 50vw; 605 | margin-left: 4em; 606 | gap: 1em; 607 | } 608 | 609 | .home-page-header { 610 | font-style: normal; 611 | font-size: 72px; 612 | line-height: 82px; 613 | } 614 | 615 | .media-icons-container { 616 | display: flex; 617 | flex-direction: column; 618 | } 619 | 620 | /* work */ 621 | 622 | .work-section-container { 623 | padding: 3% 7%; 624 | } 625 | 626 | .work-title-card { 627 | grid-template-columns: 1fr 1fr; 628 | } 629 | 630 | .work-title-card:nth-child(1) { 631 | grid-template-columns: auto 1fr auto; 632 | } 633 | 634 | .work-project-display { 635 | width: 100%; 636 | display: grid; 637 | grid-template-columns: 2fr 1fr; 638 | } 639 | 640 | .work-title-heading { 641 | margin: 0; 642 | color: var(--font-blue); 643 | } 644 | 645 | .title-separator { 646 | width: 100%; 647 | } 648 | 649 | .image { 650 | width: 100%; 651 | } 652 | 653 | .card-holder { 654 | grid-template-columns: repeat(2, 1fr); 655 | column-gap: 1.4rem; 656 | } 657 | 658 | .work-card { 659 | width: 100%; 660 | position: relative; 661 | height: 400px; 662 | } 663 | 664 | .info-holder { 665 | position: absolute; 666 | bottom: 0; 667 | } 668 | 669 | .button-section { 670 | position: absolute; 671 | width: 100%; 672 | bottom: 0; 673 | opacity: 0; 674 | } 675 | 676 | .work-card:hover .button-section { 677 | opacity: 1; 678 | } 679 | 680 | /* about */ 681 | .about-me-section { 682 | margin-top: 100px; 683 | display: grid; 684 | grid-template-columns: 1fr 1fr; 685 | } 686 | 687 | .about-me-sub-section { 688 | display: flex; 689 | flex-direction: column; 690 | align-items: flex-start; 691 | padding: 110px 0; 692 | gap: 24px; 693 | padding-left: 18%; 694 | padding-top: 4%; 695 | } 696 | 697 | .about-me-header { 698 | line-height: 82px; 699 | padding-left: 2.5%; 700 | } 701 | 702 | .about-me-description { 703 | font-size: 20px; 704 | line-height: 32px; 705 | } 706 | 707 | .my-resume-button { 708 | padding: 12px; 709 | gap: 10px; 710 | cursor: pointer; 711 | } 712 | 713 | .about-illustration img { 714 | display: none; 715 | } 716 | 717 | .about-illustration { 718 | margin: 110px 0; 719 | background: url("./images/illustration-about me.svg"); 720 | background-repeat: no-repeat; 721 | background-size: 85%; 722 | background-position-x: 100%; 723 | } 724 | 725 | .my-skills { 726 | display: grid; 727 | grid-template-columns: repeat(2, 1fr); 728 | padding-left: 9%; 729 | gap: 152px; 730 | padding-bottom: 9.2%; 731 | } 732 | 733 | .my-skills ul li { 734 | text-align: start; 735 | padding-top: 3.5%; 736 | } 737 | 738 | .about-separator { 739 | width: 79.9%; 740 | } 741 | 742 | .contact-section { 743 | display: flex; 744 | flex-direction: row; 745 | gap: 30px; 746 | } 747 | 748 | .contact-section h2 { 749 | font-family: var(--font-inter); 750 | font-style: normal; 751 | font-weight: 700; 752 | font-size: 40px; 753 | line-height: 52px; 754 | text-align: start; 755 | color: #262626; 756 | padding-left: 7.2%; 757 | padding-top: 7.5%; 758 | width: 59%; 759 | } 760 | 761 | .inputs textarea { 762 | width: 100%; 763 | height: 7.2rem; 764 | background: #fbf8f7; 765 | margin: 2vh 0; 766 | padding: 2vh 2vh 0; 767 | font-family: var(--font-inter); 768 | font-style: italic; 769 | font-size: 15px; 770 | } 771 | 772 | .contact-form { 773 | width: 90%; 774 | margin-top: 100px; 775 | margin-bottom: 54px; 776 | justify-content: center; 777 | align-items: start; 778 | padding-left: 2.4%; 779 | } 780 | 781 | textarea::placeholder { 782 | font-style: italic; 783 | color: var(--main-background); 784 | } 785 | 786 | .submit { 787 | display: flex; 788 | justify-content: flex-start; 789 | } 790 | 791 | .submit-btn { 792 | padding: 12px; 793 | gap: 10px; 794 | align-self: start; 795 | width: 124px; 796 | } 797 | } 798 | 799 | @media screen and (min-width: 992px) { 800 | /* main */ 801 | .home-page-header { 802 | font-size: 72px; 803 | line-height: 82px; 804 | font-style: normal; 805 | } 806 | 807 | .discription-header { 808 | font-size: 32px; 809 | line-height: 44px; 810 | } 811 | 812 | .discription-paragraph { 813 | font-style: normal; 814 | font-size: 1.5rem; 815 | line-height: 32px; 816 | } 817 | 818 | /* work */ 819 | .card-holder { 820 | grid-template-columns: repeat(3, 1fr); 821 | } 822 | 823 | .my-skills { 824 | grid-template-columns: repeat(3, 1fr); 825 | } 826 | 827 | .contact-form { 828 | padding-right: 50px; 829 | } 830 | 831 | .inputs { 832 | padding-top: 10px; 833 | } 834 | } 835 | 836 | /* Popup */ 837 | 838 | .popup-window { 839 | z-index: 10; 840 | position: fixed; 841 | display: flex; 842 | justify-content: center; 843 | align-items: center; 844 | top: 0; 845 | height: 100%; 846 | width: 100%; 847 | background-color: rgba(0, 0, 0, 0.5); 848 | backdrop-filter: blur(0.1rem); 849 | transition: all 0.5s ease; 850 | } 851 | 852 | .popUp { 853 | display: flex; 854 | } 855 | 856 | .popup-holder { 857 | box-shadow: 0 48px 48px rgba(37, 47, 137, 0.08); 858 | margin: 1rem 1rem; 859 | background-color: var(--font-white); 860 | display: flex; 861 | flex-direction: column; 862 | gap: 1rem; 863 | padding: 1rem; 864 | overflow-y: auto; 865 | } 866 | 867 | .popup-close-btn-holder { 868 | display: flex; 869 | flex-direction: column; 870 | gap: 36px; 871 | } 872 | 873 | .title-xbtn { 874 | display: flex; 875 | align-items: center; 876 | justify-content: space-between; 877 | } 878 | 879 | .project-heading-pop { 880 | font-family: var(--font-sans); 881 | font-size: 32px; 882 | font-weight: 700; 883 | line-height: 44px; 884 | text-align: left; 885 | color: #172b4d; 886 | } 887 | 888 | .popup-close-btn-holder svg { 889 | cursor: pointer; 890 | } 891 | 892 | .popup-tag-list { 893 | display: flex; 894 | flex-direction: row; 895 | align-items: center; 896 | padding: 0; 897 | gap: 1.2rem; 898 | width: 100%; 899 | } 900 | 901 | .popup-tag-list li { 902 | font-family: "Poppins", sans-serif; 903 | font-size: 13px; 904 | font-weight: 600; 905 | line-height: 16px; 906 | text-align: left; 907 | border: 1px solid #979493; 908 | } 909 | 910 | .popup-feature { 911 | background-color: var(--font-white); 912 | border: 1px solid #000; 913 | color: var(--main-background); 914 | } 915 | 916 | .popup-info { 917 | display: flex; 918 | flex-direction: column; 919 | gap: 1.5rem; 920 | } 921 | 922 | .popup-image { 923 | width: 100%; 924 | max-width: 70rem; 925 | } 926 | 927 | .popup-info-holder { 928 | width: 100%; 929 | display: flex; 930 | flex-direction: column; 931 | gap: 1.5rem; 932 | } 933 | 934 | .popup-description { 935 | width: inherit; 936 | font-family: var(--font-inter); 937 | font-style: normal; 938 | font-weight: 400; 939 | font-size: 16px; 940 | line-height: 24px; 941 | color: #344563; 942 | } 943 | 944 | .popup-btn-holder { 945 | display: flex; 946 | gap: 36px; 947 | } 948 | 949 | .popup-btn { 950 | color: var(--font-white); 951 | background-color: var(--font-orange); 952 | display: flex; 953 | align-items: flex-start; 954 | padding: 12px; 955 | gap: 12px; 956 | border: 1px solid var(--font-orange); 957 | font-family: var(--font-inter); 958 | font-style: normal; 959 | font-weight: 700; 960 | font-size: 15px; 961 | line-height: 24px; 962 | text-align: center; 963 | letter-spacing: 0.03em; 964 | margin: 3px; 965 | } 966 | 967 | .popup-btn svg path { 968 | fill: var(--font-white); 969 | } 970 | 971 | .popup-btn:hover svg path { 972 | fill: var(--font-orange); 973 | } 974 | 975 | .desktop-des1 { 976 | display: none; 977 | } 978 | 979 | @media screen and (min-width: 550px) { 980 | .popup-close-btn-holder { 981 | gap: 22px; 982 | } 983 | 984 | .project-heading-pop { 985 | font-family: var(--my-font-crete); 986 | font-weight: 400; 987 | text-align: left; 988 | font-style: normal; 989 | margin: 5px; 990 | } 991 | 992 | .popup-tag-list li { 993 | font-family: "Poppins", sans-serif; 994 | text-align: left; 995 | border: 1px solid #979493; 996 | font-style: normal; 997 | font-weight: 500; 998 | font-size: 15px; 999 | line-height: 20px; 1000 | } 1001 | 1002 | .popup-info { 1003 | display: grid; 1004 | grid-template-columns: 2fr 1fr; 1005 | } 1006 | 1007 | .popup-info-holder { 1008 | align-items: flex-start; 1009 | } 1010 | 1011 | .popup-btn-holder { 1012 | justify-content: flex-start; 1013 | margin-top: auto; 1014 | gap: 20px; 1015 | } 1016 | 1017 | .popup-holder { 1018 | padding: 1rem; 1019 | max-width: 1000px; 1020 | } 1021 | 1022 | .desktop-des1 { 1023 | display: inline; 1024 | } 1025 | } 1026 | --------------------------------------------------------------------------------