Чистовик

.markdown

Чистовик

A Pen by Тайны Библии on CodePen.

License.

index.html

<header class="header">
  <nav>
    
      <a class="h4">Альфа-Библия</a>
      <a><i class="far fa-bookmark"></i>Содержание</a>
  
  </nav>
</header>
<main>
  <article>
    <header>
      <h1>Что такое Библия?</h1>
    </header>
    <section>
      
    </section>
    <aside>
      
    </aside>
    <section>
      
    </section>
    
    
    
  </article>
</main>
<footer></footer>

style.scss

@import url("https://fonts.googleapis.com/css?family=Poppins:400|Poppins:400");

$font-base: 112.5%; /*18px*/
$font-h1: 4.209em;
$font-h2: 3.157em;
$font-h3: 2.369em;
$font-h4: 1.777em;
$font-h5: 1.333em;
$font-small: 0.75em;

$line-height-base: 1.65;
$line-height-header: 1.15;

$font-family-base: "Poppins", sans-serif;

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: $font-base;
} /*18px*/

body {
  background-color: #0000000a;
  font-family: $font-family-base;
  font-weight: 400;
  line-height: $line-height-base;
  color: #333;
}
.headers {
  line-height: $line-height-header;
  font-family: $font-family-base;
  font-weight: 400;
}

h1 {
  @extend .headers;
  font-size: $font-h1;
}

h2 {
  @extend .headers;
  font-size: $font-h2;
}

h3 {
  @extend .headers;
  font-size: $font-h3;
}

h4, .h4 {
  @extend .headers;
  font-size: $font-h4;
}

h5 {
  @extend .headers;
  font-size: $font-h5;
}

small,
.text_small {
  font-size: $font-small;
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  
  padding: 15px;
  
  
  
  nav {
    display: flex;
  justify-content: space-between;
    color: #fff;
    
    a:last-child {
      border: 1px solid #FFF;
      display: inline-block;
      padding: 10px 15px;
      border-radius: 34px;
      cursor: pointer;
      
      i {
        margin-right: 15px;
        display: none;
        transition: all 900ms;
      }
    }
    a:last-child:hover{
      i {
        display: inline;
        transition: all 500ms;
      }
    }
  }
}

article {
  header {
    @include flex-center;
    height: 60vh;
    min-height: 400px;
    background: linear-gradient(to right, #3498db, #2c3e50);
    color: #FFF;
    text-align: center;
    
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />