0
Ich habe eine Portfolio-Seite mit responsive Design erstellt. Auf der ganzen Seite sieht es gut aus, auf kleineren Bildschirmen wie einem Surface oder iPad oder Telefon, ist die Qualität Arm. Die Links in der Navigationsleiste werden nicht zentriert, ebenso wie einige andere Probleme. Der unten aufgeführte CodePen-Link. Vielen Dank im Voraus.Website sieht gut aus auf großen Bildfenster, aber die Qualität leidet auf kleineren Bildschirmen
CodePen: http://codepen.io/A-Jordan/pen/yOKNVe/
HTML:
<html>
<head>
<title>Portfolio Page</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<div class="row">
<div class="about">
<div class="col-md-4">
<li><a href="#about">About</a>
</li>
</div>
</div>
<div class="portfolio">
<div class="col-md-4">
<li><a href="#portfolio">Portfolio</a>
</li>
</div>
</div>
<div class="contact">
<div class="col-md-4">
<li><a href="#contact">Contact</a>
</li>
</div>
</div>
</div>
</ul>
</div>
</nav>
<div class="div-1">
<div class="row">
<div class="col-md-6">
<img class="my-picture" src="http://s20.postimg.org/vo5nz85kt/my_face.jpg" alt="My face">
</div>
<div class="col-md-6">
<p> Hello! My name is Anthony Jordan, I am a Web Developer. I enjoy learnoing HTML, CSS, JavaScript & jQuery. I love bringing something to life. Please enjoy my portfolio; there is more to come. </p>
</div>
</div>
<div class="div-2">
<h2 id="portfolio">Portfolio</h2>
<div class="row">
<div class="col-md-4 ">
<img class="img-responsive" src="http://s20.postimg.org/wswgpg4zh/Tennis_Game_New.png" alt="Classic Tennis">
</div>
<div class="col-md-4 ">
<img class="img-responsive" src="http://s20.postimg.org/rv8sa3qd9/Break_Game_Clone_screenshot.png" alt="Brick Destoryer">
</div>
<div class="col-md-4 ">
<img class="img-responsive" src="http://s20.postimg.org/6627zhpod/Tribute_Page.jpg" alt="Tribute Page">
</div>
</div>
</div>
<div class="div-4">
<div class="row">
<div class="col-md-4 ">
<img class="img-responsive" src="https://placeimg.com/640/480/tech/grayscale" alt="Placeholder">
</div>
<div class="col-md-4 ">
<img class="img-responsive" src="https://placeimg.com/640/480/arch/grayscale" alt="Placeholder">
</div>
<div class="col-md-4 ">
<img class="img-responsive" src="https://placeimg.com/640/480/nature/grayscale" alt="Placeholder">
</div>
</div>
</div>
<hr>
<div class="div-3">
<div class="row">
<h2 id="contact">Contact Me</h2>
<div class="col-md-8">
<p class="p-2"> If you would like to get in touch with me, all I need is your name and email, and I will be more than happy to reach out to you. Thank you.</p>
</div>
<div class="col-md-4 ">
<img class=" ph-1 img-responsive" src="https://placeimg.com/320/240/people/grayscale" alt="Placeholder">
</div>
</div>
<div class="row">
<div class="col-md-4">
<form role="form">
<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name">
</div>
</iv>
</form>
</div>
</div>
<nav class=" nav-2 navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<ul class="nav navbar-nav">
<div class="row">
<div class="button-1">
<div class="col-md-4">
<li><a target="_blank" href="https://github.com/A-Jordan">GitHub</a>
</li>
</div>
</div>
<div class="button-2">
<div class="col-md-4">
<li><a target="_blank" href="https://www.linkedin.com/in/akjordan">LinkedIn</a>
</li>
</div>
</div>
<div class="button-3">
<div class="col-md-4">
<li><a target="_blank" href="https://twitter.com/Brotesque">Twitter</a>
</li>
</div>
</div>
</div>
</ul>
</nav>
</body>
</html>
CSS:
.about {
margin-left: 600px;
}
body {
background-color: #8c8c8c;
color: black;
margin-left: 220px;
margin-right: 220px;
}
.button-1 {
margin-left: 600px;
}
.button-2 {
margin-left: 700px;
}
.button-3 {
margin-left: 800px;
}
.contact {
margin-left: 800px;
}
.div-1 {
background-color: #b3b3b3;
}
.div-2 {
background-color: #d9d9d9;
}
.div-3 {
background-color: #d9d9d9;
margin-bottom: 100px;
}
.div-4 {
background-color: #d9d9d9;
margin-top: 50px;
}
.form-group {
color: black;
}
h1 {
margin-left: 1050px;
}
h2 {
text-align: center;
}
p {
color: black;
font-size: 20px;
margin-right: 220px;
margin-top: 65px;
float: justify;
}
.p-2 {
float: justify;
font-size: 20px;
margin-bottom: 50px;
margin-left: 40px;
}
.ph-1 {
margin-right: 50px;
}
.portfolio {
margin-left: 700px;
}
.my-picture {
max-width: 50%;
-webkit-border-radius: 10%;
-moz-border-radius: 45%;
border-radius: 45%;
margin-left: 145px;
}
.nav-2 {
margin-left: 220px;
margin-right: 220px;
}
Vielen Dank, ich werde die Dokumentation studieren mehr. –