Habe ein paar Probleme mit meiner Website Webportfolio
Kann mir einer bei diesem Code helfen
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Webportfolio Sina Foudehi</title>
<style>
*{
margin:0;
padding:0;
}
body {
display:flex;
flex-direction:column;
}
header {
justify-content: center;
align-items: center;
display:flex;
height: 80px;
background-color: #ececec;
font-family: 'futura';
font-style: italic;
}
#logo{
width:150px;
height:60px;
}
.pic2{
position:relative;
width: 0;
height:0;
z-index:1;
border-bottom: 60px solid orange;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
transform:rotate(-45deg) translate(-21px ,-33px);
}
main{
min-height:1000px;
display:flex;
background:url('/image/Huettentour-Tannheimer-Berge-9.jpg');
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
}
#content p{
padding:10px 10% 10px 10%;
font-family: 'PT Sans Narrow';
color: white;
text-align: justify;
}
nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
font-size: 0.8rem;
}
ul li{
float:left;
list-style: none;
}
h1 {
font-family: 'futura';
font-size: 3rem;
text-align:center;
font-weight: 100;
color: white;
}
a{
text-decoration: none;
color: #6f6f6e;
padding-left: 30px;
padding-right: 30px;
}
li>a:hover {
color: red;
font-style: italic;
}
footer {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: space-around;
align-items: center;
height: 82px;
background-color: #575756;
font-family: 'PT Sans Narrow';
color: white;
}
footer >div{
flex:2;
}
footer>p{
flex:2;
}
/* social media ions*/
#social {
margin: 20px 10px;
text-align: center;
}
.smGlobalBtn {
display: inline-block;
position: relative;
cursor: pointer;
width: 30px;
height: 30px;
border:2px solid #ddd;
box-shadow: 0 3px 3px #999;
padding: 0px;
text-decoration: none;
text-align: center;
color: #fff;
font-size: 15px;
font-weight: normal;
line-height: 2em;
border-radius: 27px;
}
.facebookBtn{
background: #4060A5;
}
.facebookBtn:before{
font-family: "FontAwesome";
content: "\f09a";
}
.facebookBtn:hover{
color: #4060A5;
background: #fff;
border-color: #4060A5;
}
.twitterBtn{
background: #00ABE3;
}
.twitterBtn:before{
font-family: "FontAwesome";
content: "\f099"; /* add twitter icon */
}
.twitterBtn:hover{
color: #00ABE3;
background: #fff;
border-color: #00ABE3;
}
.googleplusBtn{
background: #e64522;
}
.googleplusBtn:before{
font-family: "FontAwesome";
content: "\f0d5"; /* add googleplus icon */
}
.googleplusBtn:hover{
color: #e64522;
background: #fff;
border-color: #e64522;
}
.linkedinBtn{
background: #0094BC;
}
.linkedinBtn:before{
font-family: "FontAwesome";
content: "\f0e1"; /* add linkedin icon */
}
.linkedinBtn:hover{
color: #0094BC;
background: #fff;
border-color: #0094BC;
}
.pinterestBtn{
background: #cb2027;
}
.pinterestBtn:before{
font-family: "FontAwesome";
content: "\f0d2"; /* add pinterest icon */
}
.pinterestBtn:hover{
color: #cb2027;
background: #fff;
border-color: #cb2027;
}
.tumblrBtn{
background: #3a5876;
}
.tumblrBtn:before{
font-family: "FontAwesome";
content: "\f173"; /* add tumblr icon */
}
.tumblrBtn:hover{
color: #3a5876;
background: #fff;
border-color: #3a5876;
}
.rssBtn{
background: #e88845;
}
.rssBtn:before{
font-family: "FontAwesome";
content: "\f09e"; /* add rss icon */
}
.rssBtn:hover{
color: #e88845;
background: #fff;
border-color: #e88845;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">BIO</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</nav>
</header>
<main>
<div id="content">
<div class="pic2"></div>
<h1>BIO</h1>
<p>Is consed quatae peratem quat.
Ulpa qui doluptatem del mo imin cone voluptur, conectat.
Nequam errum et, as eatet esequia erendaerrum ex et, voluptam, que venis voluptaquo te verore volor miliaspe aut re veliberum quae. Everi suntis niminveles assincipsae porpor ab il illiatem corehen imperibusdam ipis ium is sita volesti onsedigent, vendit doluptatione dolor repedicatis qui odis entotate dolorum explibernat odi consectur? Qui net qui temporibus rereptae. Nequi inullam, tor sam, ut eumeniendust inia dolor aut adigend erferch ilique con parciminis cor as quiatem que nectendaeria sima vel iliquodi ut etus quas et qui sit et ut fugit, volumqu iantiumetus velenim ex evenim re doluptius ex es ent doluptatur? Quiam quidem illestiam dolore reribea doles et essi tempore incto dolorror re enisquo vitem etus est, aut etur, simporum quat dolora dendaero ea dolupta temquatempe nosam re sam ipitatet latur? Bit parum res iligeni menimil ibusam et hitent.
Cernatur? Ga. Itaquuntia dolor sequis iliquam natem rem re nobis ipsunt plique et aut veneseni seque ea as eium in pellenem quae quo qui corest, ut pratur, omnitatint.
Ebis dignat eturisquias adit aut repudiaerum as maxim rendandemque voluption</p>
</div>
</main>
<footer>
<div id="social">
<a class="facebookBtn smGlobalBtn" href="#" ></a>
<a class="twitterBtn smGlobalBtn" href="#" ></a>
<a class="googleplusBtn smGlobalBtn" href="#" ></a>
<a class="linkedinBtn smGlobalBtn" href="#" ></a>
<a class="pinterestBtn smGlobalBtn" href="#" ></a>
<a class="tumblrBtn smGlobalBtn" href="#" ></a>
<a class="rssBtn smGlobalBtn" href="#" ></a>
</div>
<p>bla bla text</p>
</footer>
</body>
</html>