카테고리 없음

스파르타코딩클럽 웹개발 1주차 숙제

Hanachoi 2022. 4. 11. 16:01 
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>get your own teddy bear!</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">

    <style>
        *{
            font-family: 'Roboto Condensed', sans-serif;
        }
        .teddyimage{
            width:300px;
            height:400px;
            margin: auto;
            display: block;
        }
        .title{
            font-weight: bold;
        }
        .price{
            font-size : 20px;
        }
        .desc {
            width: 450px;
            margin-top: 20px;
            margin-bottom: 20px;
            display: block;
        }
        .item-order {
            width: 450px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .input-group{
            width: 450px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .btn-order {
            margin: auto;
            width: 100px;
            display: block;
        }
        .wrap{
            width: 500px;
            margin: auto;
            display: block;
        }

    </style>
    <script>
        function order(){
            alert('Your order has been completed');
        }
    </script>
</head>

<body>
<div class="wrap">
    <img class="teddyimage"src="https://sc04.alicdn.com/kf/H256f52c828c94343b8a314b1cf529803F.jpg" class="rounded float-left" alt="...">
    <div class="desc">
        <h1 class="title">Get your new buddy! <span class="price">30CAD/indivisual</span></h1>
        <p>This teddy bear will be your BFF whenever you go to bed.</p>
    </div>
    <div class="item-order">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default">User name</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
    </div>
    <div class="input-group">
        <div class="input-group-prepend">
            <label class="input-group-text" for="inputGroupSelect01">Qty</label>
        </div>
        <select class="custom-select" id="inputGroupSelect01">
            <option selected>-- How many friends? --</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
    <div class="item-order">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default">Address</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
    </div>
    <div class="item-order">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default">Phone number</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
    </div>
    <button type="button" onclick="order()" class="btn btn-dark btn-order">Order</button>
</div>

</body>

</html>