Не могу создать второй блок

almaskazhymurat · October 1, 2019

<!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" />
    <title>Portfolio of Almas</title>
    <link rel="stylesheet" href="css/fonts.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>

  <body>
    <header class="header">
      <nav>
        <ul class="menu">
          <li><a href="#">About me</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
      <div>
          <h1>Portfolio</h1>
          <small>of Almas Qajymuratuly</small>
      </div>
      <svg class="arrows">
          <path class="a1" d="M0 0 L30 32 L60 0"></path>
          <path class="a2" d="M0 20 L30 52 L60 20"></path>
          <path class="a3" d="M0 40 L30 72 L60 40"></path>
        </svg>
    </header>

<div class="aboutme">
<h1>hi</h1>
</div>

    <footer class="footer"></footer>
  </body>
</html>

@import url("https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,800,800i,900,900i&display=swap");
html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  perspective: 1px;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: "Corn Demo", sans-serif;
  color: #fff;
}



header {
  margin-top: -35px;
  box-sizing: border-box;
  min-height: 100vh;
  text-align: center;
  padding-top: 5%;
  transform-style: preserve-3d;
  width: 100vw;
}

header::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  transform-origin: center;
  min-height: 100vh;

  background-image: url("/img/822464.jpg");

  background-repeat: no-repeat;
  background-size: cover;
  transition: 1s;
  /*Parallax*/
  transform: translateZ(-1px) scale(2);
}

h1 {
  margin-top: -100px;
  margin-bottom: 0;
  font-size: 100px;
  font-family: "Corn Demo" 900, sans-serif;
  letter-spacing: 15px;
}

header small {
  margin-top: 0;
  font-size: 20px;
  font-family: "Corn Demo" 400, sans-serif;
  letter-spacing: 3px;
  word-spacing: 10px;
}

.menu {
  padding: 0;
  margin: 0;
  display: block;
  margin-bottom: 200px;
}

.menu li {
  display: inline;
  margin-right: 50px;
  margin-left: 50px;
}

.menu li a {
  font-size: 20px;
  font-family: "Corn" 300, sans-serif;
  color: #fff;
  text-decoration: none;
}

.arrows {
  transform-style: inherit;
	width: 60px;
	height: 72px;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 20px;
}

.arrows path {
	stroke: #fff;
	fill: transparent;
	stroke-width: 2px;	
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
}

.aboutme{
 border: 5px red;
  background-image: url("/img/4insta.jpg");
}

@font-face {
  font-family: "Corn Demo";
  src: url("/fonts/Corn/CornDemo-Regular.eot");
  src: local("/fonts/Corn/CornDemo-Regular"),
    url("/fonts/Corn/CornDemo-Regular.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Corn/CornDemo-Regular.woff2") format("woff2"),
    url("/fonts/Corn/CornDemo-Regular.woff") format("woff"),
    url("/fonts/Corn/CornDemo-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

Всем привет! Я - новичок в веб. Решил сверстать сайт-портфолио для себя и наткнулся на такую проблему - не могу создать второй блок для конента. Сделал параллакс эффект (код из иннета), а остальные блоки почему-то уходят под него. Может кто знает почему?

Sign In

Не могу создать второй блок

Recommended Posts

almaskazhymurat

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information