Difference between revisions of "Team:Montpellier"
MariePeras (Talk | contribs) |
MariePeras (Talk | contribs) |
||
| Line 28: | Line 28: | ||
} | } | ||
| − | + | ||
| − | + | .webmadewell { | |
| − | + | background-color: white; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | body { | |
| − | + | margin: 0; | |
| − | + | } | |
| − | + | .sample-header { | |
| − | + | position: fixed; | |
| − | + | left: 0; | |
| − | background- | + | 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 { | 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; | ||
} | } | ||
| + | |||
| + | |||
| + | |||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | <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 class = "spz"><img class="accueil" src = "https://static.igem.org/mediawiki/2018/c/c7/T--Montpellier--page_acceuil_nouveau_montpellier.png"/> </p> | <p class = "spz"><img class="accueil" src = "https://static.igem.org/mediawiki/2018/c/c7/T--Montpellier--page_acceuil_nouveau_montpellier.png"/> </p> | ||
| Line 102: | Line 110: | ||
| − | + | <button>READ MORE</button> | |
| + | </div> | ||
| + | </header> | ||
</body> | </body> | ||
Revision as of 18:01, 7 October 2018
Scroll down to see the parallax effect
Background landcape scrolls with its own depth
