Как разместить нижний колонтитул внизу страницы и что я делаю не так? - PullRequest
Новая
       0

Как разместить нижний колонтитул внизу страницы и что я делаю не так?

1 голос
/ 31 марта 2020

Когда я пытаюсь просмотреть свои веб-страницы на Ipad или Ipad Pro (с помощью инструментов разработчика Google chrome), нижний колонтитул не остается внизу страницы. У меня нет никаких проблем при просмотре на мобильных устройствах / смартфонах и компьютерах.

Я включил только код CSS, относящийся к нижнему колонтитулу.

Может кто-нибудь помочь мне с этим, пожалуйста ? 

footer {
  background: #212529;
  color: white;
  bottom: 0;
  
}

footer a {
  color: #fff;
  font-size: 14px;
  transition-duration: 0.2s;
}

footer a:hover {
  color: #ced3d7;
  text-decoration: none;
}

.copy {
  font-size: 12px;
  padding: 10px;
  border-top: 1px solid #FFFFFF;
}

.footer-middle {
  padding-top: 2em;
  color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="assets/css/style.css" type="text/css" />
    <title>Home|The Monkees</title>
</head>
<body>
  <header>
<!--------------------Navigation-->
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark stroke">
      <a class="navbar-brand" href="index.html">
        <img src="assets/image/LOGO.png" id="logo-transparent" alt="logo" style="width:143px;">
      </a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
    
    <div class="collapse navbar-collapse" id="navbarCollapse">  
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link " id="navbar-select-color" href="index.html">Home</a>
        </li>
        
        <li class="nav-item">
          <a class="nav-link" id="navbar-select-color2" href="photos.html">Photos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="navbar-select-color3" href="video.html">Video</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="navbar-select-color4" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
    </nav>
  </header>
  <!-- Contact Us Section -->
    <section class="Material-contact-section section-padding section-dark">
      <div class="container">
          <div class="row  ">
              <!-- Section Title -->
              <div class="col-md-12 wow animated fadeInLeft" data-wow-delay=".2s">
                  <h1 class="section-title">Love to Hear From You</h1>
              </div>
          </div>
              <!-- contact form -->
              <div class="col-md-12 wow animated fadeInRight " data-wow-delay=".2s" id="centerForm">
                  <form class="shake" role="form" method="post" id="contactForm" name="contact-form" data-toggle="validator">
                      <!-- Name -->
                      <div class="form-group label-floating">
                        <label class="control-label" for="name">Name</label>
                        <input class="form-control" id="name" type="text" name="name" required data-error="Please enter your name">
                        <div class="help-block with-errors"></div>
                      </div>
                      <!-- email -->
                      <div class="form-group label-floating">
                        <label class="control-label" for="email">Email</label>
                        <input class="form-control" id="email" type="email" name="email" required data-error="Please enter your Email">
                        <div class="help-block with-errors"></div>
                      </div>
                      <!-- Subject -->
                      <div class="form-group label-floating">
                        <label class="control-label">Subject</label>
                        <input class="form-control" id="msg_subject" type="text" name="subject" required data-error="Please enter your message subject">
                        <div class="help-block with-errors"></div>
                      </div>
                      <!-- Message -->
                      <div class="form-group label-floating">
                          <label for="message" class="control-label">Message</label>
                          <textarea class="form-control" rows="3" id="message" name="message" required data-error="Write your message"></textarea>
                          <div class="help-block with-errors"></div>
                      </div>
                      <!-- Form Submit -->
                      <div class="form-submit mt-5">
                          <button class="btn btn-common" type="submit" id="form-submit"><i class="material-icons mdi mdi-message-outline"></i> Send Message</button>
                          <div id="msgSubmit" class="h3 text-center hidden"></div>
                          <div class="clearfix"></div>
                      </div>
                  </form>
              </div>
          </div>
      </div>
    </section>

<footer class="mainfooter bg-dark" role="contentinfo">
  <div class="footer-middle">
      <ul class="social-network social-circle">
             <li><a href="https://www.facebook.com/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
             <li><a href="https://twitter.com/" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
             <li><a href="https://www.youtube.com" class="icoYoutube" title="Youtube"><i class="fa fa-youtube"></i></a></li>
             
      </ul>	
	<div class="col-md-12 copy">
			<p class="text-center">&copy; Copyright 2019 - The Monkees.  All rights reserved. //<a href="about.html"> About </a> //<a href="terms_of_use.html"> Terms of Use </a> //<a href="contact.html"> Contact </a></p>
  
	</div>
  </div>
</footer>
  
</body>
</html>

Ответы [ 4 ]

2 голосов
/ 31 марта 2020

Bei, добавив 

position: absolute;
width: 100%;

в нижний колонтитул, он будет располагаться снизу и шириной 100%, поэтому ваш css должен выглядеть следующим образом: 

footer {
    position: absolute;
    width: 100%;
    background: #212529;
    color: white;
    bottom: 0;

  }

  footer a {
    color: #fff;
    font-size: 14px;
    transition-duration: 0.2s;
  }

  footer a:hover {
    color: #ced3d7;
    text-decoration: none;
  }

  .copy {
    font-size: 12px;
    padding: 10px;
    border-top: 1px solid #FFFFFF;
  }

  .footer-middle {
    padding-top: 2em;
    color: white;
  }
1 голос
/ 31 марта 2020

у вас был дополнительный закрывающий тег div перед закрывающим тегом раздела. Попробуйте удалить это и посмотреть, решит ли это проблему. Если нет, мы можем попробовать положение: абсолютное 

footer {
  background: #212529;
  color: white;
  bottom: 0;
  
}

body{
   height:100%;
   border:solid 1px red;
   }

footer a {
  color: #fff;
  font-size: 14px;
  transition-duration: 0.2s;
}

footer a:hover {
  color: #ced3d7;
  text-decoration: none;
}

.copy {
  font-size: 12px;
  padding: 10px;
  border-top: 1px solid #FFFFFF;
}

.footer-middle {
  padding-top: 2em;
  color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="assets/css/style.css" type="text/css" />
    <title>Home|The Monkees</title>
</head>
<body>
  <header>
<!--------------------Navigation-->
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark stroke">
      <a class="navbar-brand" href="index.html">
        <img src="assets/image/LOGO.png" id="logo-transparent" alt="logo" style="width:143px;">
      </a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
    
    <div class="collapse navbar-collapse" id="navbarCollapse">  
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link " id="navbar-select-color" href="index.html">Home</a>
        </li>
        
        <li class="nav-item">
          <a class="nav-link" id="navbar-select-color2" href="photos.html">Photos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="navbar-select-color3" href="video.html">Video</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="navbar-select-color4" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
    </nav>
  </header>
  <!-- Contact Us Section -->
    <section class="Material-contact-section section-padding section-dark">
      <div class="container">
          <div class="row  ">
              <!-- Section Title -->
              <div class="col-md-12 wow animated fadeInLeft" data-wow-delay=".2s">
                  <h1 class="section-title">Love to Hear From You</h1>
              </div>
          </div>
              <!-- contact form -->
              <div class="col-md-12 wow animated fadeInRight " data-wow-delay=".2s" id="centerForm">
                  <form class="shake" role="form" method="post" id="contactForm" name="contact-form" data-toggle="validator">
                      <!-- Name -->
                      <div class="form-group label-floating">
                        <label class="control-label" for="name">Name</label>
                        <input class="form-control" id="name" type="text" name="name" required data-error="Please enter your name">
                        <div class="help-block with-errors"></div>
                      </div>
                      <!-- email -->
                      <div class="form-group label-floating">
                        <label class="control-label" for="email">Email</label>
                        <input class="form-control" id="email" type="email" name="email" required data-error="Please enter your Email">
                        <div class="help-block with-errors"></div>
                      </div>
                      <!-- Subject -->
                      <div class="form-group label-floating">
                        <label class="control-label">Subject</label>
                        <input class="form-control" id="msg_subject" type="text" name="subject" required data-error="Please enter your message subject">
                        <div class="help-block with-errors"></div>
                      </div>
                      <!-- Message -->
                      <div class="form-group label-floating">
                          <label for="message" class="control-label">Message</label>
                          <textarea class="form-control" rows="3" id="message" name="message" required data-error="Write your message"></textarea>
                          <div class="help-block with-errors"></div>
                      </div>
                      <!-- Form Submit -->
                      <div class="form-submit mt-5">
                          <button class="btn btn-common" type="submit" id="form-submit"><i class="material-icons mdi mdi-message-outline"></i> Send Message</button>
                          <div id="msgSubmit" class="h3 text-center hidden"></div>
                          <div class="clearfix"></div>
                      </div>
                  </form>
              </div>
          </div>
     
    </section>

<footer class="mainfooter bg-dark" role="contentinfo">
  <div class="footer-middle">
      <ul class="social-network social-circle">
             <li><a href="https://www.facebook.com/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
             <li><a href="https://twitter.com/" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
             <li><a href="https://www.youtube.com" class="icoYoutube" title="Youtube"><i class="fa fa-youtube"></i></a></li>
             
      </ul>	
	<div class="col-md-12 copy">
			<p class="text-center">&copy; Copyright 2019 - The Monkees.  All rights reserved. //<a href="about.html"> About </a> //<a href="terms_of_use.html"> Terms of Use </a> //<a href="contact.html"> Contact </a></p>
  
	</div>
  </div>
</footer>
  
</body>
</html>
0 голосов
/ 01 апреля 2020

В конце концов мне удалось найти решение самостоятельно.

Я опубликую то, что сделал здесь, на случай, если кто-то столкнется с этой проблемой.

Blockquote

Решение будет немного зависеть от остальная часть вашей CSS страницы. Это может занять несколько проб и ошибок, чтобы найти тот, который работает для вас. Я выбрал метод cal c ().

Вы заключаете весь ваш контент в новый div с именем класса "content". Обязательно закройте этот div непосредственно перед открытием нижнего колонтитула.

Затем вы используете devtools, чтобы узнать высоту вашего нижнего колонтитула, и используете метод cal c (), чтобы дать классу .content минимальная высота, равная 100% высоты просмотра, минус высота нижнего колонтитула.

.content { min-height: calc(100vh - /* height of footer here */); }

0 голосов
/ 31 марта 2020

@ DCR Это будет полный код CSS. 

@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah:100,200,300,400,500,600,700|Special+Elite:100,200,300,400,500,600,700');
/*---------------------------------Navigation Bar*/

/*----Navbar Buttons*/




.navbar-nav  li  a {
  color: #ffffff !important;
  font-family: "Gloria Hallelujah" , sans-serif;
  text-transform: uppercase;
  font-size: large;
  font-weight: 500;
  text-decoration: none;
  border:none;
  padding: 8px 8px;
  margin:4px 2px;
}

nav li  a,
nav li  a:after,
nav li  a:before {
  transition: all .5s;
}
#navbar-select-color:hover {
  color: #c8c8c8 !important;
}

#navbar-select-color2:hover {
  color: #c8c8c8 !important;
}

#navbar-select-color3:hover {
  color: #c8c8c8 !important;
}

#navbar-select-color4:hover {
  color: #c8c8c8 !important;
}

#logo-transparent {
  opacity: 1.0;
  filter: alpha(opacity=50);
  transition-timing-function: ease-in-out;
  transition: all .5s;
}

#logo-transparent:hover {
  opacity: 0.8;
  filter: alpha(opacity=100);
  transition-timing-function: ease-in-out;
  transition: all .5s;
}
/*----Navbar Animation*/
nav.stroke ul li a {
  position: relative;
}

nav.stroke ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #aaa;
  height: 1px;
}
nav.stroke ul li a:hover:after {
  width:100%;
}

/*---------------------------------Footer*/
footer {
  background: #212529;
  color: white;
  bottom: 0;
  position: absolute;
  
}

footer a {
  color: #fff;
  font-size: 14px;
  transition-duration: 0.2s;
}

footer a:hover {
  color: #ced3d7;
  text-decoration: none;
}

.copy {
  font-size: 12px;
  padding: 10px;
  border-top: 1px solid #FFFFFF;
}

.footer-middle {
  padding-top: 2em;
  color: white;
}


/*---------------------------------Social Icons*/

/* footer social icons */

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;

}

ul .social-network {
  display: inline;
  margin-left: 0 !important;
  padding: 0;
  float: inherit;

}

 ul .social-network li {
  display: inline;
  margin: 0 5px;
  list-style: none;
}


.social-network a.icoTwitter:hover i {
  color: #007bb7;
}
.social-network a.icoFacebook:hover i {
  color: #3B5998;
}

.social-network a.icoYoutube:hover i {
  color: #c4302b;
}


.social-circle li a {
  display: block;
  position: relative;
  margin: 15px 15px 15px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  width: 65px;
  height: 65px;
  font-size:40px;

}

.social-circle li i {
  margin: 0;
  line-height: 30px;
  text-align: center;
}

.social-circle li a:hover i,
.triggeredHover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms--transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}

.social-circle i {
  color: #595959;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}

.social-network a {
  background-color: #F9F9F9;
}

/*---------------------------------Background*/
#div-with-bg {

    background-image: url("https://i.imgur.com/qv5ZwaO.jpg"); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    
}

#footer {
    position: relative;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
}


.image-box {
  position: relative;
}

.image-box__background,
.image-box__overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.image-box__background {
  background: var(--image-url) center no-repeat;
  background-size: cover;

  z-index: 1
}

.image-box__overlay {
  background: rgba(0, 0, 0, 0.5);

  z-index: 2;
}

.image-box__content {
  position: relative;

  z-index: 3;

  /* Finally, style and place the content */
  color: white;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

html{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;
}

body, html {
  height: 100%;
  
}

img {
  width:100%;
  height: auto;
  position: relative;

}

#bg {

  /* Full height */
  height: 100%;


  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  position: relative;

}

/*---------------------------------Text*/

.band_biography {
    margin-left: auto;
    margin-right: 30%;
    margin-top: 10%;
    width: 20em;
    color: white;
    background: rgba(0, 0, 0, 0.6);

}

.bio_image {
  border-radius: 50%;
  max-width:15%;
  margin-top: 12%;
  margin-left: 32%;
  background-size: contain;
  float: left;
  background: rgba(0, 0, 0, 0.6);
}

/*---------------------------------Contact Form*/

.section-padding {
    padding: 45px 0;
}

.form-submit {
background: #B9DFFF;

color: #fff;

border: 1px solid #eee;

border-radius: 20px;

box-shadow: 5px 5px 5px #eee;

text-shadow:none;

width: 35%;

position: relative;

margin-left: 35%;

text-align: center;

}

.form-submit:hover {

background: #016ABC;

color: #fff;

border: 1px solid #eee;

border-radius: 20px;

width: 35%;
box-shadow: 5px 5px 5px #eee;

text-shadow:none;

}

.section-dark {
    background-color: #f9f9f9;
    z-index: -2;
}
.form-control,
.form-group .form-control {
    border: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#009688), to(#009688)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
    background-image: -webkit-linear-gradient(#009688, #009688), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: -o-linear-gradient(#009688, #009688), -o-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
    -webkit-background-size: 0 2px, 100% 1px;
    background-size: 0 2px, 100% 1px;
    background-repeat: no-repeat;
    background-position: center bottom, center -webkit-calc(100% - 1px);
    background-position: center bottom, center calc(100% - 1px);
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: background 0s ease-out;
    -o-transition: background 0s ease-out;
    transition: background 0s ease-out;
    float: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0
}

.form-control::-moz-placeholder,
.form-group .form-control::-moz-placeholder {
    color: #BDBDBD;
    font-weight: 400
}

.form-control:-ms-input-placeholder,
.form-group .form-control:-ms-input-placeholder {
    color: #BDBDBD;
    font-weight: 400
}

.form-control::-webkit-input-placeholder,
.form-group .form-control::-webkit-input-placeholder {
    color: #BDBDBD;
    font-weight: 400
}

.form-control[disabled],
.form-control[readonly],
.form-group .form-control[disabled],
.form-group .form-control[readonly],
fieldset[disabled] .form-control,
fieldset[disabled] .form-group .form-control {
    background-color: rgba(0, 0, 0, 0)
}

.form-control[disabled],
.form-group .form-control[disabled],
fieldset[disabled] .form-control,
fieldset[disabled] .form-group .form-control {
    background-image: none;
    border-bottom: 1px dotted #D2D2D2
}

.form-group {
    position: relative
}

.form-group.label-floating label.control-label,
.form-group.label-placeholder label.control-label,
.form-group.label-static label.control-label {
    position: absolute;
    pointer-events: none;
    -webkit-transition: .3s ease all;
    -o-transition: .3s ease all;
    transition: .3s ease all
}

.form-group.label-floating label.control-label {
    will-change: left, top, contents
}

.form-group.label-placeholder:not(.is-empty) label.control-label {
    display: none
}

.form-group .help-block {
    position: absolute;
    display: none
}

.form-group.is-focused .form-control {
    outline: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#009688), to(#009688)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
    background-image: -webkit-linear-gradient(#009688, #009688), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: -o-linear-gradient(#009688, #009688), -o-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
    -webkit-background-size: 100% 2px, 100% 1px;
    background-size: 100% 2px, 100% 1px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s
}

.form-group.is-focused .form-control .material-input:after {
    background-color: #009688
}

.form-group.is-focused label,
.form-group.is-focused label.control-label {
    color: #009688
}

.form-group.is-focused.label-placeholder label,
.form-group.is-focused.label-placeholder label.control-label {
    color: #BDBDBD
}

.form-group.is-focused .help-block {
    display: block
}

.form-group.has-warning .form-control {
    -webkit-box-shadow: none;
    box-shadow: none
}

.form-group.has-warning.is-focused .form-control {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff5722), to(#ff5722)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
    background-image: -webkit-linear-gradient(#ff5722, #ff5722), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: -o-linear-gradient(#ff5722, #ff5722), -o-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2)
}

.form-group.has-warning .help-block,
.form-group.has-warning label.control-label {
    color: #ff5722
}

.form-group.has-error .form-control {
    -webkit-box-shadow: none;
    box-shadow: none
}

.form-group.has-error .help-block,
.form-group.has-error label.control-label {
    color: #f44336
}

.form-group.has-success .form-control {
    -webkit-box-shadow: none;
    box-shadow: none
}

.form-group.has-success.is-focused .form-control {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#4caf50), to(#4caf50)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
    background-image: -webkit-linear-gradient(#4caf50, #4caf50), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: -o-linear-gradient(#4caf50, #4caf50), -o-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2)
}

.form-group.has-success .help-block,
.form-group.has-success label.control-label {
    color: #4caf50
}

.form-group.has-info .form-control {
    -webkit-box-shadow: none;
    box-shadow: none
}

.form-group.has-info.is-focused .form-control {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#03a9f4), to(#03a9f4)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
    background-image: -webkit-linear-gradient(#03a9f4, #03a9f4), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: -o-linear-gradient(#03a9f4, #03a9f4), -o-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2)
}

.form-group.has-info .help-block,
.form-group.has-info label.control-label {
    color: #03a9f4
}

.form-group textarea {
    resize: none
}

.form-group textarea~.form-control-highlight {
    margin-top: -11px
}

.form-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.form-group select~.material-input:after {
    display: none
}

.form-control {
    margin-bottom: 7px
}

.form-control::-moz-placeholder {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}

.form-control:-ms-input-placeholder {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}

.form-control::-webkit-input-placeholder {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}
.checkbox label,
.radio label,
label {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}

label.control-label {
    font-size: 12px;
    line-height: 1.07142857;
    font-weight: 400;
    margin: 16px 0 0 0
}

.help-block {
    margin-top: 0;
    font-size: 12px
}

.form-group {
    padding-bottom: 7px;
    margin: 28px 0 0 0
}

.form-group .form-control {
    margin-bottom: 7px
}

.form-group .form-control::-moz-placeholder {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}

.form-group .form-control:-ms-input-placeholder {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}

.form-group .form-control::-webkit-input-placeholder {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}

.form-group .checkbox label,
.form-group .radio label,
.form-group label {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}

.form-group label.control-label {
    font-size: 12px;
    line-height: 1.07142857;
    font-weight: 400;
    margin: 16px 0 0 0
}

.form-group .help-block {
    margin-top: 0;
    font-size: 12px
}

.form-group.label-floating label.control-label,
.form-group.label-placeholder label.control-label {
    top: -7px;
    font-size: 16px;
    line-height: 1.42857143
}

.form-group.label-floating.is-focused label.control-label,
.form-group.label-floating:not(.is-empty) label.control-label,
.form-group.label-static label.control-label {
    top: -30px;
    left: 0;
    font-size: 12px;
    line-height: 1.07142857
}

.form-group.label-floating input.form-control:-webkit-autofill~label.control-label label.control-label {
    top: -30px;
    left: 0;
    font-size: 12px;
    line-height: 1.07142857
}

.form-group.form-group-sm {
    padding-bottom: 3px;
    margin: 21px 0 0 0
}

.form-group.form-group-sm .form-control {
    margin-bottom: 3px
}

.form-group.form-group-sm .form-control::-moz-placeholder {
    font-size: 11px;
    line-height: 1.5;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-sm .form-control:-ms-input-placeholder {
    font-size: 11px;
    line-height: 1.5;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-sm .form-control::-webkit-input-placeholder {
    font-size: 11px;
    line-height: 1.5;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-sm .checkbox label,
.form-group.form-group-sm .radio label,
.form-group.form-group-sm label {
    font-size: 11px;
    line-height: 1.5;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-sm label.control-label {
    font-size: 9px;
    line-height: 1.125;
    font-weight: 400;
    margin: 16px 0 0 0
}

.form-group.form-group-sm .help-block {
    margin-top: 0;
    font-size: 9px
}

.form-group.form-group-sm.label-floating label.control-label,
.form-group.form-group-sm.label-placeholder label.control-label {
    top: -11px;
    font-size: 11px;
    line-height: 1.5
}

.form-group.form-group-sm.label-floating.is-focused label.control-label,
.form-group.form-group-sm.label-floating:not(.is-empty) label.control-label,
.form-group.form-group-sm.label-static label.control-label {
    top: -25px;
    left: 0;
    font-size: 9px;
    line-height: 1.125
}

.form-group.form-group-sm.label-floating input.form-control:-webkit-autofill~label.control-label label.control-label {
    top: -25px;
    left: 0;
    font-size: 9px;
    line-height: 1.125
}

.form-group.form-group-lg {
    padding-bottom: 9px;
    margin: 30px 0 0 0
}

.form-group.form-group-lg .form-control {
    margin-bottom: 9px
}

.form-group.form-group-lg .form-control::-moz-placeholder {
    font-size: 18px;
    line-height: 1.3333333;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-lg .form-control:-ms-input-placeholder {
    font-size: 18px;
    line-height: 1.3333333;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-lg .form-control::-webkit-input-placeholder {
    font-size: 18px;
    line-height: 1.3333333;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-lg .checkbox label,
.form-group.form-group-lg .radio label,
.form-group.form-group-lg label {
    font-size: 18px;
    line-height: 1.3333333;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-lg label.control-label {
    font-size: 14px;
    line-height: .99999998;
    font-weight: 400;
    margin: 16px 0 0 0
}

.form-group.form-group-lg .help-block {
    margin-top: 0;
    font-size: 14px
}

.form-group.form-group-lg.label-floating label.control-label,
.form-group.form-group-lg.label-placeholder label.control-label {
    top: -5px;
    font-size: 18px;
    line-height: 1.3333333
}

.form-group.form-group-lg.label-floating.is-focused label.control-label,
.form-group.form-group-lg.label-floating:not(.is-empty) label.control-label,
.form-group.form-group-lg.label-static label.control-label {
    top: -32px;
    left: 0;
    font-size: 14px;
    line-height: .99999998
}

.form-group.form-group-lg.label-floating input.form-control:-webkit-autofill~label.control-label label.control-label {
    top: -32px;
    left: 0;
    font-size: 14px;
    line-height: .99999998
}

select.form-control {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0
}

.form-group.is-focused select.form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #D2D2D2
}

.form-group.is-focused select.form-control[multiple],
select.form-control[multiple] {
    height: 85px
}

.input-group-btn .btn {
    margin: 0 0 7px 0
}

.form-group.form-group-sm .input-group-btn .btn {
    margin: 0 0 3px 0
}

.form-group.form-group-lg .input-group-btn .btn {
    margin: 0 0 9px 0
}

.input-group .input-group-btn {
    padding: 0 12px
}

.input-group .input-group-addon {
    border: 0;
    background: 0 0
}

.form-group input[type=file] {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100
}


#contactForm {
    margin-top: 100px
    
}

#contactForm .form-group label.control-label {
    color: #8c8c8c
}

#contactForm .form-control {
    font-weight: 500;
    height: auto
    
}

.row {
  display: block;
  text-align: center;
  padding-top: 10%;
}

#centerForm {
  text-align: center;
}

.container{
    padding-bottom: 0%;
}

/*---------------------------------Biography*/



.box{
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    padding: 40px;
    text-align: center;
    color: white;
    font-family: 'Century Gothic' ,sans-serif;
    padding-bottom: 10%;
    padding-top: 5%;
}

.box-img{
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

.box h1{
    font-size: 40px;
    letter-spacing: 4px;
    font-weight: 100;
    
}

.box h5{
    font-size: 25px;
    letter-spacing: 3px;
    font-weight: 100;
}

.box p{
    text-align: justify;
    
}

/*---------------------------------Photo Grid*/

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/*---------------------------------Media Queries*/


/* ----------- iPad Pro 10.5" ----------- */

@media only screen 
  and (min-width: 834px) 
  and (max-width: 1112px)
  and (-webkit-min-pixel-ratio: 2) {
  .container {
      padding-bottom: 22%;
      
  }
  .row {
      padding-top: 20% !important;
  }
}



/* ----------- iPad Pro 12.9" ----------- */

@media only screen 
  and (min-width: 1024px) 
  and (max-width: 1366px)
  and (-webkit-min-pixel-ratio: 2) {
.container {
      padding-bottom: 22%;
      
  }
  .row {
      padding-top: 20% !important;
  }
}

/* ----------- Blackberry Playbook ----------- */
@media (max-width: 600px) and (orientation: portrait) {
    .row {
      padding-top: 15%;
  }
 }
 
@media only screen 
  and (min-width: 834px) 
  and (max-width: 1112px)
  and (-webkit-min-pixel-ratio: 2) {
  .container {
      padding-bottom: 22%;
      
  }
  .row {
      padding-top: 20% !important;
  }
}

/* ----------- Photo Gallery ----------- */

img{
    width:100%;
}    

.gallery a {
	position: relative;
	display: block;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 100px;
    height: 100%;
	width: 100%;
    padding-top:40px;
    top: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    transition: all 1s ease;
}

.overlay2{
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 100px;
    height: 100%;
	width: 100%;
    padding-top:100px;
    top: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    transition: all 1s ease;
}

.gallery a:hover .overlay ,
.gallery a:hover .overlay2 {
    opacity: 0.8;
}

.img-space{
    margin:20px 0px;
}

/*---------Video Gallery--------*/
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...