-
Notifications
You must be signed in to change notification settings - Fork 0
/
idea-w-2-cols.html
128 lines (127 loc) · 3.64 KB
/
idea-w-2-cols.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
128
<!DOCTYPE html>
<html lang="es-CL" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Blob UI - HTML5 Basico</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Roboto:400,300,500,700,900" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/blob.css">
<style>
body{
color: black !important;
}
.css-grid{
grid-template-columns: [section] minmax(320px, 1fr) [aside] minmax(3em, auto) [main] minmax(min-content, 1fr);
grid-template-rows: auto !important;
grid-template-areas: "section aside main"
}
h1 {
font-size: 58px;
line-height: 1;
margin-bottom: 30px;
text-align: center;
}
main, aside, figure{
display: grid;
justify-items: center;
}
nav{
background: transparent !important;
align-self: flex-start !important;
align-content: center !important;
text-align: center;
}
section{
color: white;
display: grid;
background-image: url('https://i.imgur.com/pvVmY5y.jpg');
background-size: cover;
height: calc(100vh - 0px);
}
main {
/*background: var(--mug-pastel);*/
justify-items: left !important;
}
aside{
/*background: var(--yellow-pastel);*/
line-height: 17px;
letter-spacing: 4px;
text-align: center;
padding-left: 3em;
}
figure{
/*object-fit: cover;*/
/*background: var(--olive-pastel);*/
max-width: 330px;
grid-area: figure;
}
figcaption{
color:var(--gray-deep);
}
figure svg{
max-width: 250px;
}
footer{
/*background: var(--pink-pastel);*/
}
@media (max-width: 860px) {
aside {
writing-mode: horizontal-tb !important;
padding: 2em 0 2em 0;
}
.css-grid{
grid-template-columns: minmax(320px, 1fr) ;
grid-template-areas: "section"
"aside"
"main"
}
section{
height: calc(100vh - 0px);
}
}
</style>
</head>
<body>
<div class="css-grid">
<section>
<nav>Logo / N A V</nav>
<footer class="bottom">PIE</footer>
</section>
<aside class="meta sideways-lr">
<strong>Agosto 2020<span class="dash">–</span>Landscapes</strong>
</aside>
<main>
<figure>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="#37194E" stroke-width="0" fill="#DEDBBA" />
</svg>
<figcaption>
<h1 class="title">From Moon</h1>
<p class="col-text">
<strong><em></em></strong>
Ay cuántas veces quise tener cola
andando junto a él por las orillas del mar,
en la gran soledad: arriba el aire
traspasando de pájaros glaciales
y mi perro brincando, hirsuto,
lleno de voltaje marino en movimiento:
frente a frente al Océano y su espuma.
alegre, alegre, alegre
como los perros saben ser felices.
</p>
<p class="credit text-center">
Credito: Pablo Neruda ‐ <a href="https://fundacionneruda.org/2020/01/perro-ha-muerto-pablo-neruda/" target="_blank">Un Perro</a>
</p>
</figcaption>
</figure>
</main>
</div>
<script type="text/javascript">
let mainNav = document.querySelector('.navbar-toggle');
let navBarToggle = document.querySelector('header');
mainNav.addEventListener('click', e => {
navBarToggle.classList.toggle('ico-movil');
});
</script>
</body>
</html>