Good day,
I am an absolute newbie to HTML and CSS. I have coded a very simple html and css document. I would like to know how to implement a single page scrolling design using html and css strictly. I would like each page (as specified in the code) to take up the whole browser and as you scroll, it goes onto the next page.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Loud : Let your voice be heard</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="page1">
<p id="head">Welcome To Loud</p>
</div>
<div id="page2">
<p id="slide2p1">What is Loud?</p>
<p class="slide2">Loud is a platform for customers ...</p>
<p class="slide2">Be Loud. Be Proud.</p>
</div>
<div id="page3">
<p>Disclaimer</p>
<p>One may not use any harsh, violent or offensive language on Loud. All comments must be in a formal and respectful manner.</p>
</div>
</body>
</html>
body {
background-image: url(http://ift.tt/2ceJx6w);
/*background-attachment: fixed;
background-position; center;
background-repeat; no-repeat;*/
background-size: cover;
position: fixed;
}
#page1 {
height: 100%;
}
#page2 {
height: 100%;
}
#head {
text-align: center;
color: blanchedalmond;
position: relative;
font-size: 80px;
}
#slide2p1 {
text-align: center;
color: blanchedalmond;
font-size: 70px;
}
.slide2 {
text-align: center;
color: blanchedalmond;
font-size: 25px;
}
#page3 {
height: 100%;
font-size: 12px;
position: relative;
bottom: 0px;
color: blanchedalmond;
text-align: center;
}
Aucun commentaire:
Enregistrer un commentaire