1
Первая проблема заключается в том, что я связал jQuery CDN с моим html-файлом, написал код эффекта jQuery (я хочу, чтобы текст исчезал после загрузки страницы), но все он просто скрывает текст. Вторая проблема заключается в том, что я пытаюсь сделать полностью отзывчивый сайт, и каждый раздел должен быть 100vh, но когда я уменьшаю окно до разрешения iPhone 6 Plus, изображения и текст из других разделов начинают перекрываться на других разделах и т. Д. . Как это исправить? Я новичок, и мне хотелось бы услышать критику, чтобы улучшить ее.1. jQuery не работает должным образом/2. отзывчивая проблема
$(document).ready(function() {
$(".fade").hide(0).delay(300).fadeIn(500);
});body {
font-family: Gotham A, Gotham B, Helvetica, Arial, sans-serif;
}
h1 {
font-size: 3em;
text-transform: uppercase;
}
h4 {
font-size: 1.5em;
color: #9e9e9e;
}
section {
width: 100%;
display: inline-block;
margin: 0;
max-width: 960;
height: 100vh;
vertical-align: middle;
}
#welcome-screen {
width: 100%;
display: table;
margin: 0;
max-width: none;
height: 100vh;
background-color: #ebebeb;
padding: 0 7%;
}
.heading {
display: table-cell;
vertical-align: middle;
}
.heading-span {
display: block;
color: #8e8e8e;
font-size: 18px;
margin-top: 0px;
text-transform: none;
}
.scrolldown-button {
position: absolute;
display: table;
text-align: center;
bottom: 30px;
left: 0;
right: 0;
margin: 0 auto 0 auto;
width: 48px;
height: 48px;
font-size: 20px;
}
a {
color: #000000;
transition: ease-in-out 0.15s;
}
a:hover {
color: #d09800;
text-decoration: none;
}
#about {
width: 100%;
min-height: 100vh;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 30px;
}
p {
display: column;
vertical-align: middle;
max-width: 960px;
margin-top: 50px;
}
.content-heading-span {
display: block;
font-size: 2em;
margin-top: 0px;
text-transform: uppercase;
margin-left: -20px;
color: #d09800;
}
.contact-btn {
font-size: 2em;
color: #000000;
}
.photo {
margin-bottom: 3em;
}
.copyright {
text-align: center;
color: #cccccc;
}
.phone {
display: column;
vertical-align: middle;
max-width: 960px;
margin-top: 0px;
font-size: 2em;
color: #000000;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<section id="welcome-screen">
<div class="heading fade">
<h1><span class="heading-span">Hi! My name is</span>
<strong>John Doe</strong>
</h1>
</div>
<div class="scrolldown-button">
<a href="#about"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
</div>
</section>
<section>
<div id="about">
<div class="wrapper">
<span><img src="http://www.placehold.it/250x250" class="photo"></img></span>
<p><span class="content-heading-span"><strong>About me</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut
lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus
ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa.
Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
<a href=""><strong>Download my resume</strong></a>
</div>
</div>
<div id="blabla">
<div class="wrapper">
<p><span class="content-heading-span"><strong>Lorem Ipsum sit dolor amet</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus
rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec
porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis
viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
</div>
</div>
<div id="blabla2">
<div class="wrapper">
<p><span class="content-heading-span"><strong>Proin eget elit</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna,
ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor
lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra
massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
</div>
<div id="contact">
<div class="wrapper">
<p><span class="content-heading-span"><strong>consectetur tincidunt</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum
magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor
lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra
massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
<span><p>E-mail:</p></span>
<a href="mailto:[email protected]" class="contact-btn">[email protected]</a>
<p>mobile:</p>
<p class="phone">235 635 123</p>
<div class="copyright">
<p>Copyright @ 2017 by <a href="index.html">John Doe</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Вы включаете jQuery дважды. Это не причина вашей проблемы, но, конечно же, это не поможет –