https://drive.google.com/drive/folders/1oRXcoe3UXMNpu9vNUtFy6DIY3g-tPpIq?usp=sharing
Step 1
nemt at forstår og nemt at lave og synes det ville være meget sjovt at bruge det mere i fremtiden
---------HTML------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="minstil.css">
</head>
<body>
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</body>
</html>
---------------CSS-----------------
body{
margin: 0px;
}
#box1 {min-height: 500px;
background-image: url(desk.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#box2 {
width: 100%;
height: 550px;
background-color: antiquewhite;
}
#box3 {
width: 100%;
height: 550px;
background-image: url(wallpaperflare.com_wallpaper.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
#box4 {
width: 100%;
height: 550px;
background-color: chartreuse;
}
-------------------------
Step 2
---------------HTML-----------
Added:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="minstil.css">
</head>
<body>
<div id="box1">
<div id="box1tekst">
<h1>This Is</h1>
<h2>Parallax Scrolling</h2>
</div>
</div>
<div id="box2">
<div id="box2tekst">
<h1>I LOVE POLAND</h1>
<p>
Jeszcze Polska nie zginęła,
Kiedy my żyjemy.
Co nam obca przemoc wzięła,
Szablą odbierzemy.
Marsz, marsz Dąbrowski,
Z ziemi włoskiej do Polski.
Za twoim przewodem
Złączym się z narodem.
</p>
<p>
Przejdziem Wisłę, przejdziem Wartę,
Będziem Polakami.
Dał nam przykład Bonaparte,
Jak zwyciężać mamy.
Marsz, marsz Dąbrowski,
Z ziemi włoskiej do Polski.
Za twoim przewodem
Złączym się z narodem.
</p>
<p>
Jak Czarniecki do Poznania
Po szwedzkim zaborze,
Dla ojczyzny ratowania
Wrócim się przez morze.
Marsz, marsz Dąbrowski,
Z ziemi włoskiej do Polski.
Za twoim przewodem
Złączym się z narodem
</p>
<p>
Już tam ojciec do swej Basi
Mówi zapłakany
- Słuchaj jeno, pono nasi
Biją w tarabany.
Marsz, marsz Dąbrowski,
Z ziemi włoskiej do Polski.
Za twoim przewodem
Złączym się z narodem.
</p>
<div id="box2aside">
</div>
</div>
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</body>
</html>
---------------CSS----------------
Added:
body{
margin: 0px;
}
#box1 {min-height: 500px;
background-image: url(desk.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 80px;
}
#box1tekst {width: 600px;
height: 400px;
background-color: rgba(0, 0, 0, 0.5);
margin: auto;
}
#box1tekst h1,h2{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: whitesmoke;
text-align: center;
}
#box1tekst h1{
font-size: 90pt;
margin: 0px;
}
#box1tekst h2{
font-size: 60px;
margin: 0px;
}
#box2tekst {width: 800px;
margin-left: 50px;
padding-top: 40px;
display: inline-block;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
#box2aside {
width: 400px;
height: 400px;
background-image: url(wallpaperflare.com_wallpaper.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
vertical-align: top;
margin-left: 100px;
margin-top: 60px;
}
#box2 {
width: 100%;
height: 550px;
background-color: antiquewhite;
}
#box3 {
width: 100%;
height: 550px;
background-image: url(wallpaperflare.com_wallpaper.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
#box4 {
width: 100%;
height: 550px;
background-color: chartreuse;
}
---------------------
Step 3
---------HTML------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="minstil.css">
</head>
<body>
<div id="box1">
<div id="box1text">
<h1>THIS IS</h1>
<h2>Parallax scrolling</h2>
</div>
</div>
<div id="box2">
<div id="box2text">
<h1>Bacon ipsum</h1>
<p>Bacon ipsum dolor amet corned beef porchetta shankle hamburger bacon flank tail drumstick. Chuck ham hock meatball, corned beef ground round drumstick cow alcatra beef sausage kielbasa leberkas porchetta frankfurter. Tongue short ribs short loin hamburger cow. Short loin filet mignon ball tip swine, alcatra porchetta tail bresaola flank chicken beef ribs jowl corned beef tri-tip shankle.
</p>
<p>Alcatra meatloaf brisket andouille short loin chicken beef ribs chislic pork loin. Chuck picanha buffalo hamburger short loin shank salami jerky turducken pork loin chicken frankfurter tail pork belly. Pork chop filet mignon chicken flank tri-tip short ribs spare ribs swine andouille meatball shankle picanha cupim kielbasa. Capicola chicken boudin bacon pork. Meatloaf pork belly short ribs, picanha ground round burgdoggen swine short loin turducken kevin ball tip buffalo tri-tip.
</p>
<p>Jerky chuck biltong strip steak picanha andouille swine turkey shank flank rump. Burgdoggen cow shank hamburger beef ribs landjaeger. Turducken swine pork pig. Tri-tip chicken turkey meatball buffalo spare ribs meatloaf burgdoggen.
</p>
<p>Sausage flank rump cupim bresaola ham hock jowl turkey. Meatloaf chicken pig filet mignon tri-tip shankle short ribs tongue ground round. Biltong beef pastrami rump. Jerky boudin chicken spare ribs ham turkey.
</p>
</div>
<div id="box2aside">
</div>
</div>
<div id="box3">
<video autoplay loop muted> <source src="river.mp4" type="video/mp4">
</video>
<div id="box3tekst">
<h1>This is</h1>
<h2> a background</h2>
</div>
</div>
<div id="box4">
</div>
</body>
</html>
------------CSS------------
body {
margin: 0px;
}
#box1 {
min-height: 500px;
background-image: url(desk.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 80px;
}
#box1text {
width: 600px;
height: 400px;
background-color: rgba(0,0,0,0.5);
margin: auto;
}
#box1text h1, h2 {
font-family: Trebuchet MS;
color: whitesmoke;
text-align: center;
}
#box1text h1 {
font-size: 90pt;
margin: 0px;
}
#box1text h2 {
font-size: 60pt;
margin: 0px;
}
#box2 {
width: 100%;
height: 550px;
background-color: antiquewhite;
}
#box2text {
width: 800px;
margin-left: 50px;
padding-top: 40px;
font-family: Trebuchet MS;
display: inline-block;
}
#box2aside {
width: 400px;
height: 400px;
background-image: url(wallpaperflare.com_wallpaper.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
vertical-align: top;
margin-left: 100px;
margin-top: 60px;
}
#box3 {
widows: 100%;
height: 550px;
}
#box3 video{
min-width: 100%;
position: fixed;
top: 0;
z-index: -999;
}
#box3tekst{
width: 600px;
height: 200px;
margin: auto;
margin-top: 100px;
background-color: rgba(0, 0, 0, 0.2);
}
#box3tekst h1,h2{font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: white;
text-align: center;
}
#box3tekst h1{
font-size: 90px;
margin: 0px;
}
#box4 {
width: 100%;
height: 550px;
background-color: burlywood;
}