-
Notifications
You must be signed in to change notification settings - Fork 0
/
Videos.html
129 lines (111 loc) · 5.11 KB
/
Videos.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<title>La Web de Mati</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./CSS/w3.css" rel="stylesheet" />
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif;}
.w3-sidebar {
z-index: 3;
width: 250px;
top: 43px;
bottom: 0;
height: inherit;
}
body, html {height: 100%;}
/*body {overflow-X: hidden;}*/
body {overflow-wrap: break-word;}
#wrapper {min-height: calc(100% - 166.78px);}
</style>
</head>
<body>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-theme w3-top w3-left-align w3-large">
<a class="w3-bar-item w3-button w3-right w3-hide-large w3-hover-white w3-large w3-theme-l1" href="javascript:void(0)" onclick="w3_open()"><i class="fa fa-bars"></i></a>
<a href="index.html" class="w3-bar-item w3-button w3-theme-l1">Home</a>
<a href="Acerca_de.html" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Acerca de</a>
<a href="Blog.html" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Blog</a>
<a href="Articulos.html" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Artículos</a>
<a href="Videos.html" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Videos</a>
<a href="Apps.html" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Apps</a>
<a href="Recursos.html" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Recursos</a>
<a href="Servicios.html" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Servicios</a>
<a href="Contacto.html" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Contacto</a>
</div>
</div>
<!-- Sidebar funciona sacando w3-collapse, habria ver que hace eso-->
<nav class="w3-sidebar w3-bar-block w3-large w3-theme-l5 w3-animate-left" style="display:none" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-right w3-xlarge w3-padding-large w3-hover-black w3-hide-large" title="Close Menu">
<i class="fa fa-remove"></i>
</a>
<h4 class="w3-bar-item"><b>Menu</b></h4>
<a class="w3-bar-item w3-button w3-hover-black" href="Acerca_de.html">Acerca de</a>
<a class="w3-bar-item w3-button w3-hover-black" href="Blog.html">Blog</a>
<a class="w3-bar-item w3-button w3-hover-black" href="Articulos.html">Artículos</a>
<a class="w3-bar-item w3-button w3-hover-black" href="Videos.html">Videos</a>
<a class="w3-bar-item w3-button w3-hover-black" href="Apps.html">Apps</a>
<a class="w3-bar-item w3-button w3-hover-black" href="Recursos.html">Recursos</a>
<a class="w3-bar-item w3-button w3-hover-black" href="Servicios.html">Servicios</a>
<a class="w3-bar-item w3-button w3-hover-black" href="Contacto.html">Contacto</a>
</nav>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- Main content: shift it to the right by 250 pixels when the sidebar is visible -->
<div id="wrapper" class="w3-main" >
<div class="w3-row w3-padding-64">
<div class="w3-twothird w3-container">
<h1 class="w3-text-teal">Videos</h1>
<p>Infor con la serie de videos</p>
</div>
<div class="w3-third w3-container">
<p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
<p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
</div>
</div>
<!-- Pagination -->
<div class="w3-center w3-padding-32">
<div class="w3-bar">
<a class="w3-button w3-black" href="#">1</a>
<a class="w3-button w3-hover-black" href="#">2</a>
<a class="w3-button w3-hover-black" href="#">3</a>
<a class="w3-button w3-hover-black" href="#">4</a>
<a class="w3-button w3-hover-black" href="#">5</a>
<a class="w3-button w3-hover-black" href="#">»</a>
</div>
</div>
<!-- END MAIN -->
</div>
<!-- FOOTER -->
<footer id="myFooter">
<div class="w3-container w3-theme-l2 w3-padding-32" style="text-align:center">
<h4>"I wish you were here to see it." Indiscipline - King Crimson</h4>
</div>
<div class="w3-container w3-theme-l1">
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</div>
</footer>
<!-- END FOOTER -->
<script>
// Get the Sidebar
var mySidebar = document.getElementById("mySidebar");
// Get the DIV with overlay effect
var overlayBg = document.getElementById("myOverlay");
// Toggle between showing and hiding the sidebar, and add overlay effect
function w3_open() {
mySidebar.style.display = "block";
overlayBg.style.display = "block";
}
// Close the sidebar with the close button
function w3_close() {
mySidebar.style.display = "none";
overlayBg.style.display = "none";
}
</script>
</body>
</html>