ZuoTi.Pro
Question

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" href="faq.html">FAQ</a>
        <a class="p-2 text-dark" href="contact.html">Contact Us</a>
    </nav>
</div>
<div class="jumbotron px-4 py-2 text-center bg-light">
    <h3 class="display-4">PRODUCTS</h3>
</div>
<div class="container-fluid">
    <video controls autoplay class="d-block w-100">
        <source src="img/Huawei%20P30.mp4">
    </video>
</div>
<div class="container mt-3">
    <div class="row">
        <div class="col-md-3 text-center">
            <div class="card">
                <img src="img/iphone-product.jpg" class="card-img-top" alt="...">
                <div class="card-body bg-light">
                    <h5 class="card-title">iPhone XS 64GB Space Grey</h5>
                    <h4>$1024</h4>
                </div>
            </div>
        </div>
        <div class="col-md-3 text-center">
            <div class="card">
                <img src="img/xr-product.jpeg" class="card-img-top" alt="...">
                <div class="card-body bg-light">
                    <h5 class="card-title">iPhone XR 64GB Perfect Blue</h5>
                    <h4>$1000</h4>
                </div>
            </div>
        </div>
        <div class="col-md-3 text-center">
            <div class="card">
                <img src="img/s10-product.jpg" class="card-img-top" alt="...">
                <div class="card-body bg-light">
                    <h5 class="card-title">Samsung Galaxy S10 Pure Black</h5>
                    <h4>$960</h4>
                </div>
            </div>
        </div>
        <div class="col-md-3 text-center">
            <div class="card">
                <img src="img/p30-product.jpg" class="card-img-top" alt="...">
                <div class="card-body bg-light">
                    <h5 class="card-title">Huawei P30 Pro Pearl 128GB </h5>
                    <h4>$900</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="row pt-3">
        <div class="col-md-3 text-center">
            <div class="card">
                <img src="img/ipadpro-product.jpg" class="card-img-top" alt="...">
                <div class="card-body bg-light">
                    <h5 class="card-title">iPad Pro 11" WIFI + Cellular </h5>
                    <h4>$1200</h4>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="container">
        &copy; Perry Gerry 2019
    </div>
</div>
<script>
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 1.297145, lng: 103.854837},
            zoom: 20
        });
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAS3rAAh9JO3JoaRCWf1_oRFTH0ZBB0EzY&callback=initMap"
        type="text/javascript"></script>
</body>
</html>

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

Homework Answers

Answer #1

<div class="checkout-panel">

  <div class="panel-body">

    <h2 class="title">Checkout</h2>

    <div class="progress-bar">

      <div class="step active"></div>

      <div class="step active"></div>

      <div class="step"></div>

      <div class="step"></div>

    </div>

    <div class="payment-method">

      <label for="card" class="method card">

        <div class="card-logos">

          <img src="img/visa_logo.png"/>

          <img src="img/mastercard_logo.png"/>

        </div>

        <div class="radio-input">

          <input id="card" type="radio" name="payment">

          Pay £340.00 with credit card

        </div>

      </label>

      <label for="paypal" class="method paypal">

        <img src="img/paypal_logo.png"/>

        <div class="radio-input">

          <input id="paypal" type="radio" name="payment">

          Pay £340.00 with PayPal

        </div>

      </label>

    </div>

    <div class="input-fields">

      <div class="column-1">

        <label for="cardholder">Cardholder's Name</label>

        <input type="text" id="cardholder" />

        <div class="small-inputs">

          <div>

            <label for="date">Valid thru</label>

            <input type="text" id="date" placeholder="MM / YY" />

          </div>

          <div>

            <label for="verification">CVV / CVC *</label>

            <input type="password" id="verification"/>

          </div>

        </div>

      </div>

      <div class="column-2">

        <label for="cardnumber">Card Number</label>

        <input type="password" id="cardnumber"/>

        <span class="info">* CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number.</span>

      </div>

    </div>

  </div>

  <div class="panel-footer">

    <button class="btn back-btn">Back</button>

    <button class="btn next-btn">Next Step</button>

  </div>

</div>

0 0
Add a comment
Know the answer?
Add Answer to:
Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html>...
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

  • <!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en">    <!-- head...

    <!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en">    <!-- head tag -->    <head>                 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Personal Webpage</title>    </head>    <!-- body tag -->     <body>             <style>        .sidenav {            height: 100%;             width: 160px;            position: fixed;            z-index: 1;             top: 0;            left: 0;           ...

  • <!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en">    <!-- head...

    <!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en">    <!-- head tag -->    <head>                 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Social</title>    </head>    <!-- body tag --> <body>                 <style>        .sidenav {            height: 100%;             width: 160px;            position: fixed;            z-index: 1;             top: 0;            left: 0;            background-color:...

  • How do i make my html show 10 results per page, and how do i make...

    How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...

  • Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html>...

    Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html> <head> <title>TABLE with STYLE SHEET</title> <meta charset="utf-8" /> <meta name="description" content="Godaddy Webpage original" /> <link rel = "stylesheet" href="GoDaddy_assignment_1.css"> <body> <img src= "GoDaddy.png"/> <p>Welcome to:<strong>webhamster.com</strong></br> This web page is parked<strong>Free</strong>courtesy of <a class="aclass1" href ="https://www.godaddy.com">GoDaddy.com</a></p> <h1>Want to buy<span class ="span2">webmaster.com ?</span></h1> <div class ="div1"> <a class ="aclass2" href="https://www.godaddy.com">Learn How</a> </div> </hr> <button>Search Ads</button> </body> </html> “ QUESTION continued Given the corresponding css file .aclass1{color:purple;}...

  • I'm having trouble to link the .js file to the html so changes for the html...

    I'm having trouble to link the .js file to the html so changes for the html to be made in the .js file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>:JavaScript, HTML and jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- this is so I don't have to give you a separate CSS file --> <style>     .hidden {display: none;}     .menu { width: 100px;} </style> </head> <body> <div class="container"> <h1>Assignment 2: JavaScript, HTML and jQuery</h1> <p>To complete this...

  • HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500"...

    HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500" border="10"> <!-----row---1----logo---> <tr><td> <img src="20150516_084745" width="700" height="200"> </td></tr> <!-----row-2-navigation-----> <tr><td> <!----start-navigation-table----> <table width="700" height="100" border="5" bgcolor="lightgreen" > <tr><td><a href="HerbFarm.html"> <center> HOME </center></a></td> <td><a href="about3.html"> <center> ABOUT </center></a></td> <td><a href="contact3.html"> <center> CONTACT </center></a></td> <td><a href="gallery3.html"> <center> GALLERY </center></a></td> </tr> </table> <!------end-navigation-table----> </td></tr> <tr><td> <h1>Contact </h1> <form action="thankyou.html">    </form> <div class="row"> <div class="col-75"> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-50"> <h3>Billing Address</h3> <label for="fname"><i...

  • How do I get my HTML and CSS to look similar to this mockup? HTML: <!DOCTYPE...

    How do I get my HTML and CSS to look similar to this mockup? HTML: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>nitro site</title>     <link href="css/main.css" rel="stylesheet"/> </head> <body>     <header class="header">     <section class="navlist">         <img class="logo" src="assets/logobeans.png"/>         <h2 class="headertitle">nitro</h2>     <nav>         <ul>             <li><a href="index.html" target="_parent">About</a></li>             <li><a href="/html/menu.html" target="_blank">Menu</a></li>             <li><a href="/html/menu.html">Shop Now</a></li>         </ul>     </nav>     </section>     <section class="headerContainer">         <h1 class="heading">Nitro Coffee</h1>         <p class="productDesc">Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species.</p>...

  • 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...

  • HTML css When i refresh the page, the picture doesnt move at all for #i1 i...

    HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...

  • Please edit and add all the code needed to make the images side by side and to put the buttons in...

    Please edit and add all the code needed to make the images side by side and to put the buttons in the middle of the images. Thank you index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title> <!-- Bootstrap -->    <link href="css/bootstrap-4.0.0.css" rel="stylesheet">    <link href="style.css" rel="stylesheet" type="text/css">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header>    <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Lakeside Resort Spot</a>        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">...

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