├── .gitignore ├── img ├── Bg.png ├── Data.png ├── Menu.png ├── data2.png ├── ds-bg.png ├── mail.png ├── About-us.png ├── Angelist.png ├── GitHub.png ├── Linkedin.png ├── Medium.png ├── Project.png ├── Twitter.png ├── Website.png ├── about-me.png ├── dark-m.png ├── dlinkdin.png ├── project2.png ├── shape1.png ├── shape2.png ├── shape3.png ├── website2.png ├── CardImage.png ├── d-twitter.png ├── dangelist.png ├── FeatureImage.png └── dark-github.png ├── .hintrc ├── .stylelintrc.json ├── package.json ├── README.md ├── .github └── workflows │ └── linters.yml ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | test.md 2 | node_modules -------------------------------------------------------------------------------- /img/Bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/Bg.png -------------------------------------------------------------------------------- /img/Data.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/Data.png -------------------------------------------------------------------------------- /img/Menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/Menu.png -------------------------------------------------------------------------------- /img/data2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/data2.png -------------------------------------------------------------------------------- /img/ds-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/ds-bg.png -------------------------------------------------------------------------------- /img/mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/mail.png -------------------------------------------------------------------------------- /img/About-us.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/About-us.png -------------------------------------------------------------------------------- /img/Angelist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/Angelist.png -------------------------------------------------------------------------------- /img/GitHub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/GitHub.png -------------------------------------------------------------------------------- /img/Linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/Linkedin.png -------------------------------------------------------------------------------- /img/Medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/Medium.png -------------------------------------------------------------------------------- /img/Project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/Project.png -------------------------------------------------------------------------------- /img/Twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/Twitter.png -------------------------------------------------------------------------------- /img/Website.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/Website.png -------------------------------------------------------------------------------- /img/about-me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/about-me.png -------------------------------------------------------------------------------- /img/dark-m.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/dark-m.png -------------------------------------------------------------------------------- /img/dlinkdin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/dlinkdin.png -------------------------------------------------------------------------------- /img/project2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/project2.png -------------------------------------------------------------------------------- /img/shape1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/shape1.png -------------------------------------------------------------------------------- /img/shape2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/shape2.png -------------------------------------------------------------------------------- /img/shape3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/shape3.png -------------------------------------------------------------------------------- /img/website2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/website2.png -------------------------------------------------------------------------------- /img/CardImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/CardImage.png -------------------------------------------------------------------------------- /img/d-twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/d-twitter.png -------------------------------------------------------------------------------- /img/dangelist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/dangelist.png -------------------------------------------------------------------------------- /img/FeatureImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/FeatureImage.png -------------------------------------------------------------------------------- /img/dark-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karanJ2212/portfolio/HEAD/img/dark-github.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 | } 19 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": [ 7 | true, 8 | { 9 | "ignoreAtRules": [ 10 | "tailwind", 11 | "apply", 12 | "variants", 13 | "responsive", 14 | "screen" 15 | ] 16 | } 17 | ] 18 | }, 19 | "csstree/validator": true, 20 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"] 21 | } 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio", 3 | "version": "1.0.0", 4 | "description": "![](https://img.shields.io/badge/Microverse-blueviolet)", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/karanJ2212/portfolio.git" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/karanJ2212/portfolio/issues" 18 | }, 19 | "homepage": "https://github.com/karanJ2212/portfolio#readme", 20 | "devDependencies": { 21 | "hint": "^7.1.2", 22 | "stylelint": "^13.13.1", 23 | "stylelint-config-standard": "^21.0.0", 24 | "stylelint-csstree-validator": "^1.9.0", 25 | "stylelint-scss": "^3.21.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://img.shields.io/badge/Microverse-blueviolet) 2 | 3 | # Portfolio 4 | 5 | This is portfolio webite, It has desktop and mobile verson. Designed as per the requirements of the figma design provided by Microverse. 6 | It is designed using HTML and CSS . 7 | It contains Introduction, projects skills and about page. 8 | 9 | 10 | ## Built With 11 | 12 | html 13 | css 14 | 15 | 16 | 17 | 18 | ## Getting Started 19 | 20 | **This is an example of how you may give instructions on setting up your project locally.** 21 | **Modify this file to match your project, remove sections that don't apply. For example: delete the testing section if the currect project doesn't require testing.** 22 | 23 | 24 | To get a local copy up and running follow these simple example steps. 25 | Clone the repo named "portfolio" 26 | 27 | 28 | 29 | 30 | 31 | ## Authors 32 | 33 | 👤 Karan jain 34 | 35 | - GitHub: [@githubhandle]([https://github.com/githubhandle](https://github.com/karanJ2212)) 36 | 37 | - LinkedIn: [LinkedIn]linkedin.com/in/karanjain2212/ 38 | 39 | 40 | ## 🤝 Contributing 41 | 42 | Contributions, issues, and feature requests are welcome! 43 | 44 | Feel free to check the [issues page](../../issues/). 45 | 46 | ## Show your support 47 | 48 | Give a ⭐️ if you like this project! 49 | 50 | ## Acknowledgments 51 | 52 | - Hat tip to anyone whose code was used 53 | - Inspiration 54 | - etc 55 | 56 | ## 📝 License 57 | 58 | This project is [MIT](./LICENSE) licensed. 59 | 60 | _NOTE: we recommend using the [MIT license](https://choosealicense.com/licenses/mit/) - you can set it up quickly by [using templates available on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository). You can also use [any other license](https://choosealicense.com/licenses/) if you wish._ 61 | -------------------------------------------------------------------------------- /.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@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.7.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@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.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/.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@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.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/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | nodechecker: 50 | name: node_modules checker 51 | runs-on: ubuntu-22.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - name: Check node_modules existence 55 | run: | 56 | 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 57 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | karan's portfolio 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 | 31 |
32 |
33 |
34 |
35 |

Hey There.
I’m Karan

36 |

I’am a Software Developer

37 |

38 | I can help you build a product , feature or website Look through 39 | some of my work and experience! If you like what you see and have 40 | a project you need coded,
41 | don’t hestiate to contact me. 42 |

43 |
44 | 88 |
89 |
90 |
91 |
92 |
93 | My Recent Works 94 |
95 |
96 |
97 | 98 |
99 |

Multi-Post Stories

100 |

101 | A daily selection of privately personalized reads; no accounts or 102 | sign-ups required. has been the industry's standard dummy text 103 | ever since the 1500s, when an unknown printer took a standard 104 | dummy text. 105 |

106 |
    107 |
  • css
    • 108 |
  • html
    • 109 |
  • bootstrap
    • 110 |
  • Ruby
    • 111 |
112 | 113 |
114 |
115 |
116 |
117 |

Profesional Art Printing Data

118 |

119 | A daily selection of privately personalized reads; no accounts or 120 | sign-ups required. has been the industry's standard 121 |

122 |
    123 |
  • html
    • 124 |
  • bootstrap
    • 125 |
  • Ruby
    • 126 |
127 |
128 | 129 |
130 |
131 |

Art Printing Data More

132 |

133 | A daily selection of privately personalized reads; no accounts or 134 | sign-ups required. has been the industry's standard 135 |

136 |
    137 |
  • html
    • 138 |
  • bootstrap
    • 139 |
  • Ruby
    • 140 |
141 | 142 |
143 |
144 |

145 | Profesional Art Printing Data 146 |

147 |

148 | A daily selection of privately personalized reads; no accounts or 149 | sign-ups required. has been the industry's standard 150 |

151 |
    152 |
  • html
    • 153 |
  • bootstrap
    • 154 |
  • Ruby
    • 155 |
156 | 157 |
158 |
159 |

160 | Profesional Art Printing Data 161 |

162 |

163 | A daily selection of privately personalized reads; no accounts or 164 | sign-ups required. has been the industry's standard 165 |

166 |
    167 |
  • html
    • 168 |
  • bootstrap
    • 169 |
  • Ruby
    • 170 |
171 | 172 |
173 |
174 |

175 | Profesional Art Printing Data 176 |

177 |

178 | A daily selection of privately personalized reads; no accounts or 179 | sign-ups required. has been the industry's standard 180 |

181 |
    182 |
  • html
    • 183 |
  • bootstrap
    • 184 |
  • Ruby
    • 185 |
186 | 187 |
188 |
189 |

190 | Profesional Art Printing Data 191 |

192 |

193 | A daily selection of privately personalized reads; no accounts or 194 | sign-ups required. has been the industry's standard 195 |

196 |
    197 |
  • html
    • 198 |
  • bootstrap
    • 199 |
  • Ruby
    • 200 |
201 | 202 |
203 |
204 |
205 |
206 |
207 |
208 |

About me

209 |

210 | Hello I’m a software developer! I can help you build a product , 211 | feature or website Look through some of my work and experience! If 212 | you like what you see and have a project you need coded, don’t 213 | hestiate to contact me. 214 |

215 | 216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 | shape1 224 |

Language

225 |
226 |
    227 |
  • Javascript
    • 228 |
  • Ruby
    • 229 |
  • Html
    • 230 |
  • Css
    • 231 |
232 |
233 |
234 |
235 | shape1 236 |

Frameworks

237 |
238 |
    239 |
  • Bootstrap
    • 240 |
  • Ruby on Rails
    • 241 |
  • RSPec
    • 242 |
  • CapyBara
    • 243 |
  • Selenium
    • 244 |
245 |
246 |
247 |
248 | shape1 249 |

Skills

250 |
251 |
    252 |
  • Codekit
    • 253 |
  • GitHub
    • 254 |
  • Codepen
    • 255 |
  • Gitlab
    • 256 |
  • Terminal
    • 257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |

265 | 266 | I'm always
267 | interested in hearing
268 | about new projects,
269 | so if you'd like to
270 | chat please get in touch. 271 | 272 | 273 | I'm always interested
274 | in hearing about new
275 | projects, so if you'd
276 | like to chat please
277 | get in touch. 278 | 279 |

280 |
281 |
282 |
287 | 294 | 300 | 308 | 309 |
310 |
311 |
312 | 357 |
358 |
359 | 360 | 361 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* body { 2 | overflow: hidden; 3 | } */ 4 | 5 | * { 6 | border: 0; 7 | margin: 0; 8 | box-sizing: border-box; 9 | font-family: "Crete Round", serif; 10 | font-family: "Inter", sans-serif; 11 | font-family: "Poppins", sans-serif; 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | .container { 16 | max-width: 100% !important; 17 | overflow: hidden; 18 | } 19 | 20 | .contact-title:hover { 21 | transform: translate(0, 18px); 22 | } 23 | 24 | @media screen and (max-width: 768px) { 25 | header { 26 | display: flex; 27 | flex-direction: row; 28 | justify-content: space-between; 29 | background-color: #3c3a39; 30 | width: 100%; 31 | } 32 | 33 | .toolbar { 34 | width: 100%; 35 | display: flex; 36 | justify-content: space-between; 37 | align-items: center; 38 | padding: 20px; 39 | } 40 | 41 | .toolbar a { 42 | text-decoration: none; 43 | font-family: "Roboto", sans-serif; 44 | font-size: 18px; 45 | line-height: 24px; 46 | color: #fff; 47 | } 48 | 49 | .menu-list { 50 | display: none; 51 | } 52 | 53 | .headline { 54 | background-color: #1c1a19; 55 | width: 100%; 56 | height: 100vh; 57 | display: flex; 58 | flex-direction: column; 59 | padding-top: 130px; 60 | background-image: url("/img/Bg.png"); 61 | background-repeat: no-repeat; 62 | background-size: 134px; 63 | background-position: bottom -45px right 0; 64 | } 65 | 66 | .PrimaryText { 67 | display: flex; 68 | flex-direction: column; 69 | } 70 | 71 | .PrimaryText h1 { 72 | font-family: "Crete Round", sans-serif; 73 | font-weight: 400; 74 | font-size: 56px; 75 | line-height: 64px; 76 | color: #ff6b00; 77 | } 78 | 79 | .PrimaryText h1, 80 | p { 81 | margin-left: 30px; 82 | margin-right: 30px; 83 | } 84 | 85 | .PrimaryText .title { 86 | font-family: "Roboto", sans-serif; 87 | font-size: 24px; 88 | line-height: 40px; 89 | color: #fff5e1; 90 | } 91 | 92 | .PrimaryText p { 93 | font-family: "Poppins", sans-serif; 94 | font-size: 16px; 95 | font-weight: 400; 96 | line-height: 24px; 97 | color: #fff; 98 | } 99 | 100 | .description br { 101 | content: " "; 102 | } 103 | 104 | .socialmedia { 105 | display: flex; 106 | flex-direction: column; 107 | margin-top: 35px; 108 | } 109 | 110 | .socialmedia ul { 111 | display: flex; 112 | flex-direction: row; 113 | align-items: center; 114 | padding: 0 24px; 115 | list-style: none; 116 | } 117 | 118 | .socialmedia ul li { 119 | display: flex; 120 | flex-direction: row; 121 | align-items: flex-start; 122 | padding: 8px; 123 | } 124 | 125 | .RecentWorks { 126 | background: #e5e5e5; 127 | display: grid; 128 | width: 100%; 129 | grid-template-columns: repeat(auto-fit); 130 | justify-content: center; 131 | } 132 | 133 | .RecentWorks .title { 134 | display: flex; 135 | flex-direction: column; 136 | align-items: center; 137 | padding: 0; 138 | gap: 24px; 139 | margin-top: 120px; 140 | } 141 | 142 | .title strong { 143 | font-family: "Crete Round", sans-serif; 144 | font-weight: 400; 145 | font-size: 40px; 146 | line-height: 52px; 147 | color: #1c1a19; 148 | } 149 | 150 | hr { 151 | border: 1px solid #212121; 152 | width: 327px; 153 | } 154 | 155 | .RecentWorks .MultipostStories { 156 | display: flex; 157 | flex-direction: column; 158 | align-items: center; 159 | padding: 0; 160 | gap: 24px; 161 | margin-top: 80px; 162 | } 163 | 164 | .MultipostStories img { 165 | width: 448px; 166 | height: 330; 167 | } 168 | 169 | .info { 170 | display: flex; 171 | flex-direction: column; 172 | align-items: flex-start; 173 | padding: 0; 174 | gap: 12px; 175 | } 176 | 177 | .info .MultipostStories-heading { 178 | font-family: "Crete Round", sans-serif; 179 | font-weight: 400; 180 | font-size: 32px; 181 | line-height: 44px; 182 | color: #091e42; 183 | } 184 | 185 | .info p { 186 | font-family: "Inter", sans-serif; 187 | font-weight: 400; 188 | font-size: 16px; 189 | line-height: 24px; 190 | color: #091e42; 191 | } 192 | 193 | .info ul { 194 | list-style: none; 195 | display: flex; 196 | flex-direction: row; 197 | align-items: center; 198 | padding: 10px 12px; 199 | margin-left: 18px; 200 | gap: 12px; 201 | } 202 | 203 | .info ul li { 204 | font-family: "Inter", sans-serif; 205 | font-weight: 500; 206 | font-size: 15px; 207 | line-height: 20px; 208 | color: #091e42; 209 | display: flex; 210 | flex-direction: row; 211 | align-items: center; 212 | padding: 10px 12px; 213 | background: #fff; 214 | border: 1px solid #8993a4; 215 | } 216 | 217 | .info button { 218 | padding: 12px 30px; 219 | margin-left: 30px; 220 | gap: 10px; 221 | background: #ff6b00; 222 | font-family: "Inter", sans-serif; 223 | font-weight: 700; 224 | font-size: 17px; 225 | line-height: 24px; 226 | display: flex; 227 | align-items: center; 228 | text-align: center; 229 | letter-spacing: 0.03em; 230 | color: #fff; 231 | } 232 | 233 | .Works { 234 | display: flex; 235 | flex-direction: column; 236 | align-items: center; 237 | padding: 0 24px; 238 | gap: 24px; 239 | margin-top: 30px; 240 | margin-bottom: 100px; 241 | } 242 | 243 | .work1 { 244 | background-image: url("/img/CardImage.png"); 245 | } 246 | 247 | .work1 h2 { 248 | font-family: "Crete Round", sans-serif; 249 | font-weight: 400; 250 | font-size: 32px; 251 | line-height: 44px; 252 | color: #fff; 253 | padding: 130px 90px 0 30px; 254 | } 255 | 256 | .work1 p { 257 | font-family: "Inter", sans-serif; 258 | font-weight: 400; 259 | font-size: 16px; 260 | line-height: 24px; 261 | color: #fff; 262 | padding: 0 30px 0 0; 263 | } 264 | 265 | .work1 ul { 266 | list-style: none; 267 | display: flex; 268 | flex-direction: row; 269 | align-items: center; 270 | padding: 0; 271 | gap: 12px; 272 | margin-left: 30px; 273 | } 274 | 275 | .work1 ul li { 276 | display: flex; 277 | flex-direction: row; 278 | align-items: center; 279 | padding: 10px 12px; 280 | background: rgba(255, 255, 255, 0.24); 281 | font-family: "Inter", sans-serif; 282 | font-weight: 500; 283 | font-size: 15px; 284 | line-height: 20px; 285 | color: #fff; 286 | } 287 | 288 | .work1 button { 289 | display: flex; 290 | flex-direction: row; 291 | justify-content: center; 292 | align-items: center; 293 | padding: 12px; 294 | margin-top: 30px; 295 | background: #ff6b00; 296 | width: 100%; 297 | font-family: "Inter", sans-serif; 298 | font-size: 17px; 299 | line-height: 24px; 300 | letter-spacing: 0.03em; 301 | color: #fff; 302 | } 303 | 304 | .AboutMe { 305 | display: flex; 306 | flex-direction: column; 307 | align-items: flex-start; 308 | padding: 120px 24px; 309 | gap: 24px; 310 | background: #1c1a19; 311 | background-image: url("/img/About-us.png"); 312 | background-repeat: no-repeat; 313 | background-position: bottom 1750px right 0; 314 | } 315 | 316 | .AboutMe title { 317 | display: flex; 318 | flex-direction: column; 319 | margin-top: 50px; 320 | } 321 | 322 | .AboutMe .title h1 { 323 | display: flex; 324 | padding-left: 30px; 325 | font-family: "Crete Round", sans-serif; 326 | font-size: 72px; 327 | line-height: 88px; 328 | letter-spacing: 0.37px; 329 | color: #ff6b00; 330 | } 331 | 332 | .AboutMe .title p { 333 | font-family: "Inter", sans-serif; 334 | font-size: 16px; 335 | line-height: 24px; 336 | color: #f4f5f7; 337 | } 338 | 339 | .AboutMe .title button { 340 | display: flex; 341 | flex-direction: row; 342 | align-items: center; 343 | padding: 12px; 344 | gap: 10px; 345 | background: #ff6b00; 346 | font-family: "Inter", sans-serif; 347 | font-size: 17px; 348 | line-height: 24px; 349 | text-align: center; 350 | letter-spacing: 0.03em; 351 | color: #fff; 352 | margin: 20px 0 0 30px; 353 | } 354 | 355 | .AboutMe hr { 356 | display: flex; 357 | width: 90%; 358 | margin: 20px auto; 359 | margin-top: 200px; 360 | border: 1px solid rgb(255, 255, 255); 361 | } 362 | 363 | .skill { 364 | display: flex; 365 | flex-direction: column; 366 | align-items: center; 367 | padding: 120px 24px; 368 | gap: 24px; 369 | width: 100%; 370 | } 371 | 372 | .AboutMe .skill .sub-skill { 373 | display: flex; 374 | flex-direction: column; 375 | align-items: center; 376 | padding: 0; 377 | gap: 24px; 378 | } 379 | 380 | .skill .sub-skill .shape { 381 | display: flex; 382 | flex-direction: row; 383 | align-items: center; 384 | padding: 8px 12px; 385 | gap: 12px; 386 | } 387 | 388 | .shape h2 { 389 | font-family: "InaiMathi", sans-serif; 390 | font-size: 32px; 391 | line-height: 44px; 392 | display: flex; 393 | align-items: center; 394 | color: #fff; 395 | } 396 | 397 | .sub-skill ul { 398 | display: flex; 399 | flex-direction: column; 400 | align-items: center; 401 | padding: 0 12px; 402 | gap: 8px; 403 | list-style: none; 404 | } 405 | 406 | .sub-skill ul li { 407 | display: flex; 408 | flex-direction: column; 409 | align-items: center; 410 | padding: 12px 0; 411 | font-family: "Inter", sans-serif; 412 | font-style: normal; 413 | font-weight: 400; 414 | font-size: 22px; 415 | line-height: 43px; 416 | text-align: center; 417 | color: #fff; 418 | } 419 | 420 | .contact { 421 | display: flex; 422 | flex-direction: column; 423 | justify-content: center; 424 | align-items: center; 425 | background-color: #fff; 426 | } 427 | 428 | .heading { 429 | display: flex; 430 | flex-direction: row; 431 | align-items: center; 432 | width: 327px; 433 | height: 216px; 434 | margin-bottom: 60px; 435 | margin-top: 150px; 436 | } 437 | 438 | .heading .ds-content { 439 | display: none; 440 | } 441 | 442 | .heading h2 { 443 | font-family: "Inter", sans-serif; 444 | font-style: normal; 445 | font-weight: 700; 446 | font-size: 32px; 447 | line-height: 44px; 448 | text-align: center; 449 | color: #172b4d; 450 | } 451 | 452 | .form { 453 | display: flex; 454 | flex-direction: column; 455 | align-items: center; 456 | justify-content: center; 457 | } 458 | 459 | .contact .form { 460 | display: flex; 461 | flex-direction: column; 462 | align-items: center; 463 | width: 327px; 464 | height: 330px; 465 | } 466 | 467 | #contact-form { 468 | display: flex; 469 | flex-direction: column; 470 | gap: 24px; 471 | } 472 | 473 | #contact-form input { 474 | height: 48px; 475 | width: 327px; 476 | border: none; 477 | color: #979493; 478 | border-bottom: solid 1px #dbd8d7; 479 | } 480 | 481 | #contact-form textarea { 482 | height: 114px; 483 | width: 327px; 484 | background: #fbf8f7; 485 | border: none; 486 | font-size: 15px; 487 | font-family: "inter", sans-serif; 488 | font-weight: 400; 489 | line-height: 24px; 490 | } 491 | 492 | .submit { 493 | width: 131px; 494 | height: 48px; 495 | display: flex; 496 | flex-direction: row; 497 | align-items: center; 498 | text-align: center; 499 | padding-left: 12px; 500 | margin-left: 100px; 501 | background: #ff6b00; 502 | color: #fff; 503 | border: none; 504 | font-family: "inter", sans-serif; 505 | font-style: normal; 506 | font-size: 17px; 507 | line-height: 24px; 508 | font-weight: 700; 509 | letter-spacing: 0.03em; 510 | } 511 | 512 | .social-link { 513 | width: 375px; 514 | height: 72px; 515 | margin-top: 150px; 516 | margin-left: 50px; 517 | } 518 | 519 | .line-2 { 520 | height: 1px; 521 | color: #dfe1e6; 522 | } 523 | 524 | .f-Link { 525 | width: 200px; 526 | height: 40px; 527 | display: flex; 528 | align-items: center; 529 | justify-content: center; 530 | gap: 24px; 531 | list-style: none; 532 | padding-left: 150px; 533 | } 534 | 535 | .socialmedia ul li:hover { 536 | background-color: #fff5e1; 537 | color: #f55800; 538 | } 539 | 540 | .socialmedia ul li:active { 541 | background-color: #f55800; 542 | } 543 | 544 | .socialmedia ul li:disabled { 545 | background-color: #f4f1f0; 546 | } 547 | 548 | .btn:hover { 549 | background-color: #fff5e1; 550 | color: #f55800; 551 | } 552 | 553 | .btn:active { 554 | background-color: #f55800; 555 | } 556 | 557 | .btn:disabled { 558 | background-color: #f4f1f0; 559 | } 560 | 561 | .submit:hover { 562 | background-color: #fff5e1; 563 | color: #f55800; 564 | } 565 | 566 | .submit:active { 567 | background-color: #f55800; 568 | } 569 | 570 | .submit:disabled { 571 | background-color: #f4f1f0; 572 | } 573 | } 574 | 575 | .MultipostStories img:hover { 576 | transform: scale(1.1); 577 | } 578 | 579 | @media screen and (min-width: 768px) { 580 | header { 581 | display: flex; 582 | flex-direction: row; 583 | justify-content: space-between; 584 | background-color: #3c3c3c; 585 | width: 100%; 586 | height: 72px; 587 | } 588 | 589 | .toolbar { 590 | width: 100%; 591 | display: flex; 592 | justify-content: space-evenly; 593 | align-items: center; 594 | } 595 | 596 | #title { 597 | display: flex; 598 | width: 15%; 599 | } 600 | 601 | .toolbar a { 602 | display: flex; 603 | text-decoration: none; 604 | font-family: "Inter", sans-serif; 605 | font-weight: 700; 606 | font-size: 20px; 607 | line-height: 20px; 608 | color: #fff; 609 | align-items: center; 610 | text-align: center; 611 | } 612 | 613 | #toolbarimg { 614 | display: none; 615 | } 616 | 617 | .menu-list { 618 | display: flex; 619 | flex-direction: row; 620 | justify-content: flex-end; 621 | gap: 5%; 622 | width: 55%; 623 | list-style: none; 624 | } 625 | 626 | .menu-list li a { 627 | display: flex; 628 | align-items: center; 629 | text-align: center; 630 | font-family: "Inter", sans-serif; 631 | font-style: normal; 632 | font-weight: 600; 633 | font-size: 15px; 634 | line-height: 20px; 635 | color: #fff; 636 | } 637 | 638 | .headline { 639 | background-color: #1c1a19; 640 | width: 100%; 641 | height: 798px; 642 | display: flex; 643 | flex-direction: row; 644 | } 645 | 646 | .headline1 { 647 | width: 50%; 648 | display: flex; 649 | flex-direction: row-reverse; 650 | justify-content: space-between; 651 | gap: 60px; 652 | } 653 | 654 | .PrimaryText { 655 | display: flex; 656 | flex-direction: column; 657 | justify-content: center; 658 | row-gap: 15px; 659 | } 660 | 661 | .PrimaryText h1 { 662 | font-family: "Crete Round", sans-serif; 663 | font-weight: 400; 664 | font-size: 72px; 665 | line-height: 82px; 666 | color: #f55800; 667 | } 668 | 669 | .PrimaryText .title { 670 | font-family: "Inter", sans-serif; 671 | font-weight: 400; 672 | font-size: 32px; 673 | line-height: 44px; 674 | color: #fff; 675 | } 676 | 677 | .PrimaryText p { 678 | font-family: "Inter", sans-serif; 679 | font-size: 20px; 680 | font-weight: 400; 681 | line-height: 32px; 682 | color: #f4f5f7; 683 | } 684 | 685 | .socialmedia { 686 | display: flex; 687 | justify-content: center; 688 | width: 10%; 689 | } 690 | 691 | .socialmedia ul { 692 | display: flex; 693 | flex-direction: column; 694 | justify-content: center; 695 | list-style: none; 696 | } 697 | 698 | .socialmedia ul li { 699 | display: flex; 700 | flex-direction: row; 701 | align-items: flex-start; 702 | padding: 8px; 703 | } 704 | 705 | .col2 { 706 | display: flex; 707 | width: 50%; 708 | height: inherit; 709 | background-image: url("/img/ds-bg.png"); 710 | background-repeat: no-repeat; 711 | background-size: 600px; 712 | background-position: top -65px right 0; 713 | } 714 | 715 | .RecentWorks { 716 | display: flex; 717 | flex-direction: column; 718 | background: #e5e5e5; 719 | width: 100%; 720 | } 721 | 722 | .RecentWorks .title { 723 | width: 100%; 724 | display: flex; 725 | flex-direction: row; 726 | justify-content: center; 727 | align-items: center; 728 | margin-top: 120px; 729 | } 730 | 731 | .title strong { 732 | display: flex; 733 | width: 25%; 734 | font-family: "Crete Round", sans-serif; 735 | font-weight: 400; 736 | font-size: 40px; 737 | line-height: 52px; 738 | color: #091e42; 739 | } 740 | 741 | hr { 742 | border: solid 1px #212121; 743 | width: 55%; 744 | } 745 | 746 | .MultipostStories { 747 | width: 100%; 748 | display: flex; 749 | flex-direction: row; 750 | justify-content: center; 751 | margin-top: 120px; 752 | gap: 20px; 753 | } 754 | 755 | .MultipostStories img { 756 | width: 45%; 757 | height: 448px; 758 | } 759 | 760 | .info { 761 | width: 33%; 762 | height: 348px; 763 | display: flex; 764 | flex-direction: column; 765 | gap: 15px; 766 | } 767 | 768 | .info .MultipostStories-heading { 769 | display: flex; 770 | font-family: "Crete Round", sans-serif; 771 | font-weight: 400; 772 | font-size: 40px; 773 | line-height: 52px; 774 | color: #091e42; 775 | } 776 | 777 | .info p { 778 | display: flex; 779 | font-family: "Inter", sans-serif; 780 | font-weight: 400; 781 | font-size: 20px; 782 | line-height: 28px; 783 | color: #091e42; 784 | } 785 | 786 | .info ul { 787 | display: flex; 788 | flex-direction: row; 789 | align-items: center; 790 | padding: 0; 791 | gap: 12px; 792 | list-style: none; 793 | } 794 | 795 | .info ul li { 796 | font-family: "Inter", sans-serif; 797 | font-weight: 500; 798 | font-size: 15px; 799 | line-height: 20px; 800 | color: #091e42; 801 | display: flex; 802 | flex-direction: row; 803 | align-items: center; 804 | padding: 10px 12px; 805 | background: #fff; 806 | border: solid 1px #8993a4; 807 | } 808 | 809 | .info button { 810 | width: 124px; 811 | height: 48px; 812 | padding: 12px; 813 | gap: 10px; 814 | background: #f55800; 815 | font-family: "Inter", sans-serif; 816 | font-weight: 700; 817 | font-size: 17px; 818 | line-height: 24px; 819 | display: flex; 820 | align-items: center; 821 | text-align: center; 822 | letter-spacing: 0.03em; 823 | color: #fff; 824 | } 825 | 826 | .Works { 827 | width: 100%; 828 | margin-top: 20px; 829 | display: flex; 830 | flex-direction: row; 831 | flex-wrap: wrap; 832 | justify-content: center; 833 | align-items: center; 834 | gap: 5%; 835 | } 836 | 837 | #w1 { 838 | background-image: url("/img/Project.png"); 839 | background-repeat: no-repeat; 840 | height: 435px; 841 | } 842 | 843 | #w1:hover { 844 | border: solid 2px #000; 845 | } 846 | 847 | .work1 .project { 848 | display: none; 849 | } 850 | 851 | #w2 { 852 | background-image: url("/img/Data.png"); 853 | background-repeat: no-repeat; 854 | height: 435px; 855 | } 856 | 857 | #w2:hover { 858 | border: solid 2px #000; 859 | } 860 | 861 | .work1 span { 862 | display: none; 863 | } 864 | 865 | #w2 .work-title::after { 866 | content: "Data Dashboard Healthcare"; 867 | } 868 | 869 | .work1 .btn { 870 | display: none; 871 | } 872 | 873 | #w3 { 874 | background-image: url("/img/Website.png"); 875 | background-repeat: no-repeat; 876 | height: 435px; 877 | } 878 | 879 | #w3:hover { 880 | border: solid 2px #000; 881 | } 882 | 883 | #w3 .work-title::after { 884 | content: "Website Protfolio"; 885 | } 886 | 887 | #w4 { 888 | background-image: url("/img/project2.png"); 889 | background-repeat: no-repeat; 890 | height: 435px; 891 | } 892 | 893 | #w4:hover { 894 | border: solid 2px #000; 895 | } 896 | 897 | #w4 .work-title::after { 898 | content: "Profesional Art Printing Data More"; 899 | } 900 | 901 | #w5 { 902 | background-image: url("/img/data2.png"); 903 | background-repeat: no-repeat; 904 | height: 435px; 905 | } 906 | 907 | #w5:hover { 908 | border: solid 2px #000; 909 | } 910 | 911 | #w5 .work-title::after { 912 | content: "Data Dashboard Healthcare"; 913 | } 914 | 915 | #w6 { 916 | background-image: url("/img/website2.png"); 917 | background-repeat: no-repeat; 918 | height: 435px; 919 | } 920 | 921 | #w6:hover { 922 | border: solid 2px #000; 923 | } 924 | 925 | #w6 .work-title::after { 926 | content: "Website Protfolio"; 927 | } 928 | 929 | .work1 { 930 | display: grid; 931 | margin-top: 10px; 932 | margin-bottom: 100px; 933 | width: 23%; 934 | gap: 5px; 935 | } 936 | 937 | .work1 h2 { 938 | font-family: "Crete Round", sans-serif; 939 | font-weight: 400; 940 | font-size: 32px; 941 | line-height: 44px; 942 | color: #fff; 943 | margin: 120px 0 0 30px; 944 | } 945 | 946 | .work1 p { 947 | font-family: "Inter", sans-serif; 948 | font-weight: 400; 949 | font-size: 17px; 950 | line-height: 24px; 951 | color: #fff; 952 | padding: 0 30px 0 30px; 953 | } 954 | 955 | .work1 ul { 956 | display: flex; 957 | flex-direction: row; 958 | align-items: center; 959 | margin-left: 30px; 960 | padding: 0; 961 | gap: 12px; 962 | list-style: none; 963 | } 964 | 965 | .work1 ul li { 966 | display: flex; 967 | flex-direction: row; 968 | align-items: center; 969 | padding: 10px 12px; 970 | background: rgba(255, 255, 255, 0.24); 971 | font-family: "Inter", sans-serif; 972 | font-weight: 500; 973 | font-size: 15px; 974 | line-height: 20px; 975 | color: #fff; 976 | } 977 | 978 | .work1 button { 979 | display: none; 980 | flex-direction: row; 981 | justify-content: center; 982 | align-items: center; 983 | align-self: flex-end; 984 | background: #ff6b00; 985 | width: 100%; 986 | height: 58px; 987 | font-family: "Inter", sans-serif; 988 | font-size: 17px; 989 | line-height: 24px; 990 | letter-spacing: 0.03em; 991 | color: #fff; 992 | } 993 | 994 | .AboutMe { 995 | width: 100%; 996 | display: flex; 997 | flex-direction: column; 998 | justify-content: center; 999 | align-items: center; 1000 | background: #262626; 1001 | } 1002 | 1003 | .AboutMe .title { 1004 | width: 100%; 1005 | display: flex; 1006 | flex-direction: row; 1007 | margin-top: 100px; 1008 | } 1009 | 1010 | .about-me-content { 1011 | width: 50%; 1012 | display: flex; 1013 | flex-direction: column; 1014 | margin-left: 150px; 1015 | gap: 5%; 1016 | } 1017 | 1018 | .about-me-content h1 { 1019 | display: flex; 1020 | font-family: "Crete Round", sans-serif; 1021 | font-weight: 400; 1022 | font-size: 72px; 1023 | line-height: 82px; 1024 | color: #f55800; 1025 | } 1026 | 1027 | .about-me-content p { 1028 | font-family: "Inter", sans-serif; 1029 | font-weight: 400; 1030 | font-size: 20px; 1031 | line-height: 32px; 1032 | color: #f4f5f7; 1033 | width: 566px; 1034 | } 1035 | 1036 | .about-me-content button { 1037 | display: flex; 1038 | flex-direction: row; 1039 | align-items: center; 1040 | padding: 12px; 1041 | gap: 10px; 1042 | background: #f55800; 1043 | font-family: "Inter", sans-serif; 1044 | font-weight: 700; 1045 | font-size: 17px; 1046 | line-height: 24px; 1047 | text-align: center; 1048 | letter-spacing: 0.03em; 1049 | color: #fff; 1050 | width: 161px; 1051 | height: 48px; 1052 | } 1053 | 1054 | .about-me-img { 1055 | display: flex; 1056 | width: 50%; 1057 | height: 352.38px; 1058 | background-image: url("/img/about-me.png"); 1059 | background-repeat: no-repeat; 1060 | background-size: 500px; 1061 | background-position: top 0 right 0; 1062 | } 1063 | 1064 | .about-me hr { 1065 | display: flex; 1066 | width: 78%; 1067 | margin-top: 100px; 1068 | border: 1px solid rgb(255, 255, 255); 1069 | } 1070 | 1071 | .skill { 1072 | display: flex; 1073 | flex-direction: row; 1074 | justify-content: space-evenly; 1075 | align-items: flex-start; 1076 | margin-top: 100px; 1077 | margin-bottom: 100px; 1078 | width: 100%; 1079 | gap: 5%; 1080 | } 1081 | 1082 | .about-me .skill .sub-skill { 1083 | display: flex; 1084 | flex-direction: column; 1085 | align-items: flex-start; 1086 | padding: 0; 1087 | gap: 24px; 1088 | } 1089 | 1090 | .skill .sub-skill .shape { 1091 | display: flex; 1092 | flex-direction: row; 1093 | align-items: center; 1094 | padding: 8px 12px; 1095 | gap: 12px; 1096 | } 1097 | 1098 | .shape h2 { 1099 | font-family: "InaiMathi", sans-serif; 1100 | font-size: 32px; 1101 | line-height: 44px; 1102 | display: flex; 1103 | align-items: center; 1104 | color: #fff; 1105 | } 1106 | 1107 | .sub-skill ul { 1108 | display: flex; 1109 | flex-direction: column; 1110 | align-items: flex-start; 1111 | padding: 0 12px; 1112 | gap: 8px; 1113 | list-style: none; 1114 | } 1115 | 1116 | .sub-skill ul li { 1117 | display: flex; 1118 | flex-direction: column; 1119 | align-items: center; 1120 | padding: 12px 0; 1121 | font-family: "Inter", sans-serif; 1122 | font-style: normal; 1123 | font-weight: 400; 1124 | font-size: 22px; 1125 | line-height: 43px; 1126 | text-align: center; 1127 | color: #fff; 1128 | } 1129 | 1130 | .contact { 1131 | width: 100%; 1132 | display: flex; 1133 | flex-direction: column; 1134 | justify-content: center; 1135 | align-items: center; 1136 | background-color: #fff; 1137 | } 1138 | 1139 | .row1 { 1140 | display: flex; 1141 | flex-direction: row; 1142 | margin-top: 100px; 1143 | gap: 90px; 1144 | } 1145 | 1146 | .heading { 1147 | display: flex; 1148 | flex-direction: row; 1149 | justify-content: center; 1150 | } 1151 | 1152 | .heading .mb-content { 1153 | display: none; 1154 | } 1155 | 1156 | .heading .ds-content::after { 1157 | display: flex; 1158 | } 1159 | 1160 | .heading h2 { 1161 | font-family: "Inter", sans-serif; 1162 | font-style: normal; 1163 | font-weight: 700; 1164 | font-size: 40px; 1165 | line-height: 52px; 1166 | color: #262626; 1167 | } 1168 | 1169 | .form { 1170 | display: flex; 1171 | flex-direction: column; 1172 | align-items: center; 1173 | justify-content: center; 1174 | } 1175 | 1176 | .contact .form { 1177 | display: flex; 1178 | flex-direction: column; 1179 | align-items: center; 1180 | } 1181 | 1182 | #contact-form { 1183 | display: flex; 1184 | flex-direction: column; 1185 | gap: 24px; 1186 | } 1187 | 1188 | #contact-form input { 1189 | height: 48px; 1190 | width: 584px; 1191 | border: none; 1192 | color: #979493; 1193 | border-bottom: solid 1px #dbd8d7; 1194 | } 1195 | 1196 | #contact-form textarea { 1197 | height: 114px; 1198 | width: 584px; 1199 | background: #fbf8f7; 1200 | border: none; 1201 | font-size: 15px; 1202 | font-family: "inter", sans-serif; 1203 | font-weight: 400; 1204 | line-height: 24px; 1205 | } 1206 | 1207 | .submit { 1208 | width: 131px; 1209 | height: 48px; 1210 | display: flex; 1211 | flex-direction: row; 1212 | align-items: center; 1213 | text-align: center; 1214 | padding-left: 12px; 1215 | background: #ff6b00; 1216 | color: #fff; 1217 | border: none; 1218 | font-family: "inter", sans-serif; 1219 | font-style: normal; 1220 | font-size: 17px; 1221 | line-height: 24px; 1222 | font-weight: 700; 1223 | letter-spacing: 0.03em; 1224 | } 1225 | 1226 | .social-link { 1227 | display: flex; 1228 | flex-direction: column; 1229 | justify-content: center; 1230 | align-items: center; 1231 | width: 100%; 1232 | margin-top: 150px; 1233 | } 1234 | 1235 | .line-2 { 1236 | display: flex; 1237 | width: 100%; 1238 | border: solid 1px #dfe1e6; 1239 | } 1240 | 1241 | .f-Link { 1242 | width: 200px; 1243 | height: 40px; 1244 | display: flex; 1245 | align-items: center; 1246 | justify-content: center; 1247 | gap: 25px; 1248 | list-style: none; 1249 | } 1250 | 1251 | .socialmedia ul li:hover { 1252 | background-color: #f55800; 1253 | } 1254 | 1255 | .socialmedia ul li:active { 1256 | background-color: #fff5e1; 1257 | } 1258 | 1259 | .socialmedia ul li:disabled { 1260 | background-color: #f4f1f0; 1261 | } 1262 | 1263 | .social-link ul li:hover { 1264 | background-color: #f55800; 1265 | } 1266 | 1267 | .social-link ul li:active { 1268 | background-color: #fff5e1; 1269 | } 1270 | 1271 | .social-link ul li:disabled { 1272 | background-color: #f4f1f0; 1273 | } 1274 | 1275 | button:hover { 1276 | background-color: #fff5e1; 1277 | color: #f55800; 1278 | } 1279 | 1280 | button:active { 1281 | background-color: #f55800; 1282 | } 1283 | 1284 | button:disabled { 1285 | background-color: #f4f1f0; 1286 | } 1287 | 1288 | .show-button:hover + button { 1289 | display: flex; 1290 | } 1291 | 1292 | .submit:hover { 1293 | background-color: #fff5e1; 1294 | color: #f55800; 1295 | } 1296 | 1297 | .submit:active { 1298 | background-color: #f55800; 1299 | } 1300 | 1301 | .submit:disabled { 1302 | background-color: #f4f1f0; 1303 | } 1304 | } 1305 | --------------------------------------------------------------------------------