|
|
| Line 31: |
Line 31: |
| | | | |
| | | | |
| − | .webmadewell {
| + | |
| − | background-color: white;
| + | |
| − | }
| + | |
| − | body {
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| − | .sample-header {
| + | |
| − | position: fixed;
| + | |
| − | left: 0;
| + | |
| − | top: 0;
| + | |
| − | width: 100%;
| + | |
| − | background-image: url("http://webmadewell.com/wp-content/uploads/2018/01/img-bg-sample-parallax-header.jpg");
| + | |
| − | background-position: center;
| + | |
| − | background-size: cover;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | }
| + | |
| − | .sample-header::before {
| + | |
| − | content: "";
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | right: 0;
| + | |
| − | bottom: 0;
| + | |
| − | left: 0;
| + | |
| − | background-color: MidnightBlue;
| + | |
| − | opacity: 0.3;
| + | |
| − | }
| + | |
| − | .sample-header-section {
| + | |
| − | position: relative;
| + | |
| − | padding: 15% 0 10%;
| + | |
| − | max-width: 640px;
| + | |
| − | margin-left: auto;
| + | |
| − | margin-right: auto;
| + | |
| − | color: white;
| + | |
| − | text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
| + | |
| − | font-family: "Montserrat", sans-serif;
| + | |
| − | }
| + | |
| − | h1 {
| + | |
| − | font-weight: 500;
| + | |
| − | }
| + | |
| − | h2 {
| + | |
| − | font-weight: 400;
| + | |
| − | }
| + | |
| − | .sample-section-wrap {
| + | |
| − | position: relative;
| + | |
| − | background-color: white;
| + | |
| − | }
| + | |
| − | .sample-section {
| + | |
| − | position: relative;
| + | |
| − | max-width: 640px;
| + | |
| − | margin-left: auto;
| + | |
| − | margin-right: auto;
| + | |
| − | padding: 40px;
| + | |
| − | }
| + | |
| | | | |
| | | | |
| Line 91: |
Line 39: |
| | </head> | | </head> |
| | | | |
| − | <div class="sample-header">
| + | |
| − | <div class="sample-header-section">
| + | |
| − | <h1>Scroll down to see the parallax effect</h1>
| + | |
| − | <h2>Background landcape scrolls with its own depth </h2>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="sample-section-wrap">
| + | |
| − | <div class="sample-section">
| + | |
| − | <p>
| + | |
| | | | |
| | <body> | | <body> |
