Difference between revisions of "Team:Valencia UPV/pruebaWeb"

 
(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}}
{{Valencia_UPV/fonts}}
+
 
 +
 
  
  
  
 
<html>
 
<html>
<head>
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,400i,500,600,700%7CMerriweather:300,300i" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
</head>
 
  
 
<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>
                                                                    <a class="btn block btn--icon bg--facebook type--uppercase" href="#">
 
                                                                        <span class="btn__text">
 
                                                                            <i class="socicon-facebook"></i>
 
                                                                            Login with Facebook
 
                                                                        </span>
 
                                                                    </a>
 
                                                                    <a class="btn block btn--icon bg--twitter type--uppercase" href="#">
 
                                                                        <span class="btn__text">
 
                                                                            <i class="socicon-twitter"></i>
 
                                                                            Login with Twitter
 
                                                                        </span>
 
                                                                    </a>
 
 
                                                                     <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 &mdash; cancel at any time.</p>
 
                                                                         <p class="lead">Get started with a 14 day free trial, No credit card required &mdash; cancel at any time.</p>
                                                                        <a class="btn block btn--icon bg--facebook type--uppercase" href="#">
 
                                                                            <span class="btn__text">
 
                                                                                <i class="socicon-facebook"></i>
 
                                                                                Sign up with Facebook
 
                                                                            </span>
 
                                                                        </a>
 
                                                                        <a class="btn block btn--icon bg--twitter type--uppercase" href="#">
 
                                                                            <span class="btn__text">
 
                                                                                <i class="socicon-twitter"></i>
 
                                                                                Sign up with Twitter
 
                                                                            </span>
 
                                                                        </a>
 
 
                                                                         <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">
                <a class="btn btn--icon bg--facebook block" href="#">
 
                    <span class="btn__text">
 
                        <i class="socicon-facebook"></i>
 
                        Sign up with Facebook
 
                    </span>
 
                </a>
 
                <a class="btn btn--icon bg--dark block" href="#">
 
                    <span class="btn__text">
 
                        <i class="socicon-mail"></i>
 
                        Sign up with Email
 
                    </span>
 
                </a>
 
 
             </div>
 
             </div>
 
             <!--end module-->
 
             <!--end module-->
Line 261: Line 222:
 
             <hr>
 
             <hr>
 
             <div class="side-menu__module">
 
             <div class="side-menu__module">
                <ul class="social-list list-inline list--hover">
 
                    <li>
 
                        <a href="#">
 
                            <i class="socicon socicon-google icon icon--xs"></i>
 
                        </a>
 
                    </li>
 
                    <li>
 
                        <a href="#">
 
                            <i class="socicon socicon-twitter icon icon--xs"></i>
 
                        </a>
 
                    </li>
 
                    <li>
 
                        <a href="#">
 
                            <i class="socicon socicon-facebook icon icon--xs"></i>
 
                        </a>
 
                    </li>
 
                    <li>
 
                        <a href="#">
 
                            <i class="socicon socicon-instagram icon icon--xs"></i>
 
                        </a>
 
                    </li>
 
                    <li>
 
                        <a href="#">
 
                            <i class="socicon socicon-pinterest icon icon--xs"></i>
 
                        </a>
 
                    </li>
 
                </ul>
 
 
             </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">
+
                    <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 ">
+
          <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>
                        <div class="col-md-6 text-right text-center-xs">
 
                            <ul class="social-list list-inline list--hover">
 
                                <li class="list-inline-item">
 
                                    <a href="#">
 
                                        <i class="socicon socicon-google icon icon--xs"></i>
 
                                    </a>
 
                                </li>
 
                                <li class="list-inline-item">
 
                                    <a href="#">
 
                                        <i class="socicon socicon-twitter icon icon--xs"></i>
 
                                    </a>
 
                                </li>
 
                                <li class="list-inline-item">
 
                                    <a href="#">
 
                                        <i class="socicon socicon-facebook icon icon--xs"></i>
 
                                    </a>
 
                                </li>
 
                                <li class="list-inline-item">
 
                                    <a href="#">
 
                                        <i class="socicon socicon-instagram icon icon--xs"></i>
 
                                    </a>
 
                                </li>
 
                            </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



Stack | Multipurpose HTML Template with Variant Page Builder

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>
					

Gradient Backgrounds Rock