Hallo zusammen,
ich hab mal einige Fragen.
Bin quasi Frischling im Thema HTML/CSS. Hab aus diesem Grund einige Fragen.
Und zwar geht es darum, wie ich am besten eine Homepage (z.B. mittels Photoshop Template) umsetzen kann. Bei mir sieht es nicht so aus wie im Template.
Hab es versucht fest über die Pixel quasi zu machen, fand die Lösung aber aufgrund von Tauglichkeit auf anderen Devices nicht so schön. Außerdem hat sich der Header nicht beim Zoomen "mitgezoomt".
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./styles/index.css" />
<title>Notify</title>
</head>
<body>
<p class="greenRow"> </p>
<div class="img-container">
<div class="inner-container">
<h1>Notify.</h1>
<h2>A great new free psd theme to showcase<br>your new application.</h2>
<a class="btnApple" href="#"><img src="./images/apple.png"/></a>
<a class="btnAndroid" href="#"><img src="./images/android.png" /></a>
<a class="btnWindows" href="#"><img src="./images/windows.png" /></a>
<img src="./images/iphone.png" class="iPhonePic"/>
</div>
</div>
</body>
</html>
Alles anzeigen
CSS
* {
margin: 0;
height: 100%;
}
body {
width: 100%;
}
.greenRow {
background-color: #2ecc71;
height: 0.5%;
}
.img-container {
background-image: url("../images/header.png");
height:30.5%;
background-position:center;
background-repeat: no-repeat;
background-size: cover;
position:relative;
}
.img-container {
position: absolute;
width: 100%;
height: auto;
color: white;
}
h1 {
position: relative;
font-size: 60px;
font-family: Pacifico, Arial, Helvetica, sans-serif;
left: 20.3%;
top: 9.3%;
}
h2 {
position: relative;
font-size: 24px;
font-family: Helvetica, Arial, sans-serif;
left: 20.5%;
top: 15%;
font-weight:400;
}
.btnApple {
width: 3.3%;
height: 2.7%;
position: relative;
left: 20.6%;
top: 19.4%;
}
.btnAndroid {
width: 3.3%;
height: 2.7%;
position: relative;
left: 24.8%;
top: 19.4%;
}
.btnWindows {
width: 3.3%;
height: 2.7%;
position: relative;
left: 29%;
top: 19.4%;
}
.iPhonePic {
width: 10.1%;
height: 12.4%;
position: relative;
left: 60.4%;
top: 8.8%;
}
Alles anzeigen
Wer das Design auch nachmachen will, hier (nicht von mir): https://www.file-upload.net/do…notify_psd_theme.psd.html
Könnt ihr mir einige Tipps geben,
- wo ich am besten mit festen Pixeln arbeiten sollte,
- wie ich am besten Designs umsetze aus z.B. Photoshop
- wie ich den Hover auf so Icons bekomme