diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/apple.svg b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/apple.svg new file mode 100644 index 00000000..e60c6c30 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/apple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/bank.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/bank.png new file mode 100644 index 00000000..d72e79d6 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/bank.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/billing-software.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/billing-software.png new file mode 100644 index 00000000..dd8fcf1f Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/billing-software.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/book-gas.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/book-gas.png new file mode 100644 index 00000000..17c837c4 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/book-gas.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/bus.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/bus.png new file mode 100644 index 00000000..f9a85a8c Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/bus.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/business-khata.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/business-khata.png new file mode 100644 index 00000000..03b8405e Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/business-khata.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/card.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/card.png new file mode 100644 index 00000000..40049eee Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/card.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/catalog.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/catalog.png new file mode 100644 index 00000000..bb725a15 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/catalog.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/etf.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/etf.png new file mode 100644 index 00000000..6c2012d1 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/etf.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/flight.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/flight.png new file mode 100644 index 00000000..525b3ed8 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/flight.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/gold.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/gold.png new file mode 100644 index 00000000..ed974f5e Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/gold.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/graph.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/graph.png new file mode 100644 index 00000000..53631f42 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/graph.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/insurance-broking.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/insurance-broking.png new file mode 100644 index 00000000..15a20501 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/insurance-broking.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/insurance.jpeg b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/insurance.jpeg new file mode 100644 index 00000000..97e99147 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/insurance.jpeg differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/international.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/international.png new file mode 100644 index 00000000..9fab5cfb Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/international.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/invest.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/invest.png new file mode 100644 index 00000000..2f7788b6 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/invest.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/ipo.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/ipo.png new file mode 100644 index 00000000..dea9ae77 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/ipo.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/loan.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/loan.png new file mode 100644 index 00000000..5846772a Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/loan.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/logo.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/logo.png new file mode 100644 index 00000000..786ab79b Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/logo.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/money.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/money.png new file mode 100644 index 00000000..abc3c4b3 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/money.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/movie.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/movie.png new file mode 100644 index 00000000..983e6e2d Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/movie.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/mutual-fund.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/mutual-fund.png new file mode 100644 index 00000000..7f7c13f1 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/mutual-fund.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/online-payments.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/online-payments.png new file mode 100644 index 00000000..e6225950 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/online-payments.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/pay-bill.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/pay-bill.png new file mode 100644 index 00000000..70f4087f Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/pay-bill.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/pay-credit.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/pay-credit.png new file mode 100644 index 00000000..edf48327 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/pay-credit.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/pay-rent.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/pay-rent.png new file mode 100644 index 00000000..8af4e131 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/pay-rent.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-add.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-add.png new file mode 100644 index 00000000..5bcaa244 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-add.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-bank.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-bank.png new file mode 100644 index 00000000..ce89d8fc Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-bank.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-bussiness.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-bussiness.png new file mode 100644 index 00000000..ea7513f1 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-bussiness.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-hdfc.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-hdfc.png new file mode 100644 index 00000000..618648da Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-hdfc.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-money.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-money.png new file mode 100644 index 00000000..ac5112ed Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-money.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-postpaid.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-postpaid.png new file mode 100644 index 00000000..8d9e9284 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-postpaid.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-upi.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-upi.png new file mode 100644 index 00000000..d82c914e Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-upi.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-wallet.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-wallet.png new file mode 100644 index 00000000..d82f944e Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm-wallet.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm_logo.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm_logo.png new file mode 100644 index 00000000..8b06e8e5 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/paytm_logo.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/personal-loan.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/personal-loan.png new file mode 100644 index 00000000..63962f94 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/personal-loan.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/play.svg b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/play.svg new file mode 100644 index 00000000..34f5d6cb --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/postpaid.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/postpaid.png new file mode 100644 index 00000000..485f36a8 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/postpaid.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/recharge-dth.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/recharge-dth.png new file mode 100644 index 00000000..70f4087f Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/recharge-dth.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/recharge.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/recharge.png new file mode 100644 index 00000000..ccb6843d Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/recharge.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/right-arrow-blue.svg b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/right-arrow-blue.svg new file mode 100644 index 00000000..5c2da98f --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/right-arrow-blue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/right-arrow.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/right-arrow.png new file mode 100644 index 00000000..0d15943b Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/right-arrow.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/right-arrow.svg b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/right-arrow.svg new file mode 100644 index 00000000..77945081 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/right-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/sbi-card.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/sbi-card.png new file mode 100644 index 00000000..810195a9 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/sbi-card.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/sbi.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/sbi.png new file mode 100644 index 00000000..b5d1090a Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/sbi.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/scoter.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/scoter.png new file mode 100644 index 00000000..7305d0fa Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/scoter.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/services.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/services.png new file mode 100644 index 00000000..836af8cc Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/services.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/shop-payments.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/shop-payments.png new file mode 100644 index 00000000..01e6406d Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/shop-payments.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/stocks.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/stocks.png new file mode 100644 index 00000000..0bc4538c Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/stocks.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/train.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/train.png new file mode 100644 index 00000000..ce6741c0 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/train.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/upi.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/upi.png new file mode 100644 index 00000000..8aa182a4 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/upi.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/user-2.svg b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/user-2.svg new file mode 100644 index 00000000..2de1db46 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/user-2.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/user-default.svg b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/user-default.svg new file mode 100644 index 00000000..5469d303 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/user-default.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/assets/wallet.png b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/wallet.png new file mode 100644 index 00000000..6e7f4634 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/assets/wallet.png differ diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/common.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/common.css new file mode 100644 index 00000000..fd216bbf --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/common.css @@ -0,0 +1,93 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"); + +:root { + --header-height: 92px; + --white: #fff; + --grey-light: #f5f7fa; + --grey: #cfcfcf; + + --black: #000; + --blue-dark: #002970; + --blue: #0d3e80; + --light-blue: #00baf2; + --light-blue-2: #00afe3; + --radius: 4px; + --radius-2: 20px; + --shadow: 0 5px 20px rgb(0 41 112 / 10%); + + --width: 1260px; + --width-2: 1170px; +} + +* { + margin: 0; + padding: 0; + list-style-type: none; + box-sizing: border-box; + font-family: "Inter", sans-serif; +} + +html, +body { + font-size: 62.5%; +} + +.download-btn { + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + font-weight: 500; + height: 4.4rem; + padding: 0 2.4rem; + background-color: var(--black); + color: var(--white); + border: 1px solid var(--black); + border-radius: 50px; + width: max-content; + cursor: pointer; + transition: background-color 0.2s ease, color 0.2s ease; +} + +.download-btn:hover { + background-color: var(--white); + color: var(--black); +} + +.download-btn a { + display: inline-flex; + cursor: pointer; +} + +.download-btn a svg { + margin-left: 1.2rem; + fill: var(--white); + transition: fill 0.2s ease; +} + +.download-btn:hover a svg { + fill: var(--black); +} + +.secondary-btn { + display: flex; + align-items: center; + color: var(--white); + font-size: 1.7rem; + font-weight: 500; + width: fit-content; + padding: 1.6rem 2.4rem; + border-radius: 50px; + cursor: pointer; + background-color: var(--blue-dark); + transition: background-color 0.2s ease; +} + +.secondary-btn:hover { + background-color: var(--light-blue); +} + +.secondary-btn img { + margin-left: 1.1rem; + height: 1.8rem; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/header.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/header.css new file mode 100644 index 00000000..554695a0 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/header.css @@ -0,0 +1,82 @@ +.header { + display: flex; + align-items: center; + height: 92px; + background-color: var(--white); + position: sticky; + top: 0; + width: 100%; + z-index: 10; + + box-shadow: var(--shadow); +} + +.header-container { + display: flex; + align-items: center; + width: 90%; + margin: auto; +} + +.header-logo { + cursor: pointer; +} + +.header-logo img { + width: 180px; +} + +.header-list { + display: flex; + align-items: center; + font-size: 1.4rem; + font-weight: 400; + margin: auto; +} + +.header-list-item { + margin-right: 0.5rem; + padding: 0.3rem; + transition: background-color 0.2s ease; +} + +.header-list-item:hover { + background-color: var(--grey-light); + border-radius: var(--radius); +} + +.header-list-item a { + padding: 1.2rem; + font-size: 1.7rem; + font-weight: 600; + color: var(--black); + text-decoration: none; + display: block; + cursor: pointer; +} + +.header-btn { + display: flex; + align-items: center; + background-color: var(--light-blue); + padding: 2px 2px 2px 20px; + border: none; + min-width: 11rem; + justify-content: flex-end; + font-size: 1.5rem; + font-weight: 600; + color: var(--white); + border-radius: var(--radius-2); + cursor: pointer; +} + +.header-btn:hover { + background-color: var(--blue); +} + +.header-btn img { + margin-left: 0.9rem; + border-radius: 50%; + width: 34px; + height: 34px; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/index.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/index.css new file mode 100644 index 00000000..ce7db758 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/index.css @@ -0,0 +1,16 @@ +@import "./common.css"; +@import "./header.css"; +@import "./section-1.css"; +@import "./section-2.css"; +@import "./section-3.css"; +@import "./section-4.css"; +@import "./section-5.css"; +@import "./section-6.css"; +@import "./section-7.css"; +@import "./section-8.css"; +@import "./section-9.css"; +@import "./section-10.css"; +@import "./section-11.css"; +@import "./section-12.css"; +@import "./section-13.css"; +@import "./section-14.css"; diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-1.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-1.css new file mode 100644 index 00000000..ade3f6ae --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-1.css @@ -0,0 +1,37 @@ +.section-1 { + width: var(--width); + margin: auto; + padding: 12rem 0; +} + +.section-1-logo { + margin-bottom: 4.8rem; + height: 8rem; +} + +.section-1-logo img { + max-width: 100%; + max-height: 100%; + box-shadow: var(--shadow); +} + +.section-1 h1 { + font-size: 5.2rem; + font-weight: 700; + line-height: 6.5rem; +} + +.section-1 p { + font-size: 2rem; + margin-bottom: 4rem; + font-weight: 500; + line-height: 3rem; + padding-top: 1rem; +} + +.section-1-content-img { + position: absolute; + width: 52.8rem; + right: 0; + top: 25rem; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-10.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-10.css new file mode 100644 index 00000000..08d8621f --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-10.css @@ -0,0 +1,43 @@ +.section-10 { + background-color: var(--grey-light); +} + +.section-10-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8rem 0; + width: var(--width-2); + margin: auto; +} + +.section-10-left { + width: 433px; +} + +.section-10-left img { + max-width: 100%; +} + +.section-10-right { + width: 45%; +} + +.section-10-right-loan { + width: 175px; +} + +.section-10-right h1 { + margin-top: 4.8rem; + width: 390px; + font-size: 3.6rem; + font-weight: 700; + line-height: 4.6rem; +} + +.section-10-right p { + padding: 2.4rem 0 3rem; + font-size: 1.7rem; + font-weight: 500; + line-height: 2.6rem; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-11.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-11.css new file mode 100644 index 00000000..0c7f72b0 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-11.css @@ -0,0 +1,52 @@ +.section-11 { + padding-top: 12rem; + padding-bottom: 4.8rem; +} + +.section-11 h1 { + width: var(--width-2); + margin: auto; + margin-bottom: 3.5rem; + font-size: 4.8rem; + color: var(--black); + font-weight: 700; + line-height: 5rem; +} + +.section-11-wrapper { + width: var(--width-2); + margin: auto; + display: flex; + align-items: center; + justify-content: space-between; + padding: 8rem 0 8rem 11.5rem; + background-color: var(--grey-light); + border-radius: 10px; +} + +.section-11-left { + width: 45%; +} + +.section-11-left h2 { + margin-top: 4.8rem; + width: 390px; + font-size: 3.6rem; + font-weight: 700; + line-height: 4.6rem; +} + +.section-11-left p { + font-size: 1.7rem; + font-weight: 500; + line-height: 2.6rem; + padding: 2.4rem 0 3rem; +} + +.section-11-right { + width: 433px; +} + +.section-11-right img { + max-width: 100%; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-12.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-12.css new file mode 100644 index 00000000..9acacf30 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-12.css @@ -0,0 +1,41 @@ +.section-12 { + padding-bottom: 4.8rem; +} + +.section-12-wrapper { + width: var(--width-2); + margin: auto; + display: flex; + align-items: center; + justify-content: space-between; + padding: 8rem 0 8rem 11.5rem; + background-color: var(--grey-light); + border-radius: 10px; +} + +.section-12-left { + width: 45%; +} + +.section-12-left h2 { + margin-top: 4.8rem; + width: 390px; + font-size: 3.6rem; + font-weight: 700; + line-height: 4.6rem; +} + +.section-12-left p { + font-size: 1.7rem; + font-weight: 500; + line-height: 2.6rem; + padding: 2.4rem 0 3rem; +} + +.section-12-right { + width: 433px; +} + +.section-12-right img { + max-width: 100%; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-13.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-13.css new file mode 100644 index 00000000..b2e81bd4 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-13.css @@ -0,0 +1,77 @@ +.section-13 { + /* margin-bottom: 500px; */ +} + +.section-13-container { + width: var(--width-2); + margin: auto; + padding: 12rem 0; +} + +.section-13 h1 { + width: 48rem; + font-size: 4rem; + font-weight: 700; + line-height: 4.8rem; + padding-bottom: 8.9rem; +} + +.section-13-cards { + display: flex; +} + +.section-13-card { + width: 21.5%; + margin-right: 7rem; +} + +.section-13-card:last-of-type { + margin-right: 0; +} + +.section-13-card img { + width: 100%; +} + +.section-13-card h2 { + font-size: 2.6rem; + font-weight: 700; + line-height: 3.2rem; + padding: 4rem 0 2rem; +} + +.section-13-card p { + font-size: 2rem; + font-weight: 500; + line-height: 3rem; + margin: 2rem 0; +} + +.section-13-card a { + display: flex; + align-items: center; + font-size: 1.5rem; + font-weight: 700; + text-decoration: none; + color: var(--black); + z-index: 2; +} + +.section-13-card a span { + background-color: var(--white); +} + +.section-13-card a img { + height: 1.5rem; + width: 1.5rem; + margin-left: -4rem; + margin-top: 0.2rem; + opacity: 0; + z-index: -2; + transition: opacity 0.5s ease, margin-left 0.4s ease; +} + +.section-13-card a:hover img { + margin-left: 0.5rem; + opacity: 1; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-14.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-14.css new file mode 100644 index 00000000..f509d8ea --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-14.css @@ -0,0 +1,117 @@ +.section-14 { + margin-bottom: 500px; +} + +.section-14-wrapper { + width: var(--width-2); + margin: auto; + margin-top: 12rem; + padding: 6rem 0 6rem 6rem; + margin-bottom: 3.3rem; + display: flex; +} + +.section-14-top { + display: flex; +} + +.section-14-top-left { + display: flex; + flex-direction: column; + justify-content: space-between; + margin-right: 4rem; + width: 20rem; +} + +.section-14-top-right-wrapper { + position: relative; + + overflow: visible; + z-index: 0; +} + +.section-14-top-right { + display: flex; + width: 87rem; + overflow: scroll; + white-space: nowrap; +} + +.section-14-top-right { + -ms-overflow-style: none; /* Internet Explorer 10+ */ + scrollbar-width: none; /* Firefox */ +} +.section-14-top-right::-webkit-scrollbar { + display: none; /* Safari and Chrome */ +} + +.section-14-top-right-cards { + display: flex; +} + +.section-14-top-right-card { + display: flex; + align-items: center; + flex-direction: column; + border-radius: 10px; + background-color: var(--light-blue); + opacity: 0.7; + padding: 5px 0; + white-space: normal; + text-align: center; + cursor: pointer; + width: 15.5rem; + min-width: 15.5rem; + height: 23rem; + min-height: 23rem; + margin-right: 3.6rem; +} + +.section-14-top-right-card div { + width: 14.5rem; + height: 15.8rem; + border-radius: 6px; + overflow: hidden; + z-index: 1; +} + +.section-14-top-right-card div img { + width: 14.5rem; + height: 15.8rem; +} + +.section-14-top-right-card span { + font-size: 1.7rem; + font-weight: 700; + color: var(--white); + width: 11.4rem; + height: 7.2rem; + padding: 1.6rem 0; + display: block; + white-space: normal; +} + +.section-14-controls { + display: flex; + align-items: center; + justify-content: center; + height: 3rem; + margin: auto; + overflow: visible; + position: absolute; + top: 0; + bottom: 0; + z-index: 10; + border-radius: 50%; + background-color: var(--white); + border: 3px solid var(--light-blue); +} + +.section-14-controls.left { + transform: rotate(180deg); + left: -1.5rem; +} + +.section-14-controls.right { + right: -1.5rem; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-2.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-2.css new file mode 100644 index 00000000..948298d3 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-2.css @@ -0,0 +1,100 @@ +.section-2 { + /* margin-bottom: 500px; */ +} + +.section-2-top, +.section-2-bottom { + display: flex; + flex-direction: column; + background-color: var(--light-blue); + padding: 6.5rem 0; +} + +.section-2-wrapper { + width: var(--width); + margin: auto; +} + +.section-2-top h1, +.section-2-bottom h1 { + font-size: 3.6rem; + font-weight: 700; + color: var(--white); +} + +.section-2-top-list, +.section-2-bottom-list { + display: flex; + justify-content: baseline; + width: 100%; + margin-top: 2.5rem; +} + +.section-2-top-list-item, +.section-2-bottom-list-item { + display: flex; + flex-direction: column; + margin-right: 3.2rem; + border-radius: 12px; + padding: 1.6rem 1.1rem 1.6rem 1.6rem; + color: var(--white); + font-size: 1.7rem; + font-weight: 500; + cursor: pointer; + line-height: 2.5rem; + flex: 12.5%; + transition: background-color 0.2s ease; +} + +.section-2-top-list-item:last-of-type, +.section-2-bottom-list-item:last-of-type { + margin-right: 0; +} + +.section-2-top-list-item:hover { + background-color: var(--light-blue-2); +} + +.section-2-top-list-item img, +.section-2-bottom-list-item img { + width: 6.4rem; + margin-bottom: 1.7rem; +} + +.section-2-top-list-item div, +.section-2-bottom-list-item div { + display: flex; + flex-direction: column; +} + +.section-2-top-list-item div span { + font-size: 1.5rem; + font-weight: 700; +} + +.section-2-top-list-item div span:nth-of-type(2), +.section-2-bottom-list-item div span:nth-of-type(2) { + display: flex; + align-items: center; +} + +.section-2-top-list-item div span:nth-of-type(2) img, +.section-2-bottom-list-item div span:nth-of-type(2) img { + width: 1.5rem; + height: 1.5rem; + margin: 0; + margin-left: 0.6rem; +} + +.section-2-bottom { + background-color: var(--blue); +} + +.section-2-bottom-list-item:hover { + background-color: var(--blue-dark); +} + +.section-2-bottom-list-item div span { + font-size: 1.8rem; + font-weight: 700; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-3.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-3.css new file mode 100644 index 00000000..a708d8c7 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-3.css @@ -0,0 +1,74 @@ +.section-3 { + padding-top: 12rem; + display: flex; + flex-direction: column; + background-color: var(--grey-light); + padding-bottom: 4.8rem; + /* padding: 8rem 5rem 8rem 11.5rem; */ +} + +.section-3 h1 { + width: var(--width-2); + margin: 0 auto; + margin-bottom: 3.5rem; + font-size: 4.8rem; + font-weight: 700; + color: var(--black); + line-height: 5rem; +} + +.section-3-wallet { + width: var(--width-2); + margin: auto; + border-radius: 1rem; + background-color: var(--white); + padding: 8rem 5rem 8rem 11.5rem; + display: flex; + justify-content: space-between; +} + +.section-3-wallet-left { + width: 45%; + font-size: 1.6rem; + font-weight: 700; +} + +.section-3-wallet-left-header { + display: flex; + align-items: center; +} +.section-3-wallet-left-header img { + height: 7.7rem; + padding-right: 1.2rem; +} + +.section-3-wallet-left-header div { + display: flex; + flex-direction: column; +} + +.section-3-wallet-left-body { + margin-top: 4.8rem; +} + +.section-3-wallet-left-body h2 { + font-size: 3.6rem; + font-weight: 700; + line-height: 4.6rem; + width: 39rem; +} + +.section-3-wallet-left-body p { + font-size: 1.7rem; + font-weight: 500; + line-height: 2.6rem; + padding: 2.4rem 0 3rem; +} + +.section-3-wallet-right { + width: 55%; +} + +.section-3-wallet-right img { + width: 53.9rem; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-4.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-4.css new file mode 100644 index 00000000..34a9a0d9 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-4.css @@ -0,0 +1,73 @@ +.section-4 { + display: flex; + flex-direction: column; + background-color: var(--grey-light); + padding-bottom: 4.8rem; + /* padding: 8rem 5rem 8rem 11.5rem; */ +} + +.section-4 h1 { + width: var(--width-2); + margin: 0 auto; + margin-bottom: 3.5rem; + font-size: 4.8rem; + font-weight: 700; + color: var(--black); + line-height: 5rem; +} + +.section-4-upi { + width: var(--width-2); + margin: auto; + border-radius: 1rem; + background-color: var(--white); + padding: 8rem 5rem 8rem 11.5rem; + display: flex; + justify-content: space-between; +} + +.section-4-upi-left { + width: 45%; + font-size: 1.6rem; + font-weight: 700; +} + +.section-4-upi-left-header { + display: flex; + align-items: center; +} +.section-4-upi-left-header img { + height: 7.7rem; + padding-right: 1.2rem; +} + +.section-4-upi-left-header div { + display: flex; + flex-direction: column; +} + +.section-4-upi-left-body { + margin-top: 4.8rem; +} + +.section-4-upi-left-body h2 { + font-size: 3.6rem; + font-weight: 700; + line-height: 4.6rem; + width: 39rem; +} + +.section-4-upi-left-body p { + font-size: 1.7rem; + font-weight: 500; + line-height: 2.6rem; + padding: 2.4rem 0 3rem; +} + +.section-4-upi-right { + width: 55%; +} + +.section-4-upi-right img { + width: 53.9rem; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-5.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-5.css new file mode 100644 index 00000000..6afba361 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-5.css @@ -0,0 +1,73 @@ +.section-5 { + display: flex; + flex-direction: column; + background-color: var(--grey-light); + padding-bottom: 4.8rem; + /* padding: 8rem 5rem 8rem 11.5rem; */ +} + +.section-5 h1 { + width: var(--width-2); + margin: 0 auto; + margin-bottom: 3.5rem; + font-size: 4.8rem; + font-weight: 700; + color: var(--black); + line-height: 5rem; +} + +.section-5-postpaid { + width: var(--width-2); + margin: auto; + border-radius: 1rem; + background-color: var(--white); + padding: 8rem 5rem 8rem 11.5rem; + display: flex; + justify-content: space-between; +} + +.section-5-postpaid-left { + width: 45%; + font-size: 1.6rem; + font-weight: 700; +} + +.section-5-postpaid-left-header { + display: flex; + align-items: center; +} +.section-5-postpaid-left-header img { + height: 7.7rem; + padding-right: 1.2rem; +} + +.section-5-postpaid-left-header div { + display: flex; + flex-direction: column; +} + +.section-5-postpaid-left-body { + margin-top: 4.8rem; +} + +.section-5-postpaid-left-body h2 { + font-size: 3.6rem; + font-weight: 700; + line-height: 4.6rem; + width: 39rem; +} + +.section-5-postpaid-left-body p { + font-size: 1.7rem; + font-weight: 500; + line-height: 2.6rem; + padding: 2.4rem 0 3rem; +} + +.section-5-postpaid-right { + /* width: 55%; */ +} + +.section-5-postpaid-right img { + width: 433px; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-6.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-6.css new file mode 100644 index 00000000..e8e12e47 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-6.css @@ -0,0 +1,60 @@ +.section-6 { + background-color: var(--grey-light); + padding-bottom: 13rem; +} + +.section-6-container { + display: flex; + width: var(--width-2); + margin: 0 auto; +} + +.section-6-child { + position: relative; + width: 561px; + height: 700px; + background-color: var(--white); + border-radius: 16px; + padding: 7rem 6.4rem 0; + cursor: pointer; +} + +.section-6-child:first-of-type { + margin-right: 4.8rem; +} + +.section-6-child-bank-1, +.section-6-child-bank-2 { + height: 7.5rem; + display: flex; + align-items: flex-end; +} + +.section-6-child-bank-1 img { + height: 7.7rem; +} + +.section-6-child-bank-2 img { + height: 2rem; +} + +.section-6-child h1 { + font-size: 4rem; + font-weight: 700; + padding-top: 2.8rem; +} + +.section-6-child p { + font-size: 2rem; + font-weight: 500; + margin: 2rem 0; + line-height: 3rem; +} + +.section-6-child-bank-card { + height: 296px; + transform: translate(-50%, 2%); + position: absolute; + bottom: 6px; + left: 50%; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-7.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-7.css new file mode 100644 index 00000000..9b60c91c --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-7.css @@ -0,0 +1,59 @@ +.section-7 { + /* margin-bottom: 500px; */ +} + +.section-7 h1 { + font-size: 4.8rem; + font-weight: 700; + line-height: 5rem; + color: var(--black); + width: var(--width-2); + margin: 0 auto 3.5rem; + padding-top: 12rem; +} + +.section-7-container { + width: var(--width-2); + margin: auto; + padding-bottom: 7.2rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.section-7-left { + width: 40%; + font-size: 1.6rem; + font-weight: 700; +} + +.section-7-left-bank-logo { + width: 212px; + padding-bottom: 1.2rem; +} + +.section-7-left h2 { + font-size: 4rem; + font-weight: 700; + line-height: 50px; + margin-top: 4.8rem; +} + +.section-7-left p { + font-size: 2rem; + font-weight: 500; + line-height: 2.6rem; + margin-top: 2.4rem; + margin-bottom: 4.5rem; + padding-top: 1.2rem; + width: 515px; +} + +.section-7-right { + width: 452px; +} + +.section-7-right img { + max-width: 100%; + max-height: 100%; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-8.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-8.css new file mode 100644 index 00000000..e5af74c4 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-8.css @@ -0,0 +1,59 @@ +.section-8 { + position: relative; + background-color: var(--grey-light); + padding-bottom: 4.8rem; +} + +.section-8-wrapper { + position: relative; + width: var(--width-2); + margin: auto; + background-color: transparent; + display: flex; + align-items: center; + justify-content: space-between; + padding: 8rem 0; + z-index: 1; +} + +.section-8-left { + width: 472px; +} + +.section-8-left img { + max-width: 100%; +} + +.section-8-right { + width: 46%; +} + +.section-8-right-money { + height: 54px; + padding-right: 12px; +} + +.section-8-right h1 { + margin-top: 4.8rem; + font-size: 4rem; + font-weight: 700; + line-height: 4.6rem; + width: 390px; +} + +.section-8-right p { + font-size: 2rem; + font-weight: 500; + line-height: 2.6rem; + padding: 24px 0; +} + +.section-8-background { + height: 587px; + position: absolute; + top: 4.8rem; + left: 0; + bottom: 0; + width: 100%; + z-index: 0; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-9.css b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-9.css new file mode 100644 index 00000000..e98302c6 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/css/section-9.css @@ -0,0 +1,43 @@ +.section-9 { + /* margin-bottom: 500px; */ +} + +.section-9-wrapper { + width: var(--width-2); + margin: auto; + display: flex; + align-items: center; + justify-content: space-between; + padding: 8rem 0; +} + +.section-9-left { + width: 45%; +} + +.section-9-left-insurance { + width: 175px; +} + +.section-9-left h1 { + margin-top: 4.8rem; + font-size: 4rem; + font-weight: 700; + line-height: 4.6rem; + width: 470px; +} + +.section-9-left p { + font-size: 2rem; + font-weight: 500; + line-height: 2.6rem; + padding: 2.4rem 0 3rem; +} + +.section-9-right { + width: 433px; +} + +.section-9-right img { + max-width: 100%; +} diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/index.html b/Vanilla-JS-Projects/Basic/Paytm Clone/index.html new file mode 100644 index 00000000..a02834f7 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/index.html @@ -0,0 +1,683 @@ + + + + + + + + + Paytm: Secure & Fast UPI Payments, Recharge Mobile & Pay Bills + + + +
+
+ + + + + +
+
+
+ +

+ India's Most-loved
+ Payments App +

+

+ Recharge & pay bills, book flights & movie tickets,
+ open a savings account, invest in stocks & mutual
+ funds, and do a lot more. +

+ +
+ Download Paytm App + + + + + + + + + + +
+ catalog +
+
+
+
+

Recharge & Pay Bills on Paytm.

+
    +
  • + recharge +
    + Recharge + Prepaid + Mobile + arrow-right + +
    +
  • +
  • + rent +
    + Pay + Rent + Payment + arrow-right + +
    +
  • +
  • + bill +
    + Pay + Electricity + Bill + arrow-right + +
    +
  • +
  • + dth +
    + Recharge + DTH + Connection + arrow-right + +
    +
  • +
  • + book-gas +
    + Book + Gas + Cylinder + arrow-right + +
    +
  • +
  • + credit +
    + Pay + Credit + Card Bill + arrow-right + +
    +
  • +
  • + credit +
    + All + Payment + Services + services + +
    +
  • +
+
+
+ +
+
+

Book & Buy on Paytm.

+
    +
  • + movie +
    + Movie + Tickets + arrow-right + +
    +
  • +
  • + flight +
    + Flight + Tickets + arrow-right + +
    +
  • +
  • + bus +
    + Bus + Tickets + arrow-right + +
    +
  • +
  • + train +
    + Train + Tickets + arrow-right + +
    +
  • +
  • + scoter +
    + Car & + Bikes + arrow-right + +
    +
  • +
  • + international +
    + International + + Flights + arrow-right + +
    +
  • +
  • + invest +
    + Invest + + in Stocks + arrow-right + +
    +
  • +
+
+
+
+ +
+

Paytm Payment Instruments

+
+
+
+ wallet +
+ Paytm + Wallet +
+
+
+

The Fastest Way to Pay In-store & Online.

+

+ Load up your Paytm Wallet for free and make payments in a jiffy at + over 21 million stores, websites and apps. +

+
+ Download Paytm App + + + + + + + + + + +
+
+
+ +
+ paytm-wallet +
+
+
+ +
+
+
+
+ upi +
+ UPI Money + Transfer +
+
+
+

Pay anyone directly from your bank account.

+

+ Pay anyone, everywhere. Make contactless & secure payments + in-stores or online using Paytm Wallet or Directly from your Bank + Account. Plus, send & receive money from anyone. +

+
+ Download Paytm App + + + + + + + + + + +
+
+
+
+ paytm-upi +
+
+
+ +
+
+
+
+ postpaid +
+
+

Want it? No more waiting for it.

+

+ With Paytm Postpaid, your wishlist doesn't have to be on the + waitlist. Shop for the things you want today and pay for them next + month. +

+ + Learn More + right + +
+
+
+ paytm-postpaid +
+
+
+ +
+
+
+
+ hdfc +
+ +

Unlimited Cashback Every time.

+

+ Paytm HDFC Bank Select Credit Card. A card with assured Cashback and + incredible offers. +

+ + card +
+
+
+ sbi +
+ +

India’s Most Sincere Credit Card

+

+ Paytm SBI Card SELECT - With Intelligent Features & Great Rewards + that Never Expire +

+ sbi +
+
+
+ +
+

Financial Services by Paytm

+
+
+ +

India's most sincere bank.

+

+ Paytm Payments Bank offers secure, transparent and risk-free banking + at your fingertips. With instant account opening, virtual debit card + and zero balance requirements, experience the future of banking + today. +

+ + Learn More + right + +
+
+ bank +
+
+
+
+
+
+ money +
+
+ money +

Build Long-term Wealth & Achieve your Goals.

+

+ Investing on Paytm Money is transparent, low-cost and + commission-free. Buy stocks & mutual funds that can help you create + wealth & realise your dreams. +

+ + Learn More + right + +
+
+ + graph +
+
+
+
+ insurance +

Insurance made easy.

+

+ Buying insurance does not have to be tedious, time-consuming & + confusing. Paytm Insurance removes the worry of getting insured by + making it simple, convenient & easy-to-understand. +

+ + Learn More + right + +
+
+ broking +
+
+
+
+
+
+ loan +
+
+ loan +

Get a Personal Loan in 2 Minutes.

+

+ Paytm offers India's quickest multi-purpose, hassle-free loan. It is + 100% digital, transparent and paperless. +

+ + Learn More + right + +
+
+
+ +
+

Business Services by Paytm

+
+
+

Accept payments online with ease

+

+ Grow your business with the payment gateway that powers India’s + largest brands and even the Paytm App +

+ + Learn More + right + +
+ +
+ online-payments +
+
+
+
+
+
+

In-shop payments powered by Paytm.

+

+ Millions of small & big businesses use Paytm to accept payments + anywhere any time with a wide range of solutions for all kind of + merchants +

+ + Learn More + right + +
+ +
+ online-payments +
+
+
+
+
+

Business Tools to help your business grow

+
+
+ billing-software +

POS Billing Software

+

Say Hello to Smart Retail Business Management

+ + Learn More + arrow-right + +
+
+ paytm-bussiness +

Paytm for Business App

+

Everything you need to manage your business on your phone

+ + Learn More + arrow-right + +
+
+ paytm-add +

Advertise on Paytm

+

+ Grow your business by advertising on India’s largest mobile + business +

+ + Learn More + arrow-right + +
+
+ business-khata +

Business Khata

+

Managing Khata made easy

+ + Learn More + arrow-right + +
+
+
+
+
+
+
+
+ money +

+ Get started on wealth creation journey with Zero brokerage fee & + no hidden charges. +

+ Learn More +
+
+
+ arrow +
+
+
+
+
+ stocks +
+ Invest in Stocks +
+
+
+ ipo +
+ Apply for IPO +
+
+
+ etf +
+ Invest in ETFs +
+
+
+ gold +
+ Buy Gold +
+
+
+ mutual-fund +
+ Invest in Mutual Funds +
+
+
+
+ arrow +
+
+
+
+
+ + + diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/js/script.js b/Vanilla-JS-Projects/Basic/Paytm Clone/js/script.js new file mode 100644 index 00000000..fc28d9c7 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/js/script.js @@ -0,0 +1,5 @@ +const headerBtnImg = document.getElementById("header-btn-img"); + +const onHover = (e) => (headerBtnImg.src = "../assets/user-2.svg"); + +const onLeave = (e) => (headerBtnImg.src = "../assets/user-default.svg"); diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/readme.md b/Vanilla-JS-Projects/Basic/Paytm Clone/readme.md new file mode 100644 index 00000000..1b0cda40 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Paytm Clone/readme.md @@ -0,0 +1,66 @@ + +

💥 Paytm landing page Clone 💥

+ + + +

Tech Stack Used 🎮

+ +
+ + ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) + ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) + ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +
+

A **Paytm landing page clone** replicates the design and layout of Paytm’s homepage, featuring interactive elements like banners, buttons, and navigation, using HTML, CSS, and JavaScript to create a visually similar and responsive web experience.

+
+ + + +## :zap: How to run it? 🕹️ + +
+

To run this project locally, follow these steps: + +1. Fork the repository. + +2. Clone the repository to your local computer + +3. Open the project folder in your preferred code editor, now you can view website in live. + +

+
+ + + +## :zap: Screenshots 📸 + + +![Img](screenshot.webp) + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +

Developed By Heli Detroja

+

+ + + + + + +

+ +

Happy Coding 🧑‍💻

+ +

Show some  ❤️  by  🌟  this repository!

diff --git a/Vanilla-JS-Projects/Basic/Paytm Clone/screenshot.webp b/Vanilla-JS-Projects/Basic/Paytm Clone/screenshot.webp new file mode 100644 index 00000000..50487c35 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Paytm Clone/screenshot.webp differ