├── README.md
├── praktika uchun
    ├── public
    │   ├── robots.txt
    │   ├── favicon.ico
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── index.html
    ├── README.md
    ├── src
    │   ├── index.js
    │   ├── App.js
    │   └── index.css
    ├── .gitignore
    └── package.json
└── tayyor soure code
    ├── public
        ├── robots.txt
        ├── favicon.ico
        ├── logo192.png
        ├── logo512.png
        ├── manifest.json
        └── index.html
    ├── README.md
    ├── src
        ├── index.js
        ├── App.js
        └── index.css
    ├── .gitignore
    └── package.json


/README.md:
--------------------------------------------------------------------------------
1 | # project-codlari


--------------------------------------------------------------------------------
/praktika uchun/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/praktika uchun/README.md:
--------------------------------------------------------------------------------
1 | #### IN ACTION
2 | 
3 | [Portfolio](https://gatsby-strapi-portfolio-project.netlify.app/)
4 | 


--------------------------------------------------------------------------------
/tayyor soure code/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/tayyor soure code/README.md:
--------------------------------------------------------------------------------
1 | #### IN ACTION
2 | 
3 | [Portfolio](https://gatsby-strapi-portfolio-project.netlify.app/)
4 | 


--------------------------------------------------------------------------------
/praktika uchun/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/project-codlari/HEAD/praktika uchun/public/favicon.ico


--------------------------------------------------------------------------------
/praktika uchun/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/project-codlari/HEAD/praktika uchun/public/logo192.png


--------------------------------------------------------------------------------
/praktika uchun/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/project-codlari/HEAD/praktika uchun/public/logo512.png


--------------------------------------------------------------------------------
/tayyor soure code/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/project-codlari/HEAD/tayyor soure code/public/favicon.ico


--------------------------------------------------------------------------------
/tayyor soure code/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/project-codlari/HEAD/tayyor soure code/public/logo192.png


--------------------------------------------------------------------------------
/tayyor soure code/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/project-codlari/HEAD/tayyor soure code/public/logo512.png


--------------------------------------------------------------------------------
/praktika uchun/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById('root')
11 | );
12 | 


--------------------------------------------------------------------------------
/tayyor soure code/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById('root')
11 | );
12 | 


--------------------------------------------------------------------------------
/praktika uchun/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react'
 2 | import { FaAngleDoubleRight } from 'react-icons/fa'
 3 | // ATTENTION!!!!!!!!!!
 4 | // I SWITCHED TO PERMANENT DOMAIN
 5 | const url = 'https://course-api.com/react-tabs-project'
 6 | function App() {
 7 |   return <h2>tabs project setup</h2>
 8 | }
 9 | 
10 | export default App
11 | 


--------------------------------------------------------------------------------
/praktika uchun/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/tayyor soure code/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/praktika uchun/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/tayyor soure code/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/praktika uchun/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reminder",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^4.2.4",
 7 |     "@testing-library/react": "^9.5.0",
 8 |     "@testing-library/user-event": "^7.2.1",
 9 |     "react": "^16.13.1",
10 |     "react-dom": "^16.13.1",
11 |     "react-icons": "^3.11.0",
12 |     "react-scripts": "3.4.3"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "CI= react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": "react-app"
22 |   },
23 |   "browserslist": {
24 |     "production": [
25 |       ">0.2%",
26 |       "not dead",
27 |       "not op_mini all"
28 |     ],
29 |     "development": [
30 |       "last 1 chrome version",
31 |       "last 1 firefox version",
32 |       "last 1 safari version"
33 |     ]
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/tayyor soure code/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reminder",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^4.2.4",
 7 |     "@testing-library/react": "^9.5.0",
 8 |     "@testing-library/user-event": "^7.2.1",
 9 |     "react": "^16.13.1",
10 |     "react-dom": "^16.13.1",
11 |     "react-icons": "^3.11.0",
12 |     "react-scripts": "3.4.3"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "CI= react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": "react-app"
22 |   },
23 |   "browserslist": {
24 |     "production": [
25 |       ">0.2%",
26 |       "not dead",
27 |       "not op_mini all"
28 |     ],
29 |     "development": [
30 |       "last 1 chrome version",
31 |       "last 1 firefox version",
32 |       "last 1 safari version"
33 |     ]
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/praktika uchun/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Tabs Setup</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/tayyor soure code/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Tabs Complete</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/tayyor soure code/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react'
 2 | import { FaAngleDoubleRight } from 'react-icons/fa'
 3 | // ATTENTION!!!!!!!!!!
 4 | // I SWITCHED TO PERMANENT DOMAIN
 5 | const url = 'https://course-api.com/react-tabs-project'
 6 | function App() {
 7 |   const [loading, setLoading] = useState(true)
 8 |   const [jobs, setJobs] = useState([])
 9 |   const [value, setValue] = useState(0)
10 | 
11 |   const fetchJobs = async () => {
12 |     const reponse = await fetch(url)
13 |     const newJobs = await reponse.json()
14 |     setJobs(newJobs)
15 |     setLoading(false)
16 |   }
17 |   useEffect(() => {
18 |     fetchJobs()
19 |   }, [])
20 |   if (loading) {
21 |     return (
22 |       <section className="section loading">
23 |         <h1>Loading...</h1>
24 |       </section>
25 |     )
26 |   }
27 |   const { company, dates, duties, title } = jobs[value]
28 |   return (
29 |     <section className="section">
30 |       <div className="title">
31 |         <h2>experience</h2>
32 |         <div className="underline"></div>
33 |       </div>
34 |       <div className="jobs-center">
35 |         {/* btn container */}
36 |         <div className="btn-container">
37 |           {jobs.map((item, index) => {
38 |             return (
39 |               <button
40 |                 key={item.id}
41 |                 onClick={() => setValue(index)}
42 |                 className={`job-btn ${index === value && 'active-btn'}`}
43 |               >
44 |                 {item.company}
45 |               </button>
46 |             )
47 |           })}
48 |         </div>
49 |         {/* job info */}
50 |         <article className="job-info">
51 |           <h3>{title}</h3>
52 |           <h4>{company}</h4>
53 |           <p className="job-date">{dates}</p>
54 |           {duties.map((duty, index) => {
55 |             return (
56 |               <div key={index} className="job-desc">
57 |                 <FaAngleDoubleRight className="job-icon"></FaAngleDoubleRight>
58 |                 <p>{duty}</p>
59 |               </div>
60 |             )
61 |           })}
62 |         </article>
63 |       </div>
64 |       <button type="button" className="btn">
65 |         more info
66 |       </button>
67 |     </section>
68 |   )
69 | }
70 | 
71 | export default App
72 | 


--------------------------------------------------------------------------------
/praktika uchun/src/index.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Variables
  4 | ===============
  5 | */
  6 | 
  7 | :root {
  8 |   /* dark shades of primary color*/
  9 |   --clr-primary-1: hsl(184, 91%, 17%);
 10 |   --clr-primary-2: hsl(185, 84%, 25%);
 11 |   --clr-primary-3: hsl(185, 81%, 29%);
 12 |   --clr-primary-4: hsl(184, 77%, 34%);
 13 |   --clr-primary-5: #2caeba;
 14 |   /* lighter shades of primary color */
 15 |   --clr-primary-6: hsl(185, 57%, 50%);
 16 |   --clr-primary-7: hsl(184, 65%, 59%);
 17 |   --clr-primary-8: hsl(184, 80%, 74%);
 18 |   --clr-primary-9: hsl(185, 94%, 87%);
 19 |   --clr-primary-10: hsl(186, 100%, 94%);
 20 |   /* darkest grey - used for headings */
 21 |   --clr-grey-1: hsl(209, 61%, 16%);
 22 |   --clr-grey-2: hsl(211, 39%, 23%);
 23 |   --clr-grey-3: hsl(209, 34%, 30%);
 24 |   --clr-grey-4: hsl(209, 28%, 39%);
 25 |   /* grey used for paragraphs */
 26 |   --clr-grey-5: hsl(210, 22%, 49%);
 27 |   --clr-grey-6: hsl(209, 23%, 60%);
 28 |   --clr-grey-7: hsl(211, 27%, 70%);
 29 |   --clr-grey-8: hsl(210, 31%, 80%);
 30 |   --clr-grey-9: hsl(212, 33%, 89%);
 31 |   --clr-grey-10: hsl(210, 36%, 96%);
 32 |   --clr-white: #fff;
 33 |   --clr-red-dark: hsl(360, 67%, 44%);
 34 |   --clr-red-light: hsl(360, 71%, 66%);
 35 |   --clr-green-dark: hsl(125, 67%, 44%);
 36 |   --clr-green-light: hsl(125, 71%, 66%);
 37 |   --clr-black: #222;
 38 |   --transition: all 0.3s linear;
 39 |   --spacing: 0.1rem;
 40 |   --radius: 0.25rem;
 41 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 42 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 43 |   --max-width: 1170px;
 44 |   --fixed-width: 620px;
 45 | }
 46 | /*
 47 | =============== 
 48 | Global Styles
 49 | ===============
 50 | */
 51 | 
 52 | *,
 53 | ::after,
 54 | ::before {
 55 |   margin: 0;
 56 |   padding: 0;
 57 |   box-sizing: border-box;
 58 | }
 59 | body {
 60 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 61 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 62 |   background: var(--clr-grey-10);
 63 |   color: var(--clr-grey-1);
 64 |   line-height: 1.5;
 65 |   font-size: 0.875rem;
 66 | }
 67 | ul {
 68 |   list-style-type: none;
 69 | }
 70 | a {
 71 |   text-decoration: none;
 72 | }
 73 | h1,
 74 | h2,
 75 | h3,
 76 | h4 {
 77 |   letter-spacing: var(--spacing);
 78 |   text-transform: capitalize;
 79 |   line-height: 1.25;
 80 |   margin-bottom: 0.75rem;
 81 | }
 82 | h1 {
 83 |   font-size: 3rem;
 84 | }
 85 | h2 {
 86 |   font-size: 2rem;
 87 | }
 88 | h3 {
 89 |   font-size: 1.25rem;
 90 | }
 91 | h4 {
 92 |   font-size: 0.875rem;
 93 | }
 94 | p {
 95 |   margin-bottom: 1.25rem;
 96 |   color: var(--clr-grey-5);
 97 | }
 98 | @media screen and (min-width: 800px) {
 99 |   h1 {
100 |     font-size: 4rem;
101 |   }
102 |   h2 {
103 |     font-size: 2.5rem;
104 |   }
105 |   h3 {
106 |     font-size: 1.75rem;
107 |   }
108 |   h4 {
109 |     font-size: 1rem;
110 |   }
111 |   body {
112 |     font-size: 1rem;
113 |   }
114 |   h1,
115 |   h2,
116 |   h3,
117 |   h4 {
118 |     line-height: 1;
119 |   }
120 | }
121 | /*  global classes */
122 | 
123 | /* section */
124 | .section {
125 |   width: 90vw;
126 |   margin: 5rem auto;
127 |   max-width: var(--max-width);
128 | }
129 | 
130 | @media screen and (min-width: 992px) {
131 |   .section {
132 |     width: 95vw;
133 |   }
134 | }
135 | 
136 | .loading {
137 |   text-align: center;
138 | }
139 | 
140 | .underline {
141 |   width: 5rem;
142 |   height: 0.25rem;
143 |   margin-bottom: 1.25rem;
144 |   background: var(--clr-primary-5);
145 |   margin-left: auto;
146 |   margin-right: auto;
147 | }
148 | .title {
149 |   margin-bottom: 4rem;
150 |   text-align: center;
151 | }
152 | 
153 | /*
154 | =============== 
155 | Jobs
156 | ===============
157 | */
158 | 
159 | .jobs-center {
160 |   width: 80vw;
161 |   margin: 0 auto;
162 |   max-width: var(--max-width);
163 | }
164 | .btn-container {
165 |   display: flex;
166 |   flex-direction: row;
167 |   justify-content: center;
168 |   margin-bottom: 4rem;
169 |   flex-wrap: wrap;
170 | }
171 | .job-btn {
172 |   background: transparent;
173 |   border-color: transparent;
174 |   text-transform: capitalize;
175 |   font-size: 1.25rem;
176 |   letter-spacing: var(--spacing);
177 |   margin: 0 0.5rem;
178 |   transition: var(--transition);
179 |   cursor: pointer;
180 |   padding: 0.25rem 0;
181 |   line-height: 1;
182 |   outline-color: var(--clr-primary-10);
183 | }
184 | .job-btn:hover {
185 |   color: var(--clr-primary-5);
186 |   box-shadow: 0 2px var(--clr-primary-5);
187 | }
188 | .active-btn {
189 |   color: var(--clr-primary-5);
190 |   box-shadow: 0 2px var(--clr-primary-5);
191 | }
192 | 
193 | .job-info h3 {
194 |   font-weight: 400;
195 | }
196 | .job-info h4 {
197 |   text-transform: uppercase;
198 |   color: var(--clr-grey-5);
199 |   background: var(--clr-grey-9);
200 |   display: inline-block;
201 |   padding: 0.375rem 0.75rem;
202 |   border-radius: var(--radius);
203 | }
204 | .job-date {
205 |   letter-spacing: var(--spacing);
206 | }
207 | .job-desc {
208 |   display: grid;
209 |   grid-template-columns: auto 1fr;
210 |   column-gap: 2rem;
211 |   align-items: center;
212 |   margin-bottom: 1.25rem;
213 | }
214 | .job-desc p {
215 |   margin-bottom: 0;
216 |   color: var(--clr-grey-3);
217 | }
218 | .job-icon {
219 |   color: var(--clr-primary-5);
220 | }
221 | @media screen and (min-width: 992px) {
222 |   .jobs-center {
223 |     width: 90vw;
224 |     display: grid;
225 |     grid-template-columns: 200px 1fr;
226 |     column-gap: 4rem;
227 |   }
228 |   .btn-container {
229 |     flex-direction: column;
230 |     justify-content: flex-start;
231 |   }
232 |   .job-btn {
233 |     margin-bottom: 1rem;
234 |   }
235 |   .active-btn {
236 |     box-shadow: -2px 0 var(--clr-primary-5);
237 |   }
238 |   .job-btn:hover {
239 |     box-shadow: -2px 0 var(--clr-primary-5);
240 |   }
241 | }
242 | .btn {
243 |   text-transform: uppercase;
244 |   background: var(--clr-primary-5);
245 |   color: var(--clr-primary-9);
246 |   padding: 0.375rem 0.75rem;
247 |   letter-spacing: var(--spacing);
248 |   font-weight: 700;
249 |   -webkit-transition: var(--transition);
250 |   transition: var(--transition);
251 |   font-size: 0.875rem;
252 |   border: 2px solid transparent;
253 |   cursor: pointer;
254 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
255 |   border-radius: var(--radius);
256 |   display: block;
257 |   width: 12rem;
258 |   text-align: center;
259 |   margin: 0 auto;
260 |   margin-top: 3rem;
261 | }
262 | .btn:hover {
263 |   color: var(--clr-primary-1);
264 |   background: var(--clr-primary-8);
265 | }
266 | .center-btn {
267 | }
268 | 


--------------------------------------------------------------------------------
/tayyor soure code/src/index.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Variables
  4 | ===============
  5 | */
  6 | 
  7 | :root {
  8 |   /* dark shades of primary color*/
  9 |   --clr-primary-1: hsl(184, 91%, 17%);
 10 |   --clr-primary-2: hsl(185, 84%, 25%);
 11 |   --clr-primary-3: hsl(185, 81%, 29%);
 12 |   --clr-primary-4: hsl(184, 77%, 34%);
 13 |   --clr-primary-5: #2caeba;
 14 |   /* lighter shades of primary color */
 15 |   --clr-primary-6: hsl(185, 57%, 50%);
 16 |   --clr-primary-7: hsl(184, 65%, 59%);
 17 |   --clr-primary-8: hsl(184, 80%, 74%);
 18 |   --clr-primary-9: hsl(185, 94%, 87%);
 19 |   --clr-primary-10: hsl(186, 100%, 94%);
 20 |   /* darkest grey - used for headings */
 21 |   --clr-grey-1: hsl(209, 61%, 16%);
 22 |   --clr-grey-2: hsl(211, 39%, 23%);
 23 |   --clr-grey-3: hsl(209, 34%, 30%);
 24 |   --clr-grey-4: hsl(209, 28%, 39%);
 25 |   /* grey used for paragraphs */
 26 |   --clr-grey-5: hsl(210, 22%, 49%);
 27 |   --clr-grey-6: hsl(209, 23%, 60%);
 28 |   --clr-grey-7: hsl(211, 27%, 70%);
 29 |   --clr-grey-8: hsl(210, 31%, 80%);
 30 |   --clr-grey-9: hsl(212, 33%, 89%);
 31 |   --clr-grey-10: hsl(210, 36%, 96%);
 32 |   --clr-white: #fff;
 33 |   --clr-red-dark: hsl(360, 67%, 44%);
 34 |   --clr-red-light: hsl(360, 71%, 66%);
 35 |   --clr-green-dark: hsl(125, 67%, 44%);
 36 |   --clr-green-light: hsl(125, 71%, 66%);
 37 |   --clr-black: #222;
 38 |   --transition: all 0.3s linear;
 39 |   --spacing: 0.1rem;
 40 |   --radius: 0.25rem;
 41 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 42 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 43 |   --max-width: 1170px;
 44 |   --fixed-width: 620px;
 45 | }
 46 | /*
 47 | =============== 
 48 | Global Styles
 49 | ===============
 50 | */
 51 | 
 52 | *,
 53 | ::after,
 54 | ::before {
 55 |   margin: 0;
 56 |   padding: 0;
 57 |   box-sizing: border-box;
 58 | }
 59 | body {
 60 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 61 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 62 |   background: var(--clr-grey-10);
 63 |   color: var(--clr-grey-1);
 64 |   line-height: 1.5;
 65 |   font-size: 0.875rem;
 66 | }
 67 | ul {
 68 |   list-style-type: none;
 69 | }
 70 | a {
 71 |   text-decoration: none;
 72 | }
 73 | h1,
 74 | h2,
 75 | h3,
 76 | h4 {
 77 |   letter-spacing: var(--spacing);
 78 |   text-transform: capitalize;
 79 |   line-height: 1.25;
 80 |   margin-bottom: 0.75rem;
 81 | }
 82 | h1 {
 83 |   font-size: 3rem;
 84 | }
 85 | h2 {
 86 |   font-size: 2rem;
 87 | }
 88 | h3 {
 89 |   font-size: 1.25rem;
 90 | }
 91 | h4 {
 92 |   font-size: 0.875rem;
 93 | }
 94 | p {
 95 |   margin-bottom: 1.25rem;
 96 |   color: var(--clr-grey-5);
 97 | }
 98 | @media screen and (min-width: 800px) {
 99 |   h1 {
100 |     font-size: 4rem;
101 |   }
102 |   h2 {
103 |     font-size: 2.5rem;
104 |   }
105 |   h3 {
106 |     font-size: 1.75rem;
107 |   }
108 |   h4 {
109 |     font-size: 1rem;
110 |   }
111 |   body {
112 |     font-size: 1rem;
113 |   }
114 |   h1,
115 |   h2,
116 |   h3,
117 |   h4 {
118 |     line-height: 1;
119 |   }
120 | }
121 | /*  global classes */
122 | 
123 | /* section */
124 | .section {
125 |   width: 90vw;
126 |   margin: 5rem auto;
127 |   max-width: var(--max-width);
128 | }
129 | 
130 | @media screen and (min-width: 992px) {
131 |   .section {
132 |     width: 95vw;
133 |   }
134 | }
135 | 
136 | .loading {
137 |   text-align: center;
138 | }
139 | 
140 | .underline {
141 |   width: 5rem;
142 |   height: 0.25rem;
143 |   margin-bottom: 1.25rem;
144 |   background: var(--clr-primary-5);
145 |   margin-left: auto;
146 |   margin-right: auto;
147 | }
148 | .title {
149 |   margin-bottom: 4rem;
150 |   text-align: center;
151 | }
152 | 
153 | /*
154 | =============== 
155 | Jobs
156 | ===============
157 | */
158 | 
159 | .jobs-center {
160 |   width: 80vw;
161 |   margin: 0 auto;
162 |   max-width: var(--max-width);
163 | }
164 | .btn-container {
165 |   display: flex;
166 |   flex-direction: row;
167 |   justify-content: center;
168 |   margin-bottom: 4rem;
169 |   flex-wrap: wrap;
170 | }
171 | .job-btn {
172 |   background: transparent;
173 |   border-color: transparent;
174 |   text-transform: capitalize;
175 |   font-size: 1.25rem;
176 |   letter-spacing: var(--spacing);
177 |   margin: 0 0.5rem;
178 |   transition: var(--transition);
179 |   cursor: pointer;
180 |   padding: 0.25rem 0;
181 |   line-height: 1;
182 |   outline-color: var(--clr-primary-10);
183 | }
184 | .job-btn:hover {
185 |   color: var(--clr-primary-5);
186 |   box-shadow: 0 2px var(--clr-primary-5);
187 | }
188 | .active-btn {
189 |   color: var(--clr-primary-5);
190 |   box-shadow: 0 2px var(--clr-primary-5);
191 | }
192 | 
193 | .job-info h3 {
194 |   font-weight: 400;
195 | }
196 | .job-info h4 {
197 |   text-transform: uppercase;
198 |   color: var(--clr-grey-5);
199 |   background: var(--clr-grey-9);
200 |   display: inline-block;
201 |   padding: 0.375rem 0.75rem;
202 |   border-radius: var(--radius);
203 | }
204 | .job-date {
205 |   letter-spacing: var(--spacing);
206 | }
207 | .job-desc {
208 |   display: grid;
209 |   grid-template-columns: auto 1fr;
210 |   column-gap: 2rem;
211 |   align-items: center;
212 |   margin-bottom: 1.25rem;
213 | }
214 | .job-desc p {
215 |   margin-bottom: 0;
216 |   color: var(--clr-grey-3);
217 | }
218 | .job-icon {
219 |   color: var(--clr-primary-5);
220 | }
221 | @media screen and (min-width: 992px) {
222 |   .jobs-center {
223 |     width: 90vw;
224 |     display: grid;
225 |     grid-template-columns: 200px 1fr;
226 |     column-gap: 4rem;
227 |   }
228 |   .btn-container {
229 |     flex-direction: column;
230 |     justify-content: flex-start;
231 |   }
232 |   .job-btn {
233 |     margin-bottom: 1rem;
234 |   }
235 |   .active-btn {
236 |     box-shadow: -2px 0 var(--clr-primary-5);
237 |   }
238 |   .job-btn:hover {
239 |     box-shadow: -2px 0 var(--clr-primary-5);
240 |   }
241 | }
242 | .btn {
243 |   text-transform: uppercase;
244 |   background: var(--clr-primary-5);
245 |   color: var(--clr-primary-9);
246 |   padding: 0.375rem 0.75rem;
247 |   letter-spacing: var(--spacing);
248 |   font-weight: 700;
249 |   -webkit-transition: var(--transition);
250 |   transition: var(--transition);
251 |   font-size: 0.875rem;
252 |   border: 2px solid transparent;
253 |   cursor: pointer;
254 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
255 |   border-radius: var(--radius);
256 |   display: block;
257 |   width: 12rem;
258 |   text-align: center;
259 |   margin: 0 auto;
260 |   margin-top: 3rem;
261 | }
262 | .btn:hover {
263 |   color: var(--clr-primary-1);
264 |   background: var(--clr-primary-8);
265 | }
266 | .center-btn {
267 | }
268 | 


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