Bootstrap Snippet Responsive-Login-Page using HTML CSS

@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); div.main{ background: #0264d6; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #0264d6 1%, #1c2b5a 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#0264d6), color-stop(100%,#1c2b5a)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #0264d6 1%,#1c2b5a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0264d6', endColorstr='#1c2b5a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ height:calc(95vh); width:100%; } [class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; } /* ---------- GENERAL ---------- */ * { box-sizing: border-box; margin:0px auto; font-family: "Poppins" , sans-serif; } body { min-height: 100vh; color: #606468; width: 100%; font: 87.5%/1.5em 'Open Sans', sans-serif; margin: 0; } a { color: #eee; text-decoration: none; } a:hover { text-decoration: underline; } input { border: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 1.5em; padding: 0; -webkit-appearance: none; } p { line-height: 1.5em; } .clearfix { *zoom: 1; } .container { left: 50%; position: fixed; top: 35%; transform: translate(-50%, -50%); } /* ---------- LOGIN ---------- */ #login form{ width: 305px; } #login, .logo{ display:inline-block; width:40%; } #login{ border-right:1px solid #fff; padding: 0px 22px; width: 62%; } #login form span.fa { background-color: #fff; border-radius: 3px 0px 0px 3px; color: #000; display: block; float: left; height: 40px; font-size:24px; line-height: 50px; text-align: center; margin-top:-5px; width: 40px; } #login form input { height: 40px; } fieldset{ padding:0; border:0; margin: 0; } #login form input[type="text"], input[type="password"] { background-color: #fff; border: 3px solid #ccc; border-radius: 0px 3px 3px 0px; color: #000; margin-left:-10px; margin-bottom: 1em; margin-top: 1px; padding: 0 5px; width: 250px; } #login form input[type="submit"] { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #000000; color: #eee; font-weight: bold; /* margin-bottom: 2em; */ text-transform: uppercase; padding: 5px 10px; height: 30px; } #login form input[type="submit"]:hover { background-color: #d44179; } #login > p { text-align: center; } #login > p span { padding-left: 5px; } .middle { display: flex; width: 600px; } @media screen and (max-width: 600px) { .imagen { display:none; } .imagen2 { padding: 20px 22px; } } @media screen and (min-width: 601px) { .logo{ color:#fff; font-size:50px; line-height: 125px; text-align: center; } .imagen2 { display: none; } .imagen { margin: 10px; padding: 10px; display: flex; } } footer{ position: fixed; background: #140B5C; width: 100%; bottom: 0; left: 0px; margin: 0px; padding: 0; } footer::before{ content: ''; position: absolute; left: 0; top: 100px; height: 1px; width: 100%; background: #AFAFB6; } footer .content{ max-width: 1250px; margin: auto; padding: 30px 40px 40px 40px; } footer .content .top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .content .top .logo-details{ color: #fff; font-size: 30px; margin-left: 10px; } .content .top .media-icons{ display: flex; margin-right: 10px; } .content .top .media-icons a{ height: 30px; width: 30px; margin: 0 8px; border-radius: 50%; text-align: center; line-height: 30px; color: #fff; font-size: 17px; text-decoration: none; transition: all 0.4s ease; } .top .media-icons a:nth-child(1){ background: #4267B2; } .top .media-icons a:nth-child(1):hover{ color: #4267B2; background: #fff; } .top .media-icons a:nth-child(2){ background: #1DA1F2; } .top .media-icons a:nth-child(2):hover{ color: #1DA1F2; background: #fff; } .top .media-icons a:nth-child(3){ background: #E1306C; } .top .media-icons a:nth-child(3):hover{ color: #E1306C; background: #fff; } .top .media-icons a:nth-child(4){ background: #0077B5; } .top .media-icons a:nth-child(4):hover{ color: #0077B5; background: #fff; } .top .media-icons a:nth-child(5){ background: #FF0000; } .top .media-icons a:nth-child(5):hover{ color: #FF0000; background: #fff; } footer .content .link-boxes{ width: 100%; display: flex; justify-content: space-between; } footer .content .link-boxes .box{ width: calc(100% / 5 - 10px); } .content .link-boxes .box .link_name{ color: #fff; font-size: 18px; font-weight: 400; margin-bottom: 10px; position: relative; } .link-boxes .box .link_name::before{ content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 25px; background: #fff; } .content .link-boxes .box li{ margin: 6px 0; list-style: none; } .content .link-boxes .box li a{ color: #fff; font-size: 14px; font-weight: 400; text-decoration: none; opacity: 0.8; transition: all 0.4s ease } .content .link-boxes .box li a:hover{ opacity: 1; text-decoration: underline; } .content .link-boxes .input-box{ margin-right: 55px; } .link-boxes .input-box input{ height: 40px; width: calc(100% + 55px); outline: none; border: 2px solid #AFAFB6; background: #140B5C; border-radius: 4px; padding: 0 15px; font-size: 15px; color: #fff; margin-top: 5px; } .link-boxes .input-box input::placeholder{ color: #AFAFB6; font-size: 16px; } .link-boxes .input-box input[type="button"]{ background: #fff; color: #140B5C; border: none; font-size: 18px; font-weight: 500; margin: 4px 0; opacity: 0.8; cursor: pointer; transition: all 0.4s ease; } .input-box input[type="button"]:hover{ opacity: 1; } footer .bottom-details{ width: 100%; background: #0F0844; } footer .bottom-details .bottom_text{ margin: auto; padding: 20px 0px; display: flex; justify-content: space-between; } .bottom-details .bottom_text span, .bottom-details .bottom_text a{ font-size: 14px; font-weight: 300; color: #fff; opacity: 0.8; text-decoration: none; margin-left:10px; margin-right:10px; } .bottom-details .bottom_text a:hover{ opacity: 1; text-decoration: underline; } .bottom-details .bottom_text a{ margin-right: 10px; } @media (max-width: 900px) { footer .content .link-boxes{ flex-wrap: wrap; } footer .content .link-boxes .input-box{ width: 40%; margin-top: 10px; } } @media (max-width: 700px){ footer{ position: relative; } .content .top .logo-details{ font-size: 26px; margin-left: 110px; } .content .top .media-icons a{ height: 35px; width: 35px; font-size: 14px; line-height: 35px; margin-left: 15px; } footer .content .link-boxes .box{ width: calc(100% / 3 - 10px); } footer .content .link-boxes .input-box{ width: 60%; } .bottom-details .bottom_text span, .bottom-details .bottom_text a{ font-size: 12px; } } @media (max-width: 520px){ footer::before{ top: 245px; } footer .content .top{ flex-direction: column; } .content .top .media-icons{ margin-top: 16px; } footer .content .link-boxes .box{ width: calc(100% / 2 - 10px); } footer .content .link-boxes .input-box{ width: 100%; } }

"Responsive-Login-Page"
Bootstrap 4.1.1 Snippet by ccela

Related: See More

Questions / Comments:

"Responsive-Login-Page" Bootstrap 4.1.1 Snippet by ccela

Related: See More

Questions / Comments:

"Responsive-Login-Page"
Bootstrap 4.1.1 Snippet by ccela