├── .eslintrc.json
├── .github
    └── workflows
    │   └── linters.yml
├── .gitignore
├── .hintrc
├── .stylelintrc.json
├── .vscode
    └── settings.json
├── README.md
├── app.js
├── images
    ├── 21.png
    ├── 22.png
    ├── 23.png
    ├── Ellipse 1.png
    ├── Ellipse 3.png
    ├── Frame10.png
    ├── Frame11.png
    ├── Frame11copy.png
    ├── Frame1copy.png
    ├── Frame9(1).png
    ├── Frame9.png
    ├── Group.png
    ├── Icon.png
    ├── Linkedin icon (1).png
    ├── Linkedinicon.png
    ├── Logo Placeholder.png
    ├── SeparatorBottom.png
    ├── SnapshootPortfolio(1).png
    ├── SnapshootPortfolio(2).png
    ├── SnapshootPortfolio(3).png
    ├── SnapshootPortfolio.png
    ├── Vector.png
    ├── angellist.png
    ├── arrow.png
    ├── arrow1.png
    ├── backg.png
    ├── bg.png
    ├── bg1.png
    ├── contactbg.png
    ├── counter.png
    ├── ctnt.png
    ├── dot.png
    ├── elipse2.png
    ├── github.png
    ├── halfbg.png
    ├── hamburger.png
    ├── header-shapesmobile.png
    ├── ii.png
    ├── left.png
    ├── main1.png
    ├── main_bg copy.png
    ├── main_bg.png
    ├── main_bgcopy.png
    ├── n.png
    ├── socials.png
    ├── tonic.jpg
    ├── toolbar.png
    ├── top.png
    ├── twitter.png
    └── x.png
├── index.html
├── package-lock.json
├── package.json
└── style.css


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "env": {
 3 |       "browser": true,
 4 |       "es6": true,
 5 |       "jest": true
 6 |     },
 7 |     "parser": "babel-eslint",
 8 |     "parserOptions": {
 9 |       "ecmaVersion": 2018,
10 |       "sourceType": "module"
11 |     },
12 |     "extends": ["airbnb-base"],
13 |     "rules": {
14 |       "no-shadow": "off",
15 |       "no-param-reassign": "off",
16 |       "eol-last": "off",
17 |       "import/extensions": [ 1, {
18 |         "js": "always", "json": "always"
19 |       }]
20 |     },
21 |     "ignorePatterns": [
22 |       "dist/",
23 |       "build/"
24 |     ]
25 |   }


--------------------------------------------------------------------------------
/.github/workflows/linters.yml:
--------------------------------------------------------------------------------
 1 | name: Linters
 2 | 
 3 | on: pull_request
 4 | 
 5 | env:
 6 |   FORCE_COLOR: 1
 7 | 
 8 | jobs:
 9 |   lighthouse:
10 |     name: Lighthouse
11 |     runs-on: ubuntu-18.04
12 |     steps:
13 |       - uses: actions/checkout@v2
14 |       - uses: actions/setup-node@v1
15 |         with:
16 |           node-version: "12.x"
17 |       - name: Setup Lighthouse
18 |         run: npm install -g @lhci/cli@0.7.x
19 |       - name: Lighthouse Report
20 |         run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
21 |   webhint:
22 |     name: Webhint
23 |     runs-on: ubuntu-18.04
24 |     steps:
25 |       - uses: actions/checkout@v2
26 |       - uses: actions/setup-node@v1
27 |         with:
28 |           node-version: "12.x"
29 |       - name: Setup Webhint
30 |         run: |
31 |           npm install --save-dev hint@6.x
32 |           [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc
33 |       - name: Webhint Report
34 |         run: npx hint .
35 |   stylelint:
36 |     name: Stylelint
37 |     runs-on: ubuntu-18.04
38 |     steps:
39 |       - uses: actions/checkout@v2
40 |       - uses: actions/setup-node@v1
41 |         with:
42 |           node-version: "12.x"
43 |       - name: Setup Stylelint
44 |         run: |
45 |           npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
46 |           [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json
47 |       - name: Stylelint Report
48 |         run: npx stylelint "**/*.{css,scss}"
49 |   eslint:
50 |     name: ESLint
51 |     runs-on: ubuntu-18.04
52 |     steps:
53 |       - uses: actions/checkout@v2
54 |       - uses: actions/setup-node@v1
55 |         with:
56 |           node-version: "12.x"
57 |       - name: Setup ESLint
58 |         run: |
59 |           npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
60 |           [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
61 |       - name: ESLint Report
62 |         run: npx eslint .


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/


--------------------------------------------------------------------------------
/.hintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "connector": {
 3 |     "name": "local",
 4 |     "options": {
 5 |       "pattern": ["**", "!.git/**", "!node_modules/**"]
 6 |     }
 7 |   },
 8 |   "extends": ["development"],
 9 |   "formatters": ["stylish"],
10 |   "hints": [
11 |     "button-type",
12 |     "disown-opener",
13 |     "html-checker",
14 |     "meta-charset-utf-8",
15 |     "meta-viewport",
16 |     "no-inline-styles:error"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["stylelint-config-standard"],
 3 |   "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
 4 |   "rules": {
 5 |     "at-rule-no-unknown": null,
 6 |     "scss/at-rule-no-unknown": [
 7 |       true,
 8 |       {
 9 |         "ignoreAtRules": [
10 |           "tailwind",
11 |           "apply",
12 |           "variants",
13 |           "responsive",
14 |           "screen"
15 |         ]
16 |       }
17 |     ]
18 |   },
19 |   "csstree/validator": true,
20 |   "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"]
21 | }
22 | 
23 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # code-debug


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | const navLinks = document.getElementById('navLinks');
  2 | const burger = document.getElementById('burger');
  3 | const hideMenu = document.getElementById('closeIcon');
  4 | const closeMenu = document.getElementById('navItems');
  5 | const contactFormCont = document.getElementById('#formcontact');
  6 | burger.onclick = function burger() {
  7 |   navLinks.style.right = '0';
  8 | };
  9 | hideMenu.onclick = function hideMenu() {
 10 |   navLinks.style.right = '-100%';
 11 | };
 12 | 
 13 | closeMenu.onclick = function hideMenu() {
 14 |   navLinks.style.right = '-100%';
 15 | };
 16 | 
 17 | // workks part popup
 18 | const projects = [
 19 |   {
 20 |     id: 'card1',
 21 |     title: 'Tonic',
 22 |     image: './images/22.png',
 23 |     image1: './images/./SnapshootPortfolio(1).png',
 24 |     description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,',
 25 |     technologyList: ['Html', 'Ruby on Rails', 'Javascript'],
 26 |   },
 27 | 
 28 |   {
 29 |     id: 'card2',
 30 |     title: 'Multi-Post Stories',
 31 |     image: './images/21.png',
 32 |     image1: './images/SnapshootPortfolio(2).png',
 33 |     description:
 34 |         'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,',
 35 |     technologyList: ['Html', 'Ruby on Rails', 'Javascript'],
 36 |     liveLink: 'divinecharlotte.github.io/portifolio-setup',
 37 |   },
 38 | 
 39 |   {
 40 |     id: 'card3',
 41 |     title: 'Facebook 360',
 42 |     image: './images/23.png',
 43 |     image1: './images/SnapshootPortfolio(3).png',
 44 |     description:
 45 |         'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,',
 46 |     technologyList: ['Html', 'Ruby on Rails', 'Javascript'],
 47 |   },
 48 |   {
 49 |     id: 'card4',
 50 |     title: 'Uber Navigation',
 51 |     image: './images/tonic.jpg',
 52 |     image1: './images/SnapshootPortfolio.png',
 53 |     description:
 54 |         'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,',
 55 |     technologyList: ['Html', 'Ruby on Rails', 'Javascript'],
 56 |   },
 57 | ];
 58 | 
 59 | const section = document.getElementById('portfolio');
 60 | projects.forEach((project, index) => {
 61 |   const div = document.createElement('div');
 62 |   div.className = 'main-container';
 63 |   div.innerHTML = `
 64 | 
 65 |  
 66 |       <div class="part1">
 67 |       <img class="picture" src="${project.image1}" alt="image"/>
 68 |         <img class="pic" src="${project.image}" alt="image" />
 69 |       </div>
 70 |       <div class="part2">
 71 |         <div>
 72 |           <h2 class="heading">${project.title}</h2>
 73 |           <div class="structure">
 74 |             <span class="canopy">CANOPY</span>
 75 |             <img src="./images/./counter.png" alt="counter" />
 76 |             <span class="transpalent">Back End Dev</span>
 77 |             <img src="./images/./counter.png" alt="counter" />
 78 |             <span class="transpalent">2015</span>
 79 |           </div>
 80 |         </div>
 81 |         <div class="box-content">
 82 |           <p>
 83 |             A daily selection of privately personalized reads; no accounts or
 84 |             sign-ups required.
 85 |           </p>
 86 |         </div>
 87 |         <div>
 88 |           <ul class="flex-container">
 89 |             <li>${project.technologyList[0]}</li>
 90 |             <li>${project.technologyList[1]}</li>
 91 |             <li>${project.technologyList[2]}</li>
 92 |           </ul>
 93 |         </div>
 94 |         <div><a><button type="button" class="about" id ="see-button-${index}" >see project</button></a></div>
 95 |       </div  
 96 |   
 97 |     `;
 98 |   section.appendChild(div);
 99 | });
100 | 
101 | const seeButtons = [];
102 | projects.forEach((project, index) => seeButtons.push(document.getElementById(`see-button-${index}`)));
103 | 
104 | const mainContainer1 = document.getElementById('main-container1');
105 | const closeIcon2 = document.getElementById('closeIcon2');
106 | 
107 | seeButtons.forEach((seeButton) => {
108 |   seeButton.addEventListener('click', () => {
109 |     mainContainer1.classList.add('show');
110 |   });
111 | });
112 | closeIcon2.addEventListener('click', () => {
113 |   mainContainer1.classList.remove('show');
114 | });
115 | 
116 | // FORM VALIDATION
117 | contactFormCont.addEventListener('submit', (event) => {
118 |   const emailInput = contactFormCont.email.value;
119 |   if (emailInput.toLowerCase() !== emailInput) {
120 |     event.preventDefault();
121 |     const errorTag = contactFormCont.getElementsByTagName('small');
122 |     errorTag[0].innerHTML = 'Please insert email in lowercase!';
123 |   } else {
124 |     contactFormCont.action = 'https://formspree.io/f/mqkngenv';
125 |   }
126 | });
127 | 
128 | // Local Storage
129 | const inputFields = document.querySelectorAll('input');
130 | inputFields.forEach((input) => {
131 |   input.addEventListener('change', (event) => {
132 |     let formData = JSON.parse(localStorage.getItem('formData'));
133 |     if (!formData) {
134 |       formData = { name: '', email: '', message: '' };
135 |     }
136 |     formData[event.target.name] = event.target.value;
137 |     localStorage.setItem('formData', JSON.stringify(formData));
138 |   });
139 | });
140 | 
141 | const textArea = document.getElementById('user-message');
142 | textArea.addEventListener('change', (event) => {
143 |   let formData = JSON.parse(localStorage.getItem('formData'));
144 |   if (!formData) {
145 |     formData = { name: '', email: '', message: '' };
146 |   }
147 |   formData.message = event.target.value;
148 |   localStorage.setItem('formData', JSON.stringify(formData));
149 | });
150 | 
151 | function retrieveFormData() {
152 |   const formData = JSON.parse(localStorage.getItem('formData'));
153 |   if (formData) {
154 |     document.getElementById('txtEmail').value = formData.email;
155 |     document.getElementById('user').value = formData.name;
156 |     document.getElementById('user-message').value = formData.message;
157 |   }
158 | }
159 | 
160 | retrieveFormData();


--------------------------------------------------------------------------------
/images/21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/21.png


--------------------------------------------------------------------------------
/images/22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/22.png


--------------------------------------------------------------------------------
/images/23.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/23.png


--------------------------------------------------------------------------------
/images/Ellipse 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/Ellipse 1.png


--------------------------------------------------------------------------------
/images/Ellipse 3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/Ellipse 3.png


--------------------------------------------------------------------------------
/images/Frame10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/Frame10.png


--------------------------------------------------------------------------------
/images/Frame11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/Frame11.png


--------------------------------------------------------------------------------
/images/Frame11copy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/Frame11copy.png


--------------------------------------------------------------------------------
/images/Frame1copy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/Frame1copy.png


--------------------------------------------------------------------------------
/images/Frame9(1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/Frame9(1).png


--------------------------------------------------------------------------------
/images/Frame9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/Frame9.png


--------------------------------------------------------------------------------
/images/Group.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/Group.png


--------------------------------------------------------------------------------
/images/Icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/Icon.png


--------------------------------------------------------------------------------
/images/Linkedin icon (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/Linkedin icon (1).png


--------------------------------------------------------------------------------
/images/Linkedinicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/Linkedinicon.png


--------------------------------------------------------------------------------
/images/Logo Placeholder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/Logo Placeholder.png


--------------------------------------------------------------------------------
/images/SeparatorBottom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/SeparatorBottom.png


--------------------------------------------------------------------------------
/images/SnapshootPortfolio(1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/SnapshootPortfolio(1).png


--------------------------------------------------------------------------------
/images/SnapshootPortfolio(2).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/SnapshootPortfolio(2).png


--------------------------------------------------------------------------------
/images/SnapshootPortfolio(3).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/SnapshootPortfolio(3).png


--------------------------------------------------------------------------------
/images/SnapshootPortfolio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/SnapshootPortfolio.png


--------------------------------------------------------------------------------
/images/Vector.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/Vector.png


--------------------------------------------------------------------------------
/images/angellist.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/angellist.png


--------------------------------------------------------------------------------
/images/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/arrow.png


--------------------------------------------------------------------------------
/images/arrow1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/arrow1.png


--------------------------------------------------------------------------------
/images/backg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/backg.png


--------------------------------------------------------------------------------
/images/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/bg.png


--------------------------------------------------------------------------------
/images/bg1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/bg1.png


--------------------------------------------------------------------------------
/images/contactbg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/contactbg.png


--------------------------------------------------------------------------------
/images/counter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/counter.png


--------------------------------------------------------------------------------
/images/ctnt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/ctnt.png


--------------------------------------------------------------------------------
/images/dot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/dot.png


--------------------------------------------------------------------------------
/images/elipse2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/elipse2.png


--------------------------------------------------------------------------------
/images/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/github.png


--------------------------------------------------------------------------------
/images/halfbg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/halfbg.png


--------------------------------------------------------------------------------
/images/hamburger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/hamburger.png


--------------------------------------------------------------------------------
/images/header-shapesmobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/header-shapesmobile.png


--------------------------------------------------------------------------------
/images/ii.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/ii.png


--------------------------------------------------------------------------------
/images/left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/left.png


--------------------------------------------------------------------------------
/images/main1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/main1.png


--------------------------------------------------------------------------------
/images/main_bg copy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/main_bg copy.png


--------------------------------------------------------------------------------
/images/main_bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/main_bg.png


--------------------------------------------------------------------------------
/images/main_bgcopy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/main_bgcopy.png


--------------------------------------------------------------------------------
/images/n.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/n.png


--------------------------------------------------------------------------------
/images/socials.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/socials.png


--------------------------------------------------------------------------------
/images/tonic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/tonic.jpg


--------------------------------------------------------------------------------
/images/toolbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/toolbar.png


--------------------------------------------------------------------------------
/images/top.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/top.png


--------------------------------------------------------------------------------
/images/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/twitter.png


--------------------------------------------------------------------------------
/images/x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divinecharlotte/code-debug/5c1e06653ae8814e7a58e012b0b94ffedf316e41/images/x.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Charlotte Divine Dusenge Portfolio</title>
  8 |     <!-- Fonts -->
  9 | 
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 12 |     <link
 13 |       href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap"
 14 |       rel="stylesheet"
 15 |     />
 16 |     <!-- Stylesheet -->
 17 | 
 18 |     <link rel="stylesheet" href="style.css" />
 19 | 
 20 |     <!-- Icons Script -->
 21 |     <script
 22 |       src="https://kit.fontawesome.com/eb57cf8ccf.js"
 23 |       crossorigin="anonymous"
 24 |     ></script>
 25 |   </head>
 26 | 
 27 |   <body>
 28 |     <header class="header-part">
 29 |       <div class="Charlotte">
 30 |         <a href="#">Charlotte</a>
 31 |         <ul class="informations">
 32 |           <li class="info"><a href="#">Portfolio</a></li>
 33 |           <li class="info"><a href="#about">About</a></li>
 34 |           <li class="info"><a href="#contact">Contact</a></li>
 35 |         </ul>
 36 |       </div>
 37 |       <div class="burger" id="burger">
 38 |         <div class="line"></div>
 39 |         <div class="line"></div>
 40 |         <div class="line"></div>
 41 |       </div>
 42 |       <div class="nav-links" id="navLinks">
 43 |         <div><i class="fa fa-times" id="closeIcon"></i></div>
 44 |         <ul class="informations-mb" id="navItems">
 45 |           <li class="infom"><a href="#">Portfolio</a></li>
 46 |           <li class="infom"><a href="#about">About</a></li>
 47 |           <li class="infom"><a href="#contact">Contact</a></li>
 48 |         </ul>
 49 |       </div>
 50 |     </header>
 51 |     <section class="headline-part">
 52 |       <h1>
 53 |         I’m Charlotte, <br />
 54 |         Glad to see you!
 55 |       </h1>
 56 |       <p>
 57 |         I’m a software developer! I can help you build a product , feature or
 58 |         website. Look through some of my work and experience! If you like what
 59 |         you see and have a project you need coded,don’t hesitate to contact me.
 60 |       </p>
 61 | 
 62 |       <p class="connect"><a href="#">LET'S CONNECT</a></p>
 63 |       <div class="social-icons1">
 64 |         <ul>
 65 |           <li>
 66 |             <a href="https://twitter.com/divine_maina"
 67 |               ><img src="./images/./twitter.png" alt="twitter-icon"
 68 |             /></a>
 69 |           </li>
 70 |           <li>
 71 |             <a
 72 |               href="https://www.linkedin.com/in/charlotte-divine-dusenge-31b19017a/"
 73 |               ><img src="./images/./Linkedinicon.png" alt="linkedhin-icon"
 74 |             /></a>
 75 |           </li>
 76 |           <li>
 77 |             <a href="mvector"
 78 |               ><img src="./images/./Vector.png" alt="Medium-icon"
 79 |             /></a>
 80 |           </li>
 81 |           <li>
 82 |             <a href="https://github.com/divinecharlotte"
 83 |               ><img src="./images/./github.png" alt="github-icon"
 84 |             /></a>
 85 |           </li>
 86 |           <li>
 87 |             <a href="angelist"
 88 |               ><img src="./images/./angellist.png" alt="angellist-icon"
 89 |             /></a>
 90 |           </li>
 91 |         </ul>
 92 |       </div>
 93 |     </section>
 94 | 
 95 |     <div class="main-container1" id="main-container1">
 96 |       <div class="pop">
 97 |         <div><i class="fa fa-times" id="closeIcon2"></i></div>
 98 |         <h2 class="heading">Tonic</h2>
 99 |         <div class="structure">
100 |           <span class="canopy">CANOPY</span>
101 |           <img src="./images/./counter.png" alt="counter" />
102 |           <span class="transpalent">Back End Dev</span>
103 |           <img src="./images/./counter.png" alt="counter" />
104 |           <span class="transpalent">2015</span>
105 |         </div>
106 |         <div class="part1">
107 |           <img
108 |             class="picture"
109 |             src="./images/./SnapshootPortfolio(1).png"
110 |             alt="image"
111 |           />
112 |           <img class="pict" src="./images/21.png" alt="image" />
113 |         </div>
114 |         <div class="part2">
115 |           <div class="part222">
116 |             <div class="box-content1">
117 |               <p>
118 |                 Lorem Ipsum is simply dummy text of the printing and typesetting
119 |                 industry. Lorem Ipsum has been the industry's standard dummy
120 |                 text ever since the 1500s, when an unknown printer took a galley
121 |                 of type and scrambled it 1960s with the releaLorem Ipsum is
122 |                 simply dummy text of the printing and typesetting industry.
123 |                 Lorem Ipsum has been the industry's standard dummy text ever
124 |                 since the 1500s, when an unknown printer took a galley of type
125 |                 and scrambled it 1960s with the releorem Ipsum is simply dummy
126 |                 text of the printing and typesetting industry. Lorem Ipsum han
127 |                 printer took a galley of type and scrambled it 1960s with the
128 |                 releawn printer took a galley of type and scrambled it 1960s
129 |                 with the releaLorem Ipsum is simply dummy text of the printing
130 |                 and typesetting industry. Lorem Ipsum has been the industry's
131 |                 standard dummy text ever since the 1500s, when an unknown
132 |                 printer took a galley of type and scrambled it 1960s with the
133 |                 relea
134 |               </p>
135 |             </div>
136 |           
137 |               <div>
138 |                 <ul class="flex-container">
139 |                   <li>html</li>
140 |                   <li>css</li>
141 |                   <li>javascript</li>
142 |                 </ul>
143 |               <div class="check">
144 |                 <a href="https://divinecharlotte.github.io/portifolio-setup/" target="_blank" rel="noopener noreferrer" >
145 |                 <div  class="popup-link">
146 |                   <span>See live</span>
147 |                   
148 |                   <img src="./images/Icon.png" alt="" />
149 |                 </div>
150 |               </a>
151 | 
152 |                 <a href="https://github.com/divinecharlotte/portifolio-setup" target="_blank" rel="noopener noreferrer"> 
153 |                 <div class="popup-link" >
154 |                   <span>see-source</span>
155 |                   
156 |                   <img src="./images/Group.png" alt="" />
157 |                 </div>
158 |               </a>
159 |             </div>
160 |               </div>
161 |           </div>
162 |         </div>
163 |       </div>
164 |     </div>
165 | 
166 |     <section id="portfolio" class="box">
167 | <h6 class="tit">tonic</h6>
168 |     </section>
169 |     <section class="about-me" id="about">
170 |       <div class="me">
171 |         <div class="part1ml">
172 |           <h2 class="abm">
173 |             About <br />
174 |             Myself
175 |           </h2>
176 | 
177 |           <p class="text">
178 |             Hello I'm a software developer! I can help you build a product ,
179 |             feature or website Look through some of my work and experience! If
180 |             you like what you see and have a project you need coded, don’t
181 |             hestiate to contact me.
182 |           </p>
183 | 
184 |           <p class="connect"><a href="#">LET'S CONNECT</a></p>
185 |           <div class="social-icons">
186 |             <ul>
187 |               <li>
188 |                 <a href="https://twitter.com/divine_maina"
189 |                   ><img src="./images/./twitter.png" alt="twitter-icon"
190 |                 /></a>
191 |               </li>
192 |               <li>
193 |                 <a
194 |                   href="https://www.linkedin.com/in/charlotte-divine-dusenge-31b19017a/"
195 |                   ><img src="./images/./Linkedinicon.png" alt="linkedin-icon" />
196 |                 </a>
197 |               </li>
198 |               <li>
199 |                 <a href="mvector"
200 |                   ><img src="./images/./Vector.png" alt="Medium-icon"
201 |                 /></a>
202 |               </li>
203 |               <li>
204 |                 <a href="https://github.com/divinecharlotte"
205 |                   ><img src="./images/./github.png" alt="github-icon"
206 |                 /></a>
207 |               </li>
208 |               <li>
209 |                 <a href="angelist"
210 |                   ><img src="./images/./angellist.png" alt="angellist-icon"
211 |                 /></a>
212 |               </li>
213 |             </ul>
214 |           </div>
215 |           <p><button type="button" class="about2">Get my resume</button></p>
216 |         </div>
217 | 
218 |         <ul class="languages">
219 |           <li class="arrow1">
220 |             <div class="arrow">
221 |               <h3 class="lan">Languages</h3>
222 |               <img class="election" src="./images/./arrow1.png" alt="" />
223 |             </div>
224 | 
225 |             <div class="dsk">
226 |               <img src="./images/./Frame1copy.png" alt="html-framework" />
227 |               <img src="./images/./Frame9.png" alt="javascript-language" />
228 |               <img src="./images/./Frame11copy.png" alt="css-styling" />
229 |             </div>
230 | 
231 |             <div class="mb">
232 |               <img src="./images/./Frame9(1).png" alt="html-framework" />
233 |               <img src="./images/./Frame10.png" alt="javascript-language" />
234 |               <img src="./images/./Frame11.png" alt="css-styling" />
235 |             </div>
236 |           </li>
237 | 
238 |           <li class="arrow">
239 |             <h3 class="lan">frameworks</h3>
240 |             <div>
241 |               <img class="election2" src="./images/./left.png" alt="" />
242 |             </div>
243 |           </li>
244 |           <li>
245 |             <img
246 |               class="separator"
247 |               src="./images/./SeparatorBottom.png"
248 |               alt=""
249 |             />
250 |           </li>
251 |           <li class="arrow">
252 |             <h3 class="lan">Skills</h3>
253 |             <div>
254 |               <img class="election2" src="./images/./left.png" alt="" />
255 |             </div>
256 |           </li>
257 | 
258 |           <li>
259 |             <img
260 |               class="separator"
261 |               src="./images/./SeparatorBottom.png"
262 |               alt=""
263 |             />
264 |           </li>
265 |         </ul>
266 |       </div>
267 |     </section>
268 |     <footer class="foot" id="contact">
269 |       <div class="foot-again">
270 |         <h2 class="contact">Contact me</h2>
271 |         <p>
272 |           If you have an application you are interested in developing, a feature
273 |           that you need built or a project that needs coding. I’d love to help
274 |           with it
275 |         </p>
276 | 
277 |         <form
278 |           class="forma"
279 |           action="https://formspree.io/f/mqkngenv"
280 |           method="post"
281 |           id="formcontact"
282 |         >
283 |           <input
284 |             type="text"
285 |             placeholder="Enter your name"
286 |             name="name"
287 |             id="user"
288 |             maxlength="30"
289 |             required
290 |           />
291 |           <br />
292 |           <input
293 |             type="email"
294 |             id="txtEmail"
295 |             name="email"
296 |             placeholder="alexandra@gmail.com"
297 |             required
298 |           /><br />
299 |           <textarea
300 |             rows="10"
301 |             maxlength="500"
302 |             placeholder="Write your message here"
303 |             name="message"
304 |             id="user-message"
305 |             required
306 |           ></textarea>
307 |           <small></small>
308 |           <div class="get">
309 |             <input type="submit" value="Get It Touch" />
310 |           </div>
311 |         </form>
312 |       </div>
313 |     </footer>
314 |     <script src="app.js"></script>
315 |   </body>
316 | </html>
317 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "portifolio-setup",
 3 |   "version": "1.0.0",
 4 |   "description": "> this the html and css portifolio project.",
 5 |   "main": "index.html",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/divinecharlotte/portifolio-setup.git"
12 |   },
13 |   "author": "divinecharlotte",
14 |   "license": "ISC",
15 |   "bugs": {
16 |     "url": "https://github.com/divinecharlotte/portifolio-setup/issues"
17 |   },
18 |   "homepage": "https://github.com/divinecharlotte/portifolio-setup#readme",
19 |   "devDependencies": {
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^7.32.0",
22 |     "eslint-config-airbnb-base": "^14.2.1",
23 |     "eslint-plugin-import": "^2.26.0",
24 |     "hint": "^6.1.11",
25 |     "stylelint": "^13.13.1",
26 |     "stylelint-config-standard": "^21.0.0",
27 |     "stylelint-csstree-validator": "^1.9.0",
28 |     "stylelint-scss": "^3.21.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @media only screen and (min-width: 320px) {
  2 |   body {
  3 |     margin: 0;
  4 |     padding: 0;
  5 |     background-color: #f7f7f9;
  6 |   }
  7 | 
  8 |   h1,
  9 |   h2,
 10 |   h3 {
 11 |     font-weight: 700;
 12 |     color: #172b4d;
 13 |     margin-bottom: 15px;
 14 |   }
 15 | 
 16 |   h1 {
 17 |     font-size: 40px;
 18 |   }
 19 | 
 20 |   h2 {
 21 |     font-size: 32px;
 22 |   }
 23 | 
 24 |   h3 {
 25 |     font-size: 13px;
 26 |   }
 27 | 
 28 |   .header-part {
 29 |     width: 100%;
 30 |     padding-bottom: 20px;
 31 |     height: 40px;
 32 |     background-color: white;
 33 |     position: fixed;
 34 |   }
 35 | 
 36 |   .Charlotte {
 37 |     margin: auto;
 38 |     width: 80%;
 39 |     display: flex;
 40 |     justify-content: space-between;
 41 |     padding: 10px;
 42 |   }
 43 | 
 44 |   .header-part a {
 45 |     text-decoration: none;
 46 |     color: #6070ff;
 47 |     font-weight: 700;
 48 |     font-size: 18px;
 49 |     font-family: "Poppins", sans-serif;
 50 |   }
 51 | 
 52 |   .burger {
 53 |     position: absolute;
 54 |     right: 10%;
 55 |     top: 30%;
 56 |     cursor: pointer;
 57 |     padding-top: -20px;
 58 |   }
 59 | 
 60 |   .line {
 61 |     display: block;
 62 |     width: 20px;
 63 |     height: 2px;
 64 |     margin: 0 0 5px 0;
 65 |     background-color: #4053fc;
 66 |   }
 67 | 
 68 |   .fa-times {
 69 |     color: white;
 70 |     float: right;
 71 |     font-size: 25px;
 72 |     margin: 5%  10%;
 73 |   }
 74 | 
 75 |   #closeIcon2 {
 76 |     color: black;
 77 |     float: right;
 78 |     font-size: 25px;
 79 |     margin: 2% 10px 4%;
 80 |   }
 81 | 
 82 |   nav .fa {
 83 |     color: #6070ff;
 84 |   }
 85 | 
 86 |   .headline-part {
 87 |     display: flex;
 88 |     flex-direction: column;
 89 |     justify-content: center;
 90 |     align-items: center;
 91 |     background: white url(./images/header-shapesmobile.png);
 92 |     background-repeat: no-repeat;
 93 |     height: 600px;
 94 |     width: 100%;
 95 |     border-bottom-left-radius: 50px;
 96 |     background-position: center;
 97 |     background-size: cover;
 98 |     font-family: "Poppins", sans-serif;
 99 |     margin: -1px 0 114px 0;
100 |   }
101 | 
102 |   .headline-part h1 {
103 |     line-height: 52px;
104 |     width: 90%;
105 |   }
106 | 
107 |   .headline-part p {
108 |     line-height: 22px;
109 |     width: 90%;
110 |   }
111 | 
112 |   .connect a {
113 |     font-weight: 500;
114 |     color: #7f8cff;
115 |     width: 90%;
116 |     text-decoration: none;
117 |   }
118 | 
119 |   .social-icons1 {
120 |     width: 90%;
121 |   }
122 | 
123 |   .social-icons {
124 |     width: 90%;
125 |   }
126 | 
127 |   .social-icons ul {
128 |     display: flex;
129 |     column-gap: 20px;
130 |     align-items: center;
131 |     padding: 0;
132 |   }
133 | 
134 |   .social-icons1 ul {
135 |     display: flex;
136 |     column-gap: 20px;
137 |     align-items: center;
138 |     padding: 0;
139 |   }
140 | 
141 |   li {
142 |     list-style: none;
143 |   }
144 | 
145 |   .flex-container li {
146 |     background: #f7f7f9;
147 |     border-radius: 10px;
148 |     color: #6070ff;
149 |     font-size: 12px;
150 |     padding: 5px 15px;
151 |     font-weight: 500;
152 |   }
153 | 
154 |   .lang {
155 |     display: flex;
156 |     flex-direction: column;
157 |   }
158 | 
159 |   .arrow {
160 |     display: flex;
161 |     align-items: center;
162 |     justify-content: space-between;
163 |   }
164 | 
165 |   .social-icons1 ul li {
166 |     list-style: none;
167 |     height: auto;
168 |   }
169 | 
170 |   .social-icons ul li {
171 |     list-style: none;
172 |     height: auto;
173 |   }
174 | 
175 |   .social-icons1 ul li img {
176 |     width: 20px;
177 |   }
178 | 
179 |   .box {
180 |     background: #f7f7f9;
181 |     width: 91%;
182 |     margin: auto;
183 |     font-family: "Poppins", sans-serif;
184 |     border-bottom-left-radius: 50px;
185 |   }
186 | 
187 |   .main-container1 {
188 |     pointer-events: none;
189 |     width: 100%;
190 |     top: 0;
191 |     left: 0;
192 |     right: 0;
193 |     overflow: scroll;
194 |     max-height: 100%;
195 |     position: fixed;
196 |     border: 1px solid #efe1e6;
197 |     background: rgb(0, 96, 255, 0.3);
198 |     opacity: 0;
199 |   }
200 | 
201 |   .main-container1.show {
202 |     opacity: 1;
203 |     pointer-events: auto;
204 |   }
205 | 
206 |   .pop {
207 |     width: calc(80% - 30px);
208 |     margin: 50px auto;
209 |     padding: 20px;
210 |     border-radius: 16px;
211 |     background: white;
212 |     box-shadow: 0 8px 16px rgb(64, 83, 252, 0.24);
213 |     font-family: "Poppins", sans-serif;
214 |   }
215 | 
216 |   .main-container {
217 |     border: 1px solid #efe1e6;
218 |     background: #fff;
219 |     border-radius: 16px;
220 |     padding: 16px 16px 0 16px;
221 |     margin-bottom: 88px;
222 |     display: grid;
223 |     grid-template-columns: auto;
224 |   }
225 | 
226 |   .structure {
227 |     display: flex;
228 |     align-items: center;
229 |     gap: 12px;
230 |     font-size: 18px;
231 |     font-weight: 500;
232 |   }
233 | 
234 |   .transpalent {
235 |     color: #7a869a;
236 |   }
237 | 
238 |   .flex-container {
239 |     display: flex;
240 |     bottom: 1rem;
241 |     flex-direction: row;
242 |     gap: 1rem;
243 |     justify-content: flex-start;
244 |     list-style: none;
245 |     padding-left: 14px;
246 |   }
247 | 
248 |   .about {
249 |     margin-bottom: 28px;
250 |     background: var(--body-color);
251 |     border-radius: 10px;
252 |     border: 1px solid #396df2;
253 |     color: #396df2;
254 |     font-family: "Poppins", sans-serif;
255 |     font-size: 17px;
256 |     font-weight: 500;
257 |     letter-spacing: 0.03rem;
258 |     outline: none;
259 |     text-align: center;
260 |     width: 124px;
261 |     height: 48px;
262 |     margin-left: 6px;
263 |   }
264 | 
265 |   .about:active {
266 |     background: red;
267 |   }
268 | 
269 |   .about-me h2 {
270 |     font-size: 40px;
271 |     height: 90px;
272 |     line-height: 52px;
273 |   }
274 | 
275 |   .me {
276 |     display: flex;
277 |     justify-content: center;
278 |     flex-direction: column;
279 |     border-top-right-radius: 100px;
280 |     line-height: 24px;
281 |     font-family: "Poppins", sans-serif;
282 |     padding: 80px 0 50px 24px;
283 |     background: #fff;
284 |   }
285 | 
286 |   .abm {
287 |     padding-left: 0;
288 |     line-height: 40px;
289 |     margin: 0;
290 |   }
291 | 
292 |   .about2 {
293 |     background: var(--body-color);
294 |     border-radius: 10px;
295 |     border: 1px solid #396df2;
296 |     color: #396df2;
297 |     font-family: "Poppins", sans-serif;
298 |     font-size: 16px;
299 |     font-weight: 500;
300 |     letter-spacing: 0.03rem;
301 |     outline: none;
302 |     text-align: center;
303 |     width: 170px;
304 |     height: 48px;
305 |   }
306 | 
307 |   .about2:active {
308 |     background: red;
309 |   }
310 | 
311 |   .lan {
312 |     font-weight: 500;
313 |     font-size: 20px;
314 |     font-family: "Poppins", sans-serif;
315 |   }
316 | 
317 |   .election {
318 |     width: 15px;
319 |     height: 15px;
320 |   }
321 | 
322 |   .languages ul {
323 |     padding: 0;
324 |   }
325 | 
326 |   .election2 {
327 |     width: 15px;
328 |     height: 15px;
329 |   }
330 | 
331 |   .separator {
332 |     width: 300px;
333 |   }
334 | 
335 |   .popup-link {
336 |     width: 120px;
337 |     padding: auto;
338 |     display: flex;
339 |     align-items: center;
340 |     justify-content: center;
341 |     height: 38px;
342 |     border-radius: 8px;
343 |     border: 2px solid #4053fc;
344 |     cursor: pointer;
345 |   }
346 | 
347 |   .check a {
348 |     text-decoration: none;
349 |     color: #4053fc;
350 |   }
351 | 
352 |   .pict {
353 |     display: none;
354 |   }
355 | 
356 |   .informations {
357 |     display: none;
358 |   }
359 | 
360 |   .check {
361 |     display: flex;
362 |     gap: 20px;
363 |   }
364 | 
365 |   .pic {
366 |     display: none;
367 |   }
368 | 
369 |   .nav-links {
370 |     width: 100%;
371 |     height: 100vh;
372 |     background: #4053fc;
373 |     opacity: 0.97;
374 |     top: 0;
375 |     margin: 0;
376 |     position: fixed;
377 |     transition: 1s;
378 |     right: -100%;
379 |   }
380 | 
381 |   .nav-links a {
382 |     font-size: 40px;
383 |     color: white;
384 |   }
385 | 
386 |   .informations-mb {
387 |     display: flex;
388 |     flex-direction: column;
389 |     gap: 50px;
390 |     padding: 20px 0 0 20px;
391 |   }
392 | 
393 |   .part11 {
394 |     display: none;
395 |   }
396 | 
397 |   .headinga {
398 |     display: none;
399 |   }
400 | 
401 |   .languages .dsk {
402 |     display: none;
403 |   }
404 | 
405 |   .languages {
406 |     width: 80%;
407 |     padding: 0;
408 |   }
409 | 
410 |   .foot {
411 |     width: 100%;
412 |     height: 779px;
413 |     display: flex;
414 |     flex-direction: column;
415 |     align-items: center;
416 |     gap: 20px;
417 |     background: #6070ff url(./images/halfbg.png);
418 |     background-size: 50% 100%;
419 |     border-top-left-radius: 100px;
420 |     background-repeat: no-repeat;
421 |     background-position: right;
422 |   }
423 | 
424 |   .foot-again {
425 |     display: flex;
426 |     flex-direction: column;
427 |     align-items: center;
428 |     margin: auto;
429 |     gap: 1px;
430 |   }
431 | 
432 |   .contact {
433 |     font-weight: 700;
434 |     line-height: 52px;
435 |     font-size: 40px;
436 |     color: #ffff;
437 |     font-family: "Poppins", sans-serif;
438 |   }
439 | 
440 |   .foot-again p {
441 |     text-align: center;
442 |     font-size: 20px;
443 |     margin: 0 24px 24px 24px;
444 |     line-height: 28px;
445 |     font-weight: 400;
446 |     color: #ebebff;
447 |     font-family: "Poppins", sans-serif;
448 |   }
449 | 
450 |   .forma {
451 |     display: flex;
452 |     flex-direction: column;
453 |   }
454 | 
455 |   .name1 {
456 |     margin-top: 20px;
457 |   }
458 | 
459 |   .forma input {
460 |     height: 44px;
461 |     width: 280px;
462 |     border-radius: 8px;
463 |     font-weight: 400;
464 |     font-size: 17px;
465 |     line-height: 17px;
466 |     color: #172b4d;
467 |     padding: 1px 11px;
468 |     border: none;
469 |   }
470 | 
471 |   .forma textarea {
472 |     border-radius: 8px;
473 |     font-weight: 400;
474 |     font-size: 17px;
475 |     line-height: 17px;
476 |     color: #b3bac5;
477 |     padding: 10px 11px;
478 |     font-family: "Poppins", sans-serif;
479 |   }
480 | 
481 |   .forma input[type="submit"] {
482 |     width: 140px;
483 |     border: none;
484 |     border-radius: 10px;
485 |     padding: 12px 16px;
486 |     margin: 20px auto;
487 |     font-family: "Poppins", sans-serif;
488 |     font-weight: 500;
489 |     color: #7f8cff;
490 |     cursor: pointer;
491 |     right: 0;
492 |   }
493 | 
494 |   .forma input[type="submit"]:hover {
495 |     background: #396df2;
496 |   }
497 | 
498 |   .forma input[type="submit"]:active {
499 |     background: blue;
500 |   }
501 | 
502 |   .forma input[type="submit"]:disabled {
503 |     border: #396df2 1px solid;
504 |   }
505 | 
506 |   .tit {
507 |     display: none;
508 |   }
509 | 
510 |   small {
511 |     color: yellow;
512 |     font-size: 18px;
513 |     font-family: "Poppins", sans-serif;
514 |   }
515 | }
516 | 
517 | @media only screen and (min-width: 700px) {
518 |   body {
519 |     overflow-x: hidden;
520 |   }
521 | 
522 |   .pict {
523 |     display: block;
524 |     width: 1048px;
525 |   }
526 | 
527 |   .burger div {
528 |     display: none;
529 |   }
530 | 
531 |   .picture {
532 |     display: none;
533 |   }
534 | 
535 |   .languages .mb {
536 |     display: none;
537 |   }
538 | 
539 |   .languages .dsk {
540 |     display: block;
541 |     display: flex;
542 |     gap: 20px;
543 |   }
544 | 
545 |   .headingb {
546 |     display: none;
547 |   }
548 | 
549 |   .pic {
550 |     display: block;
551 |     border-radius: 8px;
552 |   }
553 | 
554 |   .Charlotte {
555 |     width: 80%;
556 |     height: 40px;
557 |     display: flex;
558 |     justify-content: space-between;
559 |     margin: auto;
560 |   }
561 | 
562 |   .header-part {
563 |     width: 99.9%;
564 |     background-color: white;
565 |     display: flex;
566 |     justify-content: space-between;
567 |     align-items: center;
568 |     position: fixed;
569 |   }
570 | 
571 |   .informations {
572 |     height: 40px;
573 |     width: 20%;
574 |     display: flex;
575 |     justify-content: space-between;
576 |     list-style: none;
577 |     margin: 0 0 0 60%;
578 |   }
579 | 
580 |   .informations li a {
581 |     text-decoration: none;
582 |     font-size: 15px;
583 |     font-weight: 500;
584 |     color: var(--textcolor);
585 |   }
586 | 
587 |   .informations li a:hover { text-decoration: underline; }
588 | 
589 |   .headline-part {
590 |     width: 100%;
591 |     background-size: 100% 100%;
592 |     background-image: url(./images/main_bg.png);
593 |     background-repeat: no-repeat;
594 |     background-color: white;
595 |     display: flex;
596 |     flex-direction: column;
597 |     justify-content: center;
598 |     align-items: center;
599 |     border-bottom-left-radius: 50px;
600 |     padding: 9rem 0;
601 |     animation: headline 1.5s ease-in-out 1;
602 |   }
603 | 
604 |   @keyframes headline {
605 |     0% {
606 |       transform: translateX(-100%);
607 |       opacity: 0;
608 |     }
609 | 
610 |     20% {
611 |       transform: translateX(-20%);
612 |       opacity: 0;
613 |     }
614 | 
615 |     100% {
616 |       transform: translateX(0%);
617 |       opacity: 1;
618 |     }
619 |   }
620 | 
621 |   .headline-part h1 {
622 |     margin: 200px 260px 0 460px;
623 |     font-size: 48px;
624 |     line-height: 60px;
625 |     letter-spacing: 0.37px;
626 |     color: #091e42;
627 |     font-weight: 700;
628 |   }
629 | 
630 |   .headline-part p {
631 |     margin: 0 260px 0 460px;
632 |     height: 78px;
633 |     line-height: 28px;
634 |     font-size: 20px;
635 |     font-weight: 400;
636 |     color: #344563;
637 |   }
638 | 
639 |   .social-icons {
640 |     padding-left: 190px;
641 |   }
642 | 
643 |   .box {
644 |     display: grid;
645 |     gap: 24px;
646 |     margin: auto;
647 |     width: 80%;
648 |   }
649 | 
650 |   .main-container {
651 |     border-radius: 24px;
652 |     background-color: white;
653 |     margin-bottom: 10%;
654 |     display: flex;
655 |     padding: 24px;
656 |     gap: 20px;
657 |   }
658 | 
659 |   .main-container:nth-child(2n+1) {
660 |     flex-direction: row-reverse;
661 |   }
662 | 
663 |   .part222 {
664 |     display: flex;
665 |     flex-direction: row;
666 |   }
667 | 
668 |   .part2 {
669 |     display: flex;
670 |     flex-direction: column;
671 |     gap: 0;
672 |     padding: 18px;
673 |   }
674 | 
675 |   .heading {
676 |     width: 496px;
677 |     height: 46px;
678 |     font-size: 40px;
679 |     font-weight: 700;
680 |     line-height: 52px;
681 |     color: #091e42;
682 |   }
683 | 
684 |   .structure {
685 |     height: 8px;
686 |     display: flex;
687 |     gap: 12px;
688 |     align-items: center;
689 |     margin-bottom: 20px;
690 |   }
691 | 
692 |   .transpalent {
693 |     color: #6b778c;
694 |   }
695 | 
696 |   .box-content {
697 |     font-weight: 400;
698 |     font-size: 18px;
699 |     line-height: 24px;
700 |     color: #344563;
701 |   }
702 | 
703 |   .flex-container li {
704 |     list-style: none;
705 |     color: #7f8cff;
706 |     font-weight: 500;
707 |     font-size: 12px;
708 |     line-height: 16px;
709 |     letter-spacing: 3%;
710 |     background-color: #ebebff;
711 |     padding: 4px 12px;
712 |     border-radius: 8px;
713 |   }
714 | 
715 |   .about {
716 |     width: 120px;
717 |     height: 48px;
718 |     border-radius: 8px;
719 |     border: 2px solid #4053fc;
720 |     cursor: pointer;
721 |   }
722 | 
723 |   .about:hover {
724 |     background-color: #4053fc;
725 |     transition: 2s;
726 |     color: white;
727 |   }
728 | 
729 |   .headinga {
730 |     display: block;
731 |     width: 496px;
732 |     height: 46px;
733 |     font-size: 40px;
734 |     font-weight: 700;
735 |     line-height: 52px;
736 |     color: #091e42;
737 |   }
738 | 
739 |   .part22 {
740 |     display: flex;
741 |     flex-direction: column;
742 |     gap: 10px;
743 |     padding: 14px;
744 |   }
745 | 
746 |   .part11 {
747 |     display: block;
748 |   }
749 | 
750 |   .about-me {
751 |     width: 100%;
752 |     height: 924px;
753 |     border-top-right-radius: 100px;
754 |     background-color: white;
755 |     display: flex;
756 |     align-items: center;
757 |     margin-top: 20px;
758 |     padding-top: 10px;
759 |   }
760 | 
761 |   .me {
762 |     display: grid;
763 |     gap: 37px;
764 |     grid-template-columns: 1fr 1.5fr;
765 |     width: 70%;
766 |     margin: auto;
767 |   }
768 | 
769 |   .part1ml {
770 |     display: grid;
771 |     gap: 1px;
772 |   }
773 | 
774 |   .abm {
775 |     font-weight: 700;
776 |     font-size: 30px;
777 |     line-height: 52px;
778 |     color: #091e42;
779 |   }
780 | 
781 |   .text {
782 |     font-size: 16px;
783 |     line-height: 24px;
784 |     font-weight: 400;
785 |     color: #344563;
786 |   }
787 | 
788 |   .social-icons ul {
789 |     list-style: none;
790 |     display: flex;
791 |     flex-direction: row;
792 |     align-items: center;
793 |     gap: 20px;
794 |     margin-left: -180px;
795 |   }
796 | 
797 |   .about2 {
798 |     width: 170px;
799 |     height: 48px;
800 |     border-radius: 8px;
801 |     border: 2px solid #4053fc;
802 |     cursor: pointer;
803 |   }
804 | 
805 |   .about2:hover {
806 |     background-color: #4053fc;
807 |     color: white;
808 |   }
809 | 
810 |   .languages {
811 |     width: 100%;
812 |     padding: 0;
813 |   }
814 | 
815 |   .election2 {
816 |     width: 25px;
817 |     height: 25px;
818 |   }
819 | 
820 |   .separator {
821 |     position: absolute;
822 |     width: 584px;
823 |     height: 1px;
824 |   }
825 | 
826 |   .social-icons1 ul {
827 |     margin: -50px 260px 0 100px;
828 |     list-style: none;
829 |     display: flex;
830 |     flex-direction: row;
831 |     align-items: center;
832 |     gap: 20px;
833 |   }
834 | 
835 |   .foot {
836 |     width: 100%;
837 |     display: flex;
838 |     flex-direction: column;
839 |     align-items: center;
840 |     gap: 20px;
841 |     background-image: url(./images/ctnt.png);
842 |     background-size: 90% 90%;
843 |     background-color: #6070ff;
844 |     border-top-left-radius: 100px;
845 |     background-repeat: no-repeat;
846 |     background-position: center;
847 |   }
848 | 
849 |   .foot-again p {
850 |     text-align: center;
851 |     font-size: 20px;
852 |     line-height: 28px;
853 |     font-weight: 400;
854 |     color: #ebebff;
855 |     font-family: "Poppins", sans-serif;
856 |   }
857 | }
858 | 


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