simple JavaScript to make popup button on November 12, 2021 Get link Facebook Twitter Pinterest Email Other Apps simple javascript to make popup button Html part new project welcome to our youtube channel Something New Resistration Form Name First Last company Email Phone country code Phone Number subject --choose option-- 1 2 3 4 Are you beginner? yes no Resistor join me CSS part *{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; background: #333; font-family: sans-serif; color: #fff; } h1,h2{ font-size: 20px; text-align: center; color: #fff; text-transform: uppercase; } h2{ border-bottom: 1px solid rgb(5, 3, 3); border-bottom-width: 7px; letter-spacing: 1px; font-family: sans-serif; } .main{ width: 700px; height: 650px; margin: auto; background: linear-gradient(rgba(49, 49, 49, 0.65), rgba(134, 136, 136, 0.65)); border-radius:15px ; display: none; } .head-text{ background: linear-gradient(rgba(144, 92, 92, 0.5), rgba(53, 47, 47, 0.5)); height: 3em; display: flex; justify-content: center; align-items: center; border-top-left-radius: 15px; border-top-right-radius: 15px; } .box{ display: flex; justify-content: column; align-items: center; margin-top: 40px; } label{ margin-right: 10px; font-size: 1.5em; } .input1{ width: 240px; padding: 5px 10px ; margin: 0 20px; border: none; border-radius:2px ; outline: none; } span{ position: relative; top: 25px; left: 55px; } .span1{ position: relative; left: 120px; width: 200px; top: 30px; } .span2{ position:relative; left: 40px; } .input2{ width: 550px; padding: 5px 10px ; margin-left: 20px; } .input3{ width: 550px; padding: 5px 10px ; margin-left: 54px; } .input4{ width: 150px; padding: 5px 10px; margin-left: -70px; } .input5{ width: 450px; padding: 5px 10px; position: relative; left: -10px; } .option1{ width: 550px; padding: 4px 10px; margin-left: 40px; font-size: 1.2em; outline: none; } .input7{ position: relative; top:45px ; font-size: 1.5em; right: 500px; } input[type=radio]{ margin: 0 25px; } .btn{ position: relative; top: 65px; left: 40%; padding: 7px 20px; font-size: 25px; border-radius: 10px; border: none; font-family: sans-serif; transition: 0.2s; cursor: pointer; } .btn:hover{ background: rgb(180, 102, 102); color: #fff; } .last{ font-size: 30px; width: 100%; } .opt{ margin-left: -20px; text-transform:uppercase ; } @media only screen and (max-width: 800px) { .main{ width: 500px; } .box{ box-sizing: content-box; } label{ font-size: 20px; } .input1{ width: 150px; } .input2{ width: 550px; } .input3{ width: 550px; } .input4{ margin-left: -10px; } .input5{ width: 200px; margin-left: -40px; } .option1{ width: 380px; border-radius: 5px; } .input7{ position: relative; right: 300px; font-size: 1.5em; } .btn{ margin-top: 20px; } .span1{ position: relative; left: 40px; } } .join{ padding: 5px 20px; position: relative; left:30%; top: 600px; top: 550px; cursor: pointer; font-size: 2em; border-radius: 10px; border: none; transition: 0.2s; } .join:hover{ background-color: antiquewhite; transform: translateY(-2px); } Comments
Comments
Post a Comment