效果：
我们可以将以下代码。复制粘贴到菜鸟教程或者其他可以在线运行代码的网站。就可以在线调试预览代码了：
菜鸟教程在线编辑器/try/try.php?filename=tryhtml_intro
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>User Login</title><meta name="description" content="User login"><meta name="keywords" content="login,user,musayazlik"><meta name="author" content="Musa Yazlık"><link rel="stylesheet" href="css/style.css"><!-- Google Fonts --><link href="/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"rel="stylesheet"><style>* {margin: 0;padding: 0;-webkit-box-sizing: border-box;box-sizing: border-box;font-family: "poppins";letter-spacing: 0.5px;}.column {width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}body {background: linear-gradient(147deg, #8c54e9 0%, #4b76e7 74%);min-height: 100vh;width: 100%;}#cart-section {min-height: 100vh;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}#cart-section .container {max-width: 1140px;margin: 0 auto;}#cart-section .container .row {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-webkit-box-pack: space-evenly;-ms-flex-pack: space-evenly;justify-content: space-evenly;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}#cart-section .container .row .cart {width: 310px;height: 550px;background-color: #210f4d;margin: 10px;overflow: hidden;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}#cart-section .container .row .cart::before {content: " ";height: 50px;width: 50px;background-image: linear-gradient(220deg, #3e27ed 50%, #703dd0 80%);position: absolute;border-radius: 100px;}#cart-section .container .row .cart1 .top-area {width: 100%;z-index: 1;-ms-flex-pack: distribute;justify-content: space-around;margin-top: 25px;display: -webkit-box;display: -ms-flexbox;display: flex;}#cart-section .container .row .cart1 p {font-size: 11px;color: white;font-family: poppins;font-weight: 200;}#cart-section .container .row .cart1 .start-your {width: 100%;height: 300px;z-index: 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;margin-top: -30px;}#cart-section .container .row .cart1 .start-your p {font-size: 40px;margin: -5px 0 -5px 40px;font-family: "poppins semibold";text-align: start;}#cart-section .container .row .cart1 .button-area {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 240px;}#cart-section .container .row .cart1 .button-area button {margin-top: 20px;padding: 13px 40px;border-radius: 100px;font-size: 20px;font-family: "poppins";background: linear-gradient(100deg, #3e27ed 50%, #703dd0 80%);border: none;color: white;font-weight: 300;}#cart-section .container .row .cart1 .button-area .account-area {margin-top: 5px;}#cart-section .container .row .cart1 .button-area .account-area a {color: #703dd0;text-decoration: none;}#cart-section .container .row .cart2 .top-area {width: 100%;z-index: 1;-ms-flex-pack: distribute;justify-content: space-around;margin-top: 25px;display: -webkit-box;display: -ms-flexbox;display: flex;}#cart-section .container .row .cart2 p {font-size: 11px;color: white;font-family: poppins;font-weight: 200;}#cart-section .container .row .cart2 .log-in-area {width: 100%;height: 400px;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}#cart-section .container .row .cart2 .log-in-area label {width: 60%;margin-top: 20px;color: white;font-weight: 200;font-size: 15px;letter-spacing: 1px;}#cart-section .container .row .cart2 .log-in-area label input {border: none;background: transparent;border-bottom: 2px solid white;color: white;font-weight: 100;}#cart-section .container .row .cart2 .log-in-area label input:focus {outline: none;}#cart-section .container .row .cart2 h2 {margin-top: 40px;font-size: 38px;font-family: "poppins";font-weight: 700;color: white;margin-bottom: 20px;}#cart-section .container .row .cart2 .button-area {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 240px;}#cart-section .container .row .cart2 .button-area button {margin-top: 20px;padding: 10px 45px;border-radius: 100px;font-size: 20px;font-family: "poppins";background: linear-gradient(100deg, #3e27ed 50%, #703dd0 80%);border: none;color: white;font-weight: 300;}#cart-section .container .row .cart2 .button-area .account-area {margin-top: 5px;}#cart-section .container .row .cart2 .button-area .account-area a {color: #703dd0;text-decoration: none;}#cart-section .container .row .cart3 .top-area {width: 100%;z-index: 1;-ms-flex-pack: distribute;justify-content: space-around;margin-top: 25px;display: -webkit-box;display: -ms-flexbox;display: flex;}#cart-section .container .row .cart3 p {font-size: 11px;color: white;font-family: poppins;font-weight: 200;}#cart-section .container .row .cart3 .log-in-area {width: 100%;height: 400px;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}#cart-section .container .row .cart3 .log-in-area label {width: 60%;margin-top: 20px;color: white;font-weight: 200;font-size: 15px;letter-spacing: 1px;}#cart-section .container .row .cart3 .log-in-area label input {border: none;background: transparent;border-bottom: 2px solid white;color: white;font-weight: 100;}#cart-section .container .row .cart3 .log-in-area label input:focus {outline: none;}#cart-section .container .row .cart3 h2 {width: 100%;margin-top: 40px;font-size: 38px;font-family: "poppins";font-weight: 700;color: white;margin-bottom: 20px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}#cart-section .container .row .cart3 h2 span {margin: -10px 0 0 60px;}#cart-section .container .row .cart3 .button-area {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 240px;}#cart-section .container .row .cart3 .button-area button {margin-top: 20px;padding: 10px 45px;border-radius: 100px;font-size: 20px;font-family: "poppins";background: linear-gradient(100deg, #3e27ed 50%, #703dd0 80%);border: none;color: white;font-weight: 300;}#cart-section .container .row .cart3 .button-area .account-area {margin-top: 5px;}#cart-section .container .row .cart3 .button-area .account-area a {color: #703dd0;text-decoration: none;}#cart-section .container .row .cart1::before {-webkit-transform: scale(10);transform: scale(10);top: 60px;}#cart-section .container .row .cart2 {-webkit-transform: scale(1.1);transform: scale(1.1);margin: 0 40px;}#cart-section .container .row .cart2::before {-webkit-transform: scale(10);transform: scale(10);top: 110px;}#cart-section .container .row .cart3::before {-webkit-transform: scale(10);transform: scale(10);top: 120px;}@media screen and (max-width: 1100px) {#cart-section {min-height: 100vh;}#cart-section .container .row {-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}#cart-section .container .row .cart {margin: 40px 20px;}#cart-section .container .row .cart2 {-webkit-transform: scale(1);transform: scale(1);}#cart-section .container .row .cart2.column.top-area {-webkit-box-orient: horizontal !important;-webkit-box-direction: normal !important;-ms-flex-direction: row !important;flex-direction: row !important;-ms-flex-wrap: wrap !important;flex-wrap: wrap !important;}#cart-section .container .row .cart3 {-webkit-transform: scale(1);transform: scale(1);}#cart-section .container .row .cart3.column.top-area {-webkit-box-orient: horizontal !important;-webkit-box-direction: normal !important;-ms-flex-direction: row !important;flex-direction: row !important;-ms-flex-wrap: wrap !important;flex-wrap: wrap !important;}#cart-section .container .row .cart3.column.top-area {-webkit-box-orient: horizontal !important;-webkit-box-direction: normal !important;-ms-flex-direction: row !important;flex-direction: row !important;-ms-flex-wrap: wrap !important;flex-wrap: wrap !important;}}/*# sourceMappingURL=style.css.map */</style></head><body><section id="cart-section"><div class="container"><div class="row"><div class="cart cart1"><div style="z-index: 1;" class="column"><div class="top-area "><p>about us</p><p>terms & conditions</p><p>security</p></div><div class="start-your"><p>Start</p><p>your day</p><p>now</p></div><div class="button-area column"><button>Sign Up</button><div class="account-area"><p>Have account? <a href="#">Log in here</a></p></div></div></div></div><div class="cart cart2"><div style="z-index: 1;" class="column"><div class="top-area "><p>about us</p><p>terms & conditions</p><p>security</p></div><div class="log-in-area column"><h2>Log in</h2><label class="column" for=""> USER NAME<input type="text" value=""></label><label class="column" for=""> PASSWORD<input type="password" value=""></label></div><div class="button-area column"><button>Log in</button><div class="account-area"><p>Don't have account? <a href="#">Sign up here</a></p></div></div></div></div><div class="cart cart3"><div style="z-index: 1;" class="column"><div class="top-area "><p>about us</p><p>terms & conditions</p><p>security</p></div><div class="log-in-area column"><h2><span>New</span><span>account</span></h2><label class="column" for="">FULL NAME<input type="text" value="Naomi Gerhold"></label><label class="column" for=""> USER NAME<input type="text" value="naomigerhold"></label></div><div class="button-area column"><button>Log in</button><div class="account-area"><p>Have account?<a href="#"> Log in here</a></p></div></div></div></div></div></div></section></body></html>
