Scribd Logo
Upload

Welcome to Scribd!

  • 50 views

    SWD Micro Project

    Uploaded by

    barotguru844
    The document is a micro project on a responsive payment gateway form. It includes the HTML and CSS code for a form with fields for billing address and payment information. The form is responsive and uses flexbox for layout. It allows users to enter their name, email, address and payment details to process a checkout.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    SWD Micro Project

    Uploaded by

    barotguru844
    50 views10 pages
    The document is a micro project on a responsive payment gateway form. It includes the HTML and CSS code for a form with fields for billing address and payment information. The form is responsive and uses flexbox for layout. It allows users to enter their name, email, address and payment details to process a checkout.

    Original Description:

    Original Title

    SWD MICRO PROJECT

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document is a micro project on a responsive payment gateway form. It includes the HTML and CSS code for a form with fields for billing address and payment information. The form is responsive and uses flexbox for layout. It allows users to enter their name, email, address and payment details to process a checkout.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    50 views10 pages

    SWD Micro Project

    Uploaded by

    barotguru844
    The document is a micro project on a responsive payment gateway form. It includes the HTML and CSS code for a form with fields for billing address and payment information. The form is responsive and uses flexbox for layout. It allows users to enter their name, email, address and payment details to process a checkout.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 10

    Micro Project

    On
    Project Title:- Payment Gateway Form

    By
    Name :- BAROT APURVKUMAR SANJAYKUMAR
    Enrollment No: 226040316003

    A Micro Project in Static Web Design(4311603)


    Submitted to

    Information Technology Department


    B & B Institute of Technology, Vallabh Vidyanagar
    HTML CODE
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-
    width, initial-scale=1">
    <title>Responsive Payment Gateway Form</title>
    <link rel="stylesheet" type="text/css"
    href="style.css">
    </head>
    <body>
    <header>
    <div class="container">
    <div class="left">
    <h3>BILLING ADDRESS</h3>
    <form>
    Full name
    <input type="text" name=""
    placeholder="Enter name">
    Email
    <input type="text" name=""
    placeholder="Enter email">
    Address
    <input type="text" name=""
    placeholder="Enter address">
    City
    <input type="text" name=""
    placeholder="Enter City">
    <div id="zip">
    <label>
    State
    <select>
    <option>Choose State..</option>
    <option>Rajasthan</option>
    <option>Hariyana</option>
    <option>Uttar Pradesh</option>
    <option>Madhya
    Pradesh</option>
    </select>
    </label>
    <label>
    Zip code
    <input type="number" name=""
    placeholder="Zip code">
    </label>
    </div>

    </form>
    </div>
    <div class="right">
    <h3>PAYMENT</h3>
    <form>
    Accepted Card <br>
    <img src="vi.png" width="50">
    <img src="mc1.png" width="50">
    <img src="rp.png" width="50">
    <br><br>

    Credit card number


    <input type="text" name=""
    placeholder="Enter card number">
    Exp month
    <input type="text" name=""
    placeholder="Enter month">
    <div id="zip">
    <label>
    Exp year
    <select>
    <option>Choose Year..</option>
    <option>2022</option>
    <option>2023</option>
    <option>2024</option>
    <option>2025</option>
    </select>
    </label>
    <label>
    CVV
    <input type="number" name=""
    placeholder="CVV">
    </label>
    </div>

    </form>
    <input type="submit" name=""
    value="Proceed to checkout">
    </div>
    </div>
    </header>
    </body>
    </html>

    CSS CODE
    *{padding: 0; box-sizing: border-box; font-family: sans-
    serif;}
    header{
    width: 100vw;
    min-height: 100vh;
    background: #344956;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .container{
    background: white;
    max-width: 800px;
    min-height: 500px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 1.5rem;
    }
    .left{
    flex-basis: 50%;
    }
    .right{
    flex-basis: 50%;
    }
    form{
    padding: 1rem;
    }
    h3{
    margin-top: 1rem;
    color: #2c3e50;
    }
    form input[type="text"]{
    width: 100%;
    padding: 0.5rem 0.7rem;
    margin: 0.5rem 0;
    outline: none;
    }
    #zip{
    display: flex;
    margin-top: 0.5rem;
    }
    #zip select{
    padding: 0.5rem 0.7rem;
    }
    #zip input[type="number"]{
    padding: 0.5rem 0.7rem;
    margin-left: 5px;
    }
    input[type="submit"]{
    width: 100%;
    padding: 0.7rem 1.5rem;
    background: #34495e;
    color: white;
    border: none;
    outline: none;
    margin-top: 1rem;
    cursor: pointer;
    }
    input[type="submit"]:hover{
    background: #2c3e50;
    }

    @media only screen and (max-width: 770px){


    .container{
    flex-direction: column;
    }
    }
    body{
    overflow-x: hidden;
    }
    OUTPUT:-

    You might also like