diff --git a/.eslintrc.json b/.eslintrc.json index d50577a..7050118 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,45 +1,42 @@ { - "env": { - "browser": true, - "es6": true + "env": { + "browser": true, + "es6": true + }, + "extends": ["airbnb"], + "globals": { + "Atomics": "readonly", + "SharedArrayBuffer": "readonly" + }, + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true }, - "extends": [ - "airbnb" - ], - "globals": { - "Atomics": "readonly", - "SharedArrayBuffer": "readonly" - }, - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaFeatures": { - "jsx": true - }, - "ecmaVersion": 2018, - "sourceType": "module" - }, - "plugins": [ - "react", - "@typescript-eslint" - ], - // rules: 1 is warning, 2 is error, off is ignore - "rules": { - "import/extensions": "off", - "react/jsx-filename-extension": "off", - "no-alert": 1, - "import/no-duplicates": 1, - "import/no-unresolved": "off", - "max-len": "off", - "react/prefer-stateless-function": "off", - "react/sort-comp": 1, - "jsx-a11y/label-has-associated-control": 1, - "react/destructuring-assignment": 1, - "jsx-a11y/control-has-associated-label": 1, - "jsx-a11y/click-events-have-key-events": 1, - "jsx-a11y/no-static-element-interactions": 1, - "jsx-a11y/anchor-is-valid": 1, - "react/no-did-update-set-state": "off", - "max-classes-per-file": 1, - "no-unused-vars": "off" - } -} \ No newline at end of file + "ecmaVersion": 2018, + "sourceType": "module" + }, + "plugins": ["react", "@typescript-eslint"], + // rules: 1 is warning, 2 is error, off is ignore + "rules": { + "import/extensions": "off", + "react/jsx-filename-extension": "off", + "no-alert": 1, + "import/no-duplicates": 1, + "import/no-unresolved": "off", + "max-len": "off", + "react/prefer-stateless-function": "off", + "react/sort-comp": 1, + "jsx-a11y/label-has-associated-control": 1, + "react/destructuring-assignment": 1, + "jsx-a11y/control-has-associated-label": 1, + "jsx-a11y/click-events-have-key-events": 1, + "jsx-a11y/no-static-element-interactions": 1, + "jsx-a11y/anchor-is-valid": 1, + "react/no-did-update-set-state": "off", + "max-classes-per-file": 1, + "no-unused-vars": "off", + "react/no-unused-prop-types": "off", + "react/prop-types": "off" + } +} diff --git a/package.json b/package.json index 66f3728..7ebf508 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@types/react": "^16.9.35", "@types/react-router-dom": "^5.1.5", "bootstrap": "^4.5.0", + "braintree-web": "^3.84.0", "file-loader": "5.0.2", "jquery": "^3.5.1", "jwt-decode": "^2.2.0", @@ -170,7 +171,8 @@ "s", "vh", "vw", - "deg" + "deg", + "fr" ] } } diff --git a/src/App.tsx b/src/App.tsx index 2dcf74d..ea003c2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,7 @@ import { import './static/styles/App.scss'; import { Helmet } from 'react-helmet'; import ReactGA from 'react-ga'; +import PropTypes from 'prop-types'; import Header from './components/Header'; import Error from './components/Error'; import Footer from './components/Footer'; @@ -16,7 +17,10 @@ import AboutUs from './components/AboutUs'; import ContactUs from './components/ContactUs'; import Issue from './components/Issue'; import Stories from './components/Stories'; -import AboutTeam from './components/AboutTeam'; +import Donation from './components/Donation'; +import ThankYouDonate from './components/ThankYouDonate'; +import Information from './components/Information'; +import SelectAmount from './components/SelectAmount'; window.onload = () => { ReactGA.initialize('G-H1CSQJ6BGQ'); @@ -46,12 +50,12 @@ class App extends React.Component<{}, State, {}> { } /> } /> } /> - } /> } /> - } - /> + } /> + } /> + } /> + } /> + } /> diff --git a/src/components/ContactUs.tsx b/src/components/ContactUs.tsx index e9798a0..f28181f 100644 --- a/src/components/ContactUs.tsx +++ b/src/components/ContactUs.tsx @@ -3,6 +3,7 @@ import MailchimpSubscribe from 'react-mailchimp-subscribe'; import { Helmet } from 'react-helmet'; import ReCAPTCHA from 'react-google-recaptcha'; import { withAlert } from 'react-alert'; +import PropTypes from 'prop-types'; import getServerURL from '../serverOverride'; import { reCaptchaKey } from '../configVars'; import { isValidEmail } from '../lib/Validations/Validations'; @@ -125,7 +126,8 @@ class ContactUs extends Component { if (nameValidator === 'false') { return (
- Please enter a valid name. Include first and last if subscribing to our newsletter. + Please enter a valid name. Include first and last if subscribing to + our newsletter.
); } @@ -204,7 +206,9 @@ class ContactUs extends Component { let { description, recaptchaPayload } = this.state; // if user wanted to subscribe to email list if (checked && nameValidator === 'true') { - this.setState((prevState) => ({ submitButtonListener: !prevState.submitButtonListener })); + this.setState((prevState) => ({ + submitButtonListener: !prevState.submitButtonListener, + })); } if ( emailValidator !== 'true' @@ -323,7 +327,11 @@ class ContactUs extends Component {

{/* onSubmit={this.handleSubmitWithRecaptcha} */}
- +
@@ -389,8 +397,19 @@ class ContactUs extends Component {
-
diff --git a/src/components/Donation.tsx b/src/components/Donation.tsx new file mode 100644 index 0000000..5ab95e4 --- /dev/null +++ b/src/components/Donation.tsx @@ -0,0 +1,200 @@ +import React, { useState, useEffect } from 'react'; +import braintree from 'braintree-web'; +import Form from 'react-bootstrap/Form'; +import Row from 'react-bootstrap/Row'; +import Col from 'react-bootstrap/Col'; +import { Link } from 'react-router-dom'; +import PropTypes from 'prop-types'; +import creditcardImg from '../static/images/creditcardImg.png'; +import creditcardsImg from '../static/images/credit-cardsImg.png'; +import getServerURL from '../serverOverride'; + +const Donation = () => { + const [clientToken, setClientToken] = useState(); + const [amount, setAmount] = useState(''); + const [number, setNumber] = useState(''); + const [expirationDate, setExpirationDate] = useState(''); + const [cvv, setCvv] = useState(''); + const [postalCode, setPostalCode] = useState(''); + + useEffect(() => { + fetch(`${getServerURL()}/donation-generate-client-token`, { + method: 'GET', + }).then((response) => { + if (response.status !== 200) { + console.log('Unable to fetch client token from server.'); + } else { + response.json().then((data) => { + setClientToken(data.message); + }); + } + }); + }, []); + + const payment = () => { + // Creates the braintree client + braintree.client.create( + { + authorization: clientToken, + }, + (error, client) => { + // Creates the nonce token + client.request( + { + endpoint: 'payment_methods/credit_cards', + method: 'post', + data: { + creditCard: { + number, + expirationDate, + cvv, + billingAddress: { + postalCode, + }, + }, + }, + }, + (err, response) => { + // send the nonce and the payment amount to the server. + fetch(`${getServerURL()}/donation-checkout`, { + method: 'POST', + body: JSON.stringify({ + payment_method_nonce: response.creditCards[0].nonce, + amount, + }), + }).then((resp) => { + resp.json().then((data) => { + console.log(data.status); + }); + }); + }, + ); + }, + ); + }; + + return ( +
+
+

+ {' '} + 3. Payment Details + {' '} +

+
+
+
+ +
+ + +
+ ccdonation +
Pay with Card
+
+
+ ccfor donation portal +
+ + +
+ +
+ + + Amount + setAmount(e.target.value)} + placeholder="$ " + /> + + + + + + Card Number + setNumber(e.target.value)} + placeholder="XXXX XXXX XXXX XXXX" + /> + + + + + + Expiration Date + + setExpirationDate(e.target.value)} + placeholder="MM/YY" + /> + + + CVV + setCvv(e.target.value)} + placeholder="CVV" + /> + + + + + Postal Code + setPostalCode(e.target.value)} + placeholder="Postal Code" + /> + + + + +
+ + + + + + +
+
+
+
+
+
+ ); +}; + +export default Donation; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index a561b66..c4199c8 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -97,11 +97,11 @@ class Header extends Component<{}, {}, {}> {
  • - + - +
    • diff --git a/src/components/Information.tsx b/src/components/Information.tsx new file mode 100644 index 0000000..bd47b00 --- /dev/null +++ b/src/components/Information.tsx @@ -0,0 +1,428 @@ +import React, { Component, ReactElement } from 'react'; +import { Helmet } from 'react-helmet'; +import ReCAPTCHA from 'react-google-recaptcha'; +import { withAlert } from 'react-alert'; +import { Link } from 'react-router-dom'; +import { reCaptchaKey } from '../configVars'; +import { isValidEmail } from '../lib/Validations/Validations'; + +interface State { + name: string; + email: string; + AddressNum1: string; + AddressNum2: string; + city: string; + state: string; + country: string; + PostalCode: string; + nameValidator: string; + emailValidator: string; + recaptchaPayload: string; + checked: boolean; +} + +interface Props { + alert: any; +} + +const recaptchaRef: React.RefObject = React.createRef(); + +class Information extends Component { + constructor(props: Props) { + super(props); + this.state = { + name: '', + email: '', + AddressNum1: '', + AddressNum2: '', + city: '', + state: '', + country: '', + PostalCode: '', + nameValidator: '', + emailValidator: '', + recaptchaPayload: '', + checked: true, + }; + } + + componentDidMount() { + window.scrollTo(0, 0); + } + + clearInput = (): void => { + this.setState({ + name: '', + email: '', + AddressNum1: '', + AddressNum2: '', + city: '', + state: '', + country: '', + PostalCode: '', + nameValidator: '', + emailValidator: '', + recaptchaPayload: '', + }); + this.resetRecaptcha(); + }; + + resetRecaptcha = () => { + if (recaptchaRef !== null && recaptchaRef.current !== null) { + recaptchaRef.current.reset(); + } + this.setState({ recaptchaPayload: '' }); + }; + + validateEmail = async (): Promise => { + const { email } = this.state; + if (isValidEmail(email)) { + await new Promise((resolve) => this.setState({ emailValidator: 'true' })); + } else { + await new Promise((resolve) => this.setState({ emailValidator: 'false' })); + } + }; + + emailMessage = (): ReactElement<{}> => { + const { emailValidator } = this.state; + if (emailValidator === 'true') { + return
    ; + } + if (emailValidator === 'false') { + return ( +
    + Please enter a valid email address +
    + ); + } + return
    ; + }; + + validateName = async (): Promise => { + const { name, checked } = this.state; + if (checked === true) { + const firstName = name.substr(0, name.indexOf(' ')); + const lastName = name.substr(name.indexOf(' ') + 1).trim(); + if (firstName && lastName) { + await new Promise((resolve) => this.setState({ nameValidator: 'true' })); + } else { + await new Promise((resolve) => this.setState({ nameValidator: 'false' })); + } + } else if (name !== '') { + await new Promise((resolve) => this.setState({ nameValidator: 'true' })); + } else { + await new Promise((resolve) => this.setState({ nameValidator: 'false' })); + } + }; + + nameMessage = (): ReactElement<{}> => { + const { nameValidator } = this.state; + if (nameValidator === 'true') { + return
    ; + } + if (nameValidator === 'false') { + return ( +
    + Please enter a valid name. +
    + ); + } + return
    ; + }; + + colorToggle = (inputString: string): string => { + if (inputString === 'true') { + return 'is-valid'; + } + if (inputString === 'false') { + return 'is-invalid'; + } + return ''; + }; + + handleSubmitWithRecaptcha = async (event: any) => { + event.preventDefault(); + const { alert } = this.props; + await Promise.all([this.validateEmail(), this.validateName()]); + const { + name, + email, + AddressNum1, + AddressNum2, + city, + state, + country, + PostalCode, + nameValidator, + emailValidator, + } = this.state; + const { recaptchaPayload } = this.state; + if (emailValidator !== 'true' || nameValidator !== 'true') { + alert.show('Please fill out all fields correctly.'); + this.resetRecaptcha(); + } + }; + + handleChangeName = (event: any) => { + this.setState({ name: event.target.value }); + }; + + handleChangeEmail = (event: any) => { + this.setState({ email: event.target.value }); + }; + + handleChangeAddress1 = (event: any) => { + this.setState({ AddressNum1: event.target.value }); + }; + + handleChangeAddress2 = (event: any) => { + this.setState({ AddressNum2: event.target.value }); + }; + + handleChangeState = (event: any) => { + this.setState({ state: event.target.value }); + }; + + handleChangePostal = (event: any) => { + this.setState({ PostalCode: event.target.value }); + }; + + handleChangeCountry = (event: any) => { + this.setState({ country: event.target.value }); + }; + + handleChangeCity = (event: any) => { + this.setState({ city: event.target.value }); + }; + + render() { + const { + name, + email, + AddressNum1, + AddressNum2, + city, + state, + country, + PostalCode, + nameValidator, + emailValidator, + } = this.state; + const url = 'https://keep.us7.list-manage.com/subscribe/post?u=9896e51b9ee0605d5e6745f82&id=f16b440eb5'; + return ( +
    +
    + + Information + + + +
    +
    +
    +
    +

    + 2. Enter your information +

    +
    + + {/* onSubmit={this.handleSubmitWithRecaptcha} */} +
    + + + +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    + + + + + + +
    +
    +
    +
    + +
    +
    +
    + ); + } +} + +export default withAlert()(Information); diff --git a/src/components/SelectAmount.tsx b/src/components/SelectAmount.tsx new file mode 100644 index 0000000..0459962 --- /dev/null +++ b/src/components/SelectAmount.tsx @@ -0,0 +1,362 @@ +import React, { Component, ReactElement } from 'react'; +import Card from 'react-bootstrap/Card'; +import braintree from 'braintree-web'; +import Form from 'react-bootstrap/Form'; +import Button from 'react-bootstrap/Button'; +import ButtonGroup from 'react-bootstrap/ButtonGroup'; +import Row from 'react-bootstrap/Row'; +import Col from 'react-bootstrap/Col'; +import { Helmet } from 'react-helmet'; +import { Link } from 'react-router-dom'; +import { alignPropType } from 'react-bootstrap/esm/DropdownMenu'; +import ManWithBeard from '../static/images/front-view-homeless-man-with-beard.png'; +import getServerURL from '../serverOverride'; + +interface State { + matches: boolean; +} +interface Props {} + +class SelectAmount extends Component { + constructor(props: Props) { + super(props); + this.state = { + matches: window.matchMedia('(min-width: 600px)').matches, + }; + } + + componentDidMount() { + window.scrollTo(0, 0); + const handler = (e) => this.setState({ matches: e.matches }); + window + .matchMedia('(min-width: 1000px)') + .addEventListener('change', handler); + } + + render() { + return ( +
    +
    + + Welcome + + + +
    + {this.state.matches && ( +
    +
    +
    +
    +
    +

    + Your donation makes a difference. +

    +

    + 54% of homeless individuals + {' '} +
    + without ID report being denied + {' '} +
    + access to shelters. +

    +

    + + Let’s make sure that never + {' '} +
    + happens. +     +

    +
    +
    +
    + Create an account +
    +
    +
    +
    + )} + {!this.state.matches && ( +
    +
    + Create an account1 +
    + +
    +

    + 54% of homeless individuals without ID report being denied + access to shelters. +

    + +

    + + Let’s make sure that never + {' '} +
    + happens. +     +

    +
    +
    + )} + {this.state.matches && ( +
    +
    +
    +
    +
    +

    + 1. Select Amount +

    +
    + + + + + + + +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +
    + )} + {!this.state.matches && ( +
    +
    +
    +
    +
    +

    + 1. Select Amount +

    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    + + +
    +
    + + + + + + +
    +
    +
    +
    +
    +
    +
    +
    + )} +
    +
    +
    + ); + } +} + +export default SelectAmount; diff --git a/src/components/ThankYouDonate.tsx b/src/components/ThankYouDonate.tsx new file mode 100644 index 0000000..f8579e5 --- /dev/null +++ b/src/components/ThankYouDonate.tsx @@ -0,0 +1,36 @@ +import React, { useState, useEffect } from 'react'; +import Form from 'react-bootstrap/Form'; +import { Helmet } from 'react-helmet'; +import sidewaysbeggarImg from '../static/images/sideways-beggar.png'; + +const ThankYouDonate = () => ( +
    + + ThankYouDonate + + +
    +
    + something +
    +
    +

    Thank you for your donation!

    +

    + {' '} + Your donation was successful. We deeply value your +

    +

    + contribution and the positive impact that it will have. +

    +
    +
    +
    +
    +
    + // +); + +export default ThankYouDonate; diff --git a/src/components/mailchimpbutton.tsx b/src/components/mailchimpbutton.tsx index 0ba1a55..031ddf3 100644 --- a/src/components/mailchimpbutton.tsx +++ b/src/components/mailchimpbutton.tsx @@ -1,6 +1,8 @@ import React, { Component, ReactElement } from 'react'; import MailchimpSubscribe from 'react-mailchimp-subscribe'; import { withAlert } from 'react-alert'; +import ReCAPTCHA from 'react-google-recaptcha'; +import PropTypes from 'prop-types'; import getServerURL from '../serverOverride'; import { isValidEmail } from '../lib/Validations/Validations'; import CustomFormButton from './mailChimpSubscribe/CustomFormButton'; @@ -9,6 +11,8 @@ interface Props { alert: any; } +const recaptchaRef: React.RefObject = React.createRef(); + interface State { email: string; buttonState: string; @@ -42,9 +46,9 @@ class Mailchimpbutton extends Component { validateEmail = async (): Promise => { const { email } = this.state; if (isValidEmail(email)) { - await new Promise((resolve) => this.setState({ emailValidator: 'true' }, resolve)); + await new Promise((resolve) => this.setState({ emailValidator: 'true' })); } else { - await new Promise((resolve) => this.setState({ emailValidator: 'false' }, resolve)); + await new Promise((resolve) => this.setState({ emailValidator: 'false' })); } }; @@ -174,6 +178,7 @@ class Mailchimpbutton extends Component { />
    + ); } } diff --git a/src/static/images/credit-cardsImg.png b/src/static/images/credit-cardsImg.png new file mode 100644 index 0000000..a18f942 Binary files /dev/null and b/src/static/images/credit-cardsImg.png differ diff --git a/src/static/images/creditcardImg.png b/src/static/images/creditcardImg.png new file mode 100644 index 0000000..7af82c3 Binary files /dev/null and b/src/static/images/creditcardImg.png differ diff --git a/src/static/images/front-view-homeless-man-with-beard.png b/src/static/images/front-view-homeless-man-with-beard.png new file mode 100644 index 0000000..0aa1a1d Binary files /dev/null and b/src/static/images/front-view-homeless-man-with-beard.png differ diff --git a/src/static/images/sideways-beggar.png b/src/static/images/sideways-beggar.png new file mode 100644 index 0000000..52a6e2b Binary files /dev/null and b/src/static/images/sideways-beggar.png differ diff --git a/src/static/styles/App.scss b/src/static/styles/App.scss index aaa950c..5418124 100644 --- a/src/static/styles/App.scss +++ b/src/static/styles/App.scss @@ -783,15 +783,45 @@ hr { } @media only screen and (max-width: 60rem) { - body { - padding: 3rem; - } + + body { + padding: 3rem; + } .grid { grid-gap: 3rem; } } .profileCard-header { + + font-size: 1rem; + font-weight: 600; + color: $card-header-color; + margin-top: 1.5rem; + margin-bottom: 1rem; + background-color: $white; + padding-right: 3rem; + padding-left: 2rem; + line-height: 100%; +} + +.profileCard-text { + font-family: Inter; + font-size: 0.7rem; + font-weight: 500; + letter-spacing: 0.1rem; + line-height: 1.7; + color: $card-text-color; + margin-bottom: 0.5rem; + line-height: 100%; + vertical-align: bottom; + padding-left: 2rem; +} + +.profileCard-img { + width: 16.25rem; /* You can set the dimensions to whatever you want */ + height: 16.25rem; + object-fit: cover; font-size: 1rem; font-weight: 600; color: $card-header-color; @@ -820,6 +850,7 @@ hr { width: 16.25rem; /* You can set the dimensions to whatever you want */ height: 16.25rem; object-fit: cover; + } .profileCard-content { @@ -827,6 +858,43 @@ hr { } .profileGrid { + + display: grid; + width: 140rem; + grid-gap: 5rem; + grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); + align-items: start; +} + +.profileGrid-item:hover { + transform: translateY(-0.5%); +} + +.profileGrid-item { + padding-bottom: 0.625rem; + background-color: #fff; + border-radius: 1rem; + overflow: hidden; + box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.125); + transition: 0.2s; +} + +.hero-header-aboutus { + font-family: Raleway; + font-weight: 900; + font-size: 14rem; + line-height: 1.2; + @include md { + font-size: 2.75rem; + } + @include lg { + font-size: 4.125rem; + } + font-size: 9vw; + text-align: center; + justify-content: center; + padding-top: 1.5rem; + padding-bottom: 0rem; display: grid; width: 140rem; grid-gap: 5rem; @@ -863,6 +931,7 @@ hr { justify-content: center; padding-top: 1.5rem; padding-bottom: 0rem; + } .profile-sizing { @@ -871,6 +940,351 @@ hr { } .profile-body { + font-family: "Inter", sans-serif; + display: flex; + justify-content: center; + align-items: center; + padding: 7.7rem; + padding-top: 1rem; +} + +.card-btn1 { + display: block; + width: 100%; + padding: 0.1rem; + font-size: 0.75rem; + font-weight: 400; + border: none; + justify-content: center; + align-items: center; + border-radius: 0.2rem; + transition: 0.2s; + cursor: pointer; + letter-spacing: 0.1rem; + color: white; + background-color: $primary-theme; + border-color: $primary-theme; + padding-top: 0.1rem; + padding-bottom: 0.1rem; + position: relative; + left: 2.031rem; + padding-left: 0.563rem; + padding-right: 0.563rem; +} + +.card-body { + width: 15.938rem; /* You can set the dimensions to whatever you want */ + object-fit: cover; +} + +.card-profile { + width: 16.2rem; + margin-bottom: 2rem; +} + +.hero-header-payment-method { + font-family: Raleway, sans-serif; + font-weight: bold; + font-size: 1.25rem; + line-height: 2; + text-align: left; + // 992px window width and more + @include md { + font-size: 1.875rem; + font-weight: bold; + } + @include lg { + font-size: 2.5rem; + font-weight: bold; + } +} + +.bordered-background-payment { + border: 0.7rem solid #445feb; + + @include md { + border: 3rem solid #445feb; + } + @include lg { + border: 4.375rem solid #445feb; + } +} + +.payment-back-button { + display: block; + width: 15.5%; + padding: 0.5rem; + font-size: 1rem; + text-align: center; + color: #445feb; + background-color: $white; + border: 0.075rem solid #445feb; + border-radius: 0.4rem; + transition: 0.2s; + cursor: pointer; + letter-spacing: 0.1rem; + margin-top: 1.563rem; + margin-bottom: 0 auto; +} + +@media only screen and (max-width: 60rem) { + body { + padding: 3rem; + } + + .grid { + grid-gap: 3rem; + } +} + +.payment-done-button { + display: block; + width: 15.5%; + padding: 0.5rem; + font-size: 1rem; + text-align: center; + color: $white; + background-color: #445feb; + border: 0.075rem solid #445feb; + border-radius: 0.4rem; + transition: 0.2s; + cursor: pointer; + letter-spacing: 0.1rem; + margin-top: 1.563rem; + margin-bottom: 0 auto; +} + +@media only screen and (max-width: 60em) { + body { + padding: 3rem; + } + + .grid { + grid-gap: 3rem; + } +} + +.center-payment { + position: absolute; + top: 88%; + left: 60%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + @media only screen and (max-width: 60rem) { + body { + padding: 3rem; + } + + .grid { + grid-gap: 3rem; + } + } +} + +.center-payment-back { + margin: 10; + position: absolute; + top: 88%; + left: 40%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.credit-card-box-line { + display: block; + margin: 0 -1.25rem; + margin-top: 1.25rem; + margin-bottom: 0.625rem; + overflow: hidden; + border-style: inset; + border-width: 0.063rem; +} + +.top-card { + overflow: hidden; + justify-content: space-around; + white-space: nowrap; + display: inline; +} + +.credit-card-Img { + margin-right: 100%; + margin-left: 0; + max-width: 3.125rem; + max-height: 3.125rem; + display: inline-block; + margin-bottom: 0.625rem; + margin-top: 0.063rem; + @media only screen and (min-width: 125rem) { + + /* for sumo sized (mac) screens */ + max-width: 3.125rem; + max-height: 3.125rem; + } + @media only screen and (max-device-width: 30rem) { + + /* styles for mobile browsers smaller than 480px; (iPhone) */ + max-width: 1.563rem; + max-height: 1.563rem; + } + @media only screen and (device-width: 48rem) { + + /* default iPad screens */ + max-width: 0.781rem; + max-height: 0.781rem; + } +} + +.heading-card { + margin-left: 0.625rem; + font-size: 1.25rem; + max-width: 10%; + max-height: 10%; + display: inline-block; + margin-top: 0.019rem; + + @media only screen and (min-width: 125rem) { + + /* for sumo sized (mac) screens */ + font-size: 0.938rem; + } + @media only screen and (max-device-width: 30rem) { + + /* styles for mobile browsers smaller than 480px; (iPhone) */ + font-size: 0.625rem; + } + @media only screen and (device-width: 48rem) { + + /* default iPad screens */ + font-size: 0.313rem; + } +} + +.creditcardsImg { + display: inline-block; + + @media only screen and (max-device-width: 30rem) { + + /* styles for mobile browsers smaller than 480px; (iPhone) */ + } + @media only screen and (device-width: 48rem) { + + /* default iPad screens */ + } +} + +.headinginfo { + float: left; + margin-top: 0.313rem; + margin-bottom: 0.313rem; +} + +.Thank-you-box { + background-color: #445feb; + height: 21.313rem; + display: inline-block; + text-align: center; +} + +.img-container { + width: 6.25rem; + display: inline-block; +} + +.beggarimage { + width: 42%; + height: 21.313rem; +} + +.thank-you-msg { + color: white; + text-shadow: 0.125rem 0.125rem 0.313rem black; + margin-top: 15%; + margin-left: 10%; + font-weight: bold; + @media only screen and (min-width: 125rem) { + + /* for sumo sized (mac) screens */ + line-height: 100%; + margin-right: 10%; + size: 10%; + } +} + +.spacingthankyou { + font-weight: bold; + line-height: 50%; + margin-right: 17%; + @media only screen and (min-width: 125rem) { + + /* for sumo sized (mac) screens */ + size: 10%; + line-height: 100%; + margin-right: 10%; + } + @media only screen and (max-device-width: 30rem) { + + /* styles for mobile browsers smaller than 480px; (iPhone) */ + size: 10%; + line-height: 100%; + } + @media only screen and (device-width: 48rem) { + + /* default iPad screens */ + size: 10%; + line-height: 100%; + } +} + +.Thank-you-box { + background-color: #445feb; + height: 21.313rem; + display: inline-block; + text-align: left; +} + +.bearded-beggarimg { + display: flex; + flex-direction: row; + padding-left: 40%; + height: 0.625rem; +} + +.beardimage { + width: 28.938rem; + height: 21.25rem; +} + +.topping { + margin-top: 10%; +} + +.intro-msg { + color: white; + text-shadow: 0.125rem 0.125rem 0.313rem black; + font-weight: bold; + + @media only screen and (min-width: 125rem) { + + /* for sumo sized (mac) screens */ + line-height: 100%; + margin-right: 10%; + size: 10%; + } +} + +.intro-msg2 { + color: white; + text-shadow: 0.125rem 0.125rem 0.125rem black; + font-weight: light; + font-size: 1.75rem; + @media only screen and (min-width: 125rem) { + + /* for sumo sized (mac) screens */ + line-height: 100%; + margin-right: 10%; + size: 10%; + } font-family: "Inter", sans-serif; display: flex; justify-content: center;