ZuoTi.Pro
Question

make a checkout page for an online e-commerce clothing store using html, CSS and bootstrap.

make a checkout page for an online e-commerce clothing store using html, CSS and bootstrap.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1


<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>E-commerce CheckOut</title>
<link href="css/mdb.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
</head>

<body class="grey lighten-3">
<main class="mt-5 pt-4">
<div class="container fadeIn">
<h2 class="my-5 h2 text-center">CheckOut</h2>
<div class="row">
<div class="col-md-8 mb-4">
<div class="card">
<form class="card-body">
<div class="row">
<div class="col-md-6 mb-2">
<div class="md-form ">
<input type="text" id="customerFirstName" placeholder="xxx" class="form-control">
<label for="customerFirstName" class="">Customer's First name</label>
</div>
</div>
<div class="col-md-6 mb-2">
<div class="md-form">
<input type="text" id="customerLastName" placeholder="yyy" class="form-control">
<label for="customerLastName" class="">Customer's Last name</label>
</div>
</div>

</div>
<div class="md-form mb-5">
<input type="text" id="customerEmail" placeholder="[email protected]" class="form-control">
<label for="email" class="">Customer's Email</label>
</div>
<div class="md-form mb-5">
<input type="text" id="customerAddress" placeholder="222, ABC Street, XYZ City " class="form-control">
<label for="address" class="">Customer's Address</label>
</div>
<hr>

<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customerShippingAddress">
<label class="custom-control-label" for="customerShippingAddress">Shipping address is same as billing address</label>
</div>

<hr>

<div class="d-block my-3">
<div class="custom-control custom-radio">
<input name="paymentMethod" id="customerCreditCard" class="custom-control-input" type="radio" required>
<label class="custom-control-label" for="customerCreditCard">Credit card</label>
</div>
<div class="custom-control custom-radio">
<input name="paymentMethod" id="customerDebitCard" class="custom-control-input" type="radio" checked required>
<label class="custom-control-label" for="debit">Debit card</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="cardName">Full Name on card</label>
<input type="text" class="form-control" id="cardName"required>
</div>
<div class="col-md-6 mb-3">
<label for="cardNumber">Card number</label>
<input type="text" id="cardNumber" class="form-control" required>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<label for="cardCVV">CVV</label>
<input type="text" id="cardCVV" class="form-control" required>
</div>
<div class="col-md-3 mb-3">
<label for="cardExpiration">Expiration</label>
<input type="text" id="cardExpiration" class="form-control" required>
</div>
</div>
<hr class="mb-4">
<button type="submit" class="btn btn-primary btn-lg btn-block" >Checkout and Pay</button>
</form>
</div>
</div>
<div class="col-md-4 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Shopping cart</span>
<span class="badge badge-secondary badge-pill">4</span>
</h4>
<ul class="list-group mb-3 z-depth-1">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Item 1</h6>
</div>
<span class="text-muted">$20</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Item 2</h6>
</div>
<span class="text-muted">$11</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Item 3</h6>
</div>
<span class="text-muted">$25</span>
</li>

<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Item 4</h6>
</div>
<span class="text-muted">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-light">
<div class="text-success">
<h6 class="my-0">Coupon code</h6>
<small>xxxx</small>
</div>
<span class="text-success">-$15</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total Amount </span>
<strong>$46</strong>
</li>
</ul>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" aria-label="customer's name" placeholder="Coupon code" >
<div class="input-group-append">
<button class="btn btn-secondary btn-md waves-effect m-0" type="button">Redeem Code</button>
</div>
</div>
</form>

</div>
</div>

</div>
</main>

</body>

</html>

0 0
Add a comment
Know the answer?
Add Answer to:
make a checkout page for an online e-commerce clothing store using html, CSS and bootstrap.
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • write a html and Css interface log in webpage using bootstrap. 1.email. 2. Show description 100...

    write a html and Css interface log in webpage using bootstrap. 1.email. 2. Show description 100 chracters max 3. Dj sing in 4. Dj name 5.Rss feed

  • HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids...

    HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids and have come across a snag. I need this: To look more like this.... It does not really need to be perfect as far as scaling, at this point I just want the yellow box in the corner with borders like the pic. Also the original pic has white borders that we are ignoring. HTML <!doctype html> <html lang="en"> <head> <!-- Required meta tags...

  • Create a two-page website by using HTML commands (without using CSS or javascript).

    Create a two-page website by using HTML commands (without using CSS or javascript).

  • make a very simple shopping website using html and css and java script only

    make a very simple shopping website using html and css and java script only

  • Make a page with an animal joke. Make the page show a pop up message when...

    Make a page with an animal joke. Make the page show a pop up message when it loads. Use html, java, css, bootstrap when needed. Place code in the according to what file they belong too: Exercise: Alert! Using our standard template, make a page with an animal joke. Set up the library directory, and anything else you need. Make the page show a popup message when it loads: "This page by YOUR NAME." Hint: try the JS alert() function....

  • HTML/CSS: Modify the table you created in hands-on exercise 8.1 to be centered on the page,...

    HTML/CSS: Modify the table you created in hands-on exercise 8.1 to be centered on the page, use a background color of #CCCC99, and display text in arial or the browser default sans-serif font. Configure this table using CSS instead of obsolete HTML attributes. Place an e-mail link to yourself on the web page. Save the file as mytable.html. HERE IS THE CODE FOR 8.1: <!DOCTYPE html> <html lang="en"> <head> <title>Practice with Tables</title> <meta charset="utf-8"> </head> <body> <table border="1" > <caption>School...

  • make a interactive website from scratch. using code. html, css. I want it to be about...

    make a interactive website from scratch. using code. html, css. I want it to be about people on   Dialysis, and how we can help to make them more comfortable. Thank you for your help.

  • Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html>...

    Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html> <html lang="en"> <head>     <link rel="stylesheet" href="bootstrap/css/bootstrap.css">     <link rel="stylesheet" href="style.css">     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>     <script src="./bootstrap/js/bootstrap.js"></script>     <meta charset="UTF-8">     <title>Perry Gerry Mobile Cellular</title> </head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm">     <h5 class="my-0 mr-md-auto font-weight-normal">Perry Gerry Mobile Cellular</h5>     <nav class="my-2 my-md-0 mr-md-3">         <a class="p-2 text-dark" href="index.html">Home</a>         <a class="p-2 text-dark" href="about.html">About Us</a>         <a class="p-2 text-dark" href="products.html">Products</a>         <a class="p-2 text-dark"...

  • I have to make a pixel art maker using javascript. HTML and CSS were already provided....

    I have to make a pixel art maker using javascript. HTML and CSS were already provided. I only had to do the JavaScript part. Every time I run the HTML folder nothing happens when I choose the width, height, and color. This is my code: (ONLY JS IS SUPPOSED TO BE FIXED). JS: // Select color input // Select size input const colorPicker = document.getElementsById('colorPicker'); const rowNum = document.getElementsById('inputHeight'); const cellNum = document.getElementById('inputWidth'); const pixelCanvas = document.getElementById('pixelCanvas'); const form =...

  • How to make this same webpage using HTML and css properties like display property, float,clear and...

    How to make this same webpage using HTML and css properties like display property, float,clear and media queries Picture Tools lab04 (1).docx - Saved to this PC raw Design Layout References Mailings Review View Help Format Tell me spigotdesign VISUAL DESIGN&WEB DEVELOPMENT FROM PARK CITY UTAH ESIGNDEVELLP SUPPORT HOST THE ADMIN BAR AND SOLUTE PASTINNG 200e WEBSTE TESTING

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT