-2
reduziert werden hier
Der Abstand zwischen dem Bild und dem Kopf muss
html {
padding: 0px;
margin: 0px;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
}
body {
padding: 0px;
margin: 0px;
overflow-x: hidden;
overflow-y: auto;
height: 100vh;
}
.content {
color: black;
text-align: center;
font-size: 30px;
font-family: 'Pacifico', cursive;
position: relative;
text-shadow: 1px 1px white;
background-attachment: fixed;
}
.header {
padding: 100px 0px 50px 0px;
margin: 0px;
text-align: center;
font-size: 10rem;
font-family: 'Lobster', cursive;
text-shadow: 4px 4px white;
letter-spacing: 5px;
word-spacing: 0px;
background-attachment: fixed;
animation: fadeUp 1.5s ease;
}
.about-me {
height: 100vh;
width: 100%;
background-image: url(/images/backgrounds/amsterdam.jpg);
background-size: cover;
background-attachment: fixed;
display: table;
margin-right: 0;
padding-left: 0px;
}
.selfie {
margin-top: 100px;
margin-left: 100px;
margin-right: 0px;
padding-right: 0px;
height: 250px;
width: 250px;
float: left;
animation: image-fadeIn 3s ease;
border-radius: 50%;
}
.what-i-do {
height: 80vh;
width: 100%;
background-image: url(/images/backgrounds/development.jpg);
background-size: cover;
background-attachment: fixed;
}
.how-i-work {
height: 80vh;
width: 100%;
background-image: url(/images/backgrounds/school.png);
background-size: auto;
background-attachment: fixed;
}
.projects {
height: 80vh;
width: 100%;
background-image: url();
background-size: cover;
background-attachment: fixed;
}
.contact {
height: 50vh;
width: 100%;
background-image: url(/images/backgrounds/social-media-pattern-.jpg);
background-size: cover;
background-attachment: fixed;
}
.black-box {
height: 7vh;
width: 100%;
background-color: black;
}
@keyframes image-fadeIn {
0% {
opacity: 0
}
50%{
opacity: 0.2
}
100%{
opacity: 1
}
}
@keyframes fadeUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes<!DOCTYPE html>
<html>
<head>
<link href="/css/portfolio.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster|Pacifico" rel="stylesheet">
<title>Ruben Nijhuis</title>
</head>
<body>
<div class="container">
<div class="about-me">
<img src="images/selfies/gustin-1.png" alt="headshot" class="selfie">
<h1 class="header">About Me</h1>
<p class="content">
From Amsterdam, addicted to designing and available for your project.<br>
Been coding since 2017 and didn't stop since.<br>
People overwhelmed me with requests for projects.<br>
You're company doesn't have a weßbsite yet.<br>
What are you doing? Hire me already.<br>
</p>
</div>
<div class="black-box"></div>
<div class="what-i-do">
<h1 class="header">I make websites</h1>
<p class="content">
So you problaby came here because you need a website.<br>
Well done, you're at the right address.<br>
</p>
</div>
<div class="black-box"></div>
<div class="how-i-work">
<h1 class="header">How I work</h1>
<p class="content">
I need 2 things.<br>
1. The design.<br>
2. The deadline.<br>
Were set.<br>
</p>
</div>
<div class="black-box"></div>
<div class="projects">
<h1 class="header">Projects</h1>
<p class="content">
</p>
</div>
<div class="black-box"></div>
<div class="contact">
<h1 class="header">Contact</h1>
<p class="content">
</p>
</div>
</div>
</body>
</html>Problem. Ich bin nicht in der Lage, den Abstand zwischen dem Bild und dem Header weniger zu bekommen.
Was geändert werden muss, ist, dass die Kopfzeile in de Mitte> ist und das Bild auf der linken Seite sein muss.
Wenn jemand helfen kann.
Dank
djdbfHUH LKF AFESUHFUEGSAFGEAUFHUEHASUFHUSADFJSDLHFEYIGKSBFJKBJK
Versuchen Sie einige Beispiele erstellen eine Geige oder etwas geben –
Sie müssen zeigen, Ihr HTML und CSS. Ihre Beschreibung ermöglicht es uns nicht wirklich, Ihnen zu helfen. – Stuart
Hier ist der Code –