html - 移动设备上的滚动问题

Question

我需要有关我的联系表单的帮助，屏幕不在固定位置，并且某些元素使页面能够在移动设备上滚动，但由于所有内容都居中对齐，所以本不应如此。我尝试在移动查询中删除容器中的填充，但这没有用，而且我似乎无法找出它滚动的原因，我将视口(viewport)更改为 100% 宽度并解决了问题，但从长远来看这不会起作用因为我的网站应该是响应式的，所以我将视口(viewport)更改回初始比例以及 HTML 代码中看到的所有内容，但滚动问题又回来了。

CSS 和 HTML

@media screen and (max-width: 500px) /* Mobile */ {






  * {
  box-sizing: border-box;
}

#navigation {
display: none;


}



input[type=text3], select, textarea {
    width: 55%; /* Full width */
    padding: 30px; /* Some padding */ 
    margin-top: 0px;
    outline: none;
    color: #ff0055;
    text-align: center;
    border: 1px solid #f3f3f3; /* Gray border */
    border-radius: 100px; /* Rounded borders */
    
    }
 
 
 
 
 input[type=text2], select, textarea {
    width: 55%; /* Full width */
    padding: 20px; /* Some padding */ 
    color: #ff0055;
    outline: none;
    text-align: center; 
    border: 1px solid #f3f3f3; /* Gray border */
    border-radius: 100px; /* Rounded borders */
    
    }

    input[type=text2]:hover, select, textarea {
    width: 55%; /* Full width */
    padding: 20px; /* Some padding */ 
    color: #ff0055;
    text-align: center; 
    border: 2px solid #ff0055; /* Gray border */
    border-radius: 100px; /* Rounded borders */
    transition: all 0.3s ease 0s;
    }

    input[type=text3]:hover, select, textarea {
    width: 55%; /* Full width */
    padding: 30px; /* Some padding */ 
    margin-top: 0px;
    color: #ff0055;
    text-align: center; 
    border: 2px solid #ff0055; /* Gray border */
    border-radius: 100px; /* Rounded borders */
    transition: all 0.3s ease 0s;
    }


 input[type=text], select, textarea {
    width: 55%; /* Full width */
    padding: 20px; /* Some padding */ 
    text-align: center;
    outline: none;
    color: #FF0055;
    border: 1px solid #f3f3f3; /* Gray border */
    border-radius: 100px; /* Rounded borders */
    
    }

    input[type=text]:hover, select, textarea {
    width: 55%;
    padding: 20px; /* Some padding */ 
    text-align: center;
    border: 2px solid #ff0055; /* Gray border */
    border-radius: 50px; /* Rounded borders */
    transition: all 0.3s ease 0s;
    }



input[type=submit] {
    background-color: #001FFF;
    color: white;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    border: none;
    cursor: pointer;
    border-color: #000000;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    text-shadow: none; 
    margin: 50px 175px;
    padding: 10px 50px;
    border: none;
    border-radius: 100px;
    outline: none;
    cursor: pointer;
}


input[type=submit]:hover {
    background-color: #0019CF;
    color: white;
    text-align: center;
    outline: none;
    -ms-transform: translate(-50%, -50%);
    transition: all 0.3s ease 0s;
    -webkit-box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
    -moz-box-shadow:    0px 20px 15px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
}

 
.container {
    border-radius: 100%;
    font-size: 20px;
    text-align: center;
    background-color: #FFFFFF;
    display: inline-block;
  }




.nav2 {
  height: 50px;
  width: 100%;
  margin: 0 auto;
  background-color: white;
  position: fixed;
  z-index: 9999;
}

.nav2 > .nav-header {
  display: inline;
  margin: 0 auto;
  z-index: 9999;
}

.nav2 > .nav-header > .nav-title {
  display: inline-block;
  font-size: 20px;
  margin: 0 auto;
  color: #fff;
  font-family: 'Pacifico', cursive;
  padding: 5px 10px 10px 15px;
}
#header {
display: inline-block;
  font-size: 20px;
  position: fixed;
  margin: 0 auto;
  color: #000;
  z-index: 10000;
  font-family: 'Pacifico', cursive;
  padding: 5px 10px 10px 15px;
}

.nav2 > .nav-btn {
  display: none;
  margin: 0 auto;
}

.nav2 > .nav-links {
  display: inline;
  z-index: 9999;
  margin: 0 auto;
  float: right;
  font-size: 15px;
}

.nav2 > .nav-links > a {
  display: inline-block;
  z-index: 9999;
  margin: 0 auto;
  text-align: center;
  background-color: white;
  padding: 13px 10px 13px 10px;
  text-decoration: none;
  color: #000;
}

.nav2 > .nav-links > a:hover {
  background-color: #005DFF;
  color: white;
  z-index: 9999;
}

.nav2 > #nav-check {
  display: none;
}

@media (max-width:600px) {
  .nav2 > .nav-btn {
    z-index: 9999;
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .nav2 > .nav-btn > label {
    display: inline-block;
    z-index: 9999;
    background-color: white;
    color: black;
    width: 50px;
    height: 50px;
    padding: 13px;
  }
  .nav2 > .nav-btn > label:hover {
    background-color: blue);
    z-index: 9999;
  }
  .nav2 > .nav-btn > label > span {
    display: block;
    z-index: 9999;
    width: 25px;
    height: 10px;
    border-top: 3px solid black;
  }
  .nav2 > .nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #fff;
    height: 0px;
    z-index: 9999;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0px;
  }
  .nav2 > .nav-links > a {
    display: block;
    z-index: 9999;
    color: black;
    width: 100%;
  }
  .nav2> #nav-check:not(:checked) + .nav-links {
    height: 0px;
    z-index: 9999;
  }
  .nav2 > #nav-check:checked + .nav-links {
    height: calc(100vh - 50px);
    z-index: 9999;
    overflow-y: auto;
  }
}

}
.button {
    position: absolute;
    top: 130%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transition: all 0.3s ease 0s;
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    -moz-box-shadow:    0px 5px 15px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    background-color: #FFFFFF;
    color: black;
    font-size: 16px;
    padding: 32px 24px;
    font-family: 'Open Sans', sans-serif;
    border: none;
    cursor: pointer;
    border-radius: 100px;
    border-color: #000000;
    text-align: center;
    display: flex;
    text-decoration: none;
    text-shadow: none;
  	align-items: center;
    justify-content: center;
}

.button:hover {
  background-color: #FFFFFF;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
  color: #FF0055;
  text-shadow: none;
  text-decoration: none;
}



@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Overpass', sans-serif;
    background: #ffffff;
   
}

p {
text-align: center;

}

h1 {
text-align: center;
padding: 100px;
font-weight: bolder;
}

h2 {
padding: 10px 10px;
font-weight: bolder;
}

h3 {
font-weight: bolder;
top: 50%;
    left: -10%;
    transform: translate(0%, -100%);
}



#header.active {
     box-shadow: 0 0 5px rgba(0,0,0,0.3);
     -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}   

a:link {
  position: relative;
  color: #000000;
  text-decoration: none;
}

a:hover {
color: #000000;  
}

a:link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.nav:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.active:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

a:link {
  cursor: pointer;
  padding: 13px;
  text-decoration: none;
}

a:link:hover {
   padding: 13px;
  -webkit-transition: height 0.5s ease;
    -moz-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    -ms-transition: height 0.5s ease;
    transition: background-color 0.5s ease;
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    -ms-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
            
}

a:link:active {
   padding: 13px;
  -webkit-transition: height 0.5s ease;
    -moz-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    -ms-transition: height 0.5s ease;
    transition: background-color 0.5s ease;
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    -ms-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
            
}

a:visited {
color: #000000;
}



#header.scroll {
  background-color: #000000;
  opacity: 0.5;
}



.main {
border-radius: 100px;
padding: 13px;
border: none!important;
text-decoration: none!important

}

.main:hover {
background-color: #00439F;
color: white;
border: none;
padding: 13px;
text-decoration: none!important;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    position: fixed;
    margin: -13px -90px;
    border-radius: 100px;
  -webkit-animation:bounce 1s infinite;
}

</style>

<!doctype html>
<html>
<head>
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>adamferreira - Contact</title>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">adamferreira</div>
<div id="navigation"
<ul>
    <a class="main" href="portfolio.html">Portfolio</a>
    <a class="nav" href="index.html">Home</a>
    <a class="nav" href="contact.php">Contact</a>
    <a class="nav" href="featured.html">Featured</a>
    <a class="nav" href="story-highlights.html">Story Highlights</a>
</ul>

    
</div>
</div>
</div>

<div class="nav2">
    <div class="nav-header">
      <div class="nav-title"></div>
    </div>
    <div class="nav-btn">
      <label for="nav-check">
        <span></span>
        <span></span>
        <span></span>
      </label>
    </div>
    <input type="checkbox" id="nav-check">
    <div class="nav-links">
      <a href="portfolio.html">Portfolio</a>
      <a href="index.html">Home</a>
      <a href="contact.php">Contact</a>
      <a href="featured.html">Featured</a>
      <a href="story-highlights.html">Story Highlights</a>
    </div>
  </div>
</head>
<body>
<div class="headerBackground"></div>

<div class="container" data-aos="ease-in-out-back" data-aos="zoom out">
<h1>Contact</h1>
<form method="POST">
    <input type="text" name="firstname" placeholder="Your name..." style="font-size: 15px;">
    <input type="text2" name="lastname" placeholder="Your last name..." style="font-size: 15px;">
    <input type="text3" name="comment" placeholder="Type your comment..." style="font-size: 15px;">
    
    <input type="submit" class="btn" name="submit" value="Submit">
  </form>
</div>

</body>
</html>

Answer 1

由于 margin: 50px 175px;，您的 submit 按钮非常大。仅边距占用 350px。考虑到按钮的实际宽度 (50px)，您的 400px 就在那里。

如果您设置视口(viewport)标记 (width=device-width)，您将看到 iPhone 6/7/8 的 375px(左右)。因此，排除正文的任何​​其他边距/填充，您已经溢出了。

编辑:

您可以将 display 从 inline-block 更改为 block，而不是使用定义的值来居中/偏移按钮。然后 margin: 50px 175px 到 margin: 50px auto;这将居中。 flexbox 也有帮助，但需要对容器/子项进行更多更改。

这是将 submit 调整为 display: block 后呈现的 HTML/CSS； margin: 50px auto (不再水平滚动!):

 @media screen and (max-width: 500px) 
/* Mobile */
 {
 * {
     box-sizing: border-box;
}
 #navigation {
     display: none;
}
 input[type=text3], select, textarea {
     width: 55%;
    /* Full width */
     padding: 30px;
    /* Some padding */
     margin-top: 0px;
     outline: none;
     color: #ff0055;
     text-align: center;
     border: 1px solid #f3f3f3;
    /* Gray border */
     border-radius: 100px;
    /* Rounded borders */
}
 input[type=text2], select, textarea {
     width: 55%;
    /* Full width */
     padding: 20px;
    /* Some padding */
     color: #ff0055;
     outline: none;
     text-align: center;
     border: 1px solid #f3f3f3;
    /* Gray border */
     border-radius: 100px;
    /* Rounded borders */
}
 input[type=text2]:hover, select, textarea {
     width: 55%;
    /* Full width */
     padding: 20px;
    /* Some padding */
     color: #ff0055;
     text-align: center;
     border: 2px solid #ff0055;
    /* Gray border */
     border-radius: 100px;
    /* Rounded borders */
     transition: all 0.3s ease 0s;
}
 input[type=text3]:hover, select, textarea {
     width: 55%;
    /* Full width */
     padding: 30px;
    /* Some padding */
     margin-top: 0px;
     color: #ff0055;
     text-align: center;
     border: 2px solid #ff0055;
    /* Gray border */
     border-radius: 100px;
    /* Rounded borders */
     transition: all 0.3s ease 0s;
}
 input[type=text], select, textarea {
     width: 55%;
    /* Full width */
     padding: 20px;
    /* Some padding */
     text-align: center;
     outline: none;
     color: #FF0055;
     border: 1px solid #f3f3f3;
    /* Gray border */
     border-radius: 100px;
    /* Rounded borders */
}
 input[type=text]:hover, select, textarea {
     width: 55%;
     padding: 20px;
    /* Some padding */
     text-align: center;
     border: 2px solid #ff0055;
    /* Gray border */
     border-radius: 50px;
    /* Rounded borders */
     transition: all 0.3s ease 0s;
}
 input[type=submit] {
     background-color: #001FFF;
     color: white;
     font-size: 16px;
     font-family: 'Open Sans', sans-serif;
     border: none;
     cursor: pointer;
     border-color: #000000;
     text-align: center;
     display: block;
     text-decoration: none;
     text-shadow: none;
     margin: 50px auto;
     padding: 10px 50px;
     border: none;
     border-radius: 100px;
     outline: none;
     cursor: pointer;
}
 input[type=submit]:hover {
     background-color: #0019CF;
     color: white;
     text-align: center;
     outline: none;
     -ms-transform: translate(-50%, -50%);
     transition: all 0.3s ease 0s;
     -webkit-box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
     box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
}
 .container {
     border-radius: 100%;
     font-size: 20px;
     text-align: center;
     background-color: #FFFFFF;
     display: inline-block;
}
 .nav2 {
     height: 50px;
     width: 100%;
     margin: 0 auto;
     background-color: white;
     position: fixed;
     z-index: 9999;
}
 .nav2 > .nav-header {
     display: inline;
     margin: 0 auto;
     z-index: 9999;
}
 .nav2 > .nav-header > .nav-title {
     display: inline-block;
     font-size: 20px;
     margin: 0 auto;
     color: #fff;
     font-family: 'Pacifico', cursive;
     padding: 5px 10px 10px 15px;
}
 #header {
     display: inline-block;
     font-size: 20px;
     position: fixed;
     margin: 0 auto;
     color: #000;
     z-index: 10000;
     font-family: 'Pacifico', cursive;
     padding: 5px 10px 10px 15px;
}
 .nav2 > .nav-btn {
     display: none;
     margin: 0 auto;
}
 .nav2 > .nav-links {
     display: inline;
     z-index: 9999;
     margin: 0 auto;
     float: right;
     font-size: 15px;
}
 .nav2 > .nav-links > a {
     display: inline-block;
     z-index: 9999;
     margin: 0 auto;
     text-align: center;
     background-color: white;
     padding: 13px 10px 13px 10px;
     text-decoration: none;
     color: #000;
}
 .nav2 > .nav-links > a:hover {
     background-color: #005DFF;
     color: white;
     z-index: 9999;
}
 .nav2 > #nav-check {
     display: none;
}
 @media (max-width:600px) {
     .nav2 > .nav-btn {
         z-index: 9999;
         display: inline-block;
         position: absolute;
         right: 0px;
         top: 0px;
    }
     .nav2 > .nav-btn > label {
         display: inline-block;
         z-index: 9999;
         background-color: white;
         color: black;
         width: 50px;
         height: 50px;
         padding: 13px;
    }
     .nav2 > .nav-btn > label:hover {
         background-color: blue);
         z-index: 9999;
    }
     .nav2 > .nav-btn > label > span {
         display: block;
         z-index: 9999;
         width: 25px;
         height: 10px;
         border-top: 3px solid black;
    }
     .nav2 > .nav-links {
         position: absolute;
         display: block;
         width: 100%;
         background-color: #fff;
         height: 0px;
         z-index: 9999;
         transition: all 0.3s ease-in;
         overflow-y: hidden;
         top: 50px;
         left: 0px;
    }
     .nav2 > .nav-links > a {
         display: block;
         z-index: 9999;
         color: black;
         width: 100%;
    }
     .nav2> #nav-check:not(:checked) + .nav-links {
         height: 0px;
         z-index: 9999;
    }
     .nav2 > #nav-check:checked + .nav-links {
         height: calc(100vh - 50px);
         z-index: 9999;
         overflow-y: auto;
    }
}
}
 .button {
 position: absolute;
 top: 130%;
 left: 50%;
 transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transition: all 0.3s ease 0s;
 -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
 box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
 background-color: #FFFFFF;
 color: black;
 font-size: 16px;
 padding: 32px 24px;
 font-family: 'Open Sans', sans-serif;
 border: none;
 cursor: pointer;
 border-radius: 100px;
 border-color: #000000;
 text-align: center;
 display: flex;
 text-decoration: none;
 text-shadow: none;
 align-items: center;
 justify-content: center;
}
 .button:hover {
 background-color: #FFFFFF;
 box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
 color: #FF0055;
 text-shadow: none;
 text-decoration: none;
}
 @keyframes fadein {
 from {
     opacity: 0;
}
 to {
     opacity: 1;
}
}
/* Firefox < 16 */
 @-moz-keyframes fadein {
 from {
     opacity: 0;
}
 to {
     opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
 @-webkit-keyframes fadein {
 from {
     opacity: 0;
}
 to {
     opacity: 1;
}
}
/* Internet Explorer */
 @-ms-keyframes fadein {
 from {
     opacity: 0;
}
 to {
     opacity: 1;
}
}
/* Opera < 12.1 */
 @-o-keyframes fadein {
 from {
     opacity: 0;
}
 to {
     opacity: 1;
}
}
 body, html {
 height: 100%;
 margin: 0;
 font-family: 'Overpass', sans-serif;
 background: #ffffff;
}
 p {
 text-align: center;
}
 h1 {
 text-align: center;
 padding: 100px;
 font-weight: bolder;
}
 h2 {
 padding: 10px 10px;
 font-weight: bolder;
}
 h3 {
 font-weight: bolder;
 top: 50%;
 left: -10%;
 transform: translate(0%, -100%);
}
 #header.active {
 box-shadow: 0 0 5px rgba(0,0,0,0.3);
 -webkit-animation: fadein 1s;
/* Safari, Chrome and Opera > 12.1 */
 -moz-animation: fadein 1s;
/* Firefox < 16 */
 -ms-animation: fadein 1s;
/* Internet Explorer */
 -o-animation: fadein 1s;
/* Opera < 12.1 */
 animation: fadein 1s;
}
 a:link {
 position: relative;
 color: #000000;
 text-decoration: none;
}
 a:hover {
 color: #000000;
}
 a:link:before {
 content: "";
 position: absolute;
 width: 100%;
 height: 2px;
 bottom: 0;
 left: 0;
 background-color: #000000;
 visibility: hidden;
 -webkit-transform: scaleX(0);
 transform: scaleX(0);
 -webkit-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
}
 .nav:hover:before {
 visibility: visible;
 -webkit-transform: scaleX(1);
 transform: scaleX(1);
}
 .active:hover:before {
 visibility: visible;
 -webkit-transform: scaleX(1);
 transform: scaleX(1);
}
 a:link {
 cursor: pointer;
 padding: 13px;
 text-decoration: none;
}
 a:link:hover {
 padding: 13px;
 -webkit-transition: height 0.5s ease;
 -moz-transition: height 0.5s ease;
 -o-transition: height 0.5s ease;
 -ms-transition: height 0.5s ease;
 transition: background-color 0.5s ease;
 -webkit-transition: background-color 0.5s ease;
 -moz-transition: background-color 0.5s ease;
 -o-transition: background-color 0.5s ease;
 -ms-transition: background-color 0.5s ease;
 transition: background-color 0.5s ease;
}
 a:link:active {
 padding: 13px;
 -webkit-transition: height 0.5s ease;
 -moz-transition: height 0.5s ease;
 -o-transition: height 0.5s ease;
 -ms-transition: height 0.5s ease;
 transition: background-color 0.5s ease;
 -webkit-transition: background-color 0.5s ease;
 -moz-transition: background-color 0.5s ease;
 -o-transition: background-color 0.5s ease;
 -ms-transition: background-color 0.5s ease;
 transition: background-color 0.5s ease;
}
 a:visited {
 color: #000000;
}
 #header.scroll {
 background-color: #000000;
 opacity: 0.5;
}
 .main {
 border-radius: 100px;
 padding: 13px;
 border: none!important;
 text-decoration: none!important 
}
 .main:hover {
 background-color: #00439F;
 color: white;
 border: none;
 padding: 13px;
 text-decoration: none!important;
 box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
 position: fixed;
 margin: -13px -90px;
 border-radius: 100px;
 -webkit-animation:bounce 1s infinite;
}

<!doctype html>
<html>
<head>
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>adamferreira - Contact</title>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">adamferreira</div>
<div id="navigation"
<ul>
    <a class="main" href="portfolio.html">Portfolio</a>
    <a class="nav" href="index.html">Home</a>
    <a class="nav" href="contact.php">Contact</a>
    <a class="nav" href="featured.html">Featured</a>
    <a class="nav" href="story-highlights.html">Story Highlights</a>
</ul>

    
</div>
</div>
</div>

<div class="nav2">
    <div class="nav-header">
      <div class="nav-title"></div>
    </div>
    <div class="nav-btn">
      <label for="nav-check">
        <span></span>
        <span></span>
        <span></span>
      </label>
    </div>
    <input type="checkbox" id="nav-check">
    <div class="nav-links">
      <a href="portfolio.html">Portfolio</a>
      <a href="index.html">Home</a>
      <a href="contact.php">Contact</a>
      <a href="featured.html">Featured</a>
      <a href="story-highlights.html">Story Highlights</a>
    </div>
  </div>
</head>
<body>
<div class="headerBackground"></div>

<div class="container" data-aos="ease-in-out-back" data-aos="zoom out">
<h1>Contact</h1>
<form method="POST">
    <input type="text" name="firstname" placeholder="Your name..." style="font-size: 15px;">
    <input type="text2" name="lastname" placeholder="Your last name..." style="font-size: 15px;">
    <input type="text3" name="comment" placeholder="Type your comment..." style="font-size: 15px;">
    
    <input type="submit" class="btn" name="submit" value="Submit">
  </form>
</div>

</body>
</html>