Я только что сделал образец страницы регистрации в facebook, используя только html5, css3 и bootstrap 4 (используя строки и столбцы). Буду признателен, если кто-нибудь взглянет на нее и посоветует. также макет портится в chrome, а в firefox работает нормально. Я использую wamp и получаю доступ к странице через localhost!
любая помощь приветствуется.
ниже показан вид из Chrome:
вот вид из Firefox
<head>
<!-- Charset -->
<meta charset="utf-8">
<!-- Responsive -->
<meta name="viewport" content="width=device-width initial-scale=1.0 shrink-to-fit=no">
<!-- styelsheets -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/custom-styles.css">
<script src="https://kit.fontawesome.com/101f6b4938.js" crossorigin="anonymous"></script>
<!-- Title -->
<title>Facebook</title>
</head>
<body>
<div class="container-fluid bg-facebook-header">
<div class="container header-properties">
<!-- Logo -->
<div class="row no-gutters">
<div class="col-md-6 align-self-center">
<h3 class="fakebook-font">facebook</h3>
</div>
<!-- login form -->
<div class="col-md-6">
<form action="#" method="post">
<!-- labels -->
<div class="row">
<div class="col-sm-4 offset-sm-2 pl-3">
<label for="emailphone" class="text-white form-label-text">Email or phone</label>
</div>
<div class="col-sm-4 pl-3">
<label for="inputPassword" class="text-white form-label-text">Password</label>
</div>
</div>
<!-- form controls -->
<div class="row input-selector mt-n1">
<div class="col-md-4 text-right mb-1 offset-sm-2 login-form-spacing">
<input type="email" id="emailphone" name="email" required="required" placeholder="Email">
</div>
<div class="col-md-4 text-right mb-1 login-form-spacing">
<input type="password" id="inputPassword" name="password" placeholder="●●●●●●" required>
</div>
<!-- submit -->
<div class="col-sm-2 text-right input-btn">
<button type="submit" class="btn btn-facebook-login text-white col-form-label" name="button"><strong>Login</strong></button>
</div>
</div>
<!-- forgotten -->
<div class="row pl-sm-5">
<div class="col-md-5 offset-md-5">
<small class="form-text text-right mt-n2 mr-n2">
<a href="#" class="forgotten-account">Forgotten account?</a>
</small>
</div>
</div>
</form>
<!-- login form end -->
</div>
</div>
</div>
</div>
<!-- body -->
<div class="container-fluid bg-body-content">
<div class="container">
<div class="row no-gutters">
<!-- left side -->
<div class="col-sm-6 mt-sm-4">
<div class="row">
<p class="facebook-intro-text col-sm-11">Facebook helps you connect and share with the people in your life.</p>
</div>
<div>
<img src="assets/img/world-map-png-35422.png" alt="lorem ipsum" class="img-fluid body-img">
</div>
</div>
<!-- right side (sign up form) -->
<div class="col-sm-6 mt-sm-4">
<div class="row no-gutters">
<div class="signup-form-text offset-sm-1 pl-sm-3">
<h3>Create an account</h3>
<p>It's quick and easy.</p>
</div>
</div>
<!-- //form -->
<div class="row offset-sm-1 pl-sm-3">
<form class="signup-form-control" action="#" method="post">
<div class="row no-gutters justify-content-between mb-sm-2">
<div>
<label for="fname" class="sr-only">First Name</label>
<input type="text" id="fname" class="form-control" placeholder="First Name">
</div>
<div class="ml-2">
<label for="sname" class="sr-only">Surname</label>
<input type="text" id="sname" class="form-control" placeholder="Surname">
</div>
</div>
<div class="row no-gutters mb-sm-2">
<label for="mnum-email" class="sr-only">Mobile number or email address</label>
<input type="email" id="mnum-email" class="form-control" placeholder="Mobile number or email address">
</div>
<div class="row no-gutters mb-sm-3">
<label for="newpassword" class="sr-only">New Password</label>
<input type="password" id="newpassword" class="form-control" placeholder="New password">
</div>
<!-- DOB -->
<div class="row no-gutters mb-sm-2">
<div class="col-sm-6">
<label for="bday" class="mb-n1 signup-form-bday row no-gutters">Birthday</label>
<div class="row no-gutters mt-sm-2">
<select id="bday" name="Day" class="dropdown-text col-sm-3">
<option value="Day">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select class="dropdown-text col-sm-3" id="bday" name="month">
<option value="Month">Month</option>
<option value="January">Jan</option>
<option value="Febraury">Feb</option>
<option value="March">Mar</option>
<option value="April">Apr</option>
<option value="May">May</option>
<option value="June">Jun</option>
<option value="July">Jul</option>
<option value="August">Aug</option>
<option value="September">Sep</option>
<option value="October">Oct</option>
<option value="November">Nov</option>
<option value="December">Dec</option>
</select>
<select class="dropdown-text col-sm-3" id="bday">
<option value="Year">Year</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
<span class="question-circle-fa-1"><a href="#" class="pt-1 ml-2 fa fa-question-circle"></a></span>
</div>
</div>
</div>
<!-- DOB end -->
<!-- Radios -->
<div class="row no-gutters">
<label for="gender" class="signup-form-bday">Gender</label>
</div>
<div class="row no-gutters radio-text-gender pl-1">
<label for="gender" class="mr-3 col-sm-2">
<input type="radio" id="gender" name="Female"class="mr-1">Female
</label>
<label for="gender" class="mr-3 col-sm-2 text-center">
<input type="radio" id="gender" name="Male" class="mr-1">Male
</label>
<label for="gender" class="mr-3 col-sm-2">
<input type="radio" id="gender" name="Custom" class="mr-1">Custom
</label>
<span class="question-circle-fa"><a href="#" class="fa fa-question-circle"></a></span>
</div>
<!-- Radios end -->
<div class="row no-gutters">
<small class="tc-text col-sm-7">
<p>By clicking Sign Up, you agree to our <a href="#">Terms</a>, <a href="#">Data Policy</a> and <a href="#">Cookie Policy</a>. You may receive SMS notifications from us and can opt out at any time.</p>
</small>
</div>
<!-- Button -->
<div class="row no-gutters mb-sm-4">
<button type="button" class="btn btn-signup-properties col-sm-6">Sign Up</button>
</div>
<!-- Button end -->
<div class="row no-gutters">
<p class="form-bottom-note"><a href="#">Create a Page</a> for a celebrity, band or business.</p>
</div>
</form>
</div>
<!-- //form end -->
</div>
<!-- right side end -->
</div>
<!-- body row end -->
</div>
</div>
<!-- footer -->
<div class="container mt-sm-5">
<div class="row no-gutters text-center">
<ul class="list-inline footer-whitespace-parent">
<li class="list-inline-item">English (UK)</li>
<li class="list-inline-item"><a href="#">اوردو</a></li>
<li class="list-inline-item"><a href="#">پشتو</a></li>
<li class="list-inline-item"><a href="#">العربية</a></li>
<li class="list-inline-item"><a href="#">हिन्दी</a></li>
<li class="list-inline-item"><a href="#">ਪੰਜਾਬੀ</a></li>
<li class="list-inline-item"><a href="#">বাংলা</a></li>
<li class="list-inline-item"><a href="#">Deutsch</a></li>
<li class="list-inline-item"><a href="#">ગુજરાતી</a></li>
<li class="list-inline-item"><a href="#">فارسی</a></li>
<li class="list-inline-item"><a href="#">Español</a></li>
<li class="list-inline-item add-lang"><a href="#" class="fa fa-plus"></a></li>
</ul>
</div>
<div class="row no-gutters splitter">
</div>
<div class="no-gutters">
<ul class="list-inline footer-whitespace-parent space-between-lists my-sm-1">
<li class="list-inline-item"><a href="#">Sign Up</a></li>
<li class="list-inline-item"><a href="#">Log In</a></li>
<li class="list-inline-item"><a href="#">Messenger</a></li>
<li class="list-inline-item"><a href="#">Facebook Lite</a></li>
<li class="list-inline-item"><a href="#">Watch</a></li>
<li class="list-inline-item"><a href="#">People</a></li>
<li class="list-inline-item"><a href="#">Pages</a></li>
<li class="list-inline-item"><a href="#">Page categories</a></li>
<li class="list-inline-item"><a href="#">Places</a></li>
<li class="list-inline-item"><a href="#">Games</a></li>
<li class="list-inline-item"><a href="#">Locations</a></li>
<li class="list-inline-item"><a href="#">Marketplace</a></li>
<li class="list-inline-item"><a href="#">Groups</a></li>
<li class="list-inline-item"><a href="#">Portal</a></li>
<li class="list-inline-item"><a href="#">Instagram</a></li>
<li class="list-inline-item"><a href="#">Local</a></li>
<li class="list-inline-item"><a href="#">Fundraisers</a></li>
<li class="list-inline-item"><a href="#">Services</a></li>
<li class="list-inline-item"><a href="#">About</a></li>
<li class="list-inline-item"><a href="#">Create ad</a></li>
<li class="list-inline-item"><a href="#">Create Page</a></li>
<li class="list-inline-item"><a href="#">Developers</a></li>
<li class="list-inline-item"><a href="#">Careers</a></li>
<li class="list-inline-item"><a href="#">Privacy</a></li>
<li class="list-inline-item"><a href="#">Cookies</a></li>
<li class="list-inline-item"><a href="#">AdChoices</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Help</a></li>
</ul>
</div>
<div class="footer-copyright-text">
<p>Facebook © 2020</p>
</div>
</div>
<!-- footer end -->
<!-- -------------------------------------------------------------
JS files: jQuery first, then Popper.js, then Bootstrap JS
--------------------------------------------------------------- -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
------------------------ -------------------------------------------------- -------------------------------------------------- -------------------------------------------- -------------------------------------------------- --------------------- Пользовательский- CSS ------------------------ -------------------------------------------------- -----
* {
font-family: Arial;
}
.fakebook-font {
font-family: Tahoma;
font-weight: bold;
color: white;
margin: 0;
}
.bg-facebook-header {
background-image: linear-gradient(to top, #3b5998, #3b5999, #47639e) !important;
}
.header-properties {
max-height: 90px;
}
.form-label-text {
font-size: 0.6rem;
margin-bottom: 0;
}
.login-form-spacing {
padding-left: 0 !important;
padding-right: 0 !important;
}
.input-selector input {
font-size: 0.6rem;
}
.input-btn {
padding-left: 0 !important;
}
.input-selector input:focus {
background: #fffbc9;
}
.btn-facebook-login {
background-color: #4267b2;
font-size: 0.5rem;
padding: 0.175rem 0.45rem;
border: 1px solid #29487d;
border-radius: 0rem;
}
.btn-facebook-login:hover {
background-color: white;
color: #29487d !important;
}
.forgotten-account {
color: #9cb4d8;
margin-top: 0;
font-size: 75%;
padding-right: 0;
}
.forgotten-account:hover {
color: #9cb4d8 !important;
text-decoration: underline;
}
.bg-body-content {
background-image: linear-gradient(to top, #d3d8E8, #eaedf4, #fff) !important;
}
.body-img {
height: auto;
}
.facebook-intro-text {
font-family: Arial;
font-weight: 600;
font-size: 0.9rem !important;
color: #0e385f !important;
}
.signup-form-text {
font-family: Arial;
color: #333333 !important;
}
.signup-form-text h3 {
font-weight: 600;
font-size: 1.6rem;
}
.signup-form-text p {
font-size: 0.8rem;
margin-top: -5px;
}
.signup-form-control input {
font-size: 0.86rem;
}
.signup-form-label {
font-size: 0.8rem;
}
.signup-form-bday {
color: #90949c !important;
font-weight: bold;
font-size: 0.8rem;
}
.table-cells {
border-collapse: collapse;
border-spacing: 0px;
}
.dropdown-text {
font-size: 0.6rem;
line-height: 2rem;
text-align: left;
padding: 0.25rem 0rem;
background-color: white;
border: 1px solid #90949c;
}
.radio-text-gender {
font-size: 0.8rem;
}
.question-circle-fa-1 a {
color: #606770;
font-size: 0.8rem !important;
text-align: right;
text-decoration: none;
}
.question-circle-fa a {
color: #606770;
padding-top: 0.2rem !important;
text-align: right !important;
text-decoration: none;
}
.tc-text {
font-size: 0.5rem;
/* letter-spacing: 0.005rem;
word-spacing: 0.5rem; */
color: #777;
}
.tc-text a {
color: #3b5998 !important;
}
.btn-signup-properties {
background: linear-gradient(#67ae55, #578843);
background-color: #69a74e;
box-shadow: inset 0 1px 1px #a4e388;
border-color: #3b6e22 #3b6e22 #2c5115;
border: 1px solid #3b6e22;
color: white;
font-weight: bold;
text-shadow: 1px 2px rgba(0,0,0,.5);
padding: 0.175rem 0rem !important;
}
.btn-signup-properties:hover {
background: white !important;
border: 1px solid #3b5998;
box-shadow: inset 0 1px 1px #3b5998;
color: #3b5998;
text-shadow: none;
}
.form-bottom-note {
font-size: 0.6rem;
color: #666;
font-weight: bold;
}
.form-bottom-note a {
color: #3b5998 !important;
}
.footer-whitespace-parent {
font-size: 0rem !important;
}
.footer-whitespace-parent li {
font-size: 0.6rem !important;
color: #737373;
}
.footer-whitespace-parent li a {
color: #385898;
}
.splitter {
border-bottom: 1px solid #dddfe2;
}
.space-between-lists li {
margin-right: 1.26321rem !important;
}
.add-lang a {
height: 0.8rem;
width: 1.5rem;
background-color: #f5f6f7;
border: 1px solid #ccd0d5;
padding: 0.07rem;
font-size: 0.5rem !important;
color: #6a7180 !important;
}
.add-lang a:hover {
text-decoration: none;
background-color: #ebedf0;
}
.footer-copyright-text {
font-size: 0.5rem !important;
color: #737373;
margin-top: 0.8rem;
}