day04

这就是今天要实现的效果图（颜色提取推荐使用snipaste）

代码（仅供参考，不喜勿喷， 可以在评论区展示作品）

<html>

<head>

    <style>

        /* Write your CSS code here */

        * {

            margin: 0px;

            padding: 0px;

        }

        body {

            background-color: rgb(242, 245, 248);

            display: flex;

        }

        .outer {

            margin: auto;

            background-color: white;

            width: 600px;

            height: 300px;

            display: flex;

            flex-direction: column;

            align-items: center;

            border-radius: 5px;

        }

        strong {

            display: inline-block;

            width: 100%;

            text-align: center;

            margin-top: 40px;

            font-size: 15px;

        }

        p {

            font-size: 10px;

            text-align: center;

            margin-top: 20px;

        }

        .email {

            margin-top: 40px;

            width: 280px;

            height: 45px;

            border-color: rgb(230, 235, 239);

            text-align: left;

            border-radius: 5px;

            margin-right: 5px;

            padding: 10px;

            box-sizing: border-box;

        }

        .email::placeholder {

            color: black;

            opacity: 0.6;

        }

        button {

            width: 150px;

            height: 45px;

            background-color: rgb(61, 159, 255);

            border-radius: 5px;

            margin-left: 5px;

            box-shadow: 0px 0px 15px rgb(157, 207, 255);

            border-color: rgb(61, 159, 255);

            color: white;

        }

        span {

            padding-top: 10px;

            display: inline-block;

            width: 230px;

            font-size: 10px;

            margin-left: 10px;

        }

        .inner2 {

            display: flex;

        }

        .checkbox {

            border-radius: 5px;

            border-color: rgb(247, 249, 250);

            opacity: 0.5;

        }

    </style>

</head>

<body>

    <div class="outer">

        <strong>Let's keep in touch</strong>

        <p>

            Subscribe to keep up with fresh news and exciting updates.

            <br>

            We promise not to spam you!

        </p>

        <div class="inner">

            <input type="email" class="email" placeholder="Enter your email address">

            <button>SEND -&gt;</button>

            <div class="inner2">

                <input class="checkbox" type="checkbox" name="protocal">

                <span>I agree to my email address being stored and used to receive monthly newsletter.</span>

            </div>

        </div>

    </div>

</body>

</html>