├── app.js
├── LICENSE
├── README.md
├── index.html
└── style.css


/app.js:
--------------------------------------------------------------------------------
 1 | const buttons = document.querySelectorAll(".card-buttons button");
 2 | const sections = document.querySelectorAll(".card-section");
 3 | const card = document.querySelector(".card");
 4 | 
 5 | const handleButtonClick = e => {
 6 |   const targetSection = e.target.getAttribute("data-section");
 7 |   const section = document.querySelector(targetSection);
 8 |   targetSection !== "#about" ?
 9 |   card.classList.add("is-active") :
10 |   card.classList.remove("is-active");
11 |   card.setAttribute("data-state", targetSection);
12 |   sections.forEach(s => s.classList.remove("is-active"));
13 |   buttons.forEach(b => b.classList.remove("is-active"));
14 |   e.target.classList.add("is-active");
15 |   section.classList.add("is-active");
16 | };
17 | 
18 | buttons.forEach(btn => {
19 |   btn.addEventListener("click", handleButtonClick);
20 | });


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Abbireddy Venkata Chandu
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | **Profile Card**
 4 | 
 5 | This is a basic profile card created using HTML, CSS, and JavaScript. 
 6 | 
 7 | **To view the live demo:** [Here](https://venkat-0706.github.io/Profile-Card/)
 8 | 
 9 | **To run the project locally:**
10 | 
11 | 1. **Clone the Repository:**
12 |    ```bash
13 |    git clone https://github.com/venkat-0706/profile-card.git
14 |    ```
15 | 2. **Open the `index.html` File:**
16 |    Open the `index.html` file in your web browser.
17 | 
18 | **Customization:**
19 | 
20 | 1. **HTML:**
21 |    - Modify the text content within the HTML elements to change the profile information.
22 |    - Adjust the image source (`src` attribute) to use your own profile picture.
23 | 2. **CSS:**
24 |    - Edit the CSS file to customize the card's colors, fonts, and layout.
25 |    - You can modify the dimensions of the profile picture, the spacing between elements, and the overall design.
26 | 3. **JavaScript:**
27 |    - Add JavaScript code to the `script` tag in the HTML file to implement dynamic features.
28 |    - For example, you could use JavaScript to fetch user data from an API and populate the card, or create interactive elements like hover effects or click events.
29 | 
30 | **Additional Tips:**
31 | 
32 | - **Responsive Design:** Consider using CSS media queries to make the card responsive and adapt to different screen sizes.
33 | - **Accessibility:** Ensure the card is accessible to users with disabilities by using appropriate HTML semantic elements and ARIA attributes.
34 | - **Testing:** Test the card in different browsers and devices to ensure it displays correctly and functions as expected.
35 | 
36 | **Further Exploration:**
37 | 
38 | - **Advanced Styling:** Explore CSS frameworks like Bootstrap or Tailwind CSS to quickly create stylish and responsive profile cards.
39 | - **Interactive Features:** Use JavaScript to add features like hover effects, tooltips, or modal windows to enhance user experience.
40 | - **Data Fetching:** Implement JavaScript to fetch user data from APIs and dynamically populate the card.
41 | 
42 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>Chandu Profile Card</title>
 5 |     <meta charset="UTF-8" />
 6 |     <meta name="viewport" content="width=device-width" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 | 
 9 |   </head>
10 |   <body>
11 |   <div class="card" data-state="#about">
12 |   <div class="card-header">
13 |     <div class="card-cover" style="background-image: url('https://res.cloudinary.com/dhmixzenl/image/upload/v1724213042/ven-fotor-2024082192956_o4lmfh.png')"></div>
14 |     <img class="card-avatar" src="https://res.cloudinary.com/dhmixzenl/image/upload/v1724213042/ven-fotor-2024082192956_o4lmfh.png" />
15 |     <h1 class="card-fullname">Abbireddy Venkata Chandu</h1>
16 |     <h2 class="card-jobtitle">Computer Science Engineering Student</h2>
17 |   </div>
18 |   <div class="card-main">
19 |     <div class="card-section is-active" id="about">
20 |       <div class="card-content">
21 |         <div class="card-subtitle">ABOUT</div>
22 |         <p class="card-desc">As a Computer Science Engineering Student,
23 |           I am interested about learning new programming languages and exploring various technologies, Now I am currently working on a startup objective and I am interested on Data Science and Nueral Networks..   
24 |         </p>
25 |       </div>
26 |       <div class="card-social">
27 |         <a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
28 |             <path d="M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z" /></svg></a>
29 |         <a href="https://www.instagram.com/_chandu_buoy/"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
30 |             <path d="M301 256c0 24.852-20.148 45-45 45s-45-20.148-45-45 20.148-45 45-45 45 20.148 45 45zm0 0" />
31 |             <path d="M332 120H180c-33.086 0-60 26.914-60 60v152c0 33.086 26.914 60 60 60h152c33.086 0 60-26.914 60-60V180c0-33.086-26.914-60-60-60zm-76 211c-41.355 0-75-33.645-75-75s33.645-75 75-75 75 33.645 75 75-33.645 75-75 75zm86-146c-8.285 0-15-6.715-15-15s6.715-15 15-15 15 6.715 15 15-6.715 15-15 15zm0 0" />
32 |             <path d="M377 0H135C60.562 0 0 60.563 0 135v242c0 74.438 60.563 135 135 135h242c74.438 0 135-60.563 135-135V135C512 60.562 451.437 0 377 0zm45 332c0 49.625-40.375 90-90 90H180c-49.625 0-90-40.375-90-90V180c0-49.625 40.375-90 90-90h152c49.625 0 90 40.375 90 90zm0 0" /></svg></a>
33 |         <a href="https://www.linkedin.com/in/chandu0706/" target="_blank"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
34 |             <path d="M23.994 24v-.001H24v-8.802c0-4.306-.927-7.623-5.961-7.623-2.42 0-4.044 1.328-4.707 2.587h-.07V7.976H8.489v16.023h4.97v-7.934c0-2.089.396-4.109 2.983-4.109 2.549 0 2.587 2.384 2.587 4.243V24zM.396 7.977h4.976V24H.396zM2.882 0C1.291 0 0 1.291 0 2.882s1.291 2.909 2.882 2.909 2.882-1.318 2.882-2.909A2.884 2.884 0 002.882 0z" /></svg></a>
35 |         <a href="https://github.com/venkat-0706" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
36 |           <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg></a>
37 |       </div>
38 |     </div>
39 |     <div class="card-section" id="education">
40 |       <div class="card-content">
41 |         <div class="card-subtitle">Education</div>
42 |         <div class="card-timeline">
43 |           <div class="card-item" data-year="2020">
44 |             <div class="card-item-title">Sri Adarsha Vidhyalaya Public Schhol at <span>Pithapuram</span></div>
45 |             <div class="card-item-desc">10th Standard. </div>
46 |             
47 |           </div>
48 |           <div class="card-item" data-year="2022">
49 |             <div class="card-item-title">S.H.R.M Junior college at <span>Pithapuram</span></div>
50 |             <div class="card-item-desc">Intermediate MPC. </div>
51 |           </div>
52 |           <div class="card-item" data-year="2026">
53 |             <div class="card-item-title">Aditya college of Engineering and technology at <span>Surampalem</span></div>
54 |             <div class="card-item-desc">Computer Science Engineering. </div>
55 |           </div>
56 |         </div>
57 |       </div>
58 |     </div>
59 |     <div class="card-section" id="contact">
60 |       <div class="card-content">
61 |         <div class="card-subtitle">CONTACT</div>
62 |         <div class="card-contact-wrapper">
63 |           <div class="card-contact">
64 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
65 |               <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
66 |               <circle cx="12" cy="10" r="3" /></svg>
67 |             Pithapuram , Kakinada , Andhra Pradesh, India
68 |           </div>
69 |           <div class="card-contact">
70 |             <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
71 |               <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" /></svg>+91 9640186272</div>
72 |           <div class="card-contact">
73 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
74 |               <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
75 |               <path d="M22 6l-10 7L2 6" /></svg>
76 |             chanduabbireddy247@gmail.com
77 |           </div>
78 |           <button class="contact-me">CONTACT ME</button>
79 |         </div>
80 |       </div>
81 |     </div>
82 |     <div class="card-buttons">
83 |       <button data-section="#about" class="is-active">ABOUT</button>
84 |       <button data-section="#education">EDUCATION</button>
85 |       <button data-section="#contact">CONTACT</button>
86 |     </div>
87 |   </div>
88 | </div>
89 |     <script src="app.js"></script>
90 |     
91 |   </body>
92 | </html>
93 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");
  2 | * {
  3 |   box-sizing: border-box;
  4 | }
  5 | 
  6 | body {
  7 |   color: #2b2c48;
  8 |   font-family: "Jost", sans-serif;
  9 |   background-image: url(11.jpg);
 10 |   background-repeat: no-repeat;
 11 |   background-size: cover;
 12 |   background-position: center;
 13 |   background-attachment: fixed;
 14 |   min-height: 100vh;
 15 |   display: flex;
 16 |   flex-wrap: wrap;
 17 |   padding: 20px;
 18 | }
 19 | 
 20 | .card {
 21 |   max-width: 340px;
 22 |   margin: auto;
 23 |   overflow-y: auto;
 24 |   position: relative;
 25 |   z-index: 1;
 26 |   overflow-x: hidden;
 27 |   background-color: white;
 28 |   display: flex;
 29 |   transition: 0.3s;
 30 |   flex-direction: column;
 31 |   border-radius: 10px;
 32 |   box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
 33 | }
 34 | 
 35 | .card[data-state="#about"] {
 36 |   height: 450px;
 37 | }
 38 | .card[data-state="#about"] .card-main {
 39 |   padding-top: 0;
 40 | }
 41 | 
 42 | .card[data-state="#contact"] {
 43 |   height: 430px;
 44 | }
 45 | 
 46 | .card[data-state="#education"] {
 47 |   height: 550px;
 48 | }
 49 | 
 50 | .card.is-active .card-header {
 51 |   height: 80px;
 52 | }
 53 | .card.is-active .card-cover {
 54 |   height: 100px;
 55 |   top: -50px;
 56 | }
 57 | .card.is-active .card-avatar {
 58 |   transform: none;
 59 |   left: 20px;
 60 |   width: 50px;
 61 |   height: 50px;
 62 |   bottom: 10px;
 63 | }
 64 | .card.is-active .card-fullname,
 65 | .card.is-active .card-jobtitle {
 66 |   left: 86px;
 67 |   transform: none;
 68 | }
 69 | .card.is-active .card-fullname {
 70 |   bottom: 18px;
 71 |   font-size: 19px;
 72 | }
 73 | .card.is-active .card-jobtitle {
 74 |   bottom: 16px;
 75 |   letter-spacing: 1px;
 76 |   font-size: 10px;
 77 | }
 78 | 
 79 | .card-header {
 80 |   position: relative;
 81 |   display: flex;
 82 |   height: 200px;
 83 |   flex-shrink: 0;
 84 |   width: 100%;
 85 |   transition: 0.3s;
 86 | }
 87 | .card-header * {
 88 |   transition: 0.3s;
 89 | }
 90 | 
 91 | .card-cover {
 92 |   width: 100%;
 93 |   height: 100%;
 94 |   position: absolute;
 95 |   top: -20%;
 96 |   left: 0;
 97 |   will-change: top;
 98 |   background-size: cover;
 99 |   background-position: center;
100 |   filter: blur(30px);
101 |   transform: scale(1.2);
102 |   transition: 0.5s;
103 | }
104 | 
105 | .card-avatar {
106 |   width: 100px;
107 |   height: 100px;
108 |   box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
109 |   border-radius: 50%;
110 |   -o-object-position: center;
111 |      object-position: center;
112 |   -o-object-fit: cover;
113 |      object-fit: cover;
114 |   position: absolute;
115 |   bottom: 0;
116 |   left: 50%;
117 |   transform: translateX(-50%) translateY(-64px);
118 | }
119 | 
120 | .card-fullname {
121 |   position: absolute;
122 |   bottom: 0;
123 |   font-size: 22px;
124 |   font-weight: 700;
125 |   text-align: center;
126 |   white-space: nowrap;
127 |   transform: translateY(-10px) translateX(-50%);
128 |   left: 50%;
129 | }
130 | 
131 | .card-jobtitle {
132 |   position: absolute;
133 |   bottom: 0;
134 |   font-size: 11px;
135 |   white-space: nowrap;
136 |   font-weight: 500;
137 |   opacity: 0.7;
138 |   text-transform: uppercase;
139 |   letter-spacing: 1.5px;
140 |   margin: 0;
141 |   left: 50%;
142 |   transform: translateX(-50%) translateY(-7px);
143 | }
144 | 
145 | .card-main {
146 |   position: relative;
147 |   flex: 1;
148 |   display: flex;
149 |   padding-top: 10px;
150 |   flex-direction: column;
151 | }
152 | 
153 | .card-subtitle {
154 |   font-weight: 700;
155 |   font-size: 13px;
156 |   margin-bottom: 8px;
157 | }
158 | 
159 | .card-content {
160 |   padding: 20px;
161 | }
162 | 
163 | .card-desc {
164 |   line-height: 1.6;
165 |   color: #636b6f;
166 |   font-size: 14px;
167 |   margin: 0;
168 |   font-weight: 400;
169 |   font-family: "DM Sans", sans-serif;
170 | }
171 | 
172 | .card-social {
173 |   display: flex;
174 |   align-items: center;
175 |   padding: 0 20px;
176 |   margin-bottom: 30px;
177 | }
178 | .card-social svg {
179 |   fill: #a5b5ce;
180 |   width: 16px;
181 |   display: block;
182 |   transition: 0.3s;
183 | }
184 | .card-social a {
185 |   color: #8797a1;
186 |   height: 32px;
187 |   width: 32px;
188 |   display: inline-flex;
189 |   align-items: center;
190 |   justify-content: center;
191 |   transition: 0.3s;
192 |   background-color: rgba(22, 87, 184, 0.05);
193 |   border-radius: 50%;
194 |   margin-right: 10px;
195 | }
196 | .card-social a:hover svg {
197 |   fill: #00040a;
198 | }
199 | .card-social a:last-child {
200 |   margin-right: 0;
201 | }
202 | 
203 | .card-buttons {
204 |   display: flex;
205 |   background-color: #cfcbcb;
206 |   margin-top: auto;
207 |   position: sticky;
208 |   bottom: 0;
209 |   left: 0;
210 | }
211 | .card-buttons button {
212 |   flex: 1 1 auto;
213 |   -webkit-user-select: none;
214 |      -moz-user-select: none;
215 |       -ms-user-select: none;
216 |           user-select: none;
217 |   background: 0;
218 |   font-size: 13px;
219 |   border: 0;
220 |   padding: 15px 5px;
221 |   cursor: pointer;
222 |   color: #5c5c6d;
223 |   transition: 0.3s;
224 |   font-family: "Jost", sans-serif;
225 |   font-weight: 500;
226 |   outline: 0;
227 |   border-bottom: 3px solid transparent;
228 | }
229 | .card-buttons button.is-active, .card-buttons button:hover {
230 |   color: #2b2c48;
231 |   border-bottom: 3px solid #8a84ff;
232 |   background: linear-gradient(to bottom, rgba(127, 199, 231, 0) 0%, rgba(207, 204, 255, 0.2) 44%, rgba(211, 226, 255, 0.4) 100%);
233 | }
234 | 
235 | .card-section {
236 |   display: none;
237 | }
238 | .card-section.is-active {
239 |   display: block;
240 |   -webkit-animation: fadeIn 0.6s both;
241 |           animation: fadeIn 0.6s both;
242 | }
243 | 
244 | @-webkit-keyframes fadeIn {
245 |   0% {
246 |     opacity: 0;
247 |     transform: translatey(40px);
248 |   }
249 |   100% {
250 |     opacity: 1;
251 |   }
252 | }
253 | 
254 | @keyframes fadeIn {
255 |   0% {
256 |     opacity: 0;
257 |     transform: translatey(40px);
258 |   }
259 |   100% {
260 |     opacity: 1;
261 |   }
262 | }
263 | .card-timeline {
264 |   margin-top: 30px;
265 |   position: relative;
266 | }
267 | .card-timeline:after {
268 |   background: linear-gradient(to top, rgba(134, 214, 243, 0) 0%, #516acc 100%);
269 |   content: "";
270 |   left: 42px;
271 |   width: 2px;
272 |   top: 0;
273 |   height: 100%;
274 |   position: absolute;
275 | }
276 | 
277 | .card-item {
278 |   position: relative;
279 |   padding-left: 60px;
280 |   padding-right: 20px;
281 |   padding-bottom: 30px;
282 |   z-index: 1;
283 | }
284 | .card-item:last-child {
285 |   padding-bottom: 5px;
286 | }
287 | .card-item:after {
288 |   content: attr(data-year);
289 |   position: absolute;
290 |   top: 0;
291 |   left: 37px;
292 |   width: 8px;
293 |   height: 8px;
294 |   line-height: 0.6;
295 |   border: 2px solid #fff;
296 |   font-size: 11px;
297 |   text-indent: -35px;
298 |   border-radius: 50%;
299 |   color: rgba(134, 134, 134, 0.7);
300 |   background: linear-gradient(to bottom, #a0aee3 0%, #516acc 100%);
301 | }
302 | 
303 | .card-item-title {
304 |   font-weight: 500;
305 |   font-size: 14px;
306 |   margin-bottom: 5px;
307 | }
308 | 
309 | .card-item-desc {
310 |   font-size: 13px;
311 |   color: #6f6f7b;
312 |   line-height: 1.5;
313 |   font-family: "DM Sans", sans-serif;
314 | }
315 | 
316 | .card-contact-wrapper {
317 |   margin-top: 20px;
318 | }
319 | 
320 | .card-contact {
321 |   display: flex;
322 |   align-items: center;
323 |   font-size: 13px;
324 |   color: #6f6f7b;
325 |   font-family: "DM Sans", sans-serif;
326 |   line-height: 1.6;
327 |   cursor: pointer;
328 | }
329 | .card-contact + .card-contact {
330 |   margin-top: 16px;
331 | }
332 | .card-contact svg {
333 |   flex-shrink: 0;
334 |   width: 30px;
335 |   min-height: 34px;
336 |   margin-right: 12px;
337 |   transition: 0.3s;
338 |   padding-right: 12px;
339 |   border-right: 1px solid #dfe2ec;
340 | }
341 | 
342 | .contact-me {
343 |   border: 0;
344 |   outline: none;
345 |   background: linear-gradient(to right, rgba(83, 200, 239, 0.8) 0%, rgba(81, 106, 204, 0.8) 96%);
346 |   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
347 |   color: #fff;
348 |   padding: 12px 16px;
349 |   width: 100%;
350 |   border-radius: 5px;
351 |   margin-top: 25px;
352 |   cursor: pointer;
353 |   font-size: 14px;
354 |   font-weight: 500;
355 |   font-family: "Jost", sans-serif;
356 |   transition: 0.3s;
357 | }


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