├── assests ├── img │ ├── frame.png │ ├── help.png │ ├── logo.png │ ├── logo2.png │ ├── star.png │ ├── QR-code.png │ ├── airtime2.png │ ├── headerbg.png │ ├── opay-app.png │ ├── opening.png │ ├── service1.png │ ├── service2.png │ ├── transfer.png │ ├── twitter1.png │ ├── twitter2.png │ ├── twitter3.png │ ├── applestore.png │ ├── googleplay.png │ ├── security2.png │ ├── debit-cards.png │ ├── download (2).png │ ├── heaeder-img.png │ └── opay-app (1).png ├── scss │ ├── _variables.scss │ ├── _utilities.scss │ ├── _mobile.scss │ ├── main.css.map │ ├── main.scss │ └── main.css └── js │ └── app.js ├── LICENSE ├── README.md └── index.html /assests/img/frame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/frame.png -------------------------------------------------------------------------------- /assests/img/help.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/help.png -------------------------------------------------------------------------------- /assests/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/logo.png -------------------------------------------------------------------------------- /assests/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/logo2.png -------------------------------------------------------------------------------- /assests/img/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/star.png -------------------------------------------------------------------------------- /assests/img/QR-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/QR-code.png -------------------------------------------------------------------------------- /assests/img/airtime2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/airtime2.png -------------------------------------------------------------------------------- /assests/img/headerbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/headerbg.png -------------------------------------------------------------------------------- /assests/img/opay-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/opay-app.png -------------------------------------------------------------------------------- /assests/img/opening.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/opening.png -------------------------------------------------------------------------------- /assests/img/service1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/service1.png -------------------------------------------------------------------------------- /assests/img/service2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/service2.png -------------------------------------------------------------------------------- /assests/img/transfer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/transfer.png -------------------------------------------------------------------------------- /assests/img/twitter1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/twitter1.png -------------------------------------------------------------------------------- /assests/img/twitter2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/twitter2.png -------------------------------------------------------------------------------- /assests/img/twitter3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/twitter3.png -------------------------------------------------------------------------------- /assests/img/applestore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/applestore.png -------------------------------------------------------------------------------- /assests/img/googleplay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/googleplay.png -------------------------------------------------------------------------------- /assests/img/security2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/security2.png -------------------------------------------------------------------------------- /assests/img/debit-cards.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/debit-cards.png -------------------------------------------------------------------------------- /assests/img/download (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/download (2).png -------------------------------------------------------------------------------- /assests/img/heaeder-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/heaeder-img.png -------------------------------------------------------------------------------- /assests/img/opay-app (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abokmadaki/OPAY-WEBSITE-CLONE/HEAD/assests/img/opay-app (1).png -------------------------------------------------------------------------------- /assests/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $green-color: #1dc99b; 2 | $text-color: #63568f; 3 | $home-color:#3c2d74; 4 | $white-color: #ffffff; 5 | $nav-color:#364253; 6 | $header-color:#261563; 7 | $light-background: #f3fcfa; 8 | $footer-color: #d2f5ec; 9 | $icon-bg: #c0dede; 10 | $hamburger-color: #0a0a0afb; -------------------------------------------------------------------------------- /assests/scss/_utilities.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | list-style: none; 7 | } 8 | 9 | html { 10 | scroll-behavior: smooth; 11 | } 12 | 13 | .container { 14 | max-width: 980px; 15 | margin: 0 auto; 16 | padding: 0 4.5rem; 17 | } 18 | 19 | a { 20 | text-decoration: none; 21 | } 22 | 23 | img { 24 | width: 100%; 25 | } 26 | 27 | .grid { 28 | display: grid; 29 | grid-template-columns: repeat(2, 1fr); 30 | } 31 | 32 | .flex { 33 | display: flex; 34 | align-items: center; 35 | } 36 | 37 | .header_scroll{ 38 | box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5); 39 | } 40 | 41 | h1 { 42 | font-size: 2.5rem; 43 | } 44 | 45 | .logo img { 46 | width: 5rem; 47 | } 48 | 49 | -------------------------------------------------------------------------------- /assests/js/app.js: -------------------------------------------------------------------------------- 1 | const menu = document.querySelector(".hamburger"); 2 | const nav_menu = document.querySelector(".nav_menu"); 3 | 4 | menu.addEventListener("click", ()=>{ 5 | menu.classList.toggle("open"); 6 | nav_menu.classList.toggle("show"); 7 | }); 8 | 9 | 10 | //when the scroll is greater than 50 viewport height add the scroll-header class to the tag 11 | const scrollHeader = ()=>{ 12 | const header = document.getElementById("header"); 13 | if(this.scrollY >= 50) { 14 | header.classList.add("header_scroll"); 15 | }else { 16 | header.classList.remove("header_scroll") 17 | } 18 | }; 19 | 20 | window.addEventListener("scroll", scrollHeader); 21 | 22 | // scroll reveal 23 | function scrollReveal(){ 24 | const scrollUp = document.getElementById('scroll'); 25 | // When the scroll is higher than 200 viewport height, add the show-scroll class to the a tag with the scroll-top class 26 | if(this.scrollY >= 200) scrollUp.classList.add('show'); else scrollUp.classList.remove('show') 27 | } 28 | 29 | window.addEventListener('scroll', scrollReveal) 30 | 31 | // Designed by ABOK MADAKI -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Abok Istifanus Madaki 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 | # OPAY-WEBSITE-CLONE 2 | 3 | This is a clone of the OPay website, a fintech company that provides various financial services and payment solutions in Africa. The clone aims to replicate the look and feel of the original OPay website, showcasing its features and services. 4 | 5 | ## Table of Contents 6 | 7 | - [Introduction](#introduction) 8 | - [Features](#features) 9 | - [Technologies Used](#technologies-used) 10 | - [Installation](#installation) 11 | - [Usage](#usage) 12 | - [Contributing](#contributing) 13 | - [License](#license) 14 | 15 | ## Introduction 16 | 17 | The OPay website clone is a web application designed to mimic the layout and design of the original OPay website. It offers users the ability to explore and learn about the various financial services and payment solutions offered by OPay in Africa. 18 | 19 | This project is purely educational and meant for personal learning purposes. It is not an official OPay website and is not associated with the actual company. 20 | 21 | ## Features 22 | 23 | The OPay website clone includes the following features: 24 | 25 | 1. Home Page: An overview of OPay's services, including mobile money, payment services, ride-hailing, food delivery, e-commerce, and investments. 26 | 27 | 2. Services Pages: Detailed pages for each service offered by OPay, providing more information and how users can benefit from using them. 28 | 29 | 3. Responsive Design: The website is responsive, ensuring it looks great and functions well on various devices, including desktops, tablets, and mobile phones. 30 | 31 | 4. Interactive Elements: The clone includes interactive elements such as buttons, menus, and hover effects, enhancing the user experience. 32 | 33 | ## Technologies Used 34 | 35 | The project was built using the following technologies: 36 | 37 | - HTML5 38 | - CSS3 39 | - JavaScript 40 | - SASS / SCSS 41 | 42 | ## Installation 43 | 44 | To run the OPay website clone locally, follow these steps: 45 | 46 | 1. Clone the repository: `git clone https://github.com/abokmadaki/opay-website-clone.git` 47 | 2. Navigate to the project directory: `cd opay-website-clone` 48 | 3. Open the `index.html` file in your web browser. 49 | 50 | Alternatively, you can simply view the website online by visiting [https://abokmadaki.github.io/opay-website-clone](https://abokmadaki.github.io/opay-website-clone). 51 | 52 | ## Usage 53 | 54 | The OPay website clone is for educational purposes only and not meant for commercial use. Users can explore the various services and features offered by OPay, but any transactions or interactions depicted on the website are purely fictional. 55 | 56 | ## Contributing 57 | 58 | Contributions to this project are not accepted, as it is intended for personal learning and educational purposes only. 59 | 60 | ## License 61 | 62 | This project is licensed under the [MIT License](LICENSE.md). Feel free to use the code as a reference for your own educational projects. However, please be aware that this is a clone project and not an official representation of OPay. 63 | -------------------------------------------------------------------------------- /assests/scss/_mobile.scss: -------------------------------------------------------------------------------- 1 | 2 | @media (max-width:680px) { 3 | 4 | .grid { 5 | display: grid; 6 | grid-template-columns: 1fr; 7 | } 8 | 9 | .hidden { 10 | display: none; 11 | } 12 | 13 | .container { 14 | max-width: 980px; 15 | margin: 0 auto; 16 | padding: 0 2rem; 17 | } 18 | 19 | .nav_menu { 20 | position: fixed; 21 | background-color: $white-color; 22 | top: 100%; 23 | left: 0; 24 | width: 100%; 25 | padding: 5.5rem 0 3rem; 26 | transition: .4s; 27 | text-align: left; 28 | z-index: 1000; 29 | height: 100%; 30 | 31 | .nav_items { 32 | display: flex; 33 | flex-direction: column; 34 | align-items: center; 35 | row-gap: 1rem; 36 | } 37 | .nav_link { 38 | font-size: 1.5rem; 39 | } 40 | } 41 | 42 | .nav .container .hamburger { 43 | display: block; 44 | margin-right: 5rem; 45 | } 46 | 47 | .hero .hero_content { 48 | grid-template-columns: 1fr; 49 | gap: 1rem; 50 | 51 | .header_img { 52 | margin-top: 1rem; 53 | width: 300px; 54 | position: absolute; 55 | top: -0rem; 56 | left: 0; 57 | } 58 | 59 | .hero_detail { 60 | margin-top: 25rem; 61 | 62 | .hero_text { 63 | text-align: center; 64 | } 65 | .hero_subtitle { 66 | font-size: 1rem; 67 | text-align: center; 68 | } 69 | } 70 | } 71 | 72 | .hero .frame { 73 | width: 250px; 74 | } 75 | 76 | .service { 77 | padding-top: 6rem; 78 | 79 | .service_title { 80 | text-align: center; 81 | font-size: 3rem; 82 | } 83 | 84 | .service_container { 85 | gap: 2rem; 86 | 87 | h3 { 88 | font-size: 2rem; 89 | text-align: center; 90 | } 91 | p { 92 | text-align: center; 93 | } 94 | } 95 | } 96 | 97 | .users { 98 | padding: 4rem 0; 99 | } 100 | 101 | .apps { 102 | padding: 4rem 0; 103 | 104 | h2 { 105 | text-align: center; 106 | font-size: 2rem; 107 | margin-bottom: 2rem; 108 | } 109 | } 110 | 111 | .security { 112 | margin: 10rem 0; 113 | 114 | h1 { 115 | text-align: center; 116 | } 117 | 118 | h4 { 119 | text-align: center; 120 | } 121 | p { 122 | text-align: center; 123 | } 124 | } 125 | 126 | .help { 127 | padding: 5rem 0; 128 | 129 | .help_details { 130 | text-align: center; 131 | 132 | h2 { 133 | font-size: 3rem; 134 | } 135 | } 136 | } 137 | 138 | .footer .footer_container { 139 | grid-template-columns: repeat(2, 1fr); 140 | } 141 | 142 | .footer_inner { 143 | flex-direction: column; 144 | gap: 1rem; 145 | } 146 | } -------------------------------------------------------------------------------- /assests/scss/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["_utilities.scss","main.css","main.scss","_variables.scss","_mobile.scss"],"names":[],"mappings":"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","file":"main.css"} -------------------------------------------------------------------------------- /assests/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import 'utilities'; 2 | @import 'variables'; 3 | 4 | 5 | body { 6 | font-family: sans-serif; 7 | } 8 | 9 | // 10 | header { 11 | position: fixed; 12 | width: 100%; 13 | top: 0; 14 | left: 0; 15 | z-index: 1000; 16 | padding-top: 1rem; 17 | background-color: $white-color; 18 | 19 | .nav .container{ 20 | display: flex; 21 | align-items: center; 22 | justify-content: space-between; 23 | height: 3rem; 24 | 25 | .nav_items{ 26 | display: flex; 27 | align-items: center; 28 | 29 | .nav_link { 30 | padding: 1rem 1.5rem; 31 | color: $nav-color; 32 | 33 | i { 34 | font-size: 16px; 35 | margin-left: 0.2rem; 36 | margin-top: 0.2rem; 37 | } 38 | } 39 | // 40 | .nav_list:hover .sub_menu { 41 | position: absolute; 42 | top: 100%; 43 | background-color: $white-color; 44 | padding: 0.5rem 1rem; 45 | transition: all .5s ease-in-out; 46 | text-align: center; 47 | display: block; 48 | 49 | &.open { 50 | display: block; 51 | } 52 | 53 | .sub_items { 54 | display: block; 55 | margin-top: 10px; 56 | 57 | .sub_list { 58 | padding: 1rem; 59 | 60 | .sub_link { 61 | color: $nav-color; 62 | } 63 | } 64 | } 65 | 66 | 67 | } 68 | 69 | .sub_menu { 70 | display: none; 71 | } 72 | .active { 73 | color: $green-color; 74 | } 75 | } 76 | } 77 | 78 | // HAMBURGER MENU 79 | .hamburger { 80 | cursor: pointer; 81 | transition: all 0.25s; 82 | display: none; 83 | position: relative; 84 | margin-right: 10px; 85 | } 86 | .hamburger-top, 87 | .hamburger-middle, 88 | .hamburger-bottom { 89 | position: absolute; 90 | top: 0; 91 | left: 0; 92 | width: 24px; 93 | height: 2px; 94 | background-color: $hamburger-color; 95 | transform: rotate(0); 96 | transition: all 0.5s; 97 | } 98 | .hamburger-middle { 99 | transform: translateY(7px); 100 | } 101 | .hamburger-bottom { 102 | transform: translateY(14px); 103 | } 104 | .open { 105 | transform: rotate(90deg); 106 | transform: translateY(0px); 107 | } 108 | .open .hamburger-top { 109 | transform: rotate(45deg) translateY(6px) translate(6px); 110 | } 111 | .open .hamburger-middle { 112 | display: none; 113 | } 114 | .open .hamburger-bottom { 115 | transform: rotate(-45deg) translateY(6px) translate(-6px); 116 | } 117 | 118 | .nav_menu.show { 119 | top: 9%; 120 | } 121 | } 122 | 123 | // 124 | 125 | .hero { 126 | background: url("/assests/img/headerbg.png"); 127 | background-repeat: no-repeat; 128 | background-position: center; 129 | background-size: cover; 130 | 131 | .header_img { 132 | width: 450px; 133 | margin-top: 5rem; 134 | position: absolute; 135 | left: 50%; 136 | } 137 | 138 | .hero_content { 139 | align-items: center; 140 | gap: 3rem; 141 | position: relative; 142 | } 143 | 144 | .hero_detail { 145 | margin-top: 9.5rem; 146 | 147 | .hero_text { 148 | color: $header-color; 149 | font-size: 2.5rem; 150 | margin-bottom: 2rem; 151 | 152 | span { 153 | color: $green-color; 154 | } 155 | } 156 | .hero_subtitle { 157 | color: $text-color; 158 | font-size: 1.2rem; 159 | line-height: 1.5; 160 | margin-bottom: 2rem; 161 | } 162 | } 163 | 164 | .frame { 165 | width: 350px; 166 | margin-bottom: 2rem; 167 | } 168 | 169 | .store { 170 | gap: 1rem; 171 | 172 | img{ 173 | width: 150px; 174 | } 175 | } 176 | 177 | .arrow_down { 178 | text-align: center; 179 | margin-top: 1rem; 180 | 181 | i { 182 | font-size: 50px; 183 | color: $green-color 184 | } 185 | } 186 | } 187 | // ABOUT SECTION 188 | .about { 189 | background-color: $white-color; 190 | 191 | .card_container { 192 | align-items: center; 193 | margin-top: 15rem; 194 | margin-bottom: 1.5rem; 195 | gap: 0.2rem; 196 | 197 | .about_cards { 198 | background-color: $white-color; 199 | padding: 2rem 1rem; 200 | width: 300px; 201 | height: 350px; 202 | color: $nav-color; 203 | font-family: sans-serif; 204 | position: relative; 205 | border-radius: 10px; 206 | 207 | .card_content { 208 | margin-top: 5rem; 209 | 210 | .card_title { 211 | margin-top: 3rem; 212 | margin-bottom: 1.5rem; 213 | // color: $nav-color; 214 | } 215 | } 216 | 217 | .card_img { 218 | position: absolute; 219 | // width: 200px; 220 | inset: 0; 221 | top: -15rem; 222 | left: 25%; 223 | } 224 | 225 | i { 226 | width: 20px; 227 | color: $header-color; 228 | } 229 | 230 | &:hover { 231 | background-color: $green-color; 232 | color: $white-color; 233 | } 234 | } 235 | } 236 | } 237 | 238 | // SERVICE SECTION 239 | .service { 240 | padding: 5rem 0rem; 241 | background-color: $white-color; 242 | 243 | .service_title { 244 | font-size: 2rem; 245 | color: $header-color; 246 | } 247 | 248 | img { 249 | margin-top: 3rem; 250 | } 251 | 252 | .service_container { 253 | align-items: center; 254 | gap: 5rem; 255 | 256 | h3 { 257 | font-size: 1.5rem; 258 | color: $header-color; 259 | margin-bottom: 2rem; 260 | text-transform: capitalize; 261 | } 262 | p { 263 | font-size: 16px; 264 | line-height: 2; 265 | color: $nav-color; 266 | text-transform: capitalize; 267 | } 268 | } 269 | } 270 | 271 | // DEBIT SCTION 272 | .debit { 273 | background-color: $light-background; 274 | padding: 5rem 0; 275 | 276 | .debit_details { 277 | text-align: center; 278 | h1 { 279 | font-size: 2.5rem; 280 | color: $header-color; 281 | margin-bottom: 2rem; 282 | span { 283 | color: $green-color; 284 | } 285 | } 286 | p { 287 | font-size: 1.3rem; 288 | line-height: 1.5; 289 | color: $nav-color 290 | } 291 | } 292 | } 293 | 294 | // USERS 295 | .users { 296 | background-color: $white-color; 297 | padding: 5rem 0rem; 298 | 299 | .user_details { 300 | text-align: center; 301 | h1 { 302 | font-weight: bold; 303 | color: $header-color; 304 | margin-bottom: 2rem; 305 | } 306 | a { 307 | color: $green-color; 308 | font-weight: bold; 309 | font-size: 1.2rem; 310 | } 311 | } 312 | } 313 | // APPS 314 | .apps { 315 | background-color: $light-background; 316 | margin: 5rem 0rem; 317 | padding-top: 5rem; 318 | 319 | .apps_container { 320 | align-items: center; 321 | 322 | .apps_details { 323 | h2 { 324 | color: $header-color; 325 | margin-bottom: 1rem; 326 | line-height: 1.2; 327 | } 328 | .flex { 329 | row-gap: 1rem; 330 | 331 | img { 332 | width: 100px; 333 | margin-right: 1.5rem; 334 | border-radius: 10px; 335 | box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.5); 336 | } 337 | 338 | p { 339 | font-size: 1rem; 340 | line-height: 1.5; 341 | color: $nav-color; 342 | } 343 | 344 | .inner_subtitle { 345 | margin-top: 1rem; 346 | 347 | a { 348 | color: $green-color; 349 | } 350 | } 351 | } 352 | 353 | } 354 | } 355 | } 356 | // TESTIMONIAL 357 | .testimonial { 358 | background-color: $light-background; 359 | padding: 5rem 0rem; 360 | 361 | h1 { 362 | color: $header-color; 363 | line-height: 1.8; 364 | } 365 | h4 { 366 | color: $header-color; 367 | font-size: 1.5rem; 368 | } 369 | 370 | .slide { 371 | margin-top: 4rem; 372 | overflow: auto; 373 | scroll-snap-type: x mandatory; 374 | 375 | 376 | img { 377 | width: 350px; 378 | flex-shrink: 0; 379 | scroll-snap-align: start; 380 | } 381 | 382 | } 383 | 384 | ::-webkit-scrollbar { 385 | border-radius: .5rem; 386 | scrollbar-width: 1rem; 387 | } 388 | 389 | ::-webkit-scrollbar-thumb { 390 | background-color: $green-color; 391 | border-radius: .5rem; 392 | } 393 | } 394 | 395 | // SECURITY 396 | .security { 397 | margin: 10rem 0rem; 398 | background-color: $white-color; 399 | 400 | 401 | h1 { 402 | color: $header-color; 403 | margin-bottom: 2rem; 404 | } 405 | 406 | .security_container { 407 | align-items: center; 408 | gap: 5rem; 409 | 410 | .inner_wrapper { 411 | background-color: $light-background; 412 | margin-top: 3rem; 413 | border-radius: 15px; 414 | padding: 2rem 2rem; 415 | 416 | h4 { 417 | color: $header-color; 418 | margin-bottom: 1rem; 419 | font-size: 1.2rem; 420 | font-weight: bold; 421 | } 422 | 423 | p { 424 | color: $nav-color; 425 | line-height: 2; 426 | } 427 | } 428 | 429 | } 430 | } 431 | // HELP 432 | .help { 433 | padding: 5rem 0rem; 434 | background-color: $white-color; 435 | 436 | .help_container { 437 | position: relative; 438 | background-color: $header-color; 439 | padding: 4rem 2rem; 440 | border-radius: 15px; 441 | 442 | .help_details{ 443 | color: $white-color; 444 | 445 | h2 { 446 | font-size: 1.5rem; 447 | margin-bottom: 1.5rem; 448 | font-family: Arial, Helvetica, sans-serif; 449 | } 450 | 451 | .help_sub, 452 | .contact_sub { 453 | font-size: 0.8rem; 454 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 455 | line-height: 1.5; 456 | 457 | i { 458 | margin-right: 0.5rem; 459 | } 460 | } 461 | 462 | .contact_links { 463 | margin-top: 2rem; 464 | 465 | .contact_sub a{ 466 | color: $green-color; 467 | text-decoration: underline; 468 | } 469 | } 470 | } 471 | 472 | img { 473 | width: 250px; 474 | position: absolute; 475 | left: 65%; 476 | top: -3rem; 477 | } 478 | } 479 | } 480 | // FOOTER 481 | .footer { 482 | background-color: $green-color; 483 | margin-top: 5rem; 484 | padding: 4rem 0; 485 | 486 | .footer_container { 487 | grid-template-columns: repeat(4, 1fr); 488 | gap: 4rem; 489 | 490 | .footer_title { 491 | color: $white-color; 492 | font-family: Arial, Helvetica, sans-serif; 493 | } 494 | 495 | .footer_links { 496 | display: block; 497 | margin-top: 2.5rem; 498 | 499 | .footer_sub { 500 | padding-top: 1rem; 501 | 502 | .footer_link { 503 | color: $white-color; 504 | font-size: 0.8rem; 505 | } 506 | } 507 | 508 | address { 509 | color: $white-color; 510 | font-size: 0.8rem; 511 | } 512 | } 513 | } 514 | } 515 | 516 | .footer_info { 517 | background-color: $footer-color; 518 | margin-top: 4rem; 519 | padding: 1.5rem 0; 520 | 521 | .footer_inner { 522 | justify-content: space-between; 523 | 524 | .copywrite { 525 | color: $header-color; 526 | font-size: 0.8rem; 527 | } 528 | 529 | .social_links i { 530 | font-size: 1rem; 531 | padding: 0.5rem; 532 | color: $header-color; 533 | border-radius: 50%; 534 | background-color: $icon-bg; 535 | } 536 | } 537 | } 538 | 539 | .scroll_up i { 540 | font-size: 1rem; 541 | position: fixed; 542 | bottom: 2rem; 543 | color: $white-color; 544 | right: 1rem; 545 | padding: 0.8rem; 546 | background-color: $green-color; 547 | border-radius: 50%; 548 | display: none; 549 | } 550 | 551 | .scroll_up.show { 552 | display: block; 553 | } 554 | 555 | 556 | @import 'mobile'; -------------------------------------------------------------------------------- /assests/scss/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | list-style: none; 6 | } 7 | 8 | html { 9 | scroll-behavior: smooth; 10 | } 11 | 12 | .container { 13 | max-width: 980px; 14 | margin: 0 auto; 15 | padding: 0 4.5rem; 16 | } 17 | 18 | a { 19 | text-decoration: none; 20 | } 21 | 22 | img { 23 | width: 100%; 24 | } 25 | 26 | .grid { 27 | display: grid; 28 | grid-template-columns: repeat(2, 1fr); 29 | } 30 | 31 | .flex { 32 | display: flex; 33 | align-items: center; 34 | } 35 | 36 | .header_scroll { 37 | box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5); 38 | } 39 | 40 | h1 { 41 | font-size: 2.5rem; 42 | } 43 | 44 | .logo img { 45 | width: 5rem; 46 | } 47 | 48 | body { 49 | font-family: sans-serif; 50 | } 51 | 52 | header { 53 | position: fixed; 54 | width: 100%; 55 | top: 0; 56 | left: 0; 57 | z-index: 1000; 58 | padding-top: 1rem; 59 | background-color: #ffffff; 60 | } 61 | header .nav .container { 62 | display: flex; 63 | align-items: center; 64 | justify-content: space-between; 65 | height: 3rem; 66 | } 67 | header .nav .container .nav_items { 68 | display: flex; 69 | align-items: center; 70 | } 71 | header .nav .container .nav_items .nav_link { 72 | padding: 1rem 1.5rem; 73 | color: #364253; 74 | } 75 | header .nav .container .nav_items .nav_link i { 76 | font-size: 16px; 77 | margin-left: 0.2rem; 78 | margin-top: 0.2rem; 79 | } 80 | header .nav .container .nav_items .nav_list:hover .sub_menu { 81 | position: absolute; 82 | top: 100%; 83 | background-color: #ffffff; 84 | padding: 0.5rem 1rem; 85 | transition: all 0.5s ease-in-out; 86 | text-align: center; 87 | display: block; 88 | } 89 | header .nav .container .nav_items .nav_list:hover .sub_menu.open { 90 | display: block; 91 | } 92 | header .nav .container .nav_items .nav_list:hover .sub_menu .sub_items { 93 | display: block; 94 | margin-top: 10px; 95 | } 96 | header .nav .container .nav_items .nav_list:hover .sub_menu .sub_items .sub_list { 97 | padding: 1rem; 98 | } 99 | header .nav .container .nav_items .nav_list:hover .sub_menu .sub_items .sub_list .sub_link { 100 | color: #364253; 101 | } 102 | header .nav .container .nav_items .sub_menu { 103 | display: none; 104 | } 105 | header .nav .container .nav_items .active { 106 | color: #1dc99b; 107 | } 108 | header .hamburger { 109 | cursor: pointer; 110 | transition: all 0.25s; 111 | display: none; 112 | position: relative; 113 | margin-right: 10px; 114 | } 115 | header .hamburger-top, 116 | header .hamburger-middle, 117 | header .hamburger-bottom { 118 | position: absolute; 119 | top: 0; 120 | left: 0; 121 | width: 24px; 122 | height: 2px; 123 | background-color: rgba(10, 10, 10, 0.9843137255); 124 | transform: rotate(0); 125 | transition: all 0.5s; 126 | } 127 | header .hamburger-middle { 128 | transform: translateY(7px); 129 | } 130 | header .hamburger-bottom { 131 | transform: translateY(14px); 132 | } 133 | header .open { 134 | transform: rotate(90deg); 135 | transform: translateY(0px); 136 | } 137 | header .open .hamburger-top { 138 | transform: rotate(45deg) translateY(6px) translate(6px); 139 | } 140 | header .open .hamburger-middle { 141 | display: none; 142 | } 143 | header .open .hamburger-bottom { 144 | transform: rotate(-45deg) translateY(6px) translate(-6px); 145 | } 146 | header .nav_menu.show { 147 | top: 9%; 148 | } 149 | 150 | .hero { 151 | background: url("/assests/img/headerbg.png"); 152 | background-repeat: no-repeat; 153 | background-position: center; 154 | background-size: cover; 155 | } 156 | .hero .header_img { 157 | width: 450px; 158 | margin-top: 5rem; 159 | position: absolute; 160 | left: 50%; 161 | } 162 | .hero .hero_content { 163 | align-items: center; 164 | gap: 3rem; 165 | position: relative; 166 | } 167 | .hero .hero_detail { 168 | margin-top: 9.5rem; 169 | } 170 | .hero .hero_detail .hero_text { 171 | color: #261563; 172 | font-size: 2.5rem; 173 | margin-bottom: 2rem; 174 | } 175 | .hero .hero_detail .hero_text span { 176 | color: #1dc99b; 177 | } 178 | .hero .hero_detail .hero_subtitle { 179 | color: #63568f; 180 | font-size: 1.2rem; 181 | line-height: 1.5; 182 | margin-bottom: 2rem; 183 | } 184 | .hero .frame { 185 | width: 350px; 186 | margin-bottom: 2rem; 187 | } 188 | .hero .store { 189 | gap: 1rem; 190 | } 191 | .hero .store img { 192 | width: 150px; 193 | } 194 | .hero .arrow_down { 195 | text-align: center; 196 | margin-top: 1rem; 197 | } 198 | .hero .arrow_down i { 199 | font-size: 50px; 200 | color: #1dc99b; 201 | } 202 | 203 | .about { 204 | background-color: #ffffff; 205 | } 206 | .about .card_container { 207 | align-items: center; 208 | margin-top: 15rem; 209 | margin-bottom: 1.5rem; 210 | gap: 0.2rem; 211 | } 212 | .about .card_container .about_cards { 213 | background-color: #ffffff; 214 | padding: 2rem 1rem; 215 | width: 300px; 216 | height: 350px; 217 | color: #364253; 218 | font-family: sans-serif; 219 | position: relative; 220 | border-radius: 10px; 221 | } 222 | .about .card_container .about_cards .card_content { 223 | margin-top: 5rem; 224 | } 225 | .about .card_container .about_cards .card_content .card_title { 226 | margin-top: 3rem; 227 | margin-bottom: 1.5rem; 228 | } 229 | .about .card_container .about_cards .card_img { 230 | position: absolute; 231 | inset: 0; 232 | top: -15rem; 233 | left: 25%; 234 | } 235 | .about .card_container .about_cards i { 236 | width: 20px; 237 | color: #261563; 238 | } 239 | .about .card_container .about_cards:hover { 240 | background-color: #1dc99b; 241 | color: #ffffff; 242 | } 243 | 244 | .service { 245 | padding: 5rem 0rem; 246 | background-color: #ffffff; 247 | } 248 | .service .service_title { 249 | font-size: 2rem; 250 | color: #261563; 251 | } 252 | .service img { 253 | margin-top: 3rem; 254 | } 255 | .service .service_container { 256 | align-items: center; 257 | gap: 5rem; 258 | } 259 | .service .service_container h3 { 260 | font-size: 1.5rem; 261 | color: #261563; 262 | margin-bottom: 2rem; 263 | text-transform: capitalize; 264 | } 265 | .service .service_container p { 266 | font-size: 16px; 267 | line-height: 2; 268 | color: #364253; 269 | text-transform: capitalize; 270 | } 271 | 272 | .debit { 273 | background-color: #f3fcfa; 274 | padding: 5rem 0; 275 | } 276 | .debit .debit_details { 277 | text-align: center; 278 | } 279 | .debit .debit_details h1 { 280 | font-size: 2.5rem; 281 | color: #261563; 282 | margin-bottom: 2rem; 283 | } 284 | .debit .debit_details h1 span { 285 | color: #1dc99b; 286 | } 287 | .debit .debit_details p { 288 | font-size: 1.3rem; 289 | line-height: 1.5; 290 | color: #364253; 291 | } 292 | 293 | .users { 294 | background-color: #ffffff; 295 | padding: 5rem 0rem; 296 | } 297 | .users .user_details { 298 | text-align: center; 299 | } 300 | .users .user_details h1 { 301 | font-weight: bold; 302 | color: #261563; 303 | margin-bottom: 2rem; 304 | } 305 | .users .user_details a { 306 | color: #1dc99b; 307 | font-weight: bold; 308 | font-size: 1.2rem; 309 | } 310 | 311 | .apps { 312 | background-color: #f3fcfa; 313 | margin: 5rem 0rem; 314 | padding-top: 5rem; 315 | } 316 | .apps .apps_container { 317 | align-items: center; 318 | } 319 | .apps .apps_container .apps_details h2 { 320 | color: #261563; 321 | margin-bottom: 1rem; 322 | line-height: 1.2; 323 | } 324 | .apps .apps_container .apps_details .flex { 325 | row-gap: 1rem; 326 | } 327 | .apps .apps_container .apps_details .flex img { 328 | width: 100px; 329 | margin-right: 1.5rem; 330 | border-radius: 10px; 331 | box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.5); 332 | } 333 | .apps .apps_container .apps_details .flex p { 334 | font-size: 1rem; 335 | line-height: 1.5; 336 | color: #364253; 337 | } 338 | .apps .apps_container .apps_details .flex .inner_subtitle { 339 | margin-top: 1rem; 340 | } 341 | .apps .apps_container .apps_details .flex .inner_subtitle a { 342 | color: #1dc99b; 343 | } 344 | 345 | .testimonial { 346 | background-color: #f3fcfa; 347 | padding: 5rem 0rem; 348 | } 349 | .testimonial h1 { 350 | color: #261563; 351 | line-height: 1.8; 352 | } 353 | .testimonial h4 { 354 | color: #261563; 355 | font-size: 1.5rem; 356 | } 357 | .testimonial .slide { 358 | margin-top: 4rem; 359 | overflow: auto; 360 | scroll-snap-type: x mandatory; 361 | } 362 | .testimonial .slide img { 363 | width: 350px; 364 | flex-shrink: 0; 365 | scroll-snap-align: start; 366 | } 367 | .testimonial ::-webkit-scrollbar { 368 | border-radius: 0.5rem; 369 | scrollbar-width: 1rem; 370 | } 371 | .testimonial ::-webkit-scrollbar-thumb { 372 | background-color: #1dc99b; 373 | border-radius: 0.5rem; 374 | } 375 | 376 | .security { 377 | margin: 10rem 0rem; 378 | background-color: #ffffff; 379 | } 380 | .security h1 { 381 | color: #261563; 382 | margin-bottom: 2rem; 383 | } 384 | .security .security_container { 385 | align-items: center; 386 | gap: 5rem; 387 | } 388 | .security .security_container .inner_wrapper { 389 | background-color: #f3fcfa; 390 | margin-top: 3rem; 391 | border-radius: 15px; 392 | padding: 2rem 2rem; 393 | } 394 | .security .security_container .inner_wrapper h4 { 395 | color: #261563; 396 | margin-bottom: 1rem; 397 | font-size: 1.2rem; 398 | font-weight: bold; 399 | } 400 | .security .security_container .inner_wrapper p { 401 | color: #364253; 402 | line-height: 2; 403 | } 404 | 405 | .help { 406 | padding: 5rem 0rem; 407 | background-color: #ffffff; 408 | } 409 | .help .help_container { 410 | position: relative; 411 | background-color: #261563; 412 | padding: 4rem 2rem; 413 | border-radius: 15px; 414 | } 415 | .help .help_container .help_details { 416 | color: #ffffff; 417 | } 418 | .help .help_container .help_details h2 { 419 | font-size: 1.5rem; 420 | margin-bottom: 1.5rem; 421 | font-family: Arial, Helvetica, sans-serif; 422 | } 423 | .help .help_container .help_details .help_sub, 424 | .help .help_container .help_details .contact_sub { 425 | font-size: 0.8rem; 426 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 427 | line-height: 1.5; 428 | } 429 | .help .help_container .help_details .help_sub i, 430 | .help .help_container .help_details .contact_sub i { 431 | margin-right: 0.5rem; 432 | } 433 | .help .help_container .help_details .contact_links { 434 | margin-top: 2rem; 435 | } 436 | .help .help_container .help_details .contact_links .contact_sub a { 437 | color: #1dc99b; 438 | text-decoration: underline; 439 | } 440 | .help .help_container img { 441 | width: 250px; 442 | position: absolute; 443 | left: 65%; 444 | top: -3rem; 445 | } 446 | 447 | .footer { 448 | background-color: #1dc99b; 449 | margin-top: 5rem; 450 | padding: 4rem 0; 451 | } 452 | .footer .footer_container { 453 | grid-template-columns: repeat(4, 1fr); 454 | gap: 4rem; 455 | } 456 | .footer .footer_container .footer_title { 457 | color: #ffffff; 458 | font-family: Arial, Helvetica, sans-serif; 459 | } 460 | .footer .footer_container .footer_links { 461 | display: block; 462 | margin-top: 2.5rem; 463 | } 464 | .footer .footer_container .footer_links .footer_sub { 465 | padding-top: 1rem; 466 | } 467 | .footer .footer_container .footer_links .footer_sub .footer_link { 468 | color: #ffffff; 469 | font-size: 0.8rem; 470 | } 471 | .footer .footer_container .footer_links address { 472 | color: #ffffff; 473 | font-size: 0.8rem; 474 | } 475 | 476 | .footer_info { 477 | background-color: #d2f5ec; 478 | margin-top: 4rem; 479 | padding: 1.5rem 0; 480 | } 481 | .footer_info .footer_inner { 482 | justify-content: space-between; 483 | } 484 | .footer_info .footer_inner .copywrite { 485 | color: #261563; 486 | font-size: 0.8rem; 487 | } 488 | .footer_info .footer_inner .social_links i { 489 | font-size: 1rem; 490 | padding: 0.5rem; 491 | color: #261563; 492 | border-radius: 50%; 493 | background-color: #c0dede; 494 | } 495 | 496 | .scroll_up i { 497 | font-size: 1rem; 498 | position: fixed; 499 | bottom: 2rem; 500 | color: #ffffff; 501 | right: 1rem; 502 | padding: 0.8rem; 503 | background-color: #1dc99b; 504 | border-radius: 50%; 505 | display: none; 506 | } 507 | 508 | .scroll_up.show { 509 | display: block; 510 | } 511 | 512 | @media (max-width: 680px) { 513 | .grid { 514 | display: grid; 515 | grid-template-columns: 1fr; 516 | } 517 | .hidden { 518 | display: none; 519 | } 520 | .container { 521 | max-width: 980px; 522 | margin: 0 auto; 523 | padding: 0 2rem; 524 | } 525 | .nav_menu { 526 | position: fixed; 527 | background-color: #ffffff; 528 | top: 100%; 529 | left: 0; 530 | width: 100%; 531 | padding: 5.5rem 0 3rem; 532 | transition: 0.4s; 533 | text-align: left; 534 | z-index: 1000; 535 | height: 100%; 536 | } 537 | .nav_menu .nav_items { 538 | display: flex; 539 | flex-direction: column; 540 | align-items: center; 541 | row-gap: 1rem; 542 | } 543 | .nav_menu .nav_link { 544 | font-size: 1.5rem; 545 | } 546 | .nav .container .hamburger { 547 | display: block; 548 | margin-right: 5rem; 549 | } 550 | .hero .hero_content { 551 | grid-template-columns: 1fr; 552 | gap: 1rem; 553 | } 554 | .hero .hero_content .header_img { 555 | margin-top: 1rem; 556 | width: 300px; 557 | position: absolute; 558 | top: 0rem; 559 | left: 0; 560 | } 561 | .hero .hero_content .hero_detail { 562 | margin-top: 25rem; 563 | } 564 | .hero .hero_content .hero_detail .hero_text { 565 | text-align: center; 566 | } 567 | .hero .hero_content .hero_detail .hero_subtitle { 568 | font-size: 1rem; 569 | text-align: center; 570 | } 571 | .hero .frame { 572 | width: 250px; 573 | } 574 | .service { 575 | padding-top: 6rem; 576 | } 577 | .service .service_title { 578 | text-align: center; 579 | font-size: 3rem; 580 | } 581 | .service .service_container { 582 | gap: 2rem; 583 | } 584 | .service .service_container h3 { 585 | font-size: 2rem; 586 | text-align: center; 587 | } 588 | .service .service_container p { 589 | text-align: center; 590 | } 591 | .users { 592 | padding: 4rem 0; 593 | } 594 | .apps { 595 | padding: 4rem 0; 596 | } 597 | .apps h2 { 598 | text-align: center; 599 | font-size: 2rem; 600 | margin-bottom: 2rem; 601 | } 602 | .security { 603 | margin: 10rem 0; 604 | } 605 | .security h1 { 606 | text-align: center; 607 | } 608 | .security h4 { 609 | text-align: center; 610 | } 611 | .security p { 612 | text-align: center; 613 | } 614 | .help { 615 | padding: 5rem 0; 616 | } 617 | .help .help_details { 618 | text-align: center; 619 | } 620 | .help .help_details h2 { 621 | font-size: 3rem; 622 | } 623 | .footer .footer_container { 624 | grid-template-columns: repeat(2, 1fr); 625 | } 626 | .footer_inner { 627 | flex-direction: column; 628 | gap: 1rem; 629 | } 630 | }/*# sourceMappingURL=main.css.map */ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OPAY (PAYCOM) WEBSITE CLONE 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 88 | 89 |
90 |
91 |
92 |
93 | 94 |
95 |

We are Beyond
Banking

96 |

OPay gives you the freedom to get more. 97 | Our solutions make payments easier, transfers free, savings more rewarding and gives you cashback on airtime and data top-ups. With 100% network uptime, you can make payments in seconds without transaction failure. Enjoy a better life with OPay. 98 |

99 |
100 |
101 | 102 |
103 | 104 | 105 |
106 |
107 | 108 |
109 |
110 |
111 | 112 |
113 |
114 |
115 |
116 |
117 | 118 | 119 |

Bank Transfer

120 |

Fast transfers with 100% success rate to all banks across Nigeria, anytime for free

121 |
122 |
123 | 124 | 132 |
133 |
134 |
135 | 136 |
137 |
138 |

Our Service

139 |
140 | 141 |
142 |

Fund Your Account,
make transfers, pay
bills

143 |

live life on your own terms! add money to your opay wallet amd transfer to other bank accounts for free. enjoy bonuses on airtime & data top-ups and fast bill payments at no extra charge

144 |
145 |
146 |

flexible savings

147 |

need a better way to save? enjoy up 75% anual interest paid early when you save with opay and agent without paying withdrawal charges.

148 |
149 | 150 |
151 |
152 |
153 | 154 | 155 |
156 |
157 |
158 |

OPay Debit Cards, Your Passport To The World

159 |

Get your OPay Debit card at select OPay agent stores instantly or apply on the OPay App and enjoy 10 free ATM withdrawals monthly and zero card maintenance fees. The OPay debit card is accepted at Any ATM, POS or Web.

160 |
161 | 162 |
163 |
164 | 165 |
166 |
167 |
168 |

Join 35+ million users who already trust us with their money

169 | Get started 170 |
171 |
172 |
173 | 174 | 175 |
176 |
177 |
178 | 179 |
180 |

Download the app and start your
journey to stress-free payments now

181 |
182 | 183 |
184 |

Use your phones camera to scan and download the OPay app

185 |

Available on iOS and Android

186 |
187 |
188 |
189 |
190 |
191 |
192 | 193 | 194 |
195 |
196 |

No transaction failure on OPay.

197 |

Here's what our customers think

198 |
199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 |
209 |
210 |
211 | 212 |
213 |
214 |

Your Security and
Privacy is our priority

215 |
216 |
217 |
218 |

Advanced Fraud Detection

219 |

Your data is stored and encrypted using strong cryptography. We scan our systems daily against security threats.

220 |
221 |
222 |

Safe Transactions

223 |

We are compliant with PCI DSS. Your transactions are always encrypted and secured.

224 |
225 |
226 | 227 |
228 |
229 |
230 | 231 |
232 |
233 |
234 |
235 |

We are here to help!

236 |

Chat with us via our in-app live chat or send us a message on our official social media pages. If you require further assistance, contact us via the following channels:

237 |
238 |

0700888328 OR 01888328(APP & Card queries)

239 |

0700888328 OR 01888328(POS Business queries)

240 |

customerservice@opay-inc.com

241 |
242 |
243 | 244 |
245 |
246 |
247 |
248 | 249 | 291 | 292 |
293 |
294 |
295 | 296 |

© 2023 OPay Digital Services Limited.

297 | 302 |
303 |
304 |
305 | 306 | 309 | 310 | 311 | 317 | 318 | --------------------------------------------------------------------------------