flow/historia-de-zainab
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

grid xl

Browse source
This commit is contained in:
Sergio 2017-09-29 12:21:38 +02:00
parent b02b5cf362
commit c3ba3e0f96
8 changed files with 288 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.DS_Store vendored
View file

Binary file not shown.

BIN
css/.DS_Store vendored Normal file
View file

Binary file not shown.

270
css/BootstrapXL.css Normal file
View file

@ -0,0 +1,270 @@
/*
* CSS file with Bootstrap grid classes for screens bigger than 1600px. Just add this file after the Bootstrap CSS file and you will be able to juse col-xl, col-xl-push, hidden-xl, etc.
*
* Author: Marc van Nieuwenhuijzen
* Company: WebVakman
* Site: WebVakman.nl
*
*/
@media (min-width: 1200px) and (max-width: 1599px) {
.hidden-lg {
display: none !important;
}
}
.visible-xl-block,
.visible-xl-inline,
.visible-xl-inline-block,
.visible-xl{
display: none !important;
}
@media (min-width: 1600px) {
.container {
width: 1570px;
}
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
float: left;
}
.col-xl-12 {
width: 100%;
}
.col-xl-11 {
width: 91.66666667%;
}
.col-xl-10 {
width: 83.33333333%;
}
.col-xl-9 {
width: 75%;
}
.col-xl-8 {
width: 66.66666667%;
}
.col-xl-7 {
width: 58.33333333%;
}
.col-xl-6 {
width: 50%;
}
.col-xl-5 {
width: 41.66666667%;
}
.col-xl-4 {
width: 33.33333333%;
}
.col-xl-3 {
width: 25%;
}
.col-xl-2 {
width: 16.66666667%;
}
.col-xl-1 {
width: 8.33333333%;
}
.col-xl-pull-12 {
right: 100%;
}
.col-xl-pull-11 {
right: 91.66666667%;
}
.col-xl-pull-10 {
right: 83.33333333%;
}
.col-xl-pull-9 {
right: 75%;
}
.col-xl-pull-8 {
right: 66.66666667%;
}
.col-xl-pull-7 {
right: 58.33333333%;
}
.col-xl-pull-6 {
right: 50%;
}
.col-xl-pull-5 {
right: 41.66666667%;
}
.col-xl-pull-4 {
right: 33.33333333%;
}
.col-xl-pull-3 {
right: 25%;
}
.col-xl-pull-2 {
right: 16.66666667%;
}
.col-xl-pull-1 {
right: 8.33333333%;
}
.col-xl-pull-0 {
right: auto;
}
.col-xl-push-12 {
left: 100%;
}
.col-xl-push-11 {
left: 91.66666667%;
}
.col-xl-push-10 {
left: 83.33333333%;
}
.col-xl-push-9 {
left: 75%;
}
.col-xl-push-8 {
left: 66.66666667%;
}
.col-xl-push-7 {
left: 58.33333333%;
}
.col-xl-push-6 {
left: 50%;
}
.col-xl-push-5 {
left: 41.66666667%;
}
.col-xl-push-4 {
left: 33.33333333%;
}
.col-xl-push-3 {
left: 25%;
}
.col-xl-push-2 {
left: 16.66666667%;
}
.col-xl-push-1 {
left: 8.33333333%;
}
.col-xl-push-0 {
left: auto;
}
.col-xl-offset-12 {
margin-left: 100%;
}
.col-xl-offset-11 {
margin-left: 91.66666667%;
}
.col-xl-offset-10 {
margin-left: 83.33333333%;
}
.col-xl-offset-9 {
margin-left: 75%;
}
.col-xl-offset-8 {
margin-left: 66.66666667%;
}
.col-xl-offset-7 {
margin-left: 58.33333333%;
}
.col-xl-offset-6 {
margin-left: 50%;
}
.col-xl-offset-5 {
margin-left: 41.66666667%;
}
.col-xl-offset-4 {
margin-left: 33.33333333%;
}
.col-xl-offset-3 {
margin-left: 25%;
}
.col-xl-offset-2 {
margin-left: 16.66666667%;
}
.col-xl-offset-1 {
margin-left: 8.33333333%;
}
.col-xl-offset-0 {
margin-left: 0;
}
.visible-xl {
display: block !important;
}
table.visible-xl {
display: table;
}
tr.visible-xl {
display: table-row !important;
}
th.visible-xl, td.visible-xl {
display: table-cell !important;
}
.visible-xl-block {
display: block !important;
}
.visible-xl-inline {
display: inline !important;
}
.visible-xl-inline-block {
display: inline-block !important;
}
.hidden-xl {
display: none !important;
}
}

2
css/css/home.css
View file

@ -1 +1 @@
p{font-size:12px}#portada{width:100%;height:100%}.cd-horizontal-timeline .events-content{position:relative}.cd-horizontal-timeline .events-content li{position:absolute;z-index:1;width:100%;left:0;top:0;transform:translateX(-100%);opacity:0;animation-duration:.4s;animation-timing-function:ease-in-out}.cd-horizontal-timeline .events-content li.selected{position:relative;z-index:2;opacity:1;transform:translateX(0)}div.section-container{background:white}.cd-timeline-navigation{padding:0;margin:0;text-align:left;align:left}#timeline{z-index:10;position:absolute;bottom:0;left:0;height:100px;width:100%;text-align:left;background-color:white;display:none}#timeline li{display:inline-block;width:13.9%;margin:0;padding:0;text-align:left;line-height:auto}#timeline a{background-color:transparent;text-align:left;line-height:auto}#timeline img{width:103%;opacity:.2;transition:all 1s}#timeline a.active img.img-menu{opacity:1}div.menu-content{height:100vh;background-color:white;padding-left:50px;padding-right:70px}div.extra-btn-container{position:absolute;left:-50px;top:20px;width:100px;height:100px}a.btn-circle{border-radius:40px}.map-popover{display:none}div.section-left{background-color:#ededed}a.switchMode{display:block;max-height:150px}div.section-inner-content{text-align:right}
p{font-size:12px}#portada{width:100%;height:100%}.cd-horizontal-timeline .events-content{position:relative}.cd-horizontal-timeline .events-content li{position:absolute;z-index:1;width:100%;left:0;top:0;transform:translateX(-100%);opacity:0;animation-duration:.4s;animation-timing-function:ease-in-out}.cd-horizontal-timeline .events-content li.selected{position:relative;z-index:2;opacity:1;transform:translateX(0)}div.section-container{background:white}.cd-timeline-navigation{padding:0;margin:0;text-align:left;align:left}#timeline{z-index:10;position:absolute;bottom:0;left:0;height:100px;width:100%;text-align:left;background-color:white;display:none}#timeline li{display:inline-block;width:13.9%;margin:0;padding:0;text-align:left;line-height:auto}#timeline a{background-color:transparent;text-align:left;line-height:auto}#timeline img{width:103%;opacity:.2;transition:all 1s}#timeline a.active img.img-menu{opacity:1}div.menu-content{height:100vh;background-color:white}div.extra-btn-container{position:absolute;left:-50px;top:20px;width:100px;height:100px}a.btn-circle{border-radius:40px}.map-popover{display:none}div.section-left{background-color:#ededed}a.switchMode{display:block;max-height:150px}div.section-inner-content{text-align:right}

2
css/css/home.css.map
View file

@ -1 +1 @@
{"version":3,"sources":["home.less"],"names":[],"mappings":"AACA,EACI,eAGJ,SACI,UAAA,CACA,YAGJ,uBAAwB,iBACpB,kBAGJ,uBAAwB,gBAAgB,IACpC,iBAAA,CACA,SAAA,CACA,UAAA,CACA,MAAA,CACA,KAAA,CACA,UAAW,iBAAX,CACA,SAAA,CACA,sBAAA,CACA,sCAGJ,uBAAwB,gBAAgB,GAAE,UAEtC,iBAAA,CACA,SAAA,CACA,SAAA,CACA,UAAW,cAGf,GAAG,mBACC,iBAEJ,wBACI,SAAA,CACA,QAAA,CACA,eAAA,CACA,WAEJ,UACI,UAAA,CACA,iBAAA,CACA,QAAA,CACA,MAAA,CACA,YAAA,CACA,UAAA,CACA,eAAA,CACA,sBAAA,CACA,aATJ,SAUI,IACI,oBAAA,CACA,WAAA,CACA,QAAA,CACA,SAAA,CACA,eAAA,CACA,iBAhBR,SAmBI,GACI,4BAAA,CACA,eAAA,CACA,iBAtBR,SA2BI,KACI,UAAA,CACA,UAAA,CACA,kBA9BR,SAiCI,EAAC,OAAQ,IAAG,UACR,UAIR,GAAG,cACC,YAAA,CACA,sBAAA,CACA,iBAAA,CACA,mBAGJ,GAAG,qBACC,iBAAA,CACA,UAAA,CACA,QAAA,CACA,WAAA,CACA,aAGJ,CAAC,YACG,mBAGJ,aACI,aAEJ,GAAG,cACH,yBAGA,CAAC,YACG,aAAA,CACA,iBAEJ,GAAG,uBACC"}
{"version":3,"sources":["home.less"],"names":[],"mappings":"AACA,EACI,eAGJ,SACI,UAAA,CACA,YAGJ,uBAAwB,iBACpB,kBAGJ,uBAAwB,gBAAgB,IACpC,iBAAA,CACA,SAAA,CACA,UAAA,CACA,MAAA,CACA,KAAA,CACA,UAAW,iBAAX,CACA,SAAA,CACA,sBAAA,CACA,sCAGJ,uBAAwB,gBAAgB,GAAE,UAEtC,iBAAA,CACA,SAAA,CACA,SAAA,CACA,UAAW,cAGf,GAAG,mBACC,iBAEJ,wBACI,SAAA,CACA,QAAA,CACA,eAAA,CACA,WAEJ,UACI,UAAA,CACA,iBAAA,CACA,QAAA,CACA,MAAA,CACA,YAAA,CACA,UAAA,CACA,eAAA,CACA,sBAAA,CACA,aATJ,SAUI,IACI,oBAAA,CACA,WAAA,CACA,QAAA,CACA,SAAA,CACA,eAAA,CACA,iBAhBR,SAmBI,GACI,4BAAA,CACA,eAAA,CACA,iBAtBR,SA2BI,KACI,UAAA,CACA,UAAA,CACA,kBA9BR,SAiCI,EAAC,OAAQ,IAAG,UACR,UAIR,GAAG,cACC,YAAA,CACA,uBAKJ,GAAG,qBACC,iBAAA,CACA,UAAA,CACA,QAAA,CACA,WAAA,CACA,aAGJ,CAAC,YACG,mBAGJ,aACI,aAEJ,GAAG,cACH,yBAGA,CAAC,YACG,aAAA,CACA,iBAEJ,GAAG,uBACC"}

4
css/home.less
View file

@ -83,8 +83,8 @@ div.section-container {
div.menu-content {
height: 100vh;
background-color: white;
padding-left: 50px;
padding-right: 70px;
/*padding-left: 50px;
padding-right: 70px;*/
}
div.extra-btn-container {

1
index.html
View file

@ -12,6 +12,7 @@
<link rel="stylesheet" href="css/css/home.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/css/BootstrapXL.css">
<link href="bower_components/jbox/Source/jBox.css" rel="stylesheet">

16
templates/page1.html
View file

@ -14,15 +14,25 @@
<div class="menu-content">
<!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
<div class="menu-story-content">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-6 col-xl-offset-1">
<h2> menu </h2>
"Lorem ipsum dolor sit amet, consectetur adipiscing 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."
<a href="#" class="switchMode" class="btn btn-circle"> <img src="images/c1_ver_grafico.jpg" class="vergrafico img-responsive" /> </a>
</div>
</div>
</div>
<div class="menu-data-content" style="display:none">
<h2> menu </h2>
<div> texto de datos </div>
<a href="#" class="switchMode" class="btn btn-circle"> <img src="images/c1_ver_story.jpg" class="verstory img-responsive" /> </a>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2> menu </h2>
<div> texto de datos </div>
<a href="#" class="switchMode" class="btn btn-circle">
<img src="images/c1_ver_story.jpg" class="verstory img-responsive" />
</a>
</div>
</div>
</div>
</div>