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

 
(30 intermediate revisions by the same user not shown)
Line 14: Line 14:
  
 
<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 52: 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 106: Line 90:
 
                                                     <div class="imageblock__content col-lg-5 col-md-3 pos-left">
 
                                                     <div class="imageblock__content col-lg-5 col-md-3 pos-left">
 
                                                         <div class="background-image-holder">
 
                                                         <div class="background-image-holder">
−
                                                            <img alt="image" src="img/cowork-11.jpg" />
 
 
                                                         </div>
 
                                                         </div>
 
                                                     </div>
 
                                                     </div>
Line 116: 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 174: Line 145:
 
                                 <li class="dropdown dropdown--absolute">
 
                                 <li class="dropdown dropdown--absolute">
 
                                     <span class="dropdown__trigger">
 
                                     <span class="dropdown__trigger">
−
                                        <img alt="Image" class="flag" src="img/flag-1.png" />
 
 
                                     </span>
 
                                     </span>
 
                                     <div class="dropdown__container">
 
                                     <div class="dropdown__container">
Line 209: 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 264: 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 310: Line 241:
 
                         <div class="col-3 col-md-2">
 
                         <div class="col-3 col-md-2">
 
                             <a href="index.html">
 
                             <a href="index.html">
−
                                <img class="logo logo-dark" alt="logo" src="img/logo-dark.png" />
 
−
                                <img class="logo logo-light" alt="logo" src="img/logo-light.png" />
 
 
                             </a>
 
                             </a>
 
                         </div>
 
                         </div>
Line 331: Line 260:
 
                             <div class="bar__module">
 
                             <div class="bar__module">
 
                                 <a href="index.html">
 
                                 <a href="index.html">
−
                                    <img class="logo logo-dark" alt="logo" src="img/logo-dark.png" />
+
−
                                    <img class="logo logo-light" alt="logo" src="img/logo-light.png" />
+
 
                                 </a>
 
                                 </a>
 
                             </div>
 
                             </div>
Line 348: Line 276:
 
                                                         <div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="4">
 
                                                         <div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="4">
 
                                                             <div class="background-image-holder">
 
                                                             <div class="background-image-holder">
−
                                                                <img alt="background" src="img/dropdown-1.jpg" />
 
 
                                                             </div>
 
                                                             </div>
 
                                                             <div class="container pos-vertical-center pl-5">
 
                                                             <div class="container pos-vertical-center pl-5">
 
                                                                 <div class="row">
 
                                                                 <div class="row">
 
                                                                     <div class="col-lg-8">
 
                                                                     <div class="col-lg-8">
−
                                                                        <img alt="Logo" src="img/logo-light.png" class="image--xxs" />
 
 
                                                                         <span class="h2 color--white">Beautiful, modular sites in moments.</span>
 
                                                                         <span class="h2 color--white">Beautiful, modular sites in moments.</span>
 
                                                                         <a href="#" class="btn btn--primary type--uppercase">
 
                                                                         <a href="#" class="btn btn--primary type--uppercase">
Line 1,300: Line 1,226:
 
                                                         <div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="6">
 
                                                         <div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="6">
 
                                                             <div class="background-image-holder">
 
                                                             <div class="background-image-holder">
−
                                                                <img alt="background" src="img/inner-6.jpg" />
 
 
                                                             </div>
 
                                                             </div>
 
                                                             <div class="container pos-vertical-center pl-5">
 
                                                             <div class="container pos-vertical-center pl-5">
 
                                                                 <div class="row">
 
                                                                 <div class="row">
 
                                                                     <div class="col-lg-10">
 
                                                                     <div class="col-lg-10">
−
                                                                        <img alt="Logo" src="img/logo-light.png" class="image--xxs" />
 
 
                                                                         <span class="h3 color--white">Over 290 modular interface blocks.</span>
 
                                                                         <span class="h3 color--white">Over 290 modular interface blocks.</span>
 
                                                                         <a href="#" class="btn btn--primary type--uppercase">
 
                                                                         <a href="#" class="btn btn--primary type--uppercase">
Line 1,481: Line 1,405:
 
                                                         <div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="4">
 
                                                         <div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="4">
 
                                                             <div class="background-image-holder">
 
                                                             <div class="background-image-holder">
−
                                                                <img alt="background" src="img/dropdown-2.jpg" />
 
 
                                                             </div>
 
                                                             </div>
 
                                                             <div class="container pos-vertical-center pl-5">
 
                                                             <div class="container pos-vertical-center pl-5">
 
                                                                 <div class="row">
 
                                                                 <div class="row">
 
                                                                     <div class="col-lg-8">
 
                                                                     <div class="col-lg-8">
−
                                                                        <img alt="Logo" src="img/logo-light.png" class="image--xxs" />
 
 
                                                                         <span class="h3 color--white">Detailed and organised elements</span>
 
                                                                         <span class="h3 color--white">Detailed and organised elements</span>
 
                                                                         <a href="elements.html" class="btn btn--primary type--uppercase">
 
                                                                         <a href="elements.html" class="btn btn--primary type--uppercase">
Line 1,721: 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 alt="background" src="img/promo-1.jpg" />
+
                     <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,774: 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">
 
                         <div class="col-md-6">
 
                         <div class="col-md-6">
−
                            <img alt="Image" class="logo" src="img/logo-dark.png" />
 
 
                             <ul class="list-inline list--hover">
 
                             <ul class="list-inline list--hover">
 
                                 <li class="list-inline-item">
 
                                 <li class="list-inline-item">
Line 1,792: 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,840: 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="js/jquery-3.1.1.min.js"></script>
+
         <script src="jquery311minjs"></script>
−
         <script src="js/flickity.min.js"></script>
+
         <script src="flickityminjs"></script>
−
         <script src="js/easypiechart.min.js"></script>
+
         <script src="easypiechartminjs"></script>
−
         <script src="js/parallax.js"></script>
+
         <script src="parallaxjs"></script>
−
         <script src="js/typed.min.js"></script>
+
         <script src="typedminjs"></script>
−
         <script src="js/datepicker.js"></script>
+
         <script src="datepickerjs"></script>
−
         <script src="js/isotope.min.js"></script>
+
         <script src="isotopeminjs"></script>
−
         <script src="js/ytplayer.min.js"></script>
+
         <script src="ytplayerminjs"></script>
−
         <script src="js/lightbox.min.js"></script>
+
        <script src="lightboxminjs"></script>
−
         <script src="js/granim.min.js"></script>
+
         <script src="granimminjs"></script>
−
         <script src="js/jquery.steps.min.js"></script>
+
        <script src="jquerystepsminjs"></script>
−
         <script src="js/countdown.min.js"></script>
+
         <script src="countdownminjs"></script>
−
         <script src="js/twitterfetcher.min.js"></script>
+
        <script src="twitterfetcherminjs"></script>
−
         <script src="js/spectragram.min.js"></script>
+
         <script src="spectragramminjs"></script>
−
         <script src="js/smooth-scroll.min.js"></script>
+
        <script src="smoothscrollminjs"></script>
−
         <script src="js/scripts.js"></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
Already have an account? Login

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