Just an fyi, I'm very much a novice at this stuff.
after i type in the code for the .ptext all the text stacks on top of each other. any help would be great.
.ptext{
position:absolute;
top:50%;
width:100%;
text-align: center;
color:#000;
font-size:27px;
letter-spacing:8px;
text-transform: uppercase;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="pimg1">
<div class="ptext">
<span class="border">
Parallax Website
</span>
</div>
</div>
<section class="section section-light">
<h2>Section One</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias amet eius qui neque non atque, quidem dolorum soluta dolorem obcaecati sunt, placeat quaerat omnis, minus alias nisi! Officia exercitationem odio repellendus, a dolor aliquam eum impedit perspiciatis qui recusandae earum corrupti consequuntur? Excepturi quod quae amet sapiente nulla omnis dolorem aliquam quidem, hic repellat qui repudiandae perspiciatis minus aperiam eum, harum! Repellendus ipsa eaque voluptas, unde ullam corporis cupiditate hic explicabo blanditiis sit aut perferendis ducimus, harum deserunt ipsam! At quas illum earum neque qui voluptatibus voluptate, commodi mollitia pariatur dolore molestiae, cum labore cumque saepe quod id laborum. Voluptates!
</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">
Image Two text
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section Two</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias amet eius qui neque non atque, quidem dolorum soluta dolorem obcaecati sunt, placeat quaerat omnis, minus alias nisi! Officia exercitationem odio repellendus, a dolor aliquam eum impedit perspiciatis qui recusandae earum corrupti consequuntur? Excepturi quod quae amet sapiente nulla omnis dolorem aliquam quidem, hic repellat qui repudiandae perspiciatis minus aperiam eum, harum! Repellendus ipsa eaque voluptas, unde ullam corporis cupiditate hic explicabo blanditiis sit aut perferendis ducimus, harum deserunt ipsam! At quas illum earum neque qui voluptatibus voluptate, commodi mollitia pariatur dolore molestiae, cum labore cumque saepe quod id laborum. Voluptates!
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">
Image three text
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section Three</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias amet eius qui neque non atque, quidem dolorum soluta dolorem obcaecati sunt, placeat quaerat omnis, minus alias nisi! Officia exercitationem odio repellendus, a dolor aliquam eum impedit perspiciatis qui recusandae earum corrupti consequuntur? Excepturi quod quae amet sapiente nulla omnis dolorem aliquam quidem, hic repellat qui repudiandae perspiciatis minus aperiam eum, harum! Repellendus
</p>
</section>
<div class="pimg1">
<div class="ptext">
<span class="border">
Parallax Website
</span>
</div>
</div>
</body>
</html>
/* CSS Document */
body, html{
height: 100%;
margin: 0;
font-size:16px;
font-family: "Lato",sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
.pimg1, .pimg2, .pimg3 {
position-relative;
opacity: 0.70;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/*fixed=parallax
scroll=fixed*/
background-attachment: fixed;
}
.pimg1{
background-image: url('../images/image1.jpg');
min-height: 100%
}
.pimg2{
background-image: url('../images/image2.jpg');
min-height:400px
}
.pimg3{
background-image: url('../images/image3.jpg');
min-height:400px
}
.section{
text-align: center;
padding:50px 80px;
}
.section-light{
background-color: #f4f4f4;
color:#666;
}
.section-dark{
background-color: #282E34;
color:#ddd;
}
.ptext{
position:absolute;
top:50%;
width:100%;
text-align: center;
color:#000;
font-size:27px;
letter-spacing:8px;
text-transform: uppercase;
}
1 Correct answer
I use Bootstrap for responsive layouts and other cool stuff that's included in the framework. My tutorial is written, not video.
6
Replies
Bootstrap is included in DW 2018. There is nothing to install.
Go to File > New > Starter Templates > Bootstrap Templates. Select one of the Sample Page layouts and hit the Create button.
AdChoices