(24 intermediate revisions by the same user not shown) | |||
Line 8: | Line 8: | ||
{{Valencia_UPV/themecss}} | {{Valencia_UPV/themecss}} | ||
{{Valencia_UPV/customcss}} | {{Valencia_UPV/customcss}} | ||
− | + | ||
+ | |||
<html> | <html> | ||
− | |||
− | |||
− | |||
− | |||
<style> | <style> | ||
Line 51: | 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 114: | 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 206: | 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 261: | Line 222: | ||
<hr> | <hr> | ||
<div class="side-menu__module"> | <div class="side-menu__module"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 1,709: | 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,761: | 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,778: | Line 1,713: | ||
</ul> | </ul> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<!--end of row--> | <!--end of row--> | ||
<div class="row"> | <div class="row"> | ||
Line 1,826: | Line 1,736: | ||
<i class="stack-interface stack-up-open-big"></i> | <i class="stack-interface stack-up-open-big"></i> | ||
</a> | </a> | ||
+ | <script src="jquery311minjs"></script> | ||
+ | <script src="flickityminjs"></script> | ||
+ | <script src="easypiechartminjs"></script> | ||
+ | <script src="parallaxjs"></script> | ||
+ | <script src="typedminjs"></script> | ||
+ | <script src="datepickerjs"></script> | ||
+ | <script src="isotopeminjs"></script> | ||
+ | <script src="ytplayerminjs"></script> | ||
+ | <script src="lightboxminjs"></script> | ||
+ | <script src="granimminjs"></script> | ||
+ | <script src="jquerystepsminjs"></script> | ||
+ | <script src="countdownminjs"></script> | ||
+ | <script src="twitterfetcherminjs"></script> | ||
+ | <script src="spectragramminjs"></script> | ||
+ | <script src="smoothscrollminjs"></script> | ||
+ | <script src="scriptsjs"></script> | ||
+ | <script src="bootstrapcss"></script> | ||
+ | <script src="customcss"></script> | ||
+ | <script src="flickitycss"></script> | ||
+ | <script src="iconsmindcss"></script> | ||
+ | <script src="jquerystepscss"></script> | ||
+ | <script src="lightboxcss"></script> | ||
+ | <script src="sociconcss"></script> | ||
+ | <script src="stackinterfacecss"></script> | ||
+ | <script src="themecss"></script> | ||
</body> | </body> | ||
</html> | </html> |
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>