├── .vscode
    └── settings.json
├── src
    ├── img
    │   └── photo_2024-05-03_20-00-13.jpg
    ├── css
    │   ├── media-queries.css
    │   ├── animations.css
    │   ├── setup.css
    │   └── styles.css
    ├── js
    │   └── script.js
    └── libs
    │   └── normalize.css
├── .gitignore
└── index.html


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/src/img/photo_2024-05-03_20-00-13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KhujamovCodes/Portifolio/HEAD/src/img/photo_2024-05-03_20-00-13.jpg


--------------------------------------------------------------------------------
/src/css/media-queries.css:
--------------------------------------------------------------------------------
 1 | /*/////////////////////////////////
 2 | // Media Queries
 3 | /////////////////////////////////*/
 4 | 
 5 | @media only screen and (max-width: 700px) {
 6 |     .grid-list {
 7 |         grid-template-columns: repeat(3, minmax(100px, 1fr));
 8 |     }
 9 | }
10 | 
11 | @media only screen and (max-width: 600px) {
12 |     header {
13 |         min-height: 800px;
14 |         overflow: hidden;
15 |         position: relative;
16 |     }
17 | 
18 |     .main-photo {
19 |         top: 0;
20 |         left: 0;
21 |     }
22 | 
23 |     .heading {
24 |         top: 50%;
25 |         width: 20em;
26 |     }
27 | 
28 |     .intro {
29 |         font-size: 6em;
30 |     }
31 | 
32 |     .lead {
33 |         font-size: 1.5em;
34 |         width: 100%;
35 |     }
36 | 
37 |     .grid-list {
38 |         grid-template-columns: repeat(2, minmax(100px, 1fr));
39 |     }
40 | }
41 | 
42 | @media only screen and (max-width: 550px) {
43 |     .contact-form {
44 |         grid-template-columns: 1fr;
45 |     }
46 | }
47 | 
48 | @media only screen and (max-width: 450px) {
49 |     h2 {
50 |         font-size: 3.7em;
51 |     }
52 | 
53 |     .contact-form {
54 |         grid-template-columns: 1fr;
55 |     }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/js/script.js:
--------------------------------------------------------------------------------
 1 | // Scroll function from Donovan Hutchinson's Level Up Your CSS Animation Skills Udemy course
 2 | // Detect request animation frame
 3 | const scroll =
 4 |     window.requestAnimationFrame ||
 5 |     // IE Fallback
 6 |     function (callback) {
 7 |         window.setTimeout(callback, 1000 / 60);
 8 |     };
 9 | const elementsToShow = document.querySelectorAll(".show-on-scroll");
10 | 
11 | function loop() {
12 |     elementsToShow.forEach(function (element) {
13 |         if (isElementInViewport(element)) {
14 |             element.classList.add("is-visible");
15 |         } else {
16 |             element.classList.remove("is-visible");
17 |         }
18 |     });
19 | 
20 |     scroll(loop);
21 | }
22 | 
23 | // Call the loop for the first time
24 | loop();
25 | 
26 | // Helper function from: http://stackoverflow.com/a/7557433/274826
27 | function isElementInViewport(el) {
28 |     // special bonus for those using jQuery
29 |     if (typeof jQuery === "function" && el instanceof jQuery) {
30 |         el = el[0];
31 |     }
32 |     const rect = el.getBoundingClientRect();
33 |     return (
34 |         (rect.top <= 0 && rect.bottom >= 0) ||
35 |         (rect.bottom >=
36 |             (window.innerHeight || document.documentElement.clientHeight) &&
37 |             rect.top <=
38 |                 (window.innerHeight ||
39 |                     document.documentElement.clientHeight)) ||
40 |         (rect.top >= 0 &&
41 |             rect.bottom <=
42 |                 (window.innerHeight || document.documentElement.clientHeight))
43 |     );
44 | }
45 | 
46 | // Smooth scroll function
47 | const headerBtn = document.getElementById("header-btn");
48 | const socialContact = document.getElementById("social-contact");
49 | const contactForm = document.getElementById("contact");
50 | 
51 | function scrollToForm() {
52 |     contactForm.scrollIntoView({ behavior: "smooth" }); // Top
53 | }
54 | 
55 | headerBtn.addEventListener("click", scrollToForm);
56 | socialContact.addEventListener("click", scrollToForm);
57 | 
58 | // No bots!
59 | const contactFormNoBots = document.getElementById("contact-form-no-bots");
60 | contactFormNoBots.parentNode.removeChild(contactFormNoBots);
61 | 


--------------------------------------------------------------------------------
/src/css/animations.css:
--------------------------------------------------------------------------------
 1 | /*/////////////////////////////////
 2 | // Animation Styles
 3 | /////////////////////////////////*/
 4 | 
 5 | /* Header */
 6 | header {
 7 |     opacity: 0;
 8 |     -webkit-transition: opacity 0.5s 0.25s ease-out;
 9 |     transition: opacity 0.5s 0.25s ease-out;
10 | }
11 | 
12 | header.is-visible {
13 |     opacity: 1;
14 | }
15 | 
16 | .main-photo {
17 |     -webkit-transform: scale(0.8);
18 |     transform: scale(0.8);
19 | }
20 | 
21 | .heading {
22 |     -webkit-transform: translate(-50%, calc(-50% + 5em));
23 |     transform: translate(-50%, calc(-50% + 5em));
24 | }
25 | 
26 | .is-visible .main-photo {
27 |     -webkit-transform: none;
28 |     transform: none;
29 | }
30 | 
31 | .is-visible .heading {
32 |     -webkit-transform: translate(-50%, -50%);
33 |     transform: translate(-50%, -50%);
34 | }
35 | 
36 | .main-photo,
37 | .heading {
38 |     -webkit-transition: -webkit-transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1);
39 |     transition: -webkit-transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1);
40 |     transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1);
41 |     transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1),
42 |         -webkit-transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1);
43 |     will-change: transform;
44 | }
45 | 
46 | /* Icons Grid List / Portfolio */
47 | 
48 | .grid-list,
49 | .portfolio-img {
50 |     opacity: 0;
51 |     -webkit-transition: opacity 0.3s 0.25s ease-out,
52 |         -webkit-transform 1.5s 0.25s cubic-bezier(0, 1, 0.3, 1);
53 |     transition: opacity 0.3s 0.25s ease-out,
54 |         -webkit-transform 1.5s 0.25s cubic-bezier(0, 1, 0.3, 1);
55 |     transition: transform 1.5s 0.25s cubic-bezier(0, 1, 0.3, 1),
56 |         opacity 0.3s 0.25s ease-out;
57 |     transition: transform 1.5s 0.25s cubic-bezier(0, 1, 0.3, 1),
58 |         opacity 0.3s 0.25s ease-out,
59 |         -webkit-transform 1.5s 0.25s cubic-bezier(0, 1, 0.3, 1);
60 |     will-change: transform, opacity;
61 | }
62 | 
63 | .grid-list.slide-left {
64 |     -webkit-transform: translateX(-4em);
65 |     transform: translateX(-4em);
66 | }
67 | 
68 | .grid-list.slide-right {
69 |     -webkit-transform: translateX(4em);
70 |     transform: translateX(4em);
71 | }
72 | 
73 | .grid-list.is-visible {
74 |     opacity: 1;
75 |     -webkit-transform: translateX(0);
76 |     transform: translateX(0);
77 | }
78 | 
79 | .portfolio-img.is-visible {
80 |     opacity: 1;
81 |     -webkit-transform: translateY(0);
82 |     transform: translateY(0);
83 | }
84 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | 
  2 | # Created by https://www.gitignore.io/api/node,macos
  3 | # Edit at https://www.gitignore.io/?templates=node,macos
  4 | 
  5 | ### macOS ###
  6 | # General
  7 | .DS_Store
  8 | .AppleDouble
  9 | .LSOverride
 10 | 
 11 | # Icon must end with two \r
 12 | Icon
 13 | 
 14 | # Thumbnails
 15 | ._*
 16 | 
 17 | # Files that might appear in the root of a volume
 18 | .DocumentRevisions-V100
 19 | .fseventsd
 20 | .Spotlight-V100
 21 | .TemporaryItems
 22 | .Trashes
 23 | .VolumeIcon.icns
 24 | .com.apple.timemachine.donotpresent
 25 | 
 26 | # Directories potentially created on remote AFP share
 27 | .AppleDB
 28 | .AppleDesktop
 29 | Network Trash Folder
 30 | Temporary Items
 31 | .apdisk
 32 | 
 33 | ### Node ###
 34 | # Logs
 35 | logs
 36 | *.log
 37 | npm-debug.log*
 38 | yarn-debug.log*
 39 | yarn-error.log*
 40 | lerna-debug.log*
 41 | 
 42 | # Diagnostic reports (https://nodejs.org/api/report.html)
 43 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 44 | 
 45 | # Runtime data
 46 | pids
 47 | *.pid
 48 | *.seed
 49 | *.pid.lock
 50 | 
 51 | # Directory for instrumented libs generated by jscoverage/JSCover
 52 | lib-cov
 53 | 
 54 | # Coverage directory used by tools like istanbul
 55 | coverage
 56 | *.lcov
 57 | 
 58 | # nyc test coverage
 59 | .nyc_output
 60 | 
 61 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 62 | .grunt
 63 | 
 64 | # Bower dependency directory (https://bower.io/)
 65 | bower_components
 66 | 
 67 | # node-waf configuration
 68 | .lock-wscript
 69 | 
 70 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 71 | build/Release
 72 | 
 73 | # Dependency directories
 74 | node_modules/
 75 | jspm_packages/
 76 | 
 77 | # TypeScript v1 declaration files
 78 | typings/
 79 | 
 80 | # TypeScript cache
 81 | *.tsbuildinfo
 82 | 
 83 | # Optional npm cache directory
 84 | .npm
 85 | 
 86 | # Optional eslint cache
 87 | .eslintcache
 88 | 
 89 | # Optional REPL history
 90 | .node_repl_history
 91 | 
 92 | # Output of 'npm pack'
 93 | *.tgz
 94 | 
 95 | # Yarn Integrity file
 96 | .yarn-integrity
 97 | 
 98 | # dotenv environment variables file
 99 | .env
100 | .env.test
101 | 
102 | # parcel-bundler cache (https://parceljs.org/)
103 | .cache
104 | 
105 | # next.js build output
106 | .next
107 | 
108 | # nuxt.js build output
109 | .nuxt
110 | 
111 | # vuepress build output
112 | .vuepress/dist
113 | 
114 | # Serverless directories
115 | .serverless/
116 | 
117 | # FuseBox cache
118 | .fusebox/
119 | 
120 | # DynamoDB Local files
121 | .dynamodb/
122 | 
123 | # End of https://www.gitignore.io/api/node,macos
124 | 


--------------------------------------------------------------------------------
/src/css/setup.css:
--------------------------------------------------------------------------------
  1 | /* Colors */
  2 | :root {
  3 |     --black: #000000;
  4 |     --dark-red: rgba(255, 0, 0, 0.5);
  5 |     --grey: #666;
  6 |     --lighter-black: #FEAB02;
  7 |     --red: rgba(255, 0, 0, 0.75);
  8 |     --white: #131313;
  9 | }
 10 | 
 11 | /* Basic Setup */
 12 | 
 13 | html {
 14 |     box-sizing: border-box;
 15 |     min-width: 400px;
 16 | }
 17 | 
 18 | *,
 19 | *:before,
 20 | *:after {
 21 |     box-sizing: inherit;
 22 | }
 23 | 
 24 | ::selection,
 25 | ::-moz-selection {
 26 |     background: var(--red);
 27 |     color: var(--lighter-black);
 28 | }
 29 | 
 30 | /* Text styles */
 31 | @font-face {
 32 |     font-family: "Open Sans";
 33 |     font-style: normal;
 34 |     font-weight: 400;
 35 |     src: local("Open Sans"), local("OpenSans"),
 36 |         url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff)
 37 |             format("woff");
 38 | }
 39 | 
 40 | @font-face {
 41 |     font-family: "Open Sans";
 42 |     font-style: normal;
 43 |     font-weight: 700;
 44 |     src: local("Open Sans Bold"), local("OpenSans-Bold"),
 45 |         url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff)
 46 |             format("woff");
 47 | }
 48 | 
 49 | html {
 50 |     background: var(--white);
 51 |     color: var(--black);
 52 |     font-size: 10px;
 53 |     font-family: "Avenir Next", Open Sans, sans-serif;
 54 |     line-height: 1.15;
 55 |     -ms-text-size-adjust: 100%;
 56 |     -webkit-text-size-adjust: 100%;
 57 | }
 58 | 
 59 | body {
 60 |     font-size: 1.8rem;
 61 | }
 62 | 
 63 | h1 {
 64 |     font-size: 4.8rem;
 65 | }
 66 | 
 67 | h2 {
 68 |     font-size: 4.7em;
 69 | }
 70 | 
 71 | h3 {
 72 |     font-size: 2.5em;
 73 |     text-align: center;
 74 | }
 75 | 
 76 | h1,
 77 | h2,
 78 | h3,
 79 | h4,
 80 | h5,
 81 | h6 {
 82 |     color: var(--lighter-black);
 83 | }
 84 | 
 85 | p,
 86 | li {
 87 |     font-size: 2rem;
 88 |     line-height: 1.5;
 89 | }
 90 | 
 91 | ul {
 92 |     list-style: none;
 93 |     padding: 0;
 94 | }
 95 | 
 96 | a {
 97 |     box-shadow: inset 0 -0.5em var(--dark-red);
 98 |     color: var(--black);
 99 |     font-weight: bold;
100 |     text-decoration: none;
101 |     transition: all 0.4s cubic-bezier(0, 1, 0.3, 1);
102 | }
103 | 
104 | a:hover {
105 |     box-shadow: inset 0 -1.5em var(--red);
106 |     color: var(--white);
107 | }
108 | 
109 | .white-text {
110 |     color: var(--white) !important;
111 | }
112 | 
113 | .red-text {
114 |     color: var(--red);
115 | }
116 | 
117 | .text-center {
118 |     text-align: center !important;
119 | }
120 | 


--------------------------------------------------------------------------------
/src/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* General Styles */
  2 | .grid-list {
  3 |     display: grid;
  4 |     grid-row-gap: 40px;
  5 |     grid-template-columns: repeat(4, minmax(100px, 1fr));
  6 |     text-align: center;
  7 | }
  8 | 
  9 | .grid-list > li > a:hover {
 10 |     color: var(--red);
 11 | }
 12 | 
 13 | section {
 14 |     align-content: center;
 15 |     display: grid;
 16 |     justify-content: center;
 17 |     min-height: 100vh;
 18 |     padding: 40px 30px 100px 30px;
 19 | }
 20 | 
 21 | section > div {
 22 |     max-width: 1000px;
 23 |     overflow: hidden;
 24 | }
 25 | 
 26 | .svg-image {
 27 |     fill: var(--white);
 28 |     height: 80px;
 29 |     padding: 5px;
 30 |     width: 80px;
 31 | }
 32 | 
 33 | /* Header Styles */
 34 | header {
 35 |     height: 100vh;
 36 |     min-height: 1200px;
 37 |     overflow: hidden;
 38 |     position: relative;
 39 | }
 40 | 
 41 | header:after {
 42 |     content: "";
 43 |     position: absolute;
 44 |     top: 0;
 45 |     right: 0;
 46 |     bottom: 0;
 47 |     left: 0;
 48 | }
 49 | 
 50 | .heading {
 51 |     color: var(--lighter-black);
 52 |     line-height: 1;
 53 |     margin: 0;
 54 |     position: absolute;
 55 |     left: 50%;
 56 |     top: 50%;
 57 |     text-shadow: -1px -1px 0 var(--white), 1px -1px 0 var(--white),
 58 |         -1px 1px 0 var(--white), 1px 1px 0 var(--white);
 59 |     -webkit-transform: translate(-50%, -50%);
 60 |     transform: translate(-50%, -50%);
 61 |     width: 30em;
 62 |     z-index: 10;
 63 | }
 64 | 
 65 | .intro {
 66 |     font-size: 8em;
 67 |     margin-bottom: 0;
 68 | }
 69 | 
 70 | .lead {
 71 |     color: var(--grey);
 72 |     font-size: 2em;
 73 |     margin-bottom: 60px;
 74 | }
 75 | 
 76 | .header-btn {
 77 |     background: var(--lighter-black);
 78 |     border: 2px solid var(--lighter-black);
 79 |     border-radius: 4px;
 80 |     box-shadow: none;
 81 |     color: var(--white);
 82 |     cursor: pointer;
 83 |     font-size: 90%;
 84 |     font-weight: normal;
 85 |     padding: 20px;
 86 |     text-shadow: none;
 87 |     transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
 88 | }
 89 | 
 90 | .header-btn:hover {
 91 |     background: var(--white);
 92 |     box-shadow: none;
 93 |     color: var(--lighter-black);
 94 | }
 95 | 
 96 | .main-photo {
 97 |     background: url(../img/photo_2024-05-03_20-00-13.jpg);
 98 |     background-position: center;
 99 |     background-size: cover;
100 |     border: 7px solid var(--lighter-black);
101 |     border-radius: 50%;
102 |     height: 20em;
103 |     position: absolute;
104 |     top: calc(45% - 25.5em);
105 |     left: calc(50% - 25em);
106 |     width: 20em;
107 | }
108 | 
109 | .main-photo:before {
110 |     border: 7px solid var(--white);
111 |     border-radius: 50%;
112 |     content: " ";
113 |     position: absolute;
114 |     top: 1px;
115 |     right: 1px;
116 |     bottom: 1px;
117 |     left: 1px;
118 |     z-index: -1;
119 | }
120 | 
121 | /* Portfolio Styles */
122 | 
123 | .portfolio-img svg {
124 |     fill: var(--lighter-black);
125 |     width: 100%;
126 | }
127 | 
128 | .portfolio-img {
129 |     -webkit-transform: translateY(5em);
130 |     transform: translateY(5em);
131 | }
132 | 
133 | .section-lead {
134 |     margin-bottom: 60px;
135 | }
136 | 
137 | /* Social Styles */
138 | #social-contact {
139 |     cursor: pointer;
140 | }
141 | 
142 | /* Contact Form Styles */
143 | 
144 | fieldset {
145 |     border: none;
146 |     padding: 0;
147 | }
148 | 
149 | textarea {
150 |     resize: none;
151 | }
152 | 
153 | input,
154 | textarea,
155 | button {
156 |     background: var(--white);
157 |     border: 5px solid var(--lighter-black);
158 |     border-radius: 4px;
159 |     padding: 1em;
160 |     width: 100%;
161 | }
162 | 
163 | input:active,
164 | textarea:active {
165 |     outline: var(--red);
166 | }
167 | 
168 | form label {
169 |     display: block;
170 |     font-weight: bold;
171 | }
172 | 
173 | .contact-form {
174 |     display: grid;
175 |     grid-gap: 20px;
176 |     grid-template-columns: 1fr 1fr;
177 | }
178 | 
179 | #contact-form-no-bots,
180 | #contact-form-message,
181 | #contact-form-submit {
182 |     grid-column: 1 / -1;
183 | }
184 | 
185 | #contact-form-submit {
186 |     background-color: var(--lighter-black);
187 |     color: var(--white);
188 |     cursor: pointer;
189 |     font-weight: bold;
190 |     transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
191 | }
192 | 
193 | #contact-form-submit:hover {
194 |     background-color: var(--white);
195 |     color: var(--lighter-black);
196 | }
197 | 
198 | #contact-form-submit:active {
199 |     background-color: var(--red);
200 |     color: var(--lighter-black);
201 | }
202 | 
203 | /* Footer Styles */
204 | footer {
205 |     background: var(--black);
206 |     color: var(--white);
207 |     padding: 20px 0;
208 |     text-align: center;
209 | }
210 | 
211 | /* General Styles */
212 | .dark-bg {
213 |     background: var(--lighter-black);
214 |     color: var(--white);
215 | }
216 | 
217 | .dark-bg a {
218 |     color: var(--white);
219 |     transition: all 0.4s cubic-bezier(0, 1, 0.3, 1);
220 | }
221 | 
222 | .dark-bg a:hover {
223 |     color: var(--black);
224 | }
225 | 


--------------------------------------------------------------------------------
/src/libs/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |     line-height: 1.15; /* 1 */
 13 |     -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |    ========================================================================== */
 18 | 
 19 | /**
 20 |  * Remove the margin in all browsers.
 21 |  */
 22 | 
 23 | body {
 24 |     margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |  * Render the `main` element consistently in IE.
 29 |  */
 30 | 
 31 | main {
 32 |     display: block;
 33 | }
 34 | 
 35 | /**
 36 |  * Correct the font size and margin on `h1` elements within `section` and
 37 |  * `article` contexts in Chrome, Firefox, and Safari.
 38 |  */
 39 | 
 40 | h1 {
 41 |     font-size: 2em;
 42 |     margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |    ========================================================================== */
 47 | 
 48 | /**
 49 |  * 1. Add the correct box sizing in Firefox.
 50 |  * 2. Show the overflow in Edge and IE.
 51 |  */
 52 | 
 53 | hr {
 54 |     box-sizing: content-box; /* 1 */
 55 |     height: 0; /* 1 */
 56 |     overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |  * 2. Correct the odd `em` font sizing in all browsers.
 62 |  */
 63 | 
 64 | pre {
 65 |     font-family: monospace, monospace; /* 1 */
 66 |     font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |    ========================================================================== */
 71 | 
 72 | /**
 73 |  * Remove the gray background on active links in IE 10.
 74 |  */
 75 | 
 76 | a {
 77 |     background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |  * 1. Remove the bottom border in Chrome 57-
 82 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |  */
 84 | 
 85 | abbr[title] {
 86 |     border-bottom: none; /* 1 */
 87 |     text-decoration: underline; /* 2 */
 88 |     text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |  * Add the correct font weight in Chrome, Edge, and Safari.
 93 |  */
 94 | 
 95 | b,
 96 | strong {
 97 |     font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |  * 1. Correct the inheritance and scaling of font size in all browsers.
102 |  * 2. Correct the odd `em` font sizing in all browsers.
103 |  */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |     font-family: monospace, monospace; /* 1 */
109 |     font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |  * Add the correct font size in all browsers.
114 |  */
115 | 
116 | small {
117 |     font-size: 80%;
118 | }
119 | 
120 | /**
121 |  * Prevent `sub` and `sup` elements from affecting the line height in
122 |  * all browsers.
123 |  */
124 | 
125 | sub,
126 | sup {
127 |     font-size: 75%;
128 |     line-height: 0;
129 |     position: relative;
130 |     vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |     bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |     top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |    ========================================================================== */
143 | 
144 | /**
145 |  * Remove the border on images inside links in IE 10.
146 |  */
147 | 
148 | img {
149 |     border-style: none;
150 | }
151 | 
152 | /* Forms
153 |    ========================================================================== */
154 | 
155 | /**
156 |  * 1. Change the font styles in all browsers.
157 |  * 2. Remove the margin in Firefox and Safari.
158 |  */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |     font-family: inherit; /* 1 */
166 |     font-size: 100%; /* 1 */
167 |     line-height: 1.15; /* 1 */
168 |     margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |  * Show the overflow in IE.
173 |  * 1. Show the overflow in Edge.
174 |  */
175 | 
176 | button,
177 | input {
178 |     /* 1 */
179 |     overflow: visible;
180 | }
181 | 
182 | /**
183 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |  * 1. Remove the inheritance of text transform in Firefox.
185 |  */
186 | 
187 | button,
188 | select {
189 |     /* 1 */
190 |     text-transform: none;
191 | }
192 | 
193 | /**
194 |  * Correct the inability to style clickable types in iOS and Safari.
195 |  */
196 | 
197 | button,
198 | [type="button"],
199 | [type="reset"],
200 | [type="submit"] {
201 |     -webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |  * Remove the inner border and padding in Firefox.
206 |  */
207 | 
208 | button::-moz-focus-inner,
209 | [type="button"]::-moz-focus-inner,
210 | [type="reset"]::-moz-focus-inner,
211 | [type="submit"]::-moz-focus-inner {
212 |     border-style: none;
213 |     padding: 0;
214 | }
215 | 
216 | /**
217 |  * Restore the focus styles unset by the previous rule.
218 |  */
219 | 
220 | button:-moz-focusring,
221 | [type="button"]:-moz-focusring,
222 | [type="reset"]:-moz-focusring,
223 | [type="submit"]:-moz-focusring {
224 |     outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |  * Correct the padding in Firefox.
229 |  */
230 | 
231 | fieldset {
232 |     padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |  * 1. Correct the text wrapping in Edge and IE.
237 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |  * 3. Remove the padding so developers are not caught out when they zero out
239 |  *    `fieldset` elements in all browsers.
240 |  */
241 | 
242 | legend {
243 |     box-sizing: border-box; /* 1 */
244 |     color: inherit; /* 2 */
245 |     display: table; /* 1 */
246 |     max-width: 100%; /* 1 */
247 |     padding: 0; /* 3 */
248 |     white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |  */
254 | 
255 | progress {
256 |     vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |  * Remove the default vertical scrollbar in IE 10+.
261 |  */
262 | 
263 | textarea {
264 |     overflow: auto;
265 | }
266 | 
267 | /**
268 |  * 1. Add the correct box sizing in IE 10.
269 |  * 2. Remove the padding in IE 10.
270 |  */
271 | 
272 | [type="checkbox"],
273 | [type="radio"] {
274 |     box-sizing: border-box; /* 1 */
275 |     padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |  * Correct the cursor style of increment and decrement buttons in Chrome.
280 |  */
281 | 
282 | [type="number"]::-webkit-inner-spin-button,
283 | [type="number"]::-webkit-outer-spin-button {
284 |     height: auto;
285 | }
286 | 
287 | /**
288 |  * 1. Correct the odd appearance in Chrome and Safari.
289 |  * 2. Correct the outline style in Safari.
290 |  */
291 | 
292 | [type="search"] {
293 |     -webkit-appearance: textfield; /* 1 */
294 |     outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |  * Remove the inner padding in Chrome and Safari on macOS.
299 |  */
300 | 
301 | [type="search"]::-webkit-search-decoration {
302 |     -webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |  * 1. Correct the inability to style clickable types in iOS and Safari.
307 |  * 2. Change font properties to `inherit` in Safari.
308 |  */
309 | 
310 | ::-webkit-file-upload-button {
311 |     -webkit-appearance: button; /* 1 */
312 |     font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |    ========================================================================== */
317 | 
318 | /*
319 |  * Add the correct display in Edge, IE 10+, and Firefox.
320 |  */
321 | 
322 | details {
323 |     display: block;
324 | }
325 | 
326 | /*
327 |  * Add the correct display in all browsers.
328 |  */
329 | 
330 | summary {
331 |     display: list-item;
332 | }
333 | 
334 | /* Misc
335 |    ========================================================================== */
336 | 
337 | /**
338 |  * Add the correct display in IE 10+.
339 |  */
340 | 
341 | template {
342 |     display: none;
343 | }
344 | 
345 | /**
346 |  * Add the correct display in IE 10.
347 |  */
348 | 
349 | [hidden] {
350 |     display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <meta charset="UTF-8" />
  5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |         <title>Khujamov Codes</title>
  8 |         <link rel="stylesheet" href="./src/libs/normalize.css" />
  9 |         <link rel="stylesheet" href="./src/css/setup.css" />
 10 |         <link rel="stylesheet" href="./src/css/styles.css" />
 11 |         <link rel="stylesheet" href="./src/css/animations.css" />
 12 |         <link rel="stylesheet" href="./src/css/media-queries.css" />
 13 |         <script src="https://www.google.com/recaptcha/enterprise.js?render=6Lf5y3cqAAAAAOIFWQEvgNF88ftoBj6zhtSYAn78"></script>
 14 |     </head>
 15 | 
 16 |     <body>
 17 |         <!-- Header -->
 18 |         <header class="header show-on-scroll">
 19 |             <div class="main-photo"></div>
 20 |             <div class="heading">
 21 |                 <h1 class="intro">Hi, my name is ixva</h1>
 22 |                 <p class="lead">
 23 |                     I'm a web developer and teacher. I love JavaScript, Node.js,
 24 |                     jQuery, and Python.
 25 |                 </p>
 26 |                 <p><a id="header-btn" class="header-btn">Contact Me</a></p>
 27 |             </div>
 28 |         </header>
 29 | 
 30 |         <!-- About -->
 31 |         <section id="about" class="dark-bg">
 32 |             <div class="about-summary">
 33 |                 <h2 class="white-text">About</h2>
 34 |                 <p>
 35 |                     I'm a freelancer living in <strong>Portugal</strong> who is
 36 |                     originally from the <strong>UK</strong>. I teach business
 37 |                     English remotely and I create websites.
 38 |                 </p>
 39 | 
 40 |                 <p>
 41 |                     I went to university in London where I earned a BA in
 42 |                     English Literature and an MA in Victorian Studies. In 2013,
 43 |                     I relocated to Lisbon in order to train for a CELTA at
 44 |                     International House, Lisbon.
 45 |                 </p>
 46 | 
 47 |                 <p>
 48 |                     While I love teaching English, I missed the fun that I had
 49 |                     creating Visual Basic programs and database queries while
 50 |                     working as a Management Information and Data Analytics
 51 |                     Administrator for Kingston University.
 52 |                 </p>
 53 | 
 54 |                 <p>
 55 |                     In 2016, I decided to learn web development and I enrolled
 56 |                     in freeCodeCamp's Full Stack Web Development Certification.
 57 |                     Since then I have completed Colt Steele's
 58 |                     <em
 59 |                         >The Ultimate MySQL Bootcamp: Go from SQL Beginner to
 60 |                         Expert</em
 61 |                     >, <em>The Modern Python 3 Bootcamp</em>, and
 62 |                     <em>The Web Developer Bootcamp</em>, as well as Wes Bos's
 63 |                     <em>JavaScript30</em>, <em>What The Flexbox?!</em>, and
 64 |                     <em>CSS Grid</em>.
 65 |                 </p>
 66 | 
 67 |                 <p>
 68 |                     I use <strong>Python</strong>, <strong>JavaScript</strong>,
 69 |                     <strong>jQuery</strong>, <strong>Node.js</strong>,
 70 |                     <strong>HTML5</strong>, and <strong>CSS3</strong> to
 71 |                     automate day-to-day business tasks like sending emails and
 72 |                     keeping track of hours worked.
 73 |                 </p>
 74 | 
 75 |                 <p>
 76 |                     I'm open to job opportunities, and my CV is available on
 77 |                     request.
 78 |                 </p>
 79 |             </div>
 80 | 
 81 |             <div class="about-skills">
 82 |                 <h3 class="white-text">Skills</h3>
 83 | 
 84 |                 <ul class="grid-list slide-left show-on-scroll">
 85 |                     <li>
 86 |                         <div class="about-svg-container">
 87 |                             <!-- From Font Awesome -->
 88 |                             <svg
 89 |                                 class="svg-image"
 90 |                                 xmlns="http://www.w3.org/2000/svg"
 91 |                                 viewBox="0 0 448 512"
 92 |                             >
 93 |                                 <path
 94 |                                     d="M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"
 95 |                                 />
 96 |                             </svg>
 97 |                         </div>
 98 |                         <div class="svg-title-container">JavaScript</div>
 99 |                     </li>
100 |                     <li>
101 |                         <div class="about-svg-container">
102 |                             <!-- Created by Karl Horning -->
103 |                             <svg
104 |                                 class="svg-image"
105 |                                 clip-rule="evenodd"
106 |                                 fill-rule="evenodd"
107 |                                 stroke-linejoin="round"
108 |                                 stroke-miterlimit="2"
109 |                                 version="1.1"
110 |                                 viewBox="0 0 1080 1080"
111 |                                 xml:space="preserve"
112 |                                 xmlns="http://www.w3.org/2000/svg"
113 |                             >
114 |                                 <path
115 |                                     d="m540 0c298.03 0 540 241.97 540 540s-241.97 540-540 540-540-241.97-540-540 241.97-540 540-540zm-233.59 254.64c-30.448 53.325-47.845 115.01-47.845 180.71 0 201.96 164.38 365.94 366.85 365.94 100.3 0 191.26-40.241 257.51-105.41-63.14 110.59-182.4 185.22-319 185.22-202.47 0-366.85-163.97-366.85-365.94 0-101.91 41.855-194.15 109.34-260.53zm173-58.2c-22.437 39.295-35.257 84.749-35.257 133.17 0 148.83 121.13 269.66 270.33 269.66 73.912 0 140.94-29.654 189.76-77.676-46.527 81.491-134.41 136.49-235.07 136.49-149.2 0-270.33-120.83-270.33-269.66 0-75.099 30.842-143.07 80.57-191.98zm147.95 0c-13.007 22.838-20.44 49.255-20.44 77.394 0 86.496 70.224 156.72 156.72 156.72 42.85 0 81.707-17.234 110.01-45.144-26.974 47.361-77.923 79.326-136.28 79.326-86.496 0-156.72-70.224-156.72-156.72 0-43.646 17.881-83.148 46.71-111.58z"
116 |                                 />
117 |                             </svg>
118 |                         </div>
119 |                         <div class="svg-title-container">jQuery</div>
120 |                     </li>
121 |                     <li>
122 |                         <div class="about-svg-container">
123 |                             <!-- From Font Awesome -->
124 |                             <svg
125 |                                 class="svg-image"
126 |                                 xmlns="http://www.w3.org/2000/svg"
127 |                                 viewBox="0 0 448 512"
128 |                             >
129 |                                 <path
130 |                                     d="M224 508c-6.7 0-13.5-1.8-19.4-5.2l-61.7-36.5c-9.2-5.2-4.7-7-1.7-8 12.3-4.3 14.8-5.2 27.9-12.7 1.4-.8 3.2-.5 4.6.4l47.4 28.1c1.7 1 4.1 1 5.7 0l184.7-106.6c1.7-1 2.8-3 2.8-5V149.3c0-2.1-1.1-4-2.9-5.1L226.8 37.7c-1.7-1-4-1-5.7 0L36.6 144.3c-1.8 1-2.9 3-2.9 5.1v213.1c0 2 1.1 4 2.9 4.9l50.6 29.2c27.5 13.7 44.3-2.4 44.3-18.7V167.5c0-3 2.4-5.3 5.4-5.3h23.4c2.9 0 5.4 2.3 5.4 5.3V378c0 36.6-20 57.6-54.7 57.6-10.7 0-19.1 0-42.5-11.6l-48.4-27.9C8.1 389.2.7 376.3.7 362.4V149.3c0-13.8 7.4-26.8 19.4-33.7L204.6 9c11.7-6.6 27.2-6.6 38.8 0l184.7 106.7c12 6.9 19.4 19.8 19.4 33.7v213.1c0 13.8-7.4 26.7-19.4 33.7L243.4 502.8c-5.9 3.4-12.6 5.2-19.4 5.2zm149.1-210.1c0-39.9-27-50.5-83.7-58-57.4-7.6-63.2-11.5-63.2-24.9 0-11.1 4.9-25.9 47.4-25.9 37.9 0 51.9 8.2 57.7 33.8.5 2.4 2.7 4.2 5.2 4.2h24c1.5 0 2.9-.6 3.9-1.7s1.5-2.6 1.4-4.1c-3.7-44.1-33-64.6-92.2-64.6-52.7 0-84.1 22.2-84.1 59.5 0 40.4 31.3 51.6 81.8 56.6 60.5 5.9 65.2 14.8 65.2 26.7 0 20.6-16.6 29.4-55.5 29.4-48.9 0-59.6-12.3-63.2-36.6-.4-2.6-2.6-4.5-5.3-4.5h-23.9c-3 0-5.3 2.4-5.3 5.3 0 31.1 16.9 68.2 97.8 68.2 58.4-.1 92-23.2 92-63.4z"
131 |                                 />
132 |                             </svg>
133 |                         </div>
134 |                         <div class="svg-title-container">Node.js</div>
135 |                     </li>
136 |                     <li>
137 |                         <div class="about-svg-container">
138 |                             <!-- From Font Awesome -->
139 |                             <svg
140 |                                 class="svg-image"
141 |                                 xmlns="http://www.w3.org/2000/svg"
142 |                                 viewBox="0 0 384 512"
143 |                             >
144 |                                 <path
145 |                                     d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"
146 |                                 />
147 |                             </svg>
148 |                         </div>
149 |                         <div class="svg-title-container">HTML5</div>
150 |                     </li>
151 |                     <li>
152 |                         <div class="about-svg-container">
153 |                             <!-- From Font Awesome -->
154 |                             <svg
155 |                                 class="svg-image"
156 |                                 xmlns="http://www.w3.org/2000/svg"
157 |                                 viewBox="0 0 384 512"
158 |                             >
159 |                                 <path
160 |                                     d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"
161 |                                 />
162 |                             </svg>
163 |                         </div>
164 |                         <div class="svg-title-container">CSS3</div>
165 |                     </li>
166 |                     <li>
167 |                         <div class="about-svg-container">
168 |                             <!-- From Font Awesome -->
169 |                             <svg
170 |                                 class="svg-image"
171 |                                 xmlns="http://www.w3.org/2000/svg"
172 |                                 viewBox="0 0 448 512"
173 |                             >
174 |                                 <path
175 |                                     d="M100.59 334.24c48.57 3.31 58.95 2.11 58.95 11.94 0 20-65.55 20.06-65.55 1.52.01-5.09 3.29-9.4 6.6-13.46zm27.95-116.64c-32.29 0-33.75 44.47-.75 44.47 32.51 0 31.71-44.47.75-44.47zM448 80v352a48 48 0 0 1-48 48H48a48 48 0 0 1-48-48V80a48 48 0 0 1 48-48h352a48 48 0 0 1 48 48zm-227 69.31c0 14.49 8.38 22.88 22.86 22.88 14.74 0 23.13-8.39 23.13-22.88S258.62 127 243.88 127c-14.48 0-22.88 7.84-22.88 22.31zM199.18 195h-49.55c-25-6.55-81.56-4.85-81.56 46.75 0 18.8 9.4 32 21.85 38.11C74.23 294.23 66.8 301 66.8 310.6c0 6.87 2.79 13.22 11.18 16.76-8.9 8.4-14 14.48-14 25.92C64 373.35 81.53 385 127.52 385c44.22 0 69.87-16.51 69.87-45.73 0-36.67-28.23-35.32-94.77-39.38l8.38-13.43c17 4.74 74.19 6.23 74.19-42.43 0-11.69-4.83-19.82-9.4-25.67l23.38-1.78zm84.34 109.84l-13-1.78c-3.82-.51-4.07-1-4.07-5.09V192.52h-52.6l-2.79 20.57c15.75 5.55 17 4.86 17 10.17V298c0 5.62-.31 4.58-17 6.87v20.06h72.42zM384 315l-6.87-22.37c-40.93 15.37-37.85-12.41-37.85-16.73v-60.72h37.85v-25.41h-35.82c-2.87 0-2 2.52-2-38.63h-24.18c-2.79 27.7-11.68 38.88-34 41.42v22.62c20.47 0 19.82-.85 19.82 2.54v66.57c0 28.72 11.43 40.91 41.67 40.91 14.45 0 30.45-4.83 41.38-10.2z"
176 |                                 />
177 |                             </svg>
178 |                         </div>
179 |                         <div class="svg-title-container">Git (for GitHub)</div>
180 |                     </li>
181 |                     <li>
182 |                         <div class="about-svg-container">
183 |                             <!-- From Font Awesome -->
184 |                             <svg
185 |                                 class="svg-image"
186 |                                 xmlns="http://www.w3.org/2000/svg"
187 |                                 viewBox="0 0 640 512"
188 |                             >
189 |                                 <path
190 |                                     d="M593.8 59.1H46.2C20.7 59.1 0 79.8 0 105.2v301.5c0 25.5 20.7 46.2 46.2 46.2h547.7c25.5 0 46.2-20.7 46.1-46.1V105.2c0-25.4-20.7-46.1-46.2-46.1zM338.5 360.6H277v-120l-61.5 76.9-61.5-76.9v120H92.3V151.4h61.5l61.5 76.9 61.5-76.9h61.5v209.2zm135.3 3.1L381.5 256H443V151.4h61.5V256H566z"
191 |                                 />
192 |                             </svg>
193 |                         </div>
194 |                         <div class="svg-title-container">
195 |                             Markdown (for GitHub)
196 |                         </div>
197 |                     </li>
198 |                 </ul>
199 |             </div>
200 | 
201 |             <div class="about-programs">
202 |                 <h3 class="white-text">Programs</h3>
203 | 
204 |                 <ul class="grid-list slide-right show-on-scroll">
205 |                     <li>
206 |                         <div class="svg-container">
207 |                             <!-- Created by Karl Horning -->
208 |                             <svg
209 |                                 class="svg-image"
210 |                                 clip-rule="evenodd"
211 |                                 fill-rule="evenodd"
212 |                                 stroke-linecap="round"
213 |                                 stroke-linejoin="round"
214 |                                 stroke-miterlimit="1.5"
215 |                                 version="1.1"
216 |                                 viewBox="0 0 1080 1080"
217 |                                 xml:space="preserve"
218 |                                 xmlns="http://www.w3.org/2000/svg"
219 |                             >
220 |                                 <g
221 |                                     transform="matrix(1.7839 0 0 1.7839 -123.23 -284.38)"
222 |                                 >
223 |                                     <path
224 |                                         d="m130.77 631.55l-61.689-20.77 150.38-148.66-150.38-148.66 61.689-20.769 148.92 111.98 247.22-243.45 147.59 62.091v477.6l-147.59 62.09-247.22-243.45-148.92 111.98zm226.69-169.42l169.54 127.8v-255.61l-169.54 127.8z"
225 |                                     />
226 |                                 </g>
227 |                             </svg>
228 |                         </div>
229 |                         <div class="svg-title-container">
230 |                             Visual Studio Code
231 |                         </div>
232 |                     </li>
233 |                     <li>
234 |                         <div class="svg-container">
235 |                             <!-- Created by Karl Horning -->
236 |                             <svg
237 |                                 class="svg-image"
238 |                                 clip-rule="evenodd"
239 |                                 fill-rule="evenodd"
240 |                                 stroke-linejoin="round"
241 |                                 stroke-miterlimit="2"
242 |                                 version="1.1"
243 |                                 viewBox="0 0 1080 1080"
244 |                                 xml:space="preserve"
245 |                                 xmlns="http://www.w3.org/2000/svg"
246 |                             >
247 |                                 <path
248 |                                     d="m669.18 969.78h-60.235l-31.027-53.813h-383.23l-19.996-34.823-24.666-0.126-80.025-141.5 100.23-176.94 83.432-48.581 128.49-219.37-27.341-48.478 76.259-135.92 161.46 0.083 12.253 20.904h40.578l364.64 634.33-75.951 150.43h-295.9l31.026 53.813zm-81.262-73.813l31.027 53.813h20.235l-31.026-53.813h305.9l75.951-130.43-354.64-614.33h-40.578l-12.253-20.904-141.46-0.083-66.259 115.92 27.341 48.478-138.49 239.37-83.432 48.581-90.234 156.94 70.025 121.5 24.666 0.126 19.996 34.823h383.23zm-33.746-58.451l-127.84-221.24 209.81-364.28-41.628-72.768-380.53 658.28h340.18zm378.95-71.088h-399.31l-82.607-141.91h401.28l80.634 141.91zm-357.94-158.9l-62.275-109.95s-24.89 41.925-43.93 73.998c-4.368 7.357-4.451 16.492-0.219 23.927 4.233 7.435 12.13 12.027 20.686 12.027h85.738zm266.58 0l-195.29-337.86-123.8 211.26 73.396 126.6h245.69z"
249 |                                 />
250 |                             </svg>
251 |                         </div>
252 |                         <div class="svg-title-container">Affinity Designer</div>
253 |                     </li>
254 |                     <li>
255 |                         <div class="svg-container">
256 |                             <!-- From Font Awesome -->
257 |                             <svg
258 |                                 class="svg-image"
259 |                                 xmlns="http://www.w3.org/2000/svg"
260 |                                 viewBox="0 0 640 512"
261 |                             >
262 |                                 <path
263 |                                     d="M257.981 272.971L63.638 467.314c-9.373 9.373-24.569 9.373-33.941 0L7.029 444.647c-9.357-9.357-9.375-24.522-.04-33.901L161.011 256 6.99 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L257.981 239.03c9.373 9.372 9.373 24.568 0 33.941zM640 456v-32c0-13.255-10.745-24-24-24H312c-13.255 0-24 10.745-24 24v32c0 13.255 10.745 24 24 24h304c13.255 0 24-10.745 24-24z"
264 |                                 />
265 |                             </svg>
266 |                         </div>
267 |                         <div class="svg-title-container">Terminal</div>
268 |                     </li>
269 |                     <li>
270 |                         <div class="svg-container">
271 |                             <!-- Created by Karl Horning -->
272 |                             <svg
273 |                                 class="svg-image"
274 |                                 clip-rule="evenodd"
275 |                                 fill-rule="evenodd"
276 |                                 stroke-linejoin="round"
277 |                                 stroke-miterlimit="2"
278 |                                 version="1.1"
279 |                                 viewBox="0 0 1080 1080"
280 |                                 xml:space="preserve"
281 |                                 xmlns="http://www.w3.org/2000/svg"
282 |                             >
283 |                                 <path
284 |                                     d="m425.9 52.085l43.835-25.336c43.471-25.126 97.049-25.126 140.52 0 97.297 56.236 270.81 156.52 357.13 206.42 32.017 18.506 51.737 52.681 51.737 89.662v434.34c0 36.981-19.72 71.156-51.737 89.662-91.839 53.081-282.36 163.2-374.8 216.63-32.539 18.81-72.643 18.81-105.18 0-92.445-53.43-282.96-163.54-374.8-216.63-32.017-18.506-51.737-52.681-51.737-89.662v-434.34c0-36.981 19.72-71.156 51.737-89.662l148.23-85.674v553.68l279.16 161.18 279.16-161.18v-322.35l-279.16-161.18-114.1 65.873v-231.44zm114.1 351.53l118.11 68.193v136.39l-118.11 68.193-118.11-68.193v-136.39l118.11-68.193z"
285 |                                 />
286 |                             </svg>
287 |                         </div>
288 |                         <div class="svg-title-container">
289 |                             Bitnami WordPress Stack
290 |                         </div>
291 |                     </li>
292 |                     <li>
293 |                         <div class="svg-container">
294 |                             <!-- Created by Karl Horning -->
295 |                             <svg
296 |                                 class="svg-image"
297 |                                 clip-rule="evenodd"
298 |                                 fill-rule="evenodd"
299 |                                 stroke-linejoin="round"
300 |                                 stroke-miterlimit="2"
301 |                                 version="1.1"
302 |                                 viewBox="0 0 1080 1080"
303 |                                 xml:space="preserve"
304 |                                 xmlns="http://www.w3.org/2000/svg"
305 |                             >
306 |                                 <path
307 |                                     d="m809.23 793.1c0.307 4.739 0.463-0.485 0.463 4.324 0 131.27-115.95 237.85-258.77 237.85-142.4 0-258.09-95.954-258.77-226.69l247.85 179.47 269.23-194.95zm-269.23-770.93l427.63 202.96-23 449.92-404.63 293-404.63-293-23-449.92 427.63-202.96zm-67.367 495.36l-307-178.28 14.135 291.63 292.86 211.55v-324.9zm134.73 0l307-178.28-14.135 291.63-292.86 211.55v-324.9zm-174.72-376.9l-171.28 80.505 278.63 161.91 77.387-45.13-19.915-14.081 38.021-83.553-103.44 35.432 35.616-82.036-176.52 57.662 70.59-96.964-29.083-13.743zm29.335-13.789l37.733 17.831-42.884 58.907 155.9-50.923-35.187 81.047 104.74-35.874-53.483 117.53 12.323 8.714 176.52-102.94-277.63-130.96-78.018 36.67z"
308 |                                 />
309 |                             </svg>
310 |                         </div>
311 |                         <div class="svg-title-container">VirtualBox</div>
312 |                     </li>
313 |                 </ul>
314 |             </div>
315 |         </section>
316 | 
317 |         <!-- Portfolio -->
318 |         <section id="portfolio">
319 |             <div class="portfolio-intro">
320 |                 <h2>Portfolio</h2>
321 |                 <p class="section-lead">
322 |                   Bu bo'lim tez orada chiqadi. Hozirgacha men ishlagan ba'zi loyihalarni ko'rish uchun siz mening hisoblarimni tekshirishingiz mumkin.
323 |                   <a href="https://github.com/khujamovcodes" target="_blank">GitHub</a>
324 |                   va
325 |                   <a href="https://t.me/khujamov_codes" target="_blank">Telegram</a>
326 |                   hisoblarimni tekshirishingiz mumkin.
327 |                 </p>
328 |             </div>
329 |             <div class="portfolio-img show-on-scroll">
330 |                 <svg
331 |                     clip-rule="evenodd"
332 |                     fill-rule="evenodd"
333 |                     stroke-linejoin="round"
334 |                     stroke-miterlimit="2"
335 |                     version="1.1"
336 |                     viewBox="0 0 1280 800"
337 |                     xml:space="preserve"
338 |                     xmlns="http://www.w3.org/2000/svg"
339 |                 >
340 |                     <path
341 |                         d="m0 0h1280v800h-1280v-800zm311.06 615.77c-1.316 6.746-4.086 13.084-8.31 19.015-4.225 5.93-10.078 11.056-17.561 15.376-6.817 3.936-13.763 6.449-20.837 7.541-7.074 1.091-13.919 0.803-20.535-0.864-6.616-1.668-12.786-4.674-18.509-9.018-5.723-4.345-10.576-9.967-14.56-16.868-4.08-7.067-6.55-14.176-7.409-21.329-0.86-7.152-0.292-13.993 1.703-20.521s5.279-12.553 9.851-18.075c4.571-5.521 10.224-10.226 16.958-14.114 6.236-3.6 13.003-6.038 20.303-7.315 7.299-1.277 14.044-0.876 20.233 1.205l-6.114 22.818c-3.58-1.592-7.374-2.117-11.385-1.575-4.01 0.542-7.72 1.797-11.128 3.765-3.742 2.16-6.775 4.826-9.101 7.997-2.325 3.172-3.915 6.611-4.767 10.318-0.853 3.708-0.955 7.563-0.306 11.567s2.101 7.96 4.357 11.867c2.304 3.991 5.04 7.289 8.207 9.894 3.167 2.606 6.536 4.457 10.107 5.555 3.571 1.097 7.279 1.423 11.123 0.977 3.844-0.445 7.595-1.724 11.254-3.836 4.24-2.448 7.459-5.416 9.658-8.902 2.2-3.487 3.487-7.113 3.864-10.877l22.904 5.399zm61.314-60.84c2.928 5.071 4.666 10.193 5.213 15.364s0.069 10.103-1.435 14.795c-1.503 4.693-3.877 9.029-7.122 13.008-3.245 3.98-7.237 7.338-11.976 10.074-4.655 2.688-9.539 4.454-14.649 5.298-5.111 0.845-10.053 0.733-14.826-0.336-4.774-1.068-9.263-3.132-13.468-6.191-4.206-3.059-7.772-7.125-10.7-12.196-2.928-5.072-4.654-10.172-5.176-15.302-0.523-5.13-0.042-10.008 1.444-14.635 1.485-4.627 3.895-8.9 7.23-12.821 3.334-3.92 7.33-7.224 11.985-9.912 4.739-2.736 9.619-4.556 14.64-5.46 5.021-0.903 9.927-0.854 14.718 0.149 4.792 1.003 9.278 3.013 13.459 6.031s7.735 7.062 10.663 12.134zm-19.704 11.376c-1.152-1.996-2.612-3.757-4.381-5.285-1.769-1.529-3.697-2.66-5.784-3.395-2.088-0.735-4.31-1.032-6.667-0.89-2.357 0.141-4.741 0.908-7.152 2.3s-4.267 3.073-5.568 5.044c-1.301 1.97-2.134 4.031-2.5 6.182-0.365 2.151-0.308 4.362 0.173 6.635 0.48 2.272 1.296 4.405 2.448 6.401 1.152 1.995 2.592 3.769 4.32 5.321 1.727 1.552 3.659 2.737 5.794 3.555s4.381 1.157 6.738 1.015c2.357-0.141 4.741-0.908 7.152-2.3s4.267-3.073 5.568-5.044c1.301-1.97 2.131-4.085 2.49-6.343s0.299-4.523-0.182-6.795c-0.48-2.272-1.297-4.406-2.449-6.401zm130.06-33.355l-19.584-33.92c-1.008-1.746-2.105-3.358-3.29-4.835-1.186-1.477-2.447-2.606-3.784-3.385-1.337-0.78-2.771-1.2-4.301-1.258-1.531-0.059-3.21 0.44-5.039 1.496-1.746 1.008-3.047 2.258-3.904 3.75s-1.362 3.114-1.515 4.865c-0.152 1.751 0.031 3.557 0.552 5.418 0.52 1.862 1.284 3.665 2.292 5.411l19.368 33.546-20.452 11.808-20.448-35.417c-2.064-3.575-4.403-5.993-7.016-7.256-2.613-1.262-5.458-1.005-8.534 0.771-3.243 1.872-5.014 4.612-5.313 8.222-0.3 3.609 0.631 7.284 2.791 11.025l19.44 33.671-20.577 11.88-35.856-62.104 19.828-11.448 4.968 8.605 0.25-0.144c-0.02-1.762 0.171-3.591 0.574-5.486 0.402-1.895 1.117-3.777 2.145-5.645 1.027-1.868 2.35-3.657 3.968-5.367s3.59-3.237 5.918-4.581c4.49-2.592 8.821-3.873 12.995-3.844s8.118 1.244 11.831 3.644c0.207-4.442 1.379-8.555 3.518-12.34 2.138-3.784 5.535-7.02 10.191-9.708 4.24-2.448 8.238-3.731 11.994-3.849 3.757-0.118 7.216 0.546 10.378 1.99 3.162 1.445 6.013 3.456 8.555 6.035 2.542 2.578 4.653 5.323 6.333 8.232l22.176 38.41-20.452 11.808zm36.165-20.88l-35.856-62.104 20.452-11.808 35.856 62.104-20.452 11.808zm77.444-44.712l-19.584-33.92c-1.008-1.746-2.114-3.325-3.317-4.736-1.203-1.412-2.485-2.529-3.846-3.35-1.361-0.822-2.848-1.238-4.462-1.248-1.613-0.011-3.335 0.512-5.164 1.568s-3.225 2.333-4.189 3.832c-0.964 1.498-1.543 3.135-1.737 4.91-0.195 1.775-0.053 3.605 0.426 5.491 0.479 1.885 1.222 3.7 2.23 5.446l19.44 33.671-20.577 11.88-35.856-62.104 19.829-11.448 4.968 8.605 0.249-0.144c-0.02-1.762 0.201-3.636 0.663-5.62 0.461-1.985 1.239-3.903 2.332-5.753 1.093-1.851 2.428-3.619 4.004-5.305s3.445-3.153 5.607-4.401c4.157-2.4 8.122-3.692 11.896-3.875 3.774-0.184 7.238 0.393 10.394 1.731 3.155 1.337 6.016 3.316 8.582 5.936s4.736 5.468 6.512 8.544l22.176 38.41-20.576 11.88zm98.502-64.685c3.504 6.069 5.679 11.853 6.525 17.35s0.541 10.634-0.914 15.409c-1.455 4.776-4.028 9.199-7.719 13.27s-8.28 7.69-13.768 10.858c-5.487 3.168-11.599 5.589-18.337 7.262-6.739 1.673-13.14 2.154-19.204 1.443l1.802-20.495c4.529 0.933 8.974 0.999 13.335 0.2 4.36-0.8 8.286-2.207 11.778-4.223 5.986-3.456 9.501-7.592 10.545-12.407 1.045-4.815 0.055-9.842-2.969-15.08l-2.16-3.741-0.374 0.216c-0.472 3.598-1.898 7.082-4.276 10.45-2.379 3.369-5.646 6.253-9.803 8.653-4.739 2.736-9.429 4.308-14.072 4.715-4.642 0.408-9.071-0.111-13.286-1.557-4.216-1.446-8.105-3.718-11.667-6.816-3.562-3.097-6.592-6.808-9.088-11.131s-4.206-8.823-5.132-13.498c-0.926-4.676-0.985-9.242-0.177-13.699 0.807-4.457 2.524-8.635 5.15-12.535 2.627-3.899 6.267-7.193 10.923-9.881 3.908-2.256 8.105-3.626 12.592-4.11 4.487-0.485 8.771 0.312 12.853 2.389l0.249-0.144-4.608-7.981 19.33-11.16 32.472 56.243zm-201.3 14.792c0.912 1.58 1.452 3.236 1.62 4.968 0.169 1.731 0.022 3.396-0.442 4.994-0.463 1.597-1.254 3.107-2.373 4.529s-2.468 2.589-4.048 3.501c-3.325 1.92-6.746 2.427-10.263 1.519-3.517-0.907-6.163-2.898-7.939-5.975-0.864-1.496-1.401-3.098-1.611-4.806s-0.063-3.372 0.442-4.994 1.284-3.152 2.337-4.592c1.053-1.439 2.411-2.639 4.074-3.599 1.58-0.912 3.265-1.497 5.056-1.755s3.494-0.188 5.109 0.209c1.616 0.398 3.131 1.103 4.546 2.114 1.416 1.012 2.58 2.308 3.492 3.887zm167.09-29.125c-1.2-2.078-2.705-3.87-4.516-5.374-1.81-1.504-3.801-2.6-5.971-3.287-2.17-0.686-4.41-0.918-6.719-0.693s-4.627 1.009-6.955 2.353-4.146 2.948-5.453 4.811c-1.308 1.863-2.177 3.862-2.608 5.995s-0.427 4.348 0.012 6.644c0.439 2.297 1.282 4.525 2.53 6.687 1.2 2.079 2.685 3.882 4.454 5.41s3.697 2.66 5.784 3.395 4.276 1.023 6.568 0.864c2.291-0.16 4.601-0.911 6.929-2.255s4.175-2.993 5.542-4.945c1.366-1.953 2.286-4.009 2.758-6.166 0.473-2.157 0.511-4.396 0.113-6.716-0.397-2.32-1.22-4.561-2.468-6.723zm95.023-100.09c-3.173-1.272-6.632-1.742-10.375-1.41s-6.987 1.29-9.73 2.874c-1.414 0.816-2.776 1.769-4.087 2.859-1.311 1.089-2.344 2.323-3.1 3.702-0.756 1.378-1.205 2.857-1.347 4.435-0.142 1.579 0.292 3.241 1.3 4.987 0.864 1.496 1.895 2.563 3.095 3.201 1.199 0.638 2.618 0.982 4.255 1.035 1.638 0.052 3.468-0.09 5.491-0.427 2.023-0.336 4.265-0.772 6.728-1.307 3.569-0.73 7.322-1.428 11.261-2.095 3.938-0.666 7.814-0.77 11.626-0.311 3.812 0.46 7.444 1.661 10.893 3.604 3.45 1.944 6.447 5.119 8.991 9.525 2.928 5.072 4.525 9.997 4.79 14.777 0.266 4.779-0.485 9.287-2.252 13.522-1.768 4.235-4.352 8.11-7.754 11.626s-7.264 6.522-11.587 9.018c-6.319 3.648-13.066 6.075-20.24 7.279-7.175 1.205-13.892 0.899-20.152-0.919l5.759-22.281c3.698 1.413 7.829 1.993 12.395 1.74 4.565-0.252 8.594-1.387 12.086-3.403 1.579-0.912 3.021-1.966 4.326-3.162 1.304-1.197 2.302-2.493 2.992-3.89 0.69-1.396 1.008-2.91 0.953-4.541s-0.586-3.319-1.594-5.065c-0.96-1.663-2.192-2.836-3.695-3.52-1.504-0.684-3.3-1.06-5.39-1.128s-4.507 0.163-7.249 0.693-5.832 1.178-9.27 1.943c-3.355 0.718-6.743 1.233-10.165 1.546s-6.757 0.104-10.005-0.625c-3.248-0.73-6.321-2.115-9.217-4.157-2.897-2.041-5.497-5.057-7.801-9.047-2.832-4.905-4.259-9.68-4.279-14.324-0.021-4.644 0.942-9.024 2.888-13.141 1.947-4.116 4.657-7.87 8.131-11.262 3.473-3.391 7.289-6.286 11.446-8.686 4.988-2.88 10.608-4.906 16.86-6.077 6.253-1.171 12.364-1.097 18.336 0.222l-5.313 22.19zm111.44-18.947c2.928 5.071 4.665 10.193 5.212 15.364s0.069 10.103-1.434 14.795c-1.504 4.693-3.878 9.029-7.123 13.008-3.245 3.98-7.237 7.338-11.975 10.074-4.656 2.688-9.539 4.454-14.65 5.298-5.11 0.845-10.052 0.733-14.826-0.336-4.774-1.068-9.263-3.132-13.468-6.191s-7.772-7.125-10.7-12.196c-2.928-5.072-4.653-10.172-5.176-15.302s-0.042-10.008 1.444-14.635 3.896-8.9 7.23-12.821c3.335-3.92 7.33-7.224 11.986-9.912 4.738-2.736 9.618-4.556 14.639-5.46 5.021-0.903 9.927-0.854 14.719 0.149 4.791 1.003 9.277 3.013 13.458 6.031s7.736 7.062 10.664 12.134zm-19.704 11.376c-1.152-1.996-2.613-3.757-4.382-5.285-1.769-1.529-3.697-2.66-5.784-3.395s-4.309-1.032-6.666-0.89c-2.357 0.141-4.741 0.908-7.152 2.3s-4.267 3.073-5.569 5.044c-1.301 1.97-2.134 4.031-2.499 6.182-0.366 2.151-0.308 4.362 0.172 6.635 0.481 2.272 1.297 4.405 2.449 6.401 1.152 1.995 2.592 3.769 4.319 5.321 1.728 1.552 3.659 2.737 5.794 3.555s4.381 1.157 6.738 1.015c2.357-0.141 4.741-0.908 7.152-2.3s4.267-3.073 5.568-5.044c1.301-1.97 2.131-4.085 2.491-6.343 0.359-2.258 0.298-4.523-0.183-6.795-0.48-2.272-1.296-4.406-2.448-6.401zm98.519-56.88c2.928 5.071 4.665 10.193 5.212 15.364s0.069 10.103-1.434 14.795c-1.503 4.693-3.878 9.029-7.122 13.008-3.245 3.98-7.237 7.338-11.976 10.074-4.656 2.688-9.539 4.454-14.65 5.298-5.11 0.845-10.052 0.733-14.826-0.336-4.774-1.068-9.263-3.132-13.468-6.191s-7.772-7.125-10.7-12.196c-2.928-5.072-4.653-10.172-5.176-15.302s-0.042-10.008 1.444-14.635 3.896-8.9 7.23-12.821c3.335-3.92 7.33-7.224 11.986-9.912 4.739-2.736 9.619-4.556 14.64-5.46 5.02-0.903 9.927-0.854 14.718 0.149s9.277 3.013 13.458 6.031 7.736 7.062 10.664 12.134zm-19.704 11.376c-1.152-1.996-2.613-3.757-4.382-5.285-1.769-1.529-3.697-2.66-5.784-3.395s-4.309-1.032-6.666-0.89c-2.357 0.141-4.741 0.908-7.152 2.3s-4.267 3.073-5.568 5.044c-1.301 1.97-2.135 4.031-2.5 6.182-0.366 2.151-0.308 4.362 0.172 6.635 0.481 2.272 1.297 4.405 2.449 6.401 1.152 1.995 2.592 3.769 4.319 5.321 1.728 1.552 3.659 2.737 5.794 3.555s4.381 1.157 6.738 1.015c2.357-0.141 4.741-0.908 7.153-2.3 2.411-1.392 4.267-3.073 5.568-5.044 1.301-1.97 2.131-4.085 2.49-6.343s0.298-4.523-0.182-6.795c-0.481-2.272-1.297-4.406-2.449-6.401zm91.523-11.107l-19.582-33.92c-1.008-1.746-2.114-3.325-3.317-4.736-1.203-1.412-2.485-2.529-3.846-3.35-1.361-0.822-2.848-1.238-4.462-1.248-1.613-0.011-3.334 0.512-5.164 1.568-1.829 1.056-3.225 2.333-4.189 3.832-0.964 1.498-1.543 3.135-1.737 4.91-0.195 1.775-0.053 3.605 0.426 5.491 0.479 1.885 1.222 3.7 2.23 5.446l19.44 33.671-20.577 11.88-35.856-62.104 19.829-11.448 4.968 8.605 0.249-0.144c-0.019-1.762 0.201-3.636 0.663-5.62 0.461-1.985 1.239-3.903 2.332-5.753 1.093-1.851 2.428-3.619 4.004-5.305s3.445-3.153 5.607-4.401c4.157-2.4 8.122-3.692 11.896-3.875 3.774-0.184 7.238 0.393 10.396 1.731 3.15 1.337 6.01 3.316 8.58 5.936s4.74 5.468 6.51 8.544l22.18 38.41-20.58 11.88zm56.36-46.672c0.96 1.663 1.55 3.402 1.77 5.217 0.21 1.815 0.06 3.566-0.46 5.253-0.53 1.687-1.36 3.275-2.49 4.762-1.14 1.488-2.54 2.711-4.2 3.671s-3.39 1.569-5.18 1.828c-1.79 0.258-3.54 0.158-5.24-0.299-1.71-0.456-3.3-1.2-4.78-2.229s-2.71-2.375-3.67-4.038c-0.91-1.58-1.47-3.277-1.69-5.092s-0.09-3.575 0.36-5.279c0.46-1.705 1.26-3.301 2.39-4.789 1.14-1.488 2.54-2.711 4.2-3.671s3.42-1.561 5.28-1.801 3.65-0.165 5.37 0.226 3.31 1.134 4.78 2.229c1.46 1.095 2.65 2.433 3.56 4.012zm-33.64-5.851l-33.91-58.738 20.95-12.096 33.91 58.738-20.95 12.096z"
342 |                     />
343 |                 </svg>
344 |             </div>
345 |         </section>
346 | 
347 |         <!-- Social -->
348 |         <section id="social" class="dark-bg">
349 |             <div class="social-intro">
350 |                 <h2 class="white-text">Sahifa</h2>
351 |                 <p class="section-lead">
352 |                   Agar siz men bilan bevosita bog'lanishni istasangiz, quyidagi
353 |                   <a id="social-contact">aloqa</a> formasidan foydalanishingiz
354 |                   mumkin. Agar siz ijtimoiy tarmoqlarni afzal ko'rsangiz, meni ushbu belgi havolalari orqali topishingiz mumkin.
355 |                 </p>
356 |             </div>
357 |             <div class="social-icons">
358 |                 <ul class="grid-list slide-left show-on-scroll">
359 |                     <li>
360 |                         <a
361 |                             href="http://github.com/Karl-Horning"
362 |                             target="_blank"
363 |                         >
364 |                             <div class="svg-container">
365 |                                 <svg
366 |                                     class="svg-image"
367 |                                     xmlns="http://www.w3.org/2000/svg"
368 |                                     viewBox="0 0 496 512"
369 |                                 >
370 |                                     <path
371 |                                         d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
372 |                                     />
373 |                                 </svg>
374 |                             </div>
375 |                             <div class="svg-title-container">GitHub</div>
376 |                         </a>
377 |                     </li>
378 |                     <li>
379 |                         <a
380 |                             href="http://codepen.io/karlhorning/"
381 |                             target="_blank"
382 |                         >
383 |                             <div class="svg-container">
384 |                                 <svg
385 |                                     class="svg-image"
386 |                                     xmlns="http://www.w3.org/2000/svg"
387 |                                     viewBox="0 0 512 512"
388 |                                 >
389 |                                     <path
390 |                                         d="M502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285zM278 63.131l172.286 114.858-76.857 51.429L278 165.703V63.131zm-44 0v102.572l-95.429 63.715-76.857-51.429L234 63.131zM44 219.132l55.143 36.857L44 292.846v-73.714zm190 229.715L61.714 333.989l76.857-51.429L234 346.275v102.572zm22-140.858l-77.715-52 77.715-52 77.715 52-77.715 52zm22 140.858V346.275l95.429-63.715 76.857 51.429L278 448.847zm190-156.001l-55.143-36.857L468 219.132v73.714z"
391 |                                     />
392 |                                 </svg>
393 |                             </div>
394 |                             <div class="svg-title-container">CodePen</div>
395 |                         </a>
396 |                     </li>
397 |                     <li>
398 |                         <a
399 |                             href="https://www.freecodecamp.org/karl-horning"
400 |                             target="_blank"
401 |                         >
402 |                             <div class="svg-container">
403 |                                 <svg
404 |                                     class="svg-image"
405 |                                     xmlns="http://www.w3.org/2000/svg"
406 |                                     viewBox="0 0 576 512"
407 |                                 >
408 |                                     <path
409 |                                         d="M69.3 144.5c-41 68.5-36.4 163 1 227C92.5 409.7 120 423.9 120 438c0 6.8-6 13-12.8 13C87.7 451 8 375.5 8 253.2c0-111.5 78-186 97.1-186 6 0 14.9 4.8 14.9 11.1 0 12.7-28.3 28.6-50.7 66.2zm195.8 213.8c4.5 1.8 12.3 5.2 12.3-1.2 0-2.7-2.2-2.9-4.3-3.6-8.5-3.4-14-7.7-19.1-15.2-8.2-12.1-10.1-24.2-10.1-38.6 0-32.1 44.2-37.9 44.2-70 0-12.3-7.7-15.9-7.7-19.3 0-2.2.7-2.2 2.9-2.2 8 0 19.1 13.3 22.5 19.8 2.2 4.6 2.4 6 2.4 11.1 0 7-.7 14.2-.7 21.3 0 27 31.9 19.8 31.9 6.8 0-6-3.6-11.6-3.6-17.4 0-.7 0-1.2.7-1.2 3.4 0 9.4 7.7 11.1 10.1 5.8 8.9 8.5 20.8 8.5 31.4 0 32.4-29.5 49-29.5 56 0 1 2.9 7.7 12.1 1.9 29.7-15.1 53.1-47.6 53.1-89.8 0-33.6-8.7-57.7-32.1-82.6-3.9-4.1-16.4-16.9-22.5-16.9-8.2 0 7.2 18.6 7.2 31.2 0 7.2-4.8 12.3-12.3 12.3-11.6 0-14.5-25.4-15.9-33.3-5.8-33.8-12.8-58.2-46.4-74.1-10.4-5-36.5-11.8-36.5-2.2 0 2.4 2.7 4.1 4.6 5.1 9.2 5.6 19.6 21.4 19.6 38.2 0 46.1-57.7 88.2-57.7 136.2-.2 40.3 28.1 72.6 65.3 86.2zM470.4 67c-6 0-14.4 6.5-14.4 12.6 0 8.7 12.1 19.6 17.6 25.4 81.6 85.1 78.6 214.3 17.6 291-7 8.9-35.3 35.3-35.3 43.5 0 5.1 8.2 11.4 13.2 11.4 25.4 0 98.8-80.8 98.8-185.7C568 145.9 491.8 67 470.4 67zm-42.3 323.1H167c-9.4 0-15.5 7.5-15.5 16.4 0 8.5 7 15.5 15.5 15.5h261.1c9.4 0 11.9-7.5 11.9-16.4 0-8.5-3.5-15.5-11.9-15.5z"
410 |                                     />
411 |                                 </svg>
412 |                             </div>
413 |                             <div class="svg-title-container">freeCodeCamp</div>
414 |                         </a>
415 |                     </li>
416 |                     <li>
417 |                         <a
418 |                             href="https://www.linkedin.com/"
419 |                             target="_blank"
420 |                         >
421 |                             <div class="svg-container">
422 |                                 <svg
423 |                                     class="svg-image"
424 |                                     xmlns="http://www.w3.org/2000/svg"
425 |                                     viewBox="0 0 448 512"
426 |                                 >
427 |                                     <path
428 |                                         d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
429 |                                     />
430 |                                 </svg>
431 |                             </div>
432 |                             <div class="svg-title-container">LinkedIn</div>
433 |                         </a>
434 |                     </li>
435 |                     <li>
436 |                         <a
437 |                             href="https://twitter.com"
438 |                             target="_blank"
439 |                         >
440 |                             <div class="svg-container">
441 |                                 <svg
442 |                                     class="svg-image"
443 |                                     xmlns="http://www.w3.org/2000/svg"
444 |                                     viewBox="0 0 448 512"
445 |                                 >
446 |                                     <path
447 |                                         d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"
448 |                                     />
449 |                                 </svg>
450 |                             </div>
451 |                             <div class="svg-title-container">Twitter</div>
452 |                         </a>
453 |                     </li>
454 |                     <li>
455 |                         <a
456 |                             href="https://www.facebook.com"
457 |                             target="_blank"
458 |                         >
459 |                             <div class="svg-container">
460 |                                 <svg
461 |                                     class="svg-image"
462 |                                     xmlns="http://www.w3.org/2000/svg"
463 |                                     viewBox="0 0 512 512"
464 |                                 >
465 |                                     <path
466 |                                         d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
467 |                                     />
468 |                                 </svg>
469 |                             </div>
470 |                             <div class="svg-title-container">Facebook</div>
471 |                         </a>
472 |                     </li>
473 |                     <li>
474 |                         <a
475 |                             href="https://www.instagram.com//"
476 |                             target="_blank"
477 |                         >
478 |                             <div class="svg-container">
479 |                                 <svg
480 |                                     class="svg-image"
481 |                                     xmlns="http://www.w3.org/2000/svg"
482 |                                     viewBox="0 0 448 512"
483 |                                 >
484 |                                     <path
485 |                                         d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
486 |                                     />
487 |                                 </svg>
488 |                             </div>
489 |                             <div class="svg-title-container">Instagram</div>
490 |                         </a>
491 |                     </li>
492 |                 </ul>
493 |             </div>
494 |         </section>
495 | 
496 |         <!-- Contact -->
497 |         <section id="contact">
498 |             <div class="contact-intro">
499 |                 <h2>Aloqa</h2>
500 |                 <p class="section-lead">
501 |                   Menga xabar yuboring! Sizning elektron pochta manzilingiz ulashilmaydi. Majburiy maydonlar a bilan belgilangan
502 |                   <span class="red-text">*</span>.
503 |                 </p>
504 |             </div>
505 | 
506 |             <form class="contact-form" method="POST" action="https://formspree.io/f/myzywdeq">
507 |                 <fieldset id="contact-form-name">
508 |                     <label for="name">Ism<span class="red-text">*</span></label>
509 |                     <input type="text" name="name" id="name" placeholder="Khujamov" required />
510 |                 </fieldset>
511 |                 
512 |                 <fieldset id="contact-form-email">
513 |                     <label for="email">Email<span class="red-text">*</span></label>
514 |                     <input type="email" name="email" id="email" placeholder="khujamovcodes@gmail.com" required />
515 |                 </fieldset>
516 |                 
517 |                 <fieldset id="contact-form-no-bots">
518 |                     <label for="bots">Iltimos, bu maydonni bo'sh qoldiring</label>
519 |                     <input type="text" name="bots" id="bots" placeholder="No bots allowed" />
520 |                 </fieldset>
521 |                 
522 |                 <fieldset id="contact-form-message">
523 |                     <label for="message">Xabar<span class="red-text">*</span></label>
524 |                     <textarea name="message" id="message" placeholder="Salom, ahvolingiz qanday? 12-kuni 18:00 da suhbatlashish imkoniyati bormi?" cols="30" rows="18" required></textarea>
525 |                 </fieldset>
526 |                 
527 |                 <!-- reCAPTCHA -->
528 |                 <fieldset id="contact-form-recaptcha">
529 |                     <div class="g-recaptcha" data-sitekey="6Lf5y3cqAAAAAOIFWQEvgNF88ftoBj6zhtSYAn78"></div>
530 |                 </fieldset>
531 |                 
532 |                 <button id="contact-form-submit" type="submit">
533 |                     Yuborish
534 |                 </button>
535 |             </form>
536 |             
537 |             <!-- reCAPTCHA skriptini qo'shish -->
538 |             
539 |         </section>
540 | 
541 |         <!-- Footer -->
542 |         <footer>
543 |             <p>
544 |                 <small id="copyright-text"
545 |                     >&copy; Copyright KhujamovCodes 2024</small
546 |                 >
547 |             </p>
548 |         </footer>
549 | 
550 |         <script src="./src/js/script.js"></script>
551 |         <!-- Include reCAPTCHA Script -->
552 |         <script src="https://www.google.com/recaptcha/api.js" async defer></script>
553 |     </body>
554 | </html>
555 | 


--------------------------------------------------------------------------------