活动倒计时页面
代码语言:html
所属分类:布局界面
代码描述:活动倒计时页面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); * { box-sizing: border-box; padding: 0; margin: 0; } body { width: 100%; min-height: 100vh; font-family: "Roboto", sans-serif; background: url("http://repo.bfw.wiki/bfwrepo/image/5f5ff6d30e1bf.png") no-repeat center/cover; display: flex; flex-direction: column; align-items: center; position: relative; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: -1; } .container { text-align: center; margin: 2rem auto 0; padding: 0 15px; } .container > * { padding: 1rem; } .container h5 { font-size: 2rem; } .container form { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; height: 100%; } .container form input { padding: 10px 15px; font-size: 1.2rem; border: none; border-right: 1px solid rgba(0, 0, 0, 0.5); } .container form button { font-size: 1.2rem; outline: none; border: none; padding: 10px 15px; background: #ffffff; color: #b6281b; cursor: pointer; transition: 0.2s linear; } .container form button:hover { background: #b6281b; color: #ffffff; } .container h1 { font-size: 3rem; text-transform: uppercase; } .container h5, .container h1, .container p { color: #ffffff; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } .container p { font-size: 1.2rem; width: 80%; margin: auto; } .container .hidden { display: none; } .container .pickedTime { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .container .pickedTime .time { margin: 0.5rem; padding: 0.5rem 1rem; background: #ffffff; } .container .pickedTime .time span { font-size: 2.5rem; color: #b6281b; } .container .pickedTime .time p { color: #000000; width: 100%; } .container .boxes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .container .boxes .box { background: #ffffff; margin: 1rem; padding: 1rem 2rem; display: flex; flex-direction: column; text-align: center; } .container .boxes .box span { color: #b6281b; font-weight: bold; font-size: 4rem; } .container .boxes .box p { color: #000000; width: 100%; } </style> </head> <body translate="no" > <div class="container"> <h5>Add Date</h5> <form id="addDate"> <input type="date" name="date" id="date"> <input type="time" name="time" id="time"> <button type="submit">Submit</button> </form> <p class="hidden">You have</p> <div class="pickedTime"> <div class="time"> <span id="time-years">-</span> <p>Years</p> </div> <!-- time --> <div class="time"> <span id="time-days">-</span> <p>Days</p> </div> <!-- time --> <div class="time"> <span id="time-hours">-</span> <p>Hours</p> </div> <!-- time --> <div class="time"> <span id="time-minutes">-</span> <p>Minutes</p> </div> <!-- time --> <div class="time"> <span id="time-seconds">-</span> <p>Seconds</p> </div> <!-- time -.........完整代码请登录后点击上方下载按钮下载查看
网友评论0