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 @@ + + +
+ + + + +
+ Recharge & pay bills, book flights & movie tickets,
+ open a savings account, invest in stocks & mutual
+ funds, and do a lot more.
+
+ 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 + + ++ Paytm HDFC Bank Select Credit Card. A card with assured Cashback and + incredible offers. +
+ + ++ Paytm SBI Card SELECT - With Intelligent Features & Great Rewards + that Never Expire +
+ ++ 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 + + ++ 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 + + ++ 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 + + ++ Paytm offers India's quickest multi-purpose, hassle-free loan. It is + 100% digital, transparent and paperless. +
+ + Learn More + + ++ Grow your business with the payment gateway that powers India’s + largest brands and even the Paytm App +
+ + Learn More + + ++ 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 + + +Everything you need to manage your business on your phone
+ + Learn More + + ++ Grow your business by advertising on India’s largest mobile + business +
+ + Learn More + + ++ Get started on wealth creation journey with Zero brokerage fee & + no hidden charges. +
+ Learn More +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.
+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. + +
+