├── CNAME
├── desktop.ini
├── img
    ├── ABOUT.png
    ├── SKILLS.png
    ├── THINGS.png
    ├── alogo.png
    ├── back.png
    ├── belaxcy.png
    ├── clogo.png
    ├── contact.png
    ├── email.png
    ├── emoji1.jpg
    ├── flogo.png
    ├── gambar.png
    ├── hlogo.png
    ├── ilustrasi.png
    ├── kfood.png
    ├── mobile1.png
    ├── mobile2.png
    ├── mobile3.png
    ├── pointing.png
    ├── promise1.png
    ├── promise2.png
    ├── promise3.png
    ├── promise4.png
    ├── sc.png
    ├── scr.png
    ├── vencvel.png
    ├── web1.png
    ├── web2.png
    ├── web3.png
    ├── web4.png
    ├── web5.png
    ├── web6.png
    ├── web7.png
    ├── woman alone.png
    └── womand.png
├── index.html
└── style.css


/CNAME:
--------------------------------------------------------------------------------
1 | elvinaf.xyz


--------------------------------------------------------------------------------
/desktop.ini:
--------------------------------------------------------------------------------
1 | [.ShellClassInfo]
2 | IconResource=C:\Users\BRODER\Music\Favorites\Downloads\pfolder.ico,0
3 | 


--------------------------------------------------------------------------------
/img/ABOUT.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/ABOUT.png


--------------------------------------------------------------------------------
/img/SKILLS.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/SKILLS.png


--------------------------------------------------------------------------------
/img/THINGS.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/THINGS.png


--------------------------------------------------------------------------------
/img/alogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/alogo.png


--------------------------------------------------------------------------------
/img/back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/back.png


--------------------------------------------------------------------------------
/img/belaxcy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/belaxcy.png


--------------------------------------------------------------------------------
/img/clogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/clogo.png


--------------------------------------------------------------------------------
/img/contact.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/contact.png


--------------------------------------------------------------------------------
/img/email.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/email.png


--------------------------------------------------------------------------------
/img/emoji1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/emoji1.jpg


--------------------------------------------------------------------------------
/img/flogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/flogo.png


--------------------------------------------------------------------------------
/img/gambar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/gambar.png


--------------------------------------------------------------------------------
/img/hlogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/hlogo.png


--------------------------------------------------------------------------------
/img/ilustrasi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/ilustrasi.png


--------------------------------------------------------------------------------
/img/kfood.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/kfood.png


--------------------------------------------------------------------------------
/img/mobile1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/mobile1.png


--------------------------------------------------------------------------------
/img/mobile2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/mobile2.png


--------------------------------------------------------------------------------
/img/mobile3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/mobile3.png


--------------------------------------------------------------------------------
/img/pointing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/pointing.png


--------------------------------------------------------------------------------
/img/promise1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/promise1.png


--------------------------------------------------------------------------------
/img/promise2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/promise2.png


--------------------------------------------------------------------------------
/img/promise3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/promise3.png


--------------------------------------------------------------------------------
/img/promise4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/promise4.png


--------------------------------------------------------------------------------
/img/sc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/sc.png


--------------------------------------------------------------------------------
/img/scr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/scr.png


--------------------------------------------------------------------------------
/img/vencvel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/vencvel.png


--------------------------------------------------------------------------------
/img/web1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/web1.png


--------------------------------------------------------------------------------
/img/web2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/web2.png


--------------------------------------------------------------------------------
/img/web3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/web3.png


--------------------------------------------------------------------------------
/img/web4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/web4.png


--------------------------------------------------------------------------------
/img/web5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/web5.png


--------------------------------------------------------------------------------
/img/web6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/web6.png


--------------------------------------------------------------------------------
/img/web7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/web7.png


--------------------------------------------------------------------------------
/img/woman alone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/woman alone.png


--------------------------------------------------------------------------------
/img/womand.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elvinafirmansyah/portofolio/d1564ef7120d225de7bd0744717e257865d61e5d/img/womand.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <!-- Required meta tags -->
  5 |     <meta charset="utf-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 
  8 |     <!--Font Awesome-->
  9 |     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 10 | 
 11 |     <!-- AOS Scroll -->
 12 |     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 13 | 
 14 |     <!-- Bootstrap CSS -->
 15 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 16 | 
 17 |     <!-- Bootstrap Icons -->
 18 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
 19 |     <!--Font Awasome-->
 20 |     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 21 | 
 22 |     <!--Link ke css-->
 23 |     <link rel="stylesheet" href="style.css">
 24 | 
 25 |     <!-- Logo -->
 26 |     <link rel="shortcut icon" href="img/logo.png" type="image/png">
 27 | 
 28 |     <!--Google Font-->
 29 | 
 30 |     <!--poppins-->
 31 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 32 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 33 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> 
 34 | 
 35 |     <!-- Abril Fatface -->
 36 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 37 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 38 |     <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet"> 
 39 | 
 40 |     <!-- Lato -->
 41 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 42 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 43 |     <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet"> 
 44 | 
 45 |     <title>Portofolio</title>
 46 |   </head>
 47 |   <body>
 48 |     
 49 |     <!-- Navbar -->
 50 |     <nav class="navbar navbar-expand-lg navbar-light">
 51 |       <div class="container-fluid">
 52 |         <a class="navbar-item" href="#">Elv<span class="span">fi</span></a>
 53 |         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 54 |           <span class="navbar-toggler-icon"></span>
 55 |         </button>
 56 |         <div class="collapse navbar-collapse" id="navbarSupportedContent">
 57 |           <ul class="navbar-nav mb-2 mb-lg-0 ms-auto">
 58 |             <li class="nav-item">
 59 |               <a class="nav-link" aria-current="page" href="#home">Home</a>
 60 |             </li>
 61 |             <li class="nav-item">
 62 |               <a class="nav-link" href="#about">about</a>
 63 |             </li>
 64 |             <li class="nav-item">
 65 |               <a class="nav-link" href="#project">project</a>
 66 |             </li>
 67 |             <li class="nav-item">
 68 |               <a class="nav-link" href="#skills">skills</a>
 69 |             </li>
 70 |           </ul>
 71 |           <form class="d-flex">
 72 |             <a href="#contact" class="btn">Contact Me</a>
 73 |           </form>
 74 |         </div>
 75 |       </div>
 76 |     </nav>
 77 |     <!-- A Navbar -->
 78 | 
 79 | 
 80 | 
 81 |     <!-- Jumbotron -->
 82 |     <section id="home">
 83 |       <div class="jumbotron jumbotron-fluid">
 84 |         <div class="container-fluid text">
 85 |           <h2 class="display-4">about & contact</h2>
 86 |           <h1 class="h1">Hi, I’m <span class="span elvina typed-text"></span><span class="cursor">&nbsp;</span></h1>
 87 |           <h3 class="lead">UI/UX Designer and Web Developer</h3>
 88 |           <!-- Sosial Media -->
 89 |               <div class="sosial-media">
 90 |                 <!-- Instagram -->
 91 |                   <a href="https://www.instagram.com/elvinaelvira.s/" target="blank"><i class="fab fa-instagram fa-2x"></i>
 92 |                   </a>
 93 |                 <!-- Facebook -->
 94 |                   <a href="https://m.facebook.com/elvina.firmansyah.50" target="blank"><i class="fab fa-facebook-f fa-2x"></i></a>
 95 |                 <!-- Twitter -->
 96 |                   <a href="https://twitter.com/ElvinaFirmansy2" target="blank"><i class="fab fa-twitter fa-2x"></i></a>
 97 |                 <!-- Github -->
 98 |                   <a href="https://github.com/elvinafirmansyah" target="blank"><i class="fab fa-github fa-2x"></i></a>
 99 |                 <!-- Dribble -->
100 |                 <a href="https://dribbble.com/Elvina_Vin19" target="blank"><i class="fab fa-dribbble fa-2x"></i></a>
101 |               </div>
102 |         </div>
103 |       </div>
104 |     </section>
105 |     <!-- A Jumbotron -->
106 | 
107 |     <!-- About -->
108 |     <section id="about">
109 |       <div class="container-fluid">
110 |         <div class="row justify-content-center d-flex align-items-center">
111 |           <div class="col-lg-6 col-md-12 justify-content-center d-flex align-items-center">
112 |             <div class="text-capitalize text-about">
113 |               <h1>About <span>Me</span></h1>
114 |               <p>I’m Elvina Firmansyah who is 14 y.o. I'm from Indonesia, I'm interested to be a Fullstack developer. I'm currently learning Js and UI/UX that also make a new thing of the world, probably the carrer and my experience of my future</p>
115 |             </div>
116 |           </div> 
117 |           <div class="col-lg-6 col-md-12 justify-content-center d-flex align-items-center">
118 |             <div class="about-img">
119 |               <img src="img/gambar.png" class="img-fluid" alt="" width="640">
120 |             </div>
121 |           </div>
122 |         </div>
123 |       </div>
124 |     </section>
125 |     <!-- A About -->
126 | 
127 |     <!-- Selected Project -->
128 |   <section id="project">
129 |     <div class="container-fluid">
130 |       <div class="title-project">
131 |         <h1 class="project-isi">My <span>Project</span></h1>
132 |       </div>
133 |     </div>
134 |     <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
135 |       <div class="carousel-inner justify-content-center">
136 |         <div class="carousel-item active justify-content-center d-flex">
137 |           <a href="https://engxzu.netlify.app/" target="blank"><img src="img/web7.png" class="d-block w-85 img-fluid" alt="Engxzu"></a>
138 |         </div>
139 |         <div class="carousel-item justify-content-center d-flex">
140 |           <a href="https://https-github-com-elvirafimansyah.github.io/Korean-Food/" target="blank"><img src="img/kfood.png" class="d-block w-85 img-fluid" alt="Korean-Food"></a>
141 |         </div>
142 |         <div class="carousel-item justify-content-center d-flex">
143 |           <a href="https://elvinafirmansyah.github.io/VIZFA/" target="blank"><img src="img/web5.png" class="d-block w-85 img-fluid" alt="Vinzfa"></a>
144 |         </div>
145 |         <div class="carousel-item justify-content-center d-flex">
146 |           <a href="https://dribbble.com/shots/16310150-Belxacy-Find-your-Perfect-Color" target="blank"><img src="img/belaxcy.png" class="d-block w-85 img-fluid" alt="Belxacy"></a>
147 |         </div>
148 |         <div class="carousel-item justify-content-center d-flex">
149 |           <a href="https://dribbble.com/shots/16250626-Vencvel-Makes-it-Easy-for-you-to-Travel" target="blank" ><img src="img/vencvel.png" class="d-block w-85 img-fluid" alt="Vencvel"></a>
150 |         </div>
151 |         <div class="carousel-item justify-content-center d-flex">
152 |           <a href="https://dribbble.com/shots/16408144-Management-Project-Task-UI-Design-by-Elvina" target="blank" ><img src="img/mobile3.png" class="d-block w-85 img-fluid" alt="Management-Project-Task-UI-Design-by-Elvina"></a>
153 |         </div>
154 |         <div class="carousel-item justify-content-center d-flex">
155 |           <a href="https://dictionorycdn.vercel.app/" target="blank" ><img src="img/web4.png" class="d-block w-85 img-fluid" alt="Dictionory api"></a>
156 |         </div>
157 |         <div class="carousel-item justify-content-center d-flex">
158 |           <a href="https://vinaquote.netlify.app/" target="blank" ><img src="img/web6.png" class="d-block w-85 img-fluid" alt="Quote"></a>
159 |         </div>
160 |         <div class="carousel-item justify-content-center d-flex">
161 |           <a href="https://dribbble.com/shots/16344929-Dierex-Electro-Chat-Fast-and-Easy-for-You" target="blank" ><img src="https://cdn.dribbble.com/users/8652445/screenshots/16344929/media/d96119dbe827da774056b646ea4f98ee.png" class="d-block w-85 img-fluid" alt="..."></a>
162 |         </div>
163 |       </div>
164 |       <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
165 |         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
166 |         <span class="visually-hidden">Previous</span>
167 |       </button>
168 |       <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
169 |         <span class="carousel-control-next-icon" aria-hidden="true"></span>
170 |         <span class="visually-hidden">Next</span>
171 |       </button>
172 |     </div>
173 |   </section>
174 |     <!-- A Selected Project -->
175 | 
176 |     <!-- Skills & Tools -->
177 |     <section id="skills">
178 |       <div class="container-fluid">
179 |         <div class="title-skills">
180 |           <h1>Skills <span>& Tools</span></h1>
181 |         </div>
182 |         <div class="row gambar-skills">
183 |           <div class="col-lg-3 col-md-6">
184 |             <div class="main-card">
185 |               <img src="img/flogo.png" class="rounded" alt="...">
186 |             </div>
187 |           </div>
188 |           <div class="col-lg-3 col-md-6">
189 |             <div class="main-card">
190 |               <img src="img/alogo.png" class="rounded" alt="...">
191 |             </div>
192 |           </div>
193 |           <div class="col-lg-3 col-md-6">
194 |             <div class="main-card">
195 |               <img src="img/hlogo.png" class="rounded" alt="...">
196 |             </div>
197 |           </div>
198 |           <div class="col-lg-3 col-md-6">
199 |             <div class="main-card">
200 |               <img src="img/clogo.png" class="rounded" alt="...">
201 |             </div>
202 |           </div>
203 |         </div>
204 |       </div>
205 |     </section>
206 |     <!-- A Skills & Tools -->
207 | 
208 |     <!-- Promise -->
209 |     <section id="promise">
210 |       <div class="container-fluid">
211 |         <div class="promise-title">
212 |           <h1>Four <span>thing</span> i always <span>promise</span></h1>
213 |         </div>
214 |         <div class="row datar-promise d-flex justify-content-center">
215 |           <div class="col-lg-6 col-md-6 isi-card d-flex justify-content-center">
216 |             <div class="card">
217 |               <div class="card-body">
218 |                 <h5 class="card-title">one time revision</h5>
219 |                 <p class="card-text">All of the revision will updated on time. But with best design quality that can make you safety.</p>
220 |               </div>
221 |             </div>
222 |           </div>
223 |           <div class="col-lg-6 col-md-6 isi-card d-flex justify-content-center">
224 |             <div class="card">
225 |               <div class="card-body">
226 |                 <h5 class="card-title">design you'll like</h5>
227 |                 <p class="card-text">This is What i love to do, so I’ll make sure you’re happy with the result. We’ll work as team and we’ll get a new target.</p>
228 |               </div>
229 |             </div>
230 |           </div>
231 |           <div class="col-lg-6 col-md-6 isi-card d-flex justify-content-center">
232 |             <div class="card">
233 |               <div class="card-body">
234 |                 <h5 class="card-title">Good Comunication</h5>
235 |                 <p class="card-text">Communication is definitely the most important in work, i can speak english a little bit.</p>
236 |               </div>
237 |             </div>
238 |           </div>
239 |           <div class="col-lg-6 col-md-6 isi-card d-flex justify-content-center">
240 |             <div class="card">
241 |               <div class="card-body">
242 |                 <h5 class="card-title">Healty Relationship</h5>
243 |                 <p class="card-text">No dramas or difficult relationships. I’m here to make your life easier, solve your problems, and grow your bussiness.</p>
244 |               </div>
245 |             </div>
246 |           </div>
247 |         </div>
248 |       </div>
249 |     </section>
250 |     <!-- A Promise -->
251 | 
252 |     <!-- Testimonial-->
253 |     <section id="testimonial">
254 |       <div class="container-fluid">
255 |         <div class="row justify-content-center d-flex row-testi">
256 |           <div class="col-lg-5 one">
257 |               <i class="fas fa-quote-left fa-4x"></i>
258 |               <h4>work with alena is such a happiness for me. She is very humble, smart and helpful.  I recommended her to you guys who needs a design stuff.</h4>
259 |               <h2>Audie Canrbre</h2>  
260 |           </div>
261 |           <div class="col-lg-5 two">
262 |             <div class="img-testi">
263 |               <img src="img/pointing.png" width="500" class="img-fluid" alt="">
264 |             </div>
265 |           </div>
266 |         </div>
267 |       </div>
268 |     </section>
269 |     <!-- A Testimonial -->
270 | 
271 |     <!-- Contact -->
272 |     <section id="contact" style=>
273 |         <div class="container">
274 |             <div class="row text-center mb-5">
275 |                 <div class="contact-title">
276 |                   <h1>Contact <span>Me</span></h1>
277 |                 </div>
278 |             </div>
279 |             <div class="row d-flex justify-content-center">
280 |                 <div class="col-lg-5 justify-content-center d-flex img-contact">
281 |                   <img src="img/email.png" class="img-fluid" alt="" width="422">
282 |                 </div>
283 |                 <div class="col-lg-7 d-flex justify-content-center">
284 |                   <div class="col-md-6">
285 |                     <div class="alert alert-info alert-dismissible fade show my-alert d-none" role="alert">
286 |                         <strong>Thank You!</strong> We have received your message.
287 |                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
288 |                     </div>
289 |                     <form name='contact-my-website'>
290 |                         <div class="mb-3">
291 |                             <label for="name" class="form-label">Name</label>
292 |                             <input type="text" class="form-control" id="name" aria-describedby="name" name="nama">
293 |                         </div>
294 |                         <div class="mb-3">
295 |                             <label for="email" class="form-label">Email</label>
296 |                             <input type="email" class="form-control" id="email" aria-describedby="email" name="email">
297 |                         </div>
298 |                         <div class="mb-3">
299 |                           <label for="exampleFormControlTextarea1" class="form-label">Message</label>
300 |                           <textarea class="form-control" id="pesan" rows="3" name="pesan"></textarea>
301 |                         </div>
302 |                         <button type="submit" class="btn btn-kirim send float-end">Send</button>
303 | 
304 |                         <button class="btn-load btn-loading float-end d-none" type="button" disabled>
305 |                             <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
306 |                             Loading...
307 |                         </button>
308 |                     </form>
309 |                   </div>
310 |                 </div>
311 |             </div>
312 |         </div>
313 |     </section>
314 |     <!-- A Contact -->
315 | 
316 |     <!-- Footer -->
317 |     <footer class="text-center text-lg-start d-flex justify-content-between">
318 |       <!-- Copyright -->
319 |       <div class="text-center p-3 footer">
320 |         <a class="text-dark fs-6" href="https://www.buymeacoffee.com/elvinafirmh">@2022 Copyright</a>
321 |       </div>
322 |       <!-- Buy Me A Coffee -->
323 |       <div class="text-center p-3 footer">
324 |         <i class="bi bi-cup-straw fs-5"></i>
325 |         <a class="text-dark fs-6" href="https://www.buymeacoffee.com/elvinafirmh" target="_blank">Buy me a Coffee</a>
326 |       </div>
327 |     </footer>
328 |     <!-- A Footer -->
329 | 
330 | 
331 |     <script>
332 | 
333 |         const scriptURL = 'https://script.google.com/macros/s/AKfycbyryaU-KiFb08lpVh-oX93cfQUVIY0eqyBaOvOTH4bNhMmSThbh1AUxTV34DVG1GoQMNQ/exec'
334 |         const form = document.forms['contact-my-website']
335 |         const btnKirim = document.querySelector('.btn-kirim');
336 |         const btnLoading = document.querySelector('.btn-loading');
337 |         const btnDAlert = document.querySelector('.my-alert');
338 | 
339 |         form.addEventListener('submit', e => {
340 |         e.preventDefault()
341 |         // ketika tombol submit di klik 
342 |         // tampilkan tombol loading , hilangkan tombol kirim
343 |         btnLoading.classList.toggle("d-none");
344 |         btnKirim.classList.toggle("d-none");
345 |         fetch(scriptURL, { method: 'POST', body: new FormData(form)})
346 |             .then(response => {
347 |                 // tampilkan tombol kirim , hilangkan tombol loading
348 |                 btnLoading.classList.toggle("d-none");
349 |                 btnKirim.classList.toggle("d-none");
350 |                 // tampilkan alert
351 |                 btnDAlert.classList.toggle('d-none');
352 |                 // reset tulisan input form nya
353 |                 form.reset()
354 |                 console.log('Success!', response)})
355 |             .catch(error => console.error('Error!', error.message))
356 |         })
357 |     </script>
358 |     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
359 |     <script type="text/javascript">
360 |         $(document).ready(function(){
361 |             $('ul li a').click(function(){
362 |                 $('li a').removeClass("active");
363 |                 $(this).addClass("active");
364 |             });
365 |         });
366 |     </script>
367 | 
368 |     <!-- Script untuk menghilangkan navigasi collapse jika dikilk akan hilang -->
369 | 
370 |     <script type="text/javascript">    
371 |         $('.js-scroll-trigger').click(function() {
372 |             $('.navbar-collapse').collapse('hide');
373 |         });
374 |     </script>
375 | 
376 |     <!-- Akhir -->
377 | 
378 |     <!-- fungsi script adalah membuat hover card ke atas -->
379 |     <script>
380 |         $(document).ready(function(){
381 | 
382 |             $('.col-md-4').hover(
383 |                 //trigger ketika mouse di sentuh
384 |                 function(){
385 |                     $(this).animate({
386 |                         marginTop: "-=1%",
387 |                     },200);
388 |                 },
389 | 
390 |                 //trigger  when mouse out
391 |                 function(){
392 |                     $(this).animate({
393 |                         marginTop: "0%"
394 |                     },200);
395 |                 }
396 |             );
397 |         });
398 |     </script>
399 | 
400 | 
401 |     <script>
402 |       const typedTextSpan = document.querySelector(".typed-text");
403 |       const cursorSpan = document.querySelector(".cursor");
404 | 
405 |       const textArray = ["Elvina"];
406 |       const typingDelay = 100;
407 |       const erasingDelay = 100;
408 |       const newTextDelay = 2500; // Delay between current and next text
409 |       let textArrayIndex = 0;
410 |       let charIndex = 0;
411 | 
412 |       function type() {
413 |         if (charIndex < textArray[textArrayIndex].length) {
414 |           if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
415 |           typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
416 |           charIndex++;
417 |           setTimeout(type, typingDelay);
418 |         } 
419 |         else {
420 |           cursorSpan.classList.remove("typing");
421 |             setTimeout(erase, newTextDelay);
422 |         }
423 |       }
424 | 
425 |       function erase() {
426 |           if (charIndex > 0) {
427 |           if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
428 |           typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
429 |           charIndex--;
430 |           setTimeout(erase, erasingDelay);
431 |         } 
432 |         else {
433 |           cursorSpan.classList.remove("typing");
434 |           textArrayIndex++;
435 |           if(textArrayIndex>=textArray.length) textArrayIndex=0;
436 |           setTimeout(type, typingDelay + 1100);
437 |         }
438 |       }
439 | 
440 |       document.addEventListener("DOMContentLoaded", function() { // On DOM Load initiate the effect
441 |         if(textArray.length) setTimeout(type, newTextDelay + 250);
442 |       });
443 |      </script>
444 | 
445 | 
446 |      <!-- navbar scroll -->
447 |      <script>
448 |       document.addEventListener("scroll", function () {
449 |         const navbar = document.querySelector("nav");
450 | 
451 |         if (this.body.scrollTop > 1 || this.documentElement.scrollTop > 1) {
452 |           navbar.classList.add("nav-scrolled", "fixed-top");
453 |         } else {
454 |           navbar.classList.remove("nav-scrolled", "fixed-top");
455 |         }
456 |       });
457 |     </script>   
458 | 
459 |     <!-- Option 1: Bootstrap Bundle with Popper -->
460 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
461 |   </body>
462 | </html>
463 | 
464 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 | 	padding: 0;
  3 | 	margin: 0;
  4 | 	box-sizing: border-box;
  5 | }
  6 | /* Main Color */
  7 | :root {
  8 |   --lightpurple: #C5BDFF;
  9 |   --poppins: 'Poppins', sans-serif;
 10 |   --black: #000000;
 11 |   --abril: 'Abril Fatface', cursive;
 12 |   --lato:  'Lato', sans-serif;
 13 |   --purple: #9485FF;
 14 |   --darkgray: #6E6C78;
 15 |   --white: #FFFFFF;
 16 |   --lightgray: #898796;
 17 | }
 18 | ::selection {
 19 |   color: var(--lightpurple);
 20 |   background: CornflowerBlue;
 21 |   background-color: var(--black);
 22 | }
 23 | .nav-scrolled {
 24 |   background: white !important;
 25 | }
 26 | /*Navbar*/
 27 | .navbar{
 28 | 	font-family: var(--poppins);
 29 | 	background-color: white;
 30 | }
 31 | .navbar-toggler{
 32 | 	border: none !important;
 33 | }
 34 | .navbar-toggler:focus,
 35 | .navbar-toggler:active,
 36 | .navbar-toggler-icon:focus {
 37 |     outline: none;
 38 |     box-shadow: none;
 39 | }
 40 | .navbar .container-fluid .navbar-item{
 41 | 	font-size: 28.5px;
 42 | 	letter-spacing: 2px;
 43 | 	font-weight: 550;
 44 | 	color: black;
 45 | 	text-decoration: none;
 46 | }
 47 | .navbar .container-fluid .span{
 48 | 	color: var(--purple)
 49 | }
 50 | .navbar .navbar-nav .nav-item a{
 51 | 	font-weight: 400;
 52 | 	font-size: 20px;
 53 | 	text-transform: uppercase;
 54 | 	color: black;
 55 | }
 56 | .d-flex .btn{
 57 | 	font-size: 15px;
 58 | 	background-color: black;
 59 | 	border-radius: 50px;
 60 | 	color: var(--white);
 61 | 	text-transform: uppercase;
 62 | 	padding: 13px 19px;
 63 | }
 64 | .d-flex .btn:hover{
 65 | 	background-color: var(--purple);
 66 | 	color: var(--white);
 67 | 	transition: 0.5;
 68 | }
 69 | /*jumbotron*/
 70 | .jumbotron .text{
 71 | 	padding-bottom: 6rem;
 72 | }
 73 | .jumbotron{
 74 | 	background-image: url(img/scr.png) !important;
 75 | 	background-size: cover;
 76 | 	height: 100vh;
 77 | 	margin-top: -74px;	
 78 | 	background-position: center;
 79 | }
 80 | .jumbotron .text h2{
 81 | 	text-transform: uppercase;
 82 | 	font-family: var(--lato);
 83 | 	font-size: 24px;
 84 | 	font-weight: 300;
 85 | 	padding-top: 9.5rem;
 86 | }
 87 | .jumbotron .text h1{
 88 | 	text-transform: capitalize;
 89 | 	font-family: var(--abril);
 90 | 	font-size: 75px;
 91 | 	color: black;
 92 | 	overflow: hidden;
 93 | }
 94 | @keyframes blink {
 95 |   0% {
 96 |     background-color: #ccc;
 97 |   }
 98 | 
 99 |   49% {
100 |     background-color: #ccc;
101 |   }
102 | 
103 |   50% {
104 |     background-color: transparent;
105 |   }
106 | 
107 |   99% {
108 |   	background-color: transparent;
109 |   }
110 |   100% {
111 |   	background-color: #ccc;
112 |   }
113 | }
114 | .jumbotron .text h1 .cursor{
115 | 	display: inline-block;
116 | 	background-color: #ccc;
117 | 	margin-left: 0.1rem;
118 | 	width: 3px;
119 | 	animation: blink 1s infinite;
120 | }
121 | .jumbotron .text h1 .cursor .typing {
122 | 	animation: none;
123 | }
124 | .jumbotron .text span{	
125 | 	color: var(--purple);
126 | }
127 | 
128 | .jumbotron .text h3{
129 | 	text-transform: capitalize;
130 | 	font-family: var(--poppins);
131 | 	font-size: 24px;
132 | 	font-weight: 400;
133 | 	display: flex;
134 | 	padding-bottom: 25px;
135 | }
136 | .jumbotron .text h3::after{
137 | 	content: '';
138 | 	display: block;
139 | 	border-right: 7px solid var(--lightpurple);
140 | 	width: 5px;
141 | }
142 | .jumbotron .sosial-media a{
143 | 	text-decoration: none;
144 | 	color: var(--lightgray);
145 | 	padding-right: 25px;
146 | 	width: 50px;
147 | 	height: 50px;
148 | }
149 | /*About*/
150 | #about{
151 | 	padding-bottom: 4rem;
152 | }
153 | .text-about{
154 | 	padding-top: 5rem;
155 | }
156 | .text-about h1{
157 | 	font-family: var(--abril);
158 | 	font-size: 50px;
159 | 	text-align: left;
160 | 	padding-bottom: 20px;
161 | }
162 | .text-about h1:after{
163 | 	content: '';
164 | 	display: block;
165 | 	border-bottom: 7px solid var(--purple);
166 | 	width: 20%;
167 | 	padding-bottom: 2px;
168 | 	margin-bottom: -9px;
169 | }
170 | .text-about span{
171 | 	color: var(--purple);
172 | }
173 | .text-about p{
174 | 	font-family: var(--poppins);
175 | 	font-size: 23px;
176 | 	text-transform: none;
177 | }
178 | .about-img{
179 | 	padding-top: 9rem;
180 | }
181 | /*project*/
182 | #project{
183 | 	padding: 5rem 0;
184 | 	background-image: url(img/back.png);
185 | 	background-size: cover
186 | }
187 | #carouselExampleFade .carousel-control-prev{
188 | 	background-color: var(--lightpurple);
189 | 	border-radius: 50%;
190 | 	height: 59px;
191 | 	width: 60.5px;
192 | 	top: 45%;
193 | 	left: 5%;
194 | }
195 | #carouselExampleFade .carousel-control-next{
196 | 	background-color: var(--lightpurple);
197 | 	border-radius: 50%;
198 | 	height: 59px;
199 | 	width: 60.5px;
200 | 	top: 45%;
201 | 	right: 5%;
202 | }
203 | .title-project h1{
204 | 	font-family: var(--abril);
205 | 	font-size: 50px;
206 | 	padding-bottom: 3rem;
207 | }
208 | .title-project h1:after{
209 | 	content: '';
210 | 	display: block;
211 | 	border-bottom: 7px solid var(--purple);
212 | 	width: 10%;
213 | 	padding-bottom: 9px;
214 | 	margin-bottom: -9px;
215 | }
216 | .title-project span{
217 | 	color: var(--purple);
218 | }
219 | 
220 | /*skills&toools*/
221 | #skills{
222 | 	padding: 4rem 0;
223 | }
224 | .title-skills h1{
225 | 	font-family: var(--abril);
226 | 	font-size: 50px;
227 | 	padding-bottom: 4rem;
228 | }
229 | .title-skills h1:after{
230 | 	content: '';
231 | 	display: block;
232 | 	border-bottom: 7px solid var(--purple);
233 | 	width: 8%;
234 | 	padding-bottom: 9px;
235 | 	margin-bottom: -9px;
236 | }
237 | .title-skills span{
238 | 	color: var(--purple);
239 | }
240 | #skills .container-fluid .gambar-skills .col-lg-3{
241 | 	padding-bottom: 3.5rem;
242 | }
243 | #skills .container-fluid .gambar-skills .col-lg-3 img:hover{
244 | 	filter: invert(15%);
245 | }
246 | /*Promise*/
247 | #promise{
248 | 	padding: 4rem 0;
249 | 	background-image: url(img/THINGS.png);
250 | 	background-size: cover;
251 | }
252 | .promise-title h1{
253 | 	text-transform: capitalize;
254 | 	font-family: var(--abril);
255 | 	font-size: 50px;
256 | 	text-align: left;
257 | 	padding-bottom: 2rem;
258 | }
259 | .promise-title span{
260 | 	color: var(--purple);
261 | }
262 | .datar-promise .isi-card{
263 | 	padding-bottom: 2rem;
264 | }
265 | #promise .card{
266 | 	border: 3px solid var(--lightpurple);
267 | 	padding: 1rem 0.6rem 2rem 0.6rem;
268 | 	font-family: var(--poppins);
269 | 	width: 35rem;
270 | }
271 | #promise .card-title{
272 | 	font-size: 28px;
273 | 	font-weight: bold;
274 | 	text-transform: capitalize;
275 | }
276 | #promise .card-text{
277 | 	font-size: 18px;
278 | 	font-weight: 400;
279 | 	color: var(--purple)
280 | }
281 | 
282 | /*Testimonial*/
283 | #testimonial{
284 | 	padding: 4rem 0;
285 | }
286 | #testimonial .col-lg-5{
287 | 	background-color: var(--lightpurple);
288 | }
289 | #testimonial .one{
290 | 	padding-top: 1.7rem;
291 | 	padding-left: 15px;  
292 | }
293 | #testimonial .one i{
294 | 	color: var(--purple);
295 | 	padding-bottom: 15px;
296 | }
297 | #testimonial .one h4{
298 | 	font-family: var(--poppins);
299 | 	font-weight: 400;
300 | 	font-size: 25px;
301 | 	padding-bottom: 15px;
302 | }
303 | #testimonial .one h2{
304 | 	font-size: 35px;
305 | 	font-family: var(--poppins);
306 | 	font-weight: 600;
307 | 	color: var(--purple);
308 | 	padding-bottom: 2rem;
309 | }
310 | /*Contact*/
311 | #contact{
312 | 	padding: 6rem 0;
313 | 	background-image: url(img/contact.png);
314 | 	background-size: cover;
315 | }
316 | .img-contact{
317 | 	margin-top: -1.5rem;
318 | }
319 | .contact-title h1{
320 | 	text-transform: capitalize;
321 | 	font-family: var(--abril);
322 | 	font-size: 50px;
323 | 	text-align: center;
324 | 	padding-bottom: 2rem;
325 | }
326 | 
327 | .contact-title span{
328 | 	color: var(--purple);
329 | }
330 | #contact form .form-label{
331 | 	font-family: var(--poppins);
332 | 	font-size: 22px;
333 | }
334 | #contact form input{
335 | 	border-radius: 0%;
336 | 	color: var(--purple);
337 | }
338 | #contact textarea{
339 | 	border-radius: 0%;
340 | 	color: var(--purple);
341 | }
342 | /* Footer */
343 | footer{
344 | 	background-color: var(--purple);
345 | 	font-size: 21px;
346 | }
347 | .footer a{
348 | 	text-decoration: none;
349 | 	font-family: var(--poppins);
350 | }
351 | /*deskop version biasa*/
352 | @media (min-width: 992px) {	
353 | 	/*navbar*/
354 | 	.navbar{
355 | 		padding: 0.5rem 3rem;
356 | 		background: transparent;
357 | 	}
358 | 	.navbar .navbar-nav .nav-item{
359 | 		padding: 3px 10px;
360 | 	}
361 | 	.navbar .navbar-nav .nav-item a{
362 | 		background: linear-gradient(to right, var(--purple), var(--lightpurple));
363 | 		background-size: 200%;
364 | 		-webkit-background-clip: text;
365 | 		-webkit-text-fill-color: transparent;
366 | 		transition: 0.5s ease-out;
367 | 	}
368 | 	.navbar .navbar-nav .nav-item a:hover{
369 | 		background-position: -100%;
370 | 	}
371 | 	/* jumbotron */
372 | 	.jumbotron .text {
373 | 		padding-left: 4rem;
374 | 		top: 36%;
375 | 		position: absolute;
376 | 	}
377 | 	.jumbotron .text h2{
378 | 		text-transform: uppercase;
379 | 		font-family: var(--lato);
380 | 		font-size: 30px;
381 | 		font-weight: 300;
382 | 		padding-top: 0;
383 | 	}
384 | 	.jumbotron .text h1{
385 | 		text-transform: capitalize;
386 | 		font-family: var(--abril);
387 | 		font-size: 85px;
388 | 		color: black;
389 | 	}
390 | 	.jumbotron .text span{
391 | 		color: var(--purple);
392 | 	}
393 | 	.jumbotron .text h3{
394 | 		text-transform: capitalize;
395 | 		font-family: var(--poppins);
396 | 		font-size: 26px;
397 | 		font-weight: 400;
398 | 		display: flex;
399 | 		padding-bottom: 25px;
400 | 	}
401 | 	.jumbotron .text h3::after{
402 | 		content: '';
403 | 		display: block;
404 | 		border-right: 7px solid var(--lightpurple);
405 | 		width: 4%;
406 | 	}
407 | 	.jumbotron .sosial-media a{
408 | 		text-decoration: none;
409 | 		color: var(--lightgray);
410 | 		padding-right: 25px;
411 | 		width: 70px;
412 | 		height: 70px;
413 | 	}
414 | 	.jumbotron .sosial-media a:hover{
415 | 		color: var(--purple);
416 | 	}
417 | 	/*About*/
418 | 	.text-about{
419 | 		padding: 10rem 0 0 4rem;
420 | 	}
421 | 	.text-about h1{
422 | 		font-size: 65px;
423 | 	}
424 | 	.text-about span{
425 | 		color: var(--purple);
426 | 	}
427 | 	.text-about p{
428 | 		font-size: 25px;
429 | 	}
430 | 	#about{
431 | 		background-image: url(img/ABOUT.png);
432 | 		background-size: cover;
433 | 		height: auto;
434 | 	}
435 | 	.about-img{
436 | 		padding-top: 5rem;
437 | 	}
438 | 	/*project*/
439 | 	#carouselExampleFade .carousel-inner .carousel-item img{
440 | 		height: 80vh;
441 | 	} 
442 | 	.title-project h1{
443 | 		font-size: 65px;
444 | 		padding-left: 4rem; 
445 | 	}
446 | 	/*skills&tools*/
447 | 	#skills{
448 | 		background-image: url(img/SKILLS.png);
449 | 		background-size: cover;
450 | 
451 | 	}
452 | 	.title-skills h1{
453 | 		padding-left: 4rem;
454 | 		font-size: 65px;
455 | 	}
456 | 	.gambar-skills{
457 | 		padding-left: 4rem;
458 | 	}
459 | 	/*promise*/
460 | 	#promise{
461 | 		background-image: url(img/THINGS.png);
462 | 		background-size: cover;
463 | 	}
464 | 	.promise-title h1{
465 | 		font-size: 65px;
466 | 		text-align: center;
467 | 	}
468 | 	#promise .datar-promise{
469 | 		margin: 0 4.5rem;
470 | 	}
471 | 	/*testimonial*/
472 | 	#testimonial .one{
473 | 		padding-top: 6rem;
474 | 		padding-left: 3rem;
475 | 		border-top-left-radius: 10px;
476 | 		border-bottom-left-radius: 10px;  
477 | 	}
478 | 	#testimonial .two{
479 | 		border-top-right-radius: 10px;
480 | 		border-bottom-right-radius: 10px;  
481 | 	}
482 | 	.contact-title  h1{
483 | 		font-size: 65px;
484 | 	}
485 | }
486 | 
487 | 


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