HTML
<body style="background-color:#d1ffe3">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Heebo" rel="stylesheet">
<div class="container-fluid">
<ul class="topnav">
<li style="width:100%"><a href="#div_id">ABOUT</a></li>
<li style="width:100%"><a href="#div_id2">PORTFOLIO</a></li>
<li style="width:90%"><a href="#div_id3">CONTACT ME</a></li>
</ul>
<center>
<div id="div_id">
<h1>ABOUT</h1></center>
</div>
<div class="row">
<div class="col-md-6">
<center>
<h2>Hello, I am Maria Pantsiou</h2>
<h1>Former musician, 3D graphics design hobbyist, physicist and potential web developer.<h1>
</center></div>
</div>
</div>
<div id="div_id2"><center><h1>PORTFOLIO</h1></center>
</div>
<center>
<div>
<a href="http://i.imgsafe.org/56bfd0da30.png">
<figure>
<img src="http://i.imgsafe.org/56bfd0da30.png" alt="">
</figure>
</a>
<a href="http://i.imgsafe.org/56be3db222.png">
<figure>
<img src="http://i.imgsafe.org/56be3db222.png" alt="">
</figure>
</a>
<a href="http://i.imgsafe.org/5649eb799c.png">
<figure>
<img src="http://i.imgsafe.org/5649eb799c.png" alt="">
</figure>
</a>
<a href="http://i.imgsafe.org/56ae6b85ac.png">
<figure>
<img src="http://i.imgsafe.org/56ae6b85ac.png" alt="">
</figure>
</a>
</center>
<section id="contact">
<div id="div_id3">
<center>
<h1>CONTACT ME</h1></center>
</div>
<section id="contact">
<center>
<div class="container">
<form name="htmlform" method="post" action="toyousender.php">
<input type="text" name="first_name" placeholder="NAME" required>
<input type="email" name="email" placeholder="MAIL" required>
<textarea name="comments" placeholder="MESSAGE" required></textarea>
<button name="send" type="submit" class="submit">SEND</button>
</form>
</div>
</center>
</section>
</div>
CSS
body { background-image: url('http://i.imgsafe.org/7d2cbd7925.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } .topnav {
background-color: #586882;
overflow: hidden; width:100%; display:inline-flex;
}
/* Style the links inside the navigation bar */ .topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: px 16px;
text-decoration: none;
font-size: 17px; }
/* Change the color of links on hover */ .topnav a:hover {
background-color: #ddd;
color: black; }
/* Add a color to the active/current link */ .topnav a.active {
background-color: #4CAF50;
color: white; }
h1 { font-size: 30px; font-family: 'Josefin Sans', sans-serif;
}
h2 { font-size: 25px; font-family: 'Heebo', sans-serif; }
.photo-border { border-radius: 50%; }
.smaller_image { width: 170px; }
body { width: 90%; margin: 30px auto; font-family: sans-serif; }
div { font-size: 0; }
a { overflow: hidden; display: inline-block; margin-bottom: px; width: calc(50% - 4px); margin-right: 8px; }
a:nth-of-type(2n) { margin-right: 0; }
@media screen and (min-width: 80em) { a {
width: calc(40% - 6px); } a:nth-of-type(2n) {
margin-right: 8px; } a:nth-of-type(4n) {
margin-right: 0; } }
a:hover img { transform: scale(1.15); }
figure { margin: 5; }
img { border: none; max-width: 100%; height: ; display: block; background: #ccc; transition: transform .2s ease-in-out; }
#contact { width: 100%; height: 100%; margin 0 auto; background: ; }
.container { width: 960px; height: auto; margin: 0 auto; padding: 50px 0; }
#contact .container form input,
#contact .container form textarea { width: 97.4%; height: 30px; padding: 5px 10px; font-size: 12px; color: #999; letter-spacing: 1px; background: #cbd9ef; border: 2px solid #586882; margin-bottom: 5px; -webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
#contact .container form input:focus,
#contact .container form textarea:focus { border: 2px solid #3b4759; color: #999; }
#contact .container form textarea { height: 150px; }
#contact .container form .submit { width: 97.5%; padding: 5px 10px; font-size: 12px; letter-spacing: 1px; background: #586882; height: 40px; text-transform: uppercase; letter-spacing: 1px; color: #FFF; border: 2px solid #3b4759; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
#contact .container form .submit:hover { color: #FFF; border: 2px solid #586882; background: #343f4f; cursor: pointer; }
#contact .container form .required { color: #586882; }
.fb_photo { border-radius: 70%; }
.smaller-image { width: 30px; }
この上の任意の更新？ – TheDarkKnight