(14 intermediate revisions by the same user not shown) | |||
Line 5: | Line 5: | ||
{{Valencia_UPV/flickitycss}} | {{Valencia_UPV/flickitycss}} | ||
{{Valencia_UPV/iconsmindcss}} | {{Valencia_UPV/iconsmindcss}} | ||
+ | {{Valencia_UPV/jquerystepscss}} | ||
{{Valencia_UPV/themecss}} | {{Valencia_UPV/themecss}} | ||
+ | {{Valencia_UPV/customcss}} | ||
Line 12: | Line 14: | ||
<html> | <html> | ||
− | |||
− | |||
− | |||
− | |||
<style> | <style> | ||
Line 50: | Line 48: | ||
<div class="modal-close modal-close-cross"></div> | <div class="modal-close modal-close-cross"></div> | ||
<h3>Login to Your Account</h3> | <h3>Login to Your Account</h3> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<hr data-title="OR"> | <hr data-title="OR"> | ||
<div class="feature__body"> | <div class="feature__body"> | ||
Line 113: | Line 99: | ||
<h2>Create an account</h2> | <h2>Create an account</h2> | ||
<p class="lead">Get started with a 14 day free trial, No credit card required — cancel at any time.</p> | <p class="lead">Get started with a 14 day free trial, No credit card required — cancel at any time.</p> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<hr data-title="OR"> | <hr data-title="OR"> | ||
<form> | <form> | ||
Line 205: | Line 179: | ||
<div class="notification pos-right pos-top side-menu bg--white" data-notification-link="side-menu" data-animation="from-right"> | <div class="notification pos-right pos-top side-menu bg--white" data-notification-link="side-menu" data-animation="from-right"> | ||
<div class="side-menu__module"> | <div class="side-menu__module"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
<!--end module--> | <!--end module--> | ||
Line 260: | Line 222: | ||
<hr> | <hr> | ||
<div class="side-menu__module"> | <div class="side-menu__module"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 1,708: | Line 1,643: | ||
<div class="main-container"> | <div class="main-container"> | ||
<section class="imagebg image--light cover cover-blocks bg--secondary"> | <section class="imagebg image--light cover cover-blocks bg--secondary"> | ||
− | + | <div class="background-image-holder hidden-xs" style="background-image: url(https://static.igem.org/mediawiki/2018/thumb/4/47/T--Valencia_UPV--pruebaBin.jpg/1600px-T--Valencia_UPV--pruebaBin.jpg); opacity: 1; background-position: initial initial; background-repeat: initial initial;"> | |
+ | <img src="https://static.igem.org/mediawiki/2018/thumb/4/47/T--Valencia_UPV--pruebaBin.jpg/1600px-T--Valencia_UPV--pruebaBin.jpg"> | ||
</div> | </div> | ||
<div class="container"> | <div class="container"> | ||
Line 1,760: | Line 1,696: | ||
<!--end of container--> | <!--end of container--> | ||
</section> | </section> | ||
− | + | <footer class="footer-3 text-center-xs space--xs "> | |
<div class="container"> | <div class="container"> | ||
<div class="row"> | <div class="row"> | ||
Line 1,777: | Line 1,713: | ||
</ul> | </ul> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<!--end of row--> | <!--end of row--> | ||
<div class="row"> | <div class="row"> |
Latest revision as of 15:14, 25 June 2018
Gradient Backgrounds
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack's modular elements
at the
Element Index Page →
Gradient Background
Stack allows you to easily add an animated gradient background to elements that fades seamlessly between a list of hex colours you define in the data-gradients attribute.
<section class="imagebg" data-gradient-bg="#4876BD,#5448BD,#8F48BD,#BD48B1"> CONTENT </section>