1

body {
  font-size: calc(21px + (26 - 14) * ((100vw - 300px) / (1600 - 300))) !important; }

header {
  background-color: #D3D3D3; }
  header nav {
    display: flex;
    height: 3em;
    justify-content: flex-end; }
    header nav ul {
      display: flex;
      align-items: center; }
      header nav ul li {
        display: flex;
        align-items: center;
        margin-right: 2em;
        list-style: none; }
        header nav ul li a {
          text-decoration: none; }
          header nav ul li a:hover {
            text-decoration: none; }


.mail svg {
  fill: #007bff;
  height: 2em;
  width: 2em;
  transition: all .5s; }
  .mail svg:hover {
    fill: #0056b3; }


.container {
  width: 80%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }


footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3em;
  background-color: #D3D3D3;
  display: flex;
  align-items: center;
  justify-content: center; }
  footer p {
    display: flex; }


@media screen and (max-width: 1280px) {
  .container {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important; } }


.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0, 0, 0, 0.9);
  transition: opacity .25s ease; }


.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer; }


.modal-state {
  display: none; }


.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible; }


.modal-state:checked + .modal .modal__inner {
  top: 0; }


.modal__inner {
  transition: top .25s ease;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  margin: auto;
  overflow: auto;
  background: #fff;
  border-radius: 5px;
  padding: 1em 2em;
  height: 50%;
  resize: both; }


.modal__close {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer; }


.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #ccc;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0; }


.modal__close:hover:after,
.modal__close:hover:before {
  background: #aaa; }


.modal__close:before {
  transform: rotate(-45deg); }


@media screen and (max-width: 768px) {
  .modal__inner {
    width: 90%;
    height: 50%;
    box-sizing: border-box; } }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/reboot.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id="header " class="header">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="" class="mail btn"><label for="modal-1">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                      x="0px" y="0px"
                     viewBox="0 0 14 14" style="enable-background:new 0 0 14 14;" xml:space="preserve">
  <path d="M7,9L5.268,7.484l-4.952,4.245C0.496,11.896,0.739,12,1.007,12h11.986
   c0.267,0,0.509-0.104,0.688-0.271L8.732,7.484L7,9z"/>
                    <path d="M13.684,2.271C13.504,2.103,13.262,2,12.993,2H1.007C0.74,2,0.498,2.104,0.318,2.273L7,8
   L13.684,2.271z"/>
                    <polygon points="0,2.878 0,11.186 4.833,7.079   "/>
                    <polygon points="9.167,7.079 14,11.186 14,2.875   "/>
</svg>
            </label> </a></li>
        </ul>
    </nav>
</header>
<div class="container">
    <div class="content">
        <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam fuga illo ipsum
            recusandae sapiente vero, voluptatum? Ad cum cupiditate dolor, et excepturi magnam quasi repellat
            reprehenderit saepe similique soluta temporibus?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam fuga illo ipsum
                recusandae sapiente vero, voluptatum? Ad cum cupiditate dolor, et excepturi magnam quasi repellat
                reprehenderit saepe similique soluta temporibus?</p></div>
    </div>
</div>
<input class="modal-state" id="modal-1" type="checkbox"/>
<div class="modal">
    <label class="modal__bg" for="modal-1"></label>
    <div class="modal__inner">
        <label class="modal__close" for="modal-1"></label>
        <h2>Some Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolorem ducimus expedita id ipsum iste omnis ut? Beatae, blanditiis dicta, ea eaque fugiat in minima odit officia praesentium, vitae voluptas.</p>
    </div>
</div>
<footer class="footer" id="footer">
    <p>copyright 2019</p>
</footer>
</body>
</html>
olliJes
  • 105
  • Связанный: https://ru.stackoverflow.com/q/332939/262779 и https://ru.stackoverflow.com/q/270936/262779 –  Feb 27 '19 at 14:14

0 Answers0