0
Ich weiß nicht, wie man soziale Symbole aus der Sidebar bewegt, nachdem die Größe des Bildschirms am unteren Rand der Seite geändert wurde. Ich habe versucht, Medienanfragen zu verwenden, aber ohne Erfolg. Irgendwelche Ideen? https://jsbin.com/qegayapoya/edit?html,css,outputWie verschiebe ich Icons entsprechend der Bildschirmauflösung?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PR PORTFOLIO</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Merriweather|Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel=icon href=favicon.ico>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- SIDEBAR -->
<div class="container">
<div class="row">
<div class="col-md-3 sidebar">
<div class="foto">
<img src="pic.png" class=" img-responsive img-circle center-block " alt="pic"></div>
<h3 class="hi">Hi! I am <strong>JON</strong>, a front-end developer.</h3>
<!-- MENU -->
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#projects">PROJECTS</a></li>
<li><a href="#skills">SKILLS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
<!-- footer ICONS -->
<footer >
<!--Social icons-->
<div class="social-icons-sidebar">
<a title="" href="mailto:[email protected]" class="icons-sidebar-unit">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</a>
<a title="" href="https://github.com/dyat" class="icons-sidebar-unit">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
<a title="" href="https://www.linkedin.com/in/williamhgates/pl" class="icons-sidebar-unit">
<i class="fa fa-linkedin " aria-hidden="true"></i>
</a>
</div>
<!--
<i class="fa fa-linkedin A " aria-hidden="true"></i>
<i class="fa fa-github" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i> -->
</div>
</footer>
<!-- MAIN -->
<div class="col-md-9 col-md-offset-3 content">
<h2 id="about">ABOUT ME</h2>Hello! Creating fuctional and well designed websites was always my goal. To do that, I am using diffrent methods and web technologies. Learning and continous progress is bigest advantage. I am currenty looking for my first job as a junior front-end developer.
<h2 id="projects">RECENT PROJECTS</h2>
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 "><img src="1.png" alt="" class="img-responsive img-thumbnail"></div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 "><img src="2.png" alt="" class="img-responsive img-thumbnail"></div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 "><img src="3.png" alt="" class="img-responsive img-thumbnail"></div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 "><img src="4.png" alt="" class="img-responsive img-thumbnail"></div>
</div>
</div></div>
<br><h2 id="skills">SKILLS</h2
<br>
HTML 5 - HERO <br>
CSS 3 - PRO <br>
JS - NOOB <br>
JQUERY - NOOB<br>
SASS - MAD <br>
GRUNT - GOD
<hr>
<h2 id="contact">CONTACT</h2>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<!-- Text input-->
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input id="" name="" type="text" placeholder="name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group " data-wow-delay="0.5s">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input id="" name="" type="text" placeholder="email" class="form-control input-md">
</div>
</div>
<!-- Textarea -->
<div class="form-group " data-wow-delay="0.5s">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<textarea class="form-control" id="" name="">message</textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-12 control-label" for="singlebutton"></label>
<div class="col-md-12">
<button id="singlebutton" name="singlebutton" class="btn btn-default">send message</button>
</div>
</div>
</fieldset>
</form>
<img src="qrcode1.png" class="img-responsive center-block" alt=""> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp eu fuglorem Lorem ipsuat nulla pariatur. Exceeu fugiat it in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui r sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
html, body, .container-fluid, .row {
height: 100%;
}
body {
background-color: #F2F0F1;
}
.sidebar {
background-color: tomato;
}
@media (min-width: 992px) {
.sidebar {
font-family:'Raleway', sans-serif;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: tomato;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
}
ul li {
margin: 0 auto;
line-height: 60px;
list-style: none;
text-align: center;
margin-right: 40px;
/*czemu to srodkuje calosc???margin*/
font-size: 24px;
padding: 4px;
}
li a{
color: rgba(255, 255, 255, 0.4);
transition: color 0.3s ease-in-out;
text-align: center;
}
a:hover {
text-decoration: none;
color: rgba(0, 0, 0, 0.3);
padding: 0px;
}
.hi {
margin-right: 20px;
text-align: center;
color: rgba(0, 0, 0, 0.4);
}
.content {
padding: 2% 4% 2% 4%;
color: rgba(0, 0, 0, 0.4);
background-color: #F2F0F1;
}
#fixedbutton {
position: fixed;
top: 0px;
right: 0px;
}
.sidebar-bottom-wrap {
position: absolute;
bottom: 60px;
right: 40px;
max-width: 200px;
}
.foto {
margin-top: 10px;
}
.social-icons-sidebar {
position: absolute;
bottom: 20px;
left:0;
right: 0;
text-align: center;
font-size: 30px;
}
.fa {
color: rgba(255, 255, 255, 0.4);
}
.fa:hover {
text-decoration: none;
color: rgba(0, 0, 0, 0.3);
transition: color 0.3s ease-in-out;
}
#about{
font-family:'Raleway', sans-serif;
letter-spacing: 8px;
font-weight: 600;
margin-top: 10px;
margin-bottom: 15px;
}
#projects{
font-family:'Raleway', sans-serif;
letter-spacing: 8px;
font-weight: 600;
margin-top: 20px;
margin-bottom: 15px;
}
#skills{
font-family:'Raleway', sans-serif;
letter-spacing: 8px;
font-weight: 600;
margin-top: 20px;
margin-bottom: 15px;
}
#contact{
font-family:'Raleway', sans-serif;
letter-spacing: 8px;
font-weight: 600;
margin-top: 20px;
margin-bottom: 15px;
}
/*
'Merriweather', serif;
font-family:
*/
Vielen Dank, noch eine Frage. Ich bemerkte, wenn ich schrumpfe Bildschirm unter 991 px Hauptmenü nicht alle Breite der Seite ausfüllen. Wie man es repariert? – dylemat1
fügen Sie das einfach zu Ihren CSS-Stilen hinzu. . Behälter { Breite: 100%; } – Vilvan
Super, vielen Dank, schönen Tag: D – dylemat1