Búsqueda en el Foro:
Buscar


Autor Mensaje

  • webscript1

    webscript1

    webscript1 Ver perfil del usuario
    Offline
    Nuevo

    Ubicación: fue un recuerdo hermoso, hoy no existe , sin embargo llevo los recuerdos de aquellos momentos
Mensaje12-12-2016, 03:27 (UTC)    
Título del mensaje: [Css-design] new Team
Responder citando
Hola a todos :v , hoy les vengo con una plantilla css - desing para sus web , es responsive por lo cual se adaptara a cualquier resolución de pantalla :D.
Autor: Alexandre
Web : WebScript.es.tl

captura versión escritorio:




captura versión movil:




Instalacion :
Texto sobre el diseño:

Código:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Mi segundo Tema</title>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
          <style type="text/css">
body {
    background:#EAEAEA none repeat scroll 0% 0%;
    font-family: "Dosis",sans-serif;
}

.cabezera {
    background: #33363B none repeat scroll 0% 0%;
    height: 310px;
    display: table;
}
.aqui-asd {
    float: right;
    margin-top: 47px;
}
.logo {
    display: table-cell;
    vertical-align: middle;
}

.navbar-inverse {background: #33363B none repeat scroll 0% 0%;border-radius: 0px !important;}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background: rgba(0, 0, 0, 0.1) none repeat scroll 0% 0%;}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background: rgba(0, 0, 0, 0.1) none repeat scroll 0% 0%;}
.dropdown-menu { background-color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #428BCA}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { border: transparent;box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.05) inset, 0px -1px 0px rgba(0, 0, 0, 0.2), 1px 0px 0px rgba(0, 0, 0, 0.2) inset, -1px 0px 0px rgba(0, 0, 0, 0.2) inset;}
.navbar-inverse .navbar-brand { color: #FFFBF5}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}
.dropdown-menu>li>a { color: #333333}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}
.navbar-inverse .navbar-nav > li > a {
    text-transform: uppercase !important;
}
.list-group> li  {
list-style: none;
}
.cuerpo-post{
background: white none repeat scroll 0% 0%;
}

.nav-pp{
 //text-transform: uppercase;
}

.col-post{
}

.col-sidebar {
    background: #F1F1F1 none repeat scroll 0% 0%;
}
.panel {
    background: transparent;
    box-shadow: none !important;
}
.panel-default {
    border-color: transparent;
}
.panel-default > .panel-heading {
    color: #333;
    border-color: #DDD;
    background: transparent;
}
.panel-title {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 21px;
    color: inherit;
    font-weight: bold;
}
.siguenos {
    background: #3B8DBD none repeat scroll 0% 0%;
    padding: 15px 30px;
    color: white;
}

.redes-s {
    float: right;
}
.redes-s li {
    display: inline;
}

.redes-s li span{
   
}


.footer-we {
    background: #33363b none repeat scroll 0% 0%;
}
.aqui-anuncio {
    text-align: center;
    height: 110px;
    display: table;
}
#webme_footer_textlink_dont_hide {
    z-index: 10000;
    color: white;
    background-color: transparent;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

.seccion-footer{
top: -110px;
}
.footer-title>p{
color:white;
}
.footer-title>h2 {
    color: #1596cc;
    text-transform: uppercase;
    padding-bottom: 15px;
}
@media only screen and (max-width: 700px) {
  .otro-ads{
display:none;
   }
table[id^=ad]{
display:none !important;
}
.col-md-9.modificar-mod {
    margin-top: -20px;
}
.logo {
    text-alegin: center;
}

}
          </style>
   <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   
       <div class="container-fluid" style="margin-bottom: -110px;">
          <div class="row" style="background: rgb(51, 54, 59) none repeat scroll 0% 0%;">
             <div class="container">
             <div class="col-md-12 cabezera">
                 <div class="logo"><img src="https://s24.postimg.org/8d9l40lqd/LOGO.png"></div>
                <div class="aqui-asd">
                
                </div>
              </div>
             </div>
          </div>
          <div class="row" style="position: relative; top: -110px;">
             <div class="container cuerpo-post">
                <div class="row">
                <nav class="navbar navbar-inverse navbar-botomt-l nav-pp">
                      <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                          <a class="navbar-brand" href="#"> >>WebScrip<< </a>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                          <ul class="nav navbar-nav">
                            <li><a href="http://webscript1.es.tl/">Inicio</a></li>
                            <li><a href="#">Recursos</a></li>
                            <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                              <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                              </ul>
                            </li>
                            <li><a href="#">Contactenos</a></li>
                            <li><a href="#">Acerca de</a></li>
                          </ul>
                         <form class="navbar-form navbar-right" action="search.htm">
                          <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search" name="search">
                          </div>
                          <button type="submit" class="btn btn-default">Buscar!</button>
                        </form>
                        </div><!-- /.navbar-collapse -->
                      </div><!-- /.container-fluid -->
                    </nav>
                </div>

                <div class="row" style="margin-top: -20px;">
                   <div class="col-md-8 col-post">


Texto por debajo de la página:

Código:
</div>
                   <div class="col-md-4 col-sidebar">
                   <div class="row">
                      <div class="col-md-12 siguenos">
                      <strong>Siguenos:</strong>
                      <ul class="redes-s">
                         <li><span class="glyphicon glyphicon-sunglasses"></span></li>
                         <li><span class="glyphicon glyphicon-sunglasses"></span></li>
                         <li><span class="glyphicon glyphicon-sunglasses"></span></li>
                         <li><span class="glyphicon glyphicon-sunglasses"></span></li>
                      </ul>
                      </div>
                   </div>
                      <div class="panel panel-default">
                          <div class="panel-heading">
                            <h3 class="panel-title">Recursos</h3>
                          </div>
                          <div class="panel-body">
                           <p>Separo los codigos por categoria para mejor organizacion</p>
                             <ul class="list-group">
                                <li>
                                  <a href="#">css</a>
                                </li>
                                <li>
                                  <a href="#">javascript</a>
                                </li>
                                <li>
                                  <a href="#">php</a>
                                </li>
                                <li>
                                  <a href="#">Jquery</a>
                                </li>
                                <li>
                                  <a href="#">Java</a>
                                </li>
                             </ul>
                            <p>Posterior mente agregare mas codigo :D</p>
                          </div>
                       </div>
                      <div class="panel panel-default">
                          <div class="panel-heading">
                            <h3 class="panel-title">Recursos</h3>
                          </div>
                          <div class="panel-body">
                           <p>
                              Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
                           </p>
                          </div>
                       </div>
                      <div class="panel panel-default">
                          <div class="panel-heading">
                            <h3 class="panel-title">Recursos</h3>
                          </div>
                          <div class="panel-body">
                           <p>
                              Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
                           </p>
                          </div>
                       </div>
                      <div class="panel panel-default">
                          <div class="panel-heading">
                            <h3 class="panel-title">Otro titulo</h3>
                          </div>
                          <div class="panel-body">
                           <p>
                              Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
                           </p>
                          </div>
                       </div>
                       <div class="panel panel-default">
                          <div class="panel-heading">
                            <h3 class="panel-title">Publicidad N.-2</h3>
                          </div>
                          <div class="panel-body">
                            <div class="aqui-asd2">
                               
                            </div>
                          </div>
                       </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    <section class="seccion-footer">
       <footer class="footer-we">
          <div class="container">
             <div class="row">
                <div class="col-md-12">
                   <div class="row">
                      <div class="col-md-4 footer-title">
                         <h2>Contacto</h2>
                         <p>
                            Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
                         </p>
                      </div>
                      <div class="col-md-4 footer-title">
                         <h2>Contacto</h2>
                         <p>
                            Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
                         </p>
                      </div>
                      <div class="col-md-4 footer-title">
                         <h2>Contacto</h2>
                         <ul class="list-group">
                            <li><a href="">Admin</a></li>
                            <li><a href="">Admin</a></li>
                            <li><a href="">Admin</a></li>
                         </ul>
                      </div>
                   </div>
                </div>
                <div class="col-md-12 aqui-anuncio">
                   
                </div>
             </div>
          </div>
       </footer>
    </section>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
           $('table[id*=ad]').appendTo('.aqui-asd');
           $('#webme_sky_ad').appendTo('.aqui-asd2');
           $('#webme_footer_textlink_dont_hide').appendTo('.aqui-anuncio');
       });
    </script>
  </body>
</html>


CSS-Code sin Style Tags:

Código:
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}


#webme_sky_ad {
    position: relative;
    margin: auto;
    text-align: center;
}



El código no utiliza ninguna imagen por lo tanto carga muy rápido :v
psdt : desactivar la versión móvil (extras) para ver la versión móvil del tema
______________
Nose


Ultima edición por webscript1 el Lun Jul 22, 2019 11:34 pm; editado 2 veces
↑
Mensaje14-12-2016, 03:11 (UTC)    
Título del mensaje:
Responder citando
Hola!

Gracias por su aporte. sin embargo adjunto una norma fundamental de esta sección:
Cita:
[+] Todo tema cuyo código aportado requiera la carga de un archivo de scripts u hoja de estilo debe incluir un apartado donde se encuentre el contenido en código de esos archivos. De esta manera si los archivos externos expiran el diseño no quedará inutilizable (Obligatorio).

Agradecería que incluya en este post el código para que el aporte en un futuro no quede obsoleto.

Asi mismo si el diseño no es de su autoria por favor adjuntar los créditos.

Saludos!
Moderador Design-PWG.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.