Wireframe Aplicaciones Móviles

En esta sección se resolverán dudas relacionadas con la creación de aplicaciones híbridas, haciendo énfasis en temas relacionados con Javascript y frameworks de Javascript como Angular y Jquery.

Moderator: julianmartinez16

Post Reply
User avatar
MarteloKpoper
Posts: 10
Joined: Thu Jul 26, 2018 12:12 pm

Re: Wireframe Aplicaciones Móviles

Post by MarteloKpoper » Mon Aug 13, 2018 11:55 am

index.html

Code: Select all

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>SouthKMusic</title>
  <link rel="icon" href="favicon.png">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round" rel="stylesheet">  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/animate.css">
</head>

<body id="home">
  <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <!-- Add your site or application content here -->
  
  <header>  
    <div class="logotype">
        <div class="logo">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
      <a href="index.html" class="grape">SOUTHKMUSIC</a>
    </div>
    <nav class="menu">
      <ul>
        <li><a href="#" class="black">Inicio</a></li>
        <li><a href="artistas.html" class="black">Artistas</a></li>
        <li><a href="top_20.html" class="black">Top<strong class="pink">20</strong></a></li>
      </ul>
    </nav>
  </header>
  <div class="home-landing">
    <div class="home-content">
        <h1 id="typer-size">   
          Los tenemos a todos
        </h1>
        <span id="typed"></span>
    </div>
  </div>
  <div class="home-mid-container">
    <section class="home-img-container animated fadeInLeft slow delay-1s"></section>
    <section class="home-description-container animated zoomIn slow delay-2s">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit repudiandae soluta temporibus incidunt voluptatibus. Quia omnis vero unde necessitatibus non veniam, velit dicta eligendi illum sapiente neque doloremque, saepe fugit.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora neque omnis dicta officia, rerum error. Eius odit corporis voluptates ullam aliquid est quod odio impedit, deleniti in culpa laudantium aliquam.
      </p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit repudiandae soluta temporibus incidunt voluptatibus. Quia omnis vero unde necessitatibus non veniam, velit dicta eligendi illum sapiente neque doloremque, saepe fugit.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora neque omnis dicta officia, rerum error. Eius odit corporis voluptates ullam aliquid est quod odio impedit, deleniti in culpa laudantium aliquam.
      </p>
    </section>
  </div>
  <div class="home-text-container" alt="Photo by NeONBRAND on Unsplash">
    <section>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit repudiandae soluta temporibus incidunt voluptatibus. Quia omnis vero unde necessitatibus non veniam, velit dicta eligendi illum sapiente neque doloremque, saepe fugit.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora neque omnis dicta officia, rerum error. Eius odit corporis voluptates ullam aliquid est quod odio impedit, deleniti in culpa laudantium aliquam.
      </p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit repudiandae soluta temporibus incidunt voluptatibus. Quia omnis vero unde necessitatibus non veniam, velit dicta eligendi illum sapiente neque doloremque, saepe fugit.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora neque omnis dicta officia, rerum error. Eius odit corporis voluptates ullam aliquid est quod odio impedit, deleniti in culpa laudantium aliquam.
      </p>
    </section>
    <section>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit repudiandae soluta temporibus incidunt voluptatibus. Quia omnis vero unde necessitatibus non veniam, velit dicta eligendi illum sapiente neque doloremque, saepe fugit.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora neque omnis dicta officia, rerum error. Eius odit corporis voluptates ullam aliquid est quod odio impedit, deleniti in culpa laudantium aliquam.
      </p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit repudiandae soluta temporibus incidunt voluptatibus. Quia omnis vero unde necessitatibus non veniam, velit dicta eligendi illum sapiente neque doloremque, saepe fugit.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora neque omnis dicta officia, rerum error. Eius odit corporis voluptates ullam aliquid est quod odio impedit, deleniti in culpa laudantium aliquam.
      </p>
    </section>
  </div>
  <footer>
    <div class="bg"></div>
    <h5>Copyright &copy;. Jherson Martelo - UPB</h5>
    <div class="logo">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div> 
    
  </footer>
  
  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="js/vendor/typed.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>
  <script type="text/javascript">
    var typed = new Typed('#typed',{
    strings:["GIRLS' GENERATION","EXO","SEND NUDES","2NE1","iKON", "TWICE"],
    loop: true,
    typeSpeed:40,
    backSpeed:40,
    backDelay:1000,
    smartBackspace:true
    });
  </script>
</body>

</html>
artistas.html

Code: Select all

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>SouthKMusic</title>
  <link rel="icon" href="favicon.png">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round" rel="stylesheet">  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/animate.css">
</head>

<body id="artists">
  <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <!-- Add your site or application content here -->
  
  <header>  
    <div class="logotype">
        <div class="logo">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
      <a href="index.html" class="blank">SOUTHKMUSIC</a>
    </div>
    <nav class="menu">
      <ul>
        <li><a href="index.html" class="blank">Inicio</a></li>
        <li><a href="artistas.html" class="blank">Artistas</a></li>
        <li><a href="top_20.html" class="blank">Top<strong class="pink">20</strong></a></li>
      </ul>
    </nav>
  </header>
  <div class="artists-landing">
    <div class="artists-content">
        <!-- <h1 id="typer-size"></h1> -->
        <section class="hero-bg hero-content neon-hero neon hero-header">
        <div class="hero-text">
            <div class="title">ARTISTAS</div>
        </div>
    </div>
  </div>
  <div class="artists-mid-container">
        <section class="wrapper">
            <ul class="tabs">
                <li class="active jyp">JYP</li>
                <li class="sm">SM</li>
                <li class="yg">YG</li>
            </ul>
        
            <ul class="tab__content">
                <li class="sm active">
                    <div class="content__wrapper">
                            <div class="wrapper-left">
                                <div class="overlay jyp">
                                    <div class="content">
                                        Wonder Girls
                                    </div>
                                </div>
                                <img src="img/jyp/wondergirls.jpg">
                            </div>
                            <div class="wrapper-right">
                                <img src="img/jyp/got7.jpg">
                                <div class="overlay jyp">
                                    <div class="content">
                                        GOT7
                                    </div>
                                </div>
                            </div>
                            <div class="wrapper-left">
                                <div class="overlay jyp">
                                    <div class="content">
                                        Baek A Yeon
                                    </div>
                                </div>
                                <img src="img/jyp/baekayeon.jpg">
                            </div>
                            <div class="wrapper-right">
                                <img src="img/jyp/suzy.jpg">
                                <div class="overlay jyp">
                                    <div class="content">
                                        Suzy
                                    </div>
                                </div>
                            </div>
                            <div class="wrapper-left">
                                <div class="overlay jyp">
                                    <div class="content">
                                        Twice
                                    </div>
                                </div>
                                <img src="img/jyp/twice.JPG">
                            </div>
                            <div class="wrapper-right">
                                <img src="img/jyp/nakjoon.jpg">
                                <div class="overlay jyp">
                                    <div class="content">
                                        NakJoon
                                    </div>
                                </div>
                            </div>
                    </div>
                </li>
                <li>
                    <div class="content__wrapper">
                            <div class="wrapper-left">
                                <div class="overlay sm">
                                    <div class="content">
                                        Red Velvet
                                    </div>
                                </div>
                                <img src="img/sm/redvelvet.jpg">
                            </div>
                            <div class="wrapper-right">
                                <img src="img/sm/shinee.jpg">
                                <div class="overlay sm">
                                    <div class="content">
                                        SHINee
                                    </div>
                                </div>
                            </div>
                            <div class="wrapper-left">
                                <div class="overlay sm">
                                    <div class="content">
                                        Super Junior
                                    </div>
                                </div>
                                <img src="img/sm/suju.jpg">
                            </div>
                            <div class="wrapper-right">
                                <img src="img/sm/snsd.jpg">
                                <div class="overlay sm">
                                    <div class="content">
                                        Girls' Generarion
                                    </div>
                                </div>
                            </div>
                            <div class="wrapper-left">
                                <div class="overlay sm">
                                    <div class="content">
                                        EXO
                                    </div>
                                </div>
                                <img src="img/sm/exo.jpg">
                            </div>
                            <div class="wrapper-right">
                                <img src="img/sm/fx.jpg">
                                <div class="overlay sm">
                                    <div class="content">
                                        f(x)
                                    </div>
                                </div>
                            </div>
                    </div>
                </li>
                <li>
                    <div class="content__wrapper">
                            <div class="wrapper-left">
                                <div class="overlay yg">
                                    <div class="content">
                                        BIGBANG
                                    </div>
                                </div>
                                <img src="img/yg/bigbang.jpg">
                            </div>
                            <div class="wrapper-right">
                                <img src="img/yg/blackpink.jpg">
                                <div class="overlay yg">
                                    <div class="content">
                                        BLACKPINK
                                    </div>
                                </div>
                            </div>
                            <div class="wrapper-left">
                                <div class="overlay yg">
                                    <div class="content">
                                        WINNER
                                    </div>
                                </div>
                                <img src="img/yg/winner.jpg">
                            </div>
                            <div class="wrapper-right">
                                <img src="img/yg/akmu.jpg">
                                <div class="overlay yg">
                                    <div class="content">
                                        AKMU
                                    </div>
                                </div>
                            </div>
                            <div class="wrapper-left">
                                <div class="overlay yg">
                                    <div class="content">
                                        LEE HI
                                    </div>
                                </div>
                                <img src="img/yg/leehi.jpg">
                            </div>
                            <div class="wrapper-right">
                                <img src="img/yg/epikhigh.jpg">
                                <div class="overlay yg">
                                    <div class="content">
                                        Epik High
                                    </div>
                                </div>
                            </div>
                    </div>
                </li>
            </ul>
        </section>
  </div>
  <footer>
    <div class="bg"></div>
    <h5>Copyright &copy;. Jherson Martelo - UPB</h5>
    <div class="logo">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div> 
    
  </footer>
  
  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="js/vendor/jquery-3.3.1.min.js"></script>
  <script src="js/vendor/typed.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>
  <!-- <script type="text/javascript">
    var typed = new Typed('#typed',{
    strings:["GIRLS' GENERATION","EXO","SEND NUDES","2NE1","iKON", "TWICE"],
    loop: true,
    typeSpeed:40,
    backSpeed:40,
    backDelay:1000,
    });
  </script> -->
</body>

</html>
Top 20

Code: Select all

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>SouthKMusic</title>
  <link rel="icon" href="favicon.png">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round" rel="stylesheet">  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/icomoon/style.css">
</head>

<body id="top">
  <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <!-- Add your site or application content here -->
  
  <header>  
    <div class="logotype">
        <div class="logo">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
      <a href="index.html" class="blank">SOUTHKMUSIC</a>
    </div>
    <nav class="menu">
      <ul>
        <li><a href="index.html" class="blank">Inicio</a></li>
        <li><a href="artistas.html" class="blank">Artistas</a></li>
        <li><a href="#" class="blank">Top<strong class="pink">20</strong></a></li>
      </ul>
    </nav>
  </header>
  <div class="artists-landing">
    <div class="artists-content" id="top-content">
        <!-- <h1 id="typer-size"></h1> -->
        <section class="hero-bg hero-content neon-hero neon hero-header"  alt="Photo by Thiago Barletta on Unsplash">
        <div class="hero-text">
            <div class="title">TOP 20</div>
        </div>
    </div>
  </div>
  <div class="top-mid-container">
        <div class="background"></div>
        <div class="music-player">
            <div class="details">
                <div id="left-side">
                    <span class="coverart">
                        <img src="../SouthKMusic/img/songs/1.jpg"></img>
                    </span>
                </div>
            </div>
        </div>
        <div><hr id="nine"></div>
        <div id="right">
            <div id="playlist">
                <table id="playlist" class="no-select">
                    <thead>
                        <th></th>
                        <th>Top</th>
                        <th>Title</th>
                        <th>Artist</th>
                        <th>Album</th>
                        <th>Duration</th>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            
        </div>
            
        <section id="interactions">
                <div class="tracking-wrap">
                    <span class="song-current-time">--:--</span>
                    <input class="tracking-slider range" type="range" min="0" value="0" step="1">
                    <span class="song-length">--:--</span>
                </div>
            
                <div class="controls-bar">
                    <section id="controls">
                        <span class="icon-all_inclusive shuffle"></span>
                        <span class="icon-skip_previous previous"></span>
                        <span class="icon-play_arrow play-pause"></span>
                        <span class="icon-skip_next next"></span>
                        <span class="icon-repeat repeat on"></span>
                    </section>
                    
                    <div id="volume">
                        <span class="icon-volume_down"></span>
                        <input class="volume-slider range" type="range" max="1" min="0" step="0.01" value="0.8">
                        <span class="icon-volume_up"></span>
                    </div>
                </div>
            </section>
                
            <audio id="player"></audio>
  </div>
  <footer id="footer-top20">
    <div class="bg"></div>
    <h5>Copyright &copy;. Jherson Martelo - UPB</h5>
    <div class="logo">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div> 
    
  </footer>
  
  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="js/vendor/jquery-3.3.1.min.js"></script>
  <script src="js/vendor/typed.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/music_player.js"></script>
  <script src="js/main.js"></script>
  <!-- <script type="text/javascript">
    var typed = new Typed('#typed',{
    strings:["GIRLS' GENERATION","EXO","SEND NUDES","2NE1","iKON", "TWICE"],
    loop: true,
    typeSpeed:40,
    backSpeed:40,
    backDelay:1000,
    });
  </script> -->
</body>

</html>
main.css

Code: Select all

/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
    .pink{
        color: #D7304D;
    }
    .pink:hover{
        color: #fff;
    }
    .blank{
        color: #fff;
    }
    .black{
        color: #000;
    }
    .grape{
        color: #CE92D8;
    }
    ::-webkit-scrollbar{
        width: 10px;
    }
    ::-webkit-scrollbar-track{
        background-color: #E3E3E3;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb{
        box-shadow: 2px 0 10px 0.2px black;
        background: rgba(134, 121, 121, 0.582);
        border-radius: 4px;
    }
    hr {
        height: 1px;
        background: white;
        border: none;
        outline: none;
        margin: 3em 3em 5em;
        position: relative;
    }   
          
    
    @font-face{
        font-family: 'VarelaRound';
        src: url(../css/fonts/VarelaRound-Regular.otf);
    }
    @font-face{
        font-family: 'Roboto';
        src: url(../css/fonts/Roboto-Regular.ttf);
    }
    *{
         
        box-sizing: border-box;
        font-family: 'VarelaRound','Roboto', sans-serif;
    }
    html, body{
        padding: 0;
        margin:0;
        width: 100%;
        height: 100%;
    }
    body#home{
        background: url(../img/home-landing.jpg);
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    body#artists{
        background: url(../img/home-text.jpg);
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    body#top{
        background: url(../img/top-hero.jpg);
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
      
    header{
        height: 100px;
        background-color: transparent;
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .logotype{
        width: 28%;
        height: 88px;
        float: left;
        padding: 8px;
        margin-left: 18px;
        margin-top: 8px;
        display: grid;
        grid-template-columns: 60px auto;
        grid-template-rows: 60px;
    }
    .logotype a{
        text-decoration: none;
        font-size: 38px;
        letter-spacing: -3px;
        font-weight: 800;
        margin-left: 16px;
        float: right;
        position: relative;
        text-align: center;
        justify-content: center;
        align-self: center;
    }
    .logo {
        width: 50px;
        height: 50px;
        margin-right: 5px;
      }
      .logo div {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 20%;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        mix-blend-mode: multiply;
        -webkit-animation: 2s cubic-bezier(0.66, -0.7, 0.27, 1.6) infinite;
                animation: 2s cubic-bezier(0.66, -0.7, 0.27, 1.6) infinite;
                
      }
      .logo div:nth-child(1) {
        background-color: #f4537d;
        -webkit-animation-name: rotate-1;
                animation-name: rotate-1;
      }
      .logo div:nth-child(2) {
        background-color: #ddebf4;
        -webkit-animation-name: rotate-2;
                animation-name: rotate-2;
      }
      .logo div:nth-child(3) {
        background-color: #f1369a;
        -webkit-animation-name: rotate-3;
                animation-name: rotate-3;
      }
      .logo div:nth-child(4) {
        background: url(../img/logo.png) ;
        background-size:contain;
        background-position-y: 2px;
      }
      @-webkit-keyframes rotate-1 {
        to {
          -webkit-transform: rotate(135deg);
                  transform: rotate(135deg);
        }
      }
      @keyframes rotate-1 {
        to {
          -webkit-transform: rotate(135deg);
                  transform: rotate(135deg);
        }
      }
      @-webkit-keyframes rotate-2 {
        to {
          -webkit-transform: rotate(225deg);
                  transform: rotate(225deg);
        }
      }
      @keyframes rotate-2 {
        to {
          -webkit-transform: rotate(225deg);
                  transform: rotate(225deg);
        }
      }
      @-webkit-keyframes rotate-3 {
        to {
          -webkit-transform: rotate(315deg);
                  transform: rotate(315deg);
        }
      }
      @keyframes rotate-3 {
        to {
          -webkit-transform: rotate(315deg);
                  transform: rotate(315deg);
        }
      }
    .menu{
        grid-column: 4;
        margin: 0 auto;
        position: relative;
        text-align: center;
        justify-content: center;
        align-self: center;
    }
    .menu ul{
        float: right;
    }
    .menu ul li{
        cursor: pointer;
        display: inline-block;
        text-decoration: none;
    }
    .menu ul li:not(:first-child){
        margin-left: 48px;
    }
    .menu ul li:last-child{
        margin-right: 24px;
    }
    .menu ul li a{
        color: #CEBBD8;
        position: relative;
        display: inline-block;
        outline: none;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1.2px;
    }
    .menu ul li a:hover{
        color: #D7304D;
        text-decoration: none;
    } 
      
    .menu ul li a:before, .menu ul li a:after {
        content: '';
        position: absolute;
        width: 0%;
        height: 2px;
        bottom: -2px;
        background: #D7304D;
      }
      
    .menu ul li a:before {
        left: 0;
    }
    .menu ul li a:after {
        right: 0;
        background: transparent;
        transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
      }
      
    .menu ul li a:hover:before {
        background: transparent;
        width: 100%;
        transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
      }
      
    .menu ul li a:hover:after {
        background: transparent;
        width: 100%;
        transition: 0s;
      }   

    /* Start Home page */
    
    @-webkit-keyframes sdb {
        0% {
          opacity: 0;
        }
        30% {
          opacity: 1;
        }
        60% {
          box-shadow: 0 0 0 60px rgba(0, 0, 0, 0.1);
          opacity: 0;
        }
        100% {
          opacity: 0;
        }
    }
    @keyframes sdb {
        0% {
          opacity: 0;
        }
        30% {
          opacity: 1;
        }
        60% {
          box-shadow: 0 0 0 60px rgba(0, 0, 0, 0.1);
          opacity: 0;
        }
        100% {
          opacity: 0;
        }
      }
    .home-landing{
        width: 100%;
        height: 84vh;
    }
    .home-content{
        display: table-cell;
        position: absolute;
        top: 40%;
        left: 15%;
        color: #CE92D8;
        margin:0 auto;
        text-transform: uppercase;
        text-align: center;
    }
    .home-content h1{
        padding: 0;
        margin: 0 auto;
        font-size: 5em;
        font-weight: 700;
    }
    .home-content span{
        font-family: 'Roboto', sans-serif;
    }
    .home-mid-container{
        height: 100vh;
        display: grid;
        grid-template-columns: 50% auto;
        align-self: center;
        -webkit-clip-path: polygon(100% 16%, 100% 100%, 0 100%, 0 0);
        clip-path: polygon(100% 16%, 100% 100%, 0 100%, 0 0);
        background:url(../img/liquid-trip/png/bg-04.png);
        background-size: cover;
        background-repeat: no-repeat;
        /* -webkit-box-shadow: 0 8px 6px -6px inset black;
	    -moz-box-shadow: 0 8px 6px -6px inset black;
        box-shadow: 0 8px 13px -7px inset black, 0 -8px 13px -7px inset black; */

    }
    .home-img-container{      
        align-self: center;
        background: url(../img/img1-content.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 80%;
        height: 80%;
        margin: 0 20px;
        -webkit-box-shadow: 0 8px 6px -6px #7D24A6;
	    -moz-box-shadow: 0 8px 6px -6px #7D24A6;
        box-shadow: 0 18px 20px -7px #7D24A6, 0 -3px 20px -7px #7D24A6;
    }
    .home-description-container{
        align-self: center;
        margin: 0 60px;
        justify-content: space;
        z-index: -10;
    }
    .home-text-container{
        height: 80vh;
        display: grid;
        grid-template-columns: 50% auto;
        background: url(../img/home-text.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position-y: 45%;
        background-position-x: 100%;
        align-self: center;
        font-family: 'Roboto';
        text-align: justify;
        -webkit-clip-path: polygon(100% 0, 100% 92%, 0 100%, 0 0);
        clip-path: polygon(100% 0, 100% 92%, 0 100%, 0 0);

    }
    .home-text-container section{
        align-self: center;
        margin: 0 50px;
        font-size: 16px;
        color: #fff;
    }
    /* End Home page */

    /* Start Artists page*/
    .artists-landing, 
    .artists-landing::after,
    .artists-landing::before{
        content: '';
        width: 100%;
        height: 60vh;
        position: relative;
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto auto;
    }
    .artists-landing::before,
    .artists-landing::after{
        position: absolute;
        content: '';
        width: 50%;
        height: 152px;
        z-index: 1;
        bottom: -14%;
        background-color: #fff;
    }
    .artists-landing::before{
        right: 50%;
        transform: skew(0,6deg);
        box-shadow: 8px 0 24px -8px black;
    }
    .artists-landing::after{
        left: 49.99%;
        transform: skew(0,-6deg);
        box-shadow: 8px 0 24px -8px black;
    }
    .artists-content{
        position: relative;
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        text-align: center;
    }
    
    /* CSS3 Neon Text Effect */
    .hero-bg.neon-hero .title {
        cursor:pointer;
        color: rgba(255, 255, 255, 0);
        text-shadow: 0em 0em 3em #D7304D,
                    0em 0em 2em #D7304D,
                    1px 1px 5px #D7304D,
                    0px 0px 15px #D7304D,
                    1px 0px 0px white,
                    -1px 0px 2px rgba(0, 0, 0, .5);
    }
    #top-content .hero-bg.neon-hero .title{
        text-shadow: 0em 0em 3em #2A9BF3,
                    0em 0em 2em #2A9BF3,
                    1px 1px 5px #2A9BF3,
                    0px 0px 15px #2A9BF3,
                    1px 0px 0px white,
                    -1px 0px 2px rgba(0, 0, 0, .5);
    }

    .hero-bg.neon-hero .title:hover {
        color: #f4537d;
        text-shadow: 0em 0em 5em #D7304D,
                    0em 0em 3em #D7304D,
                    0em 0em 2em #D7304D,
                    1px 1px 5px #D7304D,
                    0px 0px 10px #D7304D,
                    0px 0px 25px #D7304D,
                    0px 0px 45px #D7304D,
                    2px 1px 0px white,
                    -1px 0px 2px rgba(0, 0, 0, .5);
    }
    #top-content .hero-bg.neon-hero .title:hover{
        color: #2A9BF3;
        text-shadow: 0em 0em 5em #2A9BF3,
                    0em 0em 3em #2A9BF3,
                    0em 0em 2em #2A9BF3,
                    1px 1px 5px #2A9BF3,
                    0px 0px 10px #2A9BF3,
                    0px 0px 25px #2A9BF3,
                    0px 0px 45px #2A9BF3,
                    2px 1px 0px white,
                    -1px 0px 2px rgba(0, 0, 0, .5);
    }
    .hero-bg .title {
        font-size: 5em;
        letter-spacing: 0px;
        color: #ffffff;
    }
    .hero-bg .hero-text {
        justify-content: center;
        text-align: center;
    }
    /* End CSS3 Neon Text Effect */

    /* Start Artists description */
    .artists-mid-container,
    .top-mid-container{
        max-width: 100%;
        padding-top: 150px;
        background-color: #ccc;
        position: relative;
        display: grid;
        margin: 0;
        left: 0;
    }
    
    .wrapper {
        width: 100%;
        margin: 0 auto;
    }
    
    .tabs {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: auto auto auto;
        width: 100%;
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    .tabs > li {
        transition-duration: 0.25s;
        display: table-cell;
        list-style: none;
        text-align: center;
        padding: 20px 20px 25px 20px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        color: white;
        font-size: 3em;
    }
    .tabs > li:before {
        z-index: -1;
        position: absolute;
        content: "";
        width: 100%;
        height: 120%;
        top: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.3);
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        transition-duration: 0.25s;
        border-radius: 5px 5px 0 0;
    }
    .tabs > li:hover:before {
        -webkit-transform: translateY(70%);
        transform: translateY(70%);
    }
    .tabs > li.active {
        color: #000; 
        background-color: #D7304D;
        border-radius: 4px;
    }
    .tabs > li.active:before {
        transition-duration: 0.5s;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        color: #000;
    }
    .tabs > li:nth-child(1).active{
        background-color: #2A9BF3;
        box-shadow: 0 1px 35px rgba(42, 155, 243, 0.5);
    }
    .tabs > li:nth-child(2).active{
        background-color: #D7304D;
        box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
    }
    .tabs > li:nth-child(3).active{
        background-color: #000;
        box-shadow: 0 2px 25px rgba(255, 255, 253, 0.5);
        color: white;
    }
    
    .tab__content {
        background-color: white;
        position: relative;
        width: 100%;
        border-radius: 5px;
    }
    .tab__content > li {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        list-style: none;
    }
    .tab__content > li .content__wrapper {
        text-align: center;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto;
        border-radius: 5px;
        width: 100%;
        background-color: white;
    }
    .colors {
        text-align: center;
        padding-top: 20px;
    }
    /* ----- artitst------ */
    img{
        display:block;
        width: 100%;
        height: auto;
        
    }
    .wrapper-left, .wrapper-right{
        font-family: sans-serif;
        width: 100%;
        margin: 0 auto;
        position: relative;
    }
    .content{
        white-space: nowrap;
        position:absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        color: #fff;
        font-size: 60px;
        font-weight: 700;
        overflow: hidden;
        
    }
    .content span{
        font-size: 24px;
        display: block;
    }
    .overlay{
        position: absolute;
        bottom: 0;
        top: 0;
        right: 100%;
        width: 0;
        height: 100%;
        transition: .5s ease;
        overflow: hidden;
        z-index:3;
    }
    li.jyp{
        color: #2A9BF3;
    }
    li.sm{
        color: #D7304D; 
    }
    li.yg{
        color: #000;
    }
    .overlay.jyp{
        background-image: linear-gradient(to top, #2A9BF390, #2A9BF300);
    }
    
    .overlay.sm{
        background-image: linear-gradient(to top, #D7304D90, #D7304D00);
    }
    .overlay.yg{
        background-image: linear-gradient(to top, #00000090, #00000000);
    }
    .wrapper-left:hover .overlay,
    .wrapper-right:hover .overlay{
        right: 0;
        width: 100%;
    }
    /* End Artists description */
    /* End Artists page */



    /* Start top20 page */
    .top-mid-container{
        display: grid;
        grid-template-columns: 25% 3px auto;
        position: relative;
        /* background-color: white; */
        /* filter: blur(15px) grayscale(75%) opacity(20%); */
    }
    .background{
        position: absolute;
        background-image: url(../img/songs/1.jpg);
        background-attachment: fixed;
        background-size: 100%;
        width: 99%;
        height: 98%;
        filter: blur(15px) grayscale(45%) opacity(70%);
    }
    .music-player {
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
        position: relative;
        align-self: center;
        margin: 0 auto;
        z-index: 12;
      }
    hr#nine {
        background-image:linear-gradient(to left, #3734db, #10d7af);
        width:2px;
        height:60vh;
        box-shadow:2px 0 19px 2px #2A9BF3;
        grid-column: 2;
        margin: 0 auto;
    }    
    hr#nine::before {
        border: 1px solid blue;
        padding: 1em 1.25em;
        border-radius: 50%;
      
    }
      .details {
        padding: 2em;
      }
      
      .details #left-side {
        float: left;
        width: 100%;
      }
      
      .coverart img {
        display: block;
        width: 90%;  
        margin: auto;
        box-shadow: 0 3px 13px 2px rgb(119, 116, 116);
        transition: width 0.3s ease;
      }
      .coverart img:hover{
          width:100%;
      }

      div#right{
          grid-column: 3;
          margin-left: 10px;
          position: relative;
          display: grid;
          grid-template-columns: auto;
          grid-template-rows: auto auto;
      }
      .no-select {
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
      }

      #playlist {
        width: auto;
        height: 63vh;
        overflow-y: scroll;
        overflow-x: hidden;
      }
      #playlist table {
        width: 100%;
        color: #fff;
      }

      #playlist table th,
      #playlist table td {
        padding: 5px 3%;
        vertical-align: middle;
        text-align: left;
      }
      #playlist table th {
        color: rgb(241, 78, 105);
        font-size: 1em;
        padding-top: 15px;
        cursor: default;
      }
      #playlist table tr {
        cursor: pointer;
      }
      #playlist table th, td {
        border-bottom: 1px groove rgba(129, 112, 112, 0.308);
    }
      #playlist table tr td.play-pause {
        position: relative;
        height: 30px;
        width: 30px;
      }
      #playlist table tr td.play-pause:before {
        position: absolute;
        height: 25px;
        content: url(../css/icomoon/PNG/play_circle_filled_white.png);
        transform: scale(1.5);
        justify-content: space-around;
        top: 35%;
        left: 37%;
        z-index: 3;
      }
      #playlist table tr td.play-pause:after {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        content: "";
        background: rgba(54, 55, 47, 0.432);
      }
      #playlist table tr td.play-pause:before, #playlist table tr td.play-pause:after {
        visibility: hidden;
      }
      #playlist table tr td.play-pause img {
        height: 50px;
        width: 50px;
      }
      #playlist table tr td:nth-child(2) {
        color: #F3F3F1;
      }
      #playlist table tr.playing td {
        background: #1a1a16;
        color: #5FBFA4;
      }
      #playlist table tr.playing td:nth-child(2) {
        color: #A7DCCD;
      }
      #playlist table tr:hover td {
        background: rgba(54, 55, 47, 0.336);
      }
      #playlist table tr:hover td.play-pause:before, #playlist table tr:hover td.play-pause:after {
        visibility: visible;
      }
      
      #interactions {
        grid-column: 1/4;
        position: relative;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ddd;
        width: 100%;
        height: 10vh;
        padding-top: 10px;
        box-shadow: 0 -3px 10px 0 rgba(20, 21, 18, 0.3);
      }
      
      .tracking-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .tracking-wrap .song-current-time {
        text-align: right;
        color: #000;
      }
      .tracking-wrap .song-length {
        text-align: left;
        color: #000;
      }
      .tracking-wrap .song-current-time,
      .tracking-wrap .song-length {
        width: 10vw;
        font-family: 'VarelaRound';
        letter-spacing: 1px;
        font-size: 0.6em;
      }
      .tracking-slider{
          border-radius: 5px;
          box-shadow: 0 0 .4em #2A9BF3,
                    0 0 .3em #2A9BF3,
                    1px 1px 5px #2A9BF3,
                    1px 0px 0px white,
                    -1px 0px 2px rgba(0, 0, 0, .5);
      }
      .range {
        clear: both;
        -webkit-appearance: none;
        background: #272822;
        box-shadow: 0 0 .4em #2A9BF3,
                    0 0 .3em #2A9BF3,
                    1px 1px 5px #2A9BF3,
                    1px 0px 0px white,
                    -1px 0px 2px rgba(0, 0, 0, .5);
        cursor: pointer;
        height: 3px;
        margin: 0;
        vertical-align: bottom;
        width: 76vw;
        transition: height 0.2s ease;
        transition-delay: 1s;
      }
      .range:focus {
        outline: none;
      }

      .range:hover {
        height: 7px;
        transition: height 0.2s ease;
      }
      .range:hover::-webkit-slider-thumb {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        transition: height 0.3s ease, width 0.3s ease;
        transition-delay: 0;
      }
      .range::-webkit-slider-thumb {
        width: 0;
        height: 0;
        -webkit-appearance: none;
        background: #F3F3F1;
        border-radius: 8px;
        box-shadow: inset 0 0 0 5px #eaeaea;
        transition: height 0.5s ease, width 0.5s ease;
        transition-delay: 1s;
      }
      
      .controls-bar {
        display: flex;
        justify-content: space-evenly;
      }
      
      #controls {
        width: 80vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
        align-content: center;
        color: #2A9BF3;
      }
      #controls > span {
        transform: scale(1.5);
        padding: 13px;
        margin: 0 10px;
        cursor: pointer;
        transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
      }
      #controls > span.play-pause {
        font-size: 1.1em;
        padding: 10px;
        padding-left: 1px;
      }
      
      #controls > span:before {
        transition: text-shadow 0.3s ease;
      }
      #controls > span.on {
        color: #2A9BF3;
        border-color: #2A9BF3;
      }
      #controls > span:hover {
        color: #A7DCCD;
        transform: scale(1.6);
      }
      #controls > span:hover:before {
        text-shadow: 0 0 5px #F3F3F1;
      }
      #controls > span:hover.on {
        color: #A7DCCD;
        border-color: #2A9BF3;
      }
      
      #volume {
        max-width: 18vw;
        padding: 0 5% 0 0;
        display: flex;
        align-items: center;
        color:#2A9BF3;
      }
      #volume .icon-volume_down {
        font-size: 1.1em;
      }
      #volume .icon-volume_up {
        font-size: 1.1em;
      }
      #volume .volume-slider {
        width: 10vw;
        margin: 0 1vw;
      }
      
    /* End top20 page */
    footer{
        position: absolute;
        width: 100%;
        height: 20vh;
        display: grid;
        grid-template-columns:repeat(12,auto);
        align-self: center;
        background-image: url(../img/home-text.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-position-y: 45%;
        background-color: transparent;
        color: #fff;
        -webkit-clip-path: polygon(100% 8%, 100% 100%, 0 100%, 0 0);
        clip-path: polygon(100% 8%, 100% 100%, 0 100%, 0 0);
    }
    footer#footer-top20{
        height: 15vh;
        background-image: url(../img/top-hero.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-position-y: 45%;
        background-color: transparent;
    }
    /* footer{
        -webkit-clip-path: polygon(0 0, 0 59%, 100% 0);
        clip-path: polygon(0 0, 0 59%, 100% 0);
        background-color: #D7304D;
        z-index: -2;
    }  */
    footer.bg{
        width: 100%;
        height: 100%;
        position: absolute;
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 0);
        clip-path: polygon(0 0, 0 100%, 100% 0);
        background-color: #f4537d;
        z-index: 2;
    }
    footer div.logo{
        z-index: 2;
        position: relative;
        width: 50px;
        top: 25%;
        margin: 0 auto;
        grid-column: 12;
    }

    footer h5{
        position: relative;
        text-align: center;
        justify-content: center;
        align-self: center;
        grid-column: 1;
    }
    /*Texto typer home*/
    #typed{
        color: #f4537d;
        font-size: 3em;
    }
    /* end typer home */










/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
Top
yeralcano
Posts: 2
Joined: Fri Aug 10, 2018 9:51 am

Re: Wireframe Aplicaciones Móviles

Post by yeralcano » Mon Aug 13, 2018 9:12 pm

GIF
Image

Wireframes manuales
Image

wireframes digitales
Image

CSS main

Code: Select all

#principal{
	width: 900px;
	height: auto; overflow: hidden;
	border: 0px solid #000;
	margin: auto;

}

h1{
    text-align: center;
    color: #000;
    font-size: 250%;
    font-style: italic;
}

h2{
    text-align: center;
}

header{
	width: 900px;
	height: 100px;
	border: 0px solid #000;
}



.titulo{
	margin-top: 25px;
	font-size: 30px;
}

.sub-titulo{
	font-size: 14px;
	margin-top: -20px;
}

.menu{
	width: 1000px;
	height: 40px;
	border: 1px solid #ccc;
	float: right;
	margin-top: 10px;
	background: #FF5733;
}

.menu ul li{
	list-style: none;
	float: right;
}

.menu ul li a{
	text-decoration: none;
	padding: 25px 130px;
	border: 0px solid #ccc;
	color: #fff; 
}

.menu ul li a:hover{
	background: #fff;
	color: #FF5733;
	transition: background 1s, color 1s;
}

#slide{
	margin-top: -5px;
	width: 900px;
	height: 300px;
}


#info{
	width: 900px;
    height: auto;
    overflow: hidden;
	border: 0px solid #c0c0c0;
	margin-top: 10px; 
}

.img{
	margin-right: 7px;
	margin-bottom: 7px;
}

footer{
	width: 900px;
	height: 90px;
	text-align: center;
}

#footer p{
    width: 400px;
    float: right;
}

#noticia{
    border: 1px solid #ccc;
    padding: 10px 10px;
}
#video{
    border: 1px solid #ccc;
    padding: 5px 5px;
}
#video p{
    float: right;
}

CSS fontello

Code: Select all

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?7611923');
  src: url('../font/fontello.eot?7611923#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?7611923') format('woff2'),
       url('../font/fontello.woff?7611923') format('woff'),
       url('../font/fontello.ttf?7611923') format('truetype'),
       url('../font/fontello.svg?7611923#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?7611923#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-facebook:before { content: '\f09a'; } /* '' */
.icon-youtube-play:before { content: '\f16a'; } /* '' */
.icon-instagram:before { content: '\f16d'; } /* '' */
HTML Index

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Musical Life</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/fontello.css">
</head>
<body>
    <h1 >Music Life</h1>
    <div id="principal">
        <header>
            <nav class="menu">
                <ul>
                        <li><a href="top.html">Top 8</a></li>
                        <li><a href="Artistas.html">Artistas</a></li>
                        <li><a href="index.html">Inicio</a></li>
                </ul>
            </nav>
        </header>
        <section id="slide">
            <img src="Imagenes/imagen1.jpg" width="900" height="300">
        </section>
       
        <section id="info">
                <h2>Últimas Noticias</h2 >

                   <div id="noticia">
                        <img src="Imagenes/icono1.jpg" align="left" width="150" class="img">
                        
                    <p class="parrafo">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        <br><br>
                        Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        Duis aute irure dolor in reprehenderit in voluptate velit esse.
                    </p>

                   </div>
                   <div id="noticia">
                        <img src="Imagenes/icono2.jpg" align="left" width="150" class="img">
                        
                        <p class="parrafo">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            <br><br>
                            Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            Duis aute irure dolor in reprehenderit in voluptate velit esse.
                        </p>
                   </div>
                    

        </section><!--/info-->
       
        
        <footer>
            <p>
                Todos los derechos reservados  <br>
                Siguenos <br>
                <a class="icon-youtube-play" href="https://www.youtube.com/channel/UC-9-kyTW8ZkZNDHQJ6FgpwQ"></a>
                <a class="icon-facebook" href="https://www.facebook.com/musicacom/"></a>
                <a class="icon-instagram" href="https://www.instagram.com/musica_videos_col/"></a>
            </p>
        </footer>
        
        

    </div>
</body>
</html>
HTML Artistas

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Artistas</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/fontello.css">
</head>
<body>
    <h1 >Artistas</h1>
    <div id="principal">
        <header>
            <nav class="menu">
                <ul>
                    <li><a href="top.html">Top 8</a></li>
                    <li><a href="Artistas.html">Artistas</a></li>
                    <li><a href="index.html">Inicio</a></li>
                </ul>
            </nav>
        </header>
       
        <section id="info">

                   <div id="noticia">
                        <img src="Imagenes/madonna.jpg" align="left" width="150" class="img">
                        <h2>Madonna</h2>
                    <p class="parrafo">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        
                    </p>

                   </div>
                   <div id="noticia">
                        <img src="Imagenes/juanes.jpg" align="right" width="150" class="img">
                        <h2>Juanes</h2>
                        <p class="parrafo">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            
                        </p>
                   </div>
                   
                   <div id="noticia">
                        <img src="Imagenes/michaelJackson.jpg" align="left" width="150" class="img">
                        <h2>Michael Jackson</h2>
                    <p class="parrafo">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        
                    </p>

                   </div>
                   <div id="noticia">
                        <img src="Imagenes/shakira.jpg" align="right" width="150" class="img">
                        <h2>Shakira</h2>
                        <p class="parrafo">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            
                        </p>
                   </div>

        </section><!--/info-->
       
        
        <footer>
            <p>
                Todos los derechos reservados  <br>
                Siguenos <br>
                <a class="icon-youtube-play" href="https://www.youtube.com/channel/UC-9-kyTW8ZkZNDHQJ6FgpwQ"></a>
                <a class="icon-facebook" href="https://www.facebook.com/musicacom/"></a>
                <a class="icon-instagram" href="https://www.instagram.com/musica_videos_col/"></a>
            </p>
        </footer>
        
        

    </div>
</body>
</html>
HTML Top 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Top 8</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/fontello.css">
</head>
<body>
    <h1 >Top 8</h1>
    <div id="principal">
        <header>
            <nav class="menu">
                <ul>
                        <li><a href="top.html">Top 8</a></li>
                        <li><a href="Artistas.html">Artistas</a></li>
                        <li><a href="index.html">Inicio</a></li>
                </ul>
            </nav>
        </header>
       
        <section id="info">
            <div id="video">
                <iframe width="150" height="150" src="https://www.youtube.com/embed/1DhA69K3fZ4" frameborder="" allowfullscreen></iframe>
                 <p>1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit perferendis atque ducimus veritatis odio.</p>
            </div>
            <div id="video">
                 <iframe width="150" height="150" src="https://www.youtube.com/embed/1DhA69K3fZ4" frameborder="" allowfullscreen></iframe>
                 <p>2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit perferendis atque ducimus veritatis odio.</p>
            </div>
            <div id="video">
                 <iframe width="150" height="150" src="https://www.youtube.com/embed/1DhA69K3fZ4" frameborder="" allowfullscreen></iframe>
                 <p>3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit perferendis atque ducimus veritatis odio.</p>
            </div>
            <div id="video">
                <iframe width="150" height="150" src="https://www.youtube.com/embed/1DhA69K3fZ4" frameborder="" allowfullscreen></iframe>
                <p>4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit perferendis atque ducimus veritatis odio.</p>
            </div>
            <div id="video">
                <iframe width="150" height="150" src="https://www.youtube.com/embed/1DhA69K3fZ4" frameborder="" allowfullscreen></iframe>
                 <p>5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit perferendis atque ducimus veritatis odio.</p>
            </div>
            <div id="video">
                <iframe width="150" height="150" src="https://www.youtube.com/embed/1DhA69K3fZ4" frameborder="" allowfullscreen></iframe>
                <p>6. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit perferendis atque ducimus veritatis odio.</p>
            </div>
            <div id="video">
                <iframe width="150" height="150" src="https://www.youtube.com/embed/1DhA69K3fZ4" frameborder="" allowfullscreen></iframe>
                <p>7. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit perferendis atque ducimus veritatis odio.</p>
            </div>
            <div id="video">
                <iframe width="150" height="150" src="https://www.youtube.com/embed/1DhA69K3fZ4" frameborder="" allowfullscreen></iframe>
                <p>8. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit perferendis atque ducimus veritatis odio.</p>
            </div>
        </section><!--/info-->
       
        
        <footer>
            <p>
                Todos los derechos reservados  <br>
                Siguenos <br>
                <a class="icon-youtube-play" href="https://www.youtube.com/channel/UC-9-kyTW8ZkZNDHQJ6FgpwQ"></a>
                <a class="icon-facebook" href="https://www.facebook.com/musicacom/"></a>
                <a class="icon-instagram" href="https://www.instagram.com/musica_videos_col/"></a>
            </p>
        </footer>
        
        

    </div>
</body>
</html>
Top
Post Reply

Return to “Scripting”