Difference between revisions of "Team:Montpellier"
MariePeras (Talk | contribs) |
MariePeras (Talk | contribs) |
||
| 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 37: | Line 90: | ||
</style> | </style> | ||
</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> | ||
Revision as of 19:48, 10 October 2018
Scroll down to see the parallax effect
Background landcape scrolls with its own depth
