HTML - AYUDA ¿Alguien sabe porque no se ve el texto completo en mi pagina web?

 
Vista:
sin imagen de perfil
Val: 9
Ha disminuido su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

AYUDA ¿Alguien sabe porque no se ve el texto completo en mi pagina web?

Publicado por Javier (5 intervenciones) el 20/05/2021 00:37:36
Hola, estoy diseñando una pagina web pero veo que cuando la visualizo en el ordenador, no se el texto completo hacia abajjo si que se corta un parte antes (adjunto captura) pero en celular si se ve completo, ya intente en Css poner la propiedad height: 100%; max-heigth: 100% heigth: 100vh; heigth: auto; y sigue sin verse completo, la unica "solucion" es ponerle una medida en pixeles al height le pongo 4000px y asi si se ve completo pero en celular ahora se ve incompleto, alguna solucion?? :( a quien me ayude le mando 5 dolares por paypal jaja estoy desesperado

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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>¿Que tienes que saber antes de crear un sitio web?</title>
    <script src="https://kit.fontawesome.com/41bcea2ae3.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/principal.css">
    <link rel="stylesheet" href="css/articulos.css">
    <meta name="description" content="¿Que tienes que saber antes de crear un sitio web?"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="keywords" content="sitio web, indexacion, html"/>
    <link rel="shortcut icon" href="icono/icono.ico">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
 
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script>
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#3937a3"
    },
    "button": {
      "background": "#e62576"
    }
  },
  "theme": "classic",
  "content": {
    "message": "Este sitio web utiliza cookies para garantizar que obtenga la mejor experiencia en nuestro sitio web.",
    "dismiss": "¡Entiendo!",
    "link": "Aprende más"
  }
});
</script>
 
    <!--Header - menu-->
    <header>
 
        <div class="header-content">
 
            <div class="logo">
                <h1>Maxi<b>Tareas</b></h1>
            </div>
 
            <div class="menu" id="show-menu">
 
                <nav>
                    <ul>
                        <li><a href="https://maxitareas.com"> <i class="fas fa-home"></i> Inicio</a></li>
                        <li><a href="#"> <i class="fab fa-youtube"> </i>Tutoriales</a></li>
                        <li class="menu-selected"><a href="articulos-para-aprender" class="text-menu-selected">
                            <i class="fas fa-file-alt"></i>Blog</a></li>
                        <li><a href="contacto"> <i class="fas fa-headset"></i> Contacto</a></li>
                        <li><a href="sobre-nosotros"> <i class="fas fa-book"></i> Sobre Nosotros</a></li>
                    </ul>
                </nav>
 
            </div>
 
        </div>
 
        <div id="icon-menu">
            <i class="fas fa-bars"></i>
        </div>
 
    </header>
 
    <!--Portada-->
 
    <div class="container-all" id="move-content">
 
 
    <div class="article-container-cover">
        <div class="container-info-cover">
            <h1>¡Todo es posible!</h1>
            <p>Si tienes un jardín y una librería tienes todo lo que necesitas.
            <br>- Marcus Tullius Cicero</p>
        </div>
    </div>
 
    <div class="container-content">
 
            <article>
 
            <h1>¿Que tienes que saber antes de crear una pagina web?</h1>
 
 
 
<p>Muchas son las preguntas que nos llegan a la cabeza cuando pensamos en crear nuestro primero sitio web, y es algo completamente normal, las páginas web son un tema que cada vez se hace notar más en nuestra vida cotidiana, y es que ¿quién no ha visitado una página web alguna vez de su vida? ¿Ya sea para obtener información útil o para descargar un archivo o para ver algo que nos apasiona?</p>
 
<p>En fin una página web sirve para un montón de cosas y cada vez están escalando más y más, en este artículo te enseñaremos todo lo que tienes que saber antes de crear tu propio sitio web.</p>
 
<h2><p>Vamos por partes, ¿Qué es una página web?</p></h2>
 
<p>Una página web es un conjunto de información que se encuentra en una determinada dirección web, esa es la respuesta más simple.</p>
 
<h3><p>¿Para qué sirve una página web?</h3></p>
 
<p>Una página web nos sirve principalmente para brindar información, las utilizamos para buscar una respuesta rápida a cualquier problema que se nos presente.</p>
 
<p>Bien, esas son respuestas bastantes básicas, pero había que responderlas ¿no? Ahora vamos por otra parte.</p>
 
<p>Registrar un dominio web.</p>
 
<h3><p>¿Para qué sirve un dominio web?</h3></p>
 
<p>Un dominio web sirve para tener un nombre que identificara a tu sitio web, por ejemplo si tu sitio web es Maxitareas el dominio será Maxitareas.com.</p>
 
<p>El dominio aparece arriba en la dirección de cualquier página web, tiene diferentes terminaciones .com .org .io .net etc., también hay dominios del gobierno como .gob o dominios que se asocian a un país como .mx.</p>
 
<p>¿Tienes una idea para el nombre de tu dominio web? Primero averigua si está disponible, ¿cómo? Hay muchos proveedores de dominios en internet, intenta averiguarlo en <a href="https://mx.godaddy.com/blog/como-saber-si-dominio-esta-disponible/"> GoDaddy</a> por ejemplo.
 
<p>Una vez que ya lo tienes, es necesario comprarlo, aquí te dejamos un video para que lo hagas paso a paso.</p>
 
<p>Obtener un hosting.</p>
 
<h3><p>¿Para qué sirve un hosting?</h3></p>
 
<p>Es alojamiento web, es un servicio que provee a los usuarios un sistema para almacenar archivos, imágenes, videos y páginas web.</p>
 
<h3><p>¿Es necesario tener un hosting?</h3></p>
 
<p>, es muy importante tener la dupla de hosting y dominio para nuestra página web, una que provee la dirección web (dominio) y otro el sistema para almacenar archivos (hosting) que almacenara nuestra página web en un servidor.</p>
 
<p>Preguntas frecuentes:</p>
 
<p>¿Compre mi dominio y mi hosting en sitios diferentes como los asocio?</p>
 
<p>Para asociarlos tienes que registrar los DNS de tu dominio web en tu hosting.</p>
 
<p>Paso 1.</p>
 
<p>Cuando compramos el hosting nos debe llegar un correo electrónico con los name servers de hosting.</p>
 
<p>Paso 2.</p>
 
<p>Ahora vamos a GoDaddy y ubicamos nuestro dominio, pulsamos en los tres puntos e ingresamos a la opción "Administrar DNS"</p>
 
<p>Paso 3.</p>
 
<p>Hacemos scroll hacia abajo, en el apartado de "Servidores de Nombres" le daremos clic al botón de cambiar.</p>
 
<p>Paso 4. </p>
 
<p>Estando ahí marcaremos la opción "Usaré mi propio servidor de nombres" posteriormente registramos en la primera casilla el DNS primario y en la segunda casilla el DNS secundario.</p>
 
<p>¿Cómo cargar mi página web a mi hosting?</p>
 
<p>Hay dos maneras, la primera crear un archivo .ZIP o con FileZilla.</p>
 
<p><b>Con archivo ZIP </b></p>
 
<p>Solo basta con meter todas las carpetas con imágenes, videos y archivos, y el index en el archivo ZIP para posteriormente extraerlo en el directorio raíz. </p>
 
<p>1. Ubicamos la carpeta public_html ahí lo cargamos y lo extraemos.</p>
 
 
<p><b>Con FileZilla. </b></p>
 
<p>Para esto es necesario crear una cuenta FTP. </p>
 
<img src="img/FTP.PNG" id="imajen2">
 
<p>Creamos usuario y contraseña, y añadimos nuestra cuenta FTP asociada a nuestro dominio.</p>
 
<p>Ahora en FileZilla, vemos que aparecen 4 campos, la información se encontrara en el apartado de cuentas FTP le damos clic en donde aparece un engranaje "Configurar cliente FTP"</p>
 
 
<p><b>Llenar campos programa FileZilla </p></b>
 
<p>El primer campo que es Servidor colocaremos la información que hay en "Servidor FTP:"</p>
 
<p>El segundo campo que es Nombre de usuario colocaremos la información que hay en "Nombre de usuario de FTP:"</p>
 
<p>El tercer campo que es Contraseña colocaremos nuestra contraseña previamente creada.</p>
 
<p>El cuarto campo que es Puerto colocaremos la información que hay en "Puerto FTP explícito de FTP &:"</p>
 
<p>Con eso bastará para que FileZilla conecte con nuestra cuenta FTP y podamos cargar nuestro sitio web.</p>
 
<p>¿Qué tengo que hacer para que mi sitio web aparezca en Google?</p>
 
<p>Dos cosas, la primera es registrar tu sitio web en <a href="https://search.google.com/search-console/about"> Google Search Console </a> y la segunda es crear un sitemap.</p>
 
<b>Crear sitemap</b>
 
<p>Crear un sitemap es bastante sencillo, solo basta con ingresar a un generador de sitemap y escribir nuestra dirección web para que solo haga su trabajo.</p>
 
<p><a href="https://www.xml-sitemaps.com/"> Generador gratuito de sitemap. </a></p>
 
<p>Una vez descargado nuestro sitemap, lo subiremos a nuestra raíz donde se encuentra el archivo index.html de nuestro sitio web.</p>
 
<p>Posteriormente enviaremos nuestro sitemap a Google para que comience a rastrear nuestra página web y a indexarla.</p>
 
<img src="img/sitemap.PNG" id="imajen2">
 
<p><b>Hay que recordar que no hay un tiempo en específico para que nuestra página web comience a aparecer en los resultados de búsqueda de Google, puede ser 1 día o incluso semanas.</b></p>
 
<p>Esperemos que con esta buena información te hayamos orientado un poco más con respecto a los pasos a seguir después de haber creado tu sitio web.</p>
 
 
 
 
 
 
 
 
 
 
 
        </article>
 
        <div class="container-aside">
 
            <aside>
            <h2> ¡Artículos que te podrían interesar! </h2>
            </aside>
 
            <aside>
 
 
                <img src="img/agua.jpg" alt="">
                <h2>¿Qué hacer durante la lluvia?: Jardinería</h2>
                <p>Por qué probar la jardinería bajo la lluvia? Es una pregunta perfectamente razonable. Pero, por tonto que parezca, hay una sorprendente cantidad de beneficios ...</p>
                <a href="que-hacer-durante-la-lluvia-jardineria"><button>leer más</button></a>
            </aside>
 
            <aside>
                <img src="img/img1.jpg" alt="">
                <h2>¿Como aprovechar el agua de lluvia?</h2>
                <p>¿Cómo aprovechar el agua de lluvia? Si cada uno hace su parte, se podría reducir considerablemente el nivel de consumo de agua potable ... </p>
                <a href="como-aprovechar-el-agua-de-la-lluvia"><button>leer más</button></a>
 
            </aside>
 
            <aside>
                <img src="img/img4.jpg" alt="">
                <h2>¿Como sembrar correctamenta aguacate?</h2>
                <p>Para que dé sus frutos, deberás plantar el aguacate en una tierra idónea. A los aguacates les gustan las tierras ácidas, cuyo PH sea de 5 a 7 ...</p>
                <a href="como-sembrar-aguacate"><button>leer más</button></a>
            </aside>
 
        </div>
 
</div>
 
    <div class="container-footer">
 
        <footer>
            <div class="logo-footer">
 
            </div>
 
             <div class="redes-footer">
                <a href="https://www.facebook.com/MaxiTareas-105576965045751/?hc_ref=ARQpPWs6DWKcsSvTUeKIg3WrFRwN5lzOP37N1bYyhQ9Kg5uEVVidoMbag2I5Ff3tlEE&fref=nf&__xts__[0]=68.ARB_WPek0yPQhw3xd5z0B8EPbiuWufKa1JuEGY0XGuT-XyONWwlQCpmu9HjP4PtyQcGGzpEGtrH7E_sxIJdgI2nNmm5l2wxC0tMCIsi9GjlHD7e-4HHBGB7ItwO5_3FJ54rCkrsZKS6llYtTtSEwyHmDKQ6dEeB3wxNyvG891mqPvG5JRPcF2FENgO5JLg5tmrXT3A-oskRhLEa33MABvYsqsAoAGj-R8VqE3EOeaEn0rAR6aQ71AIjquHOyqfKrANWaQ59l9moaOkKcwukUTVOt6yAVuVk8F6H73yxnpkWyD8U&__tn__=kC-R"><i class="fab fa-facebook-f icon-redes-footer"></i></a>
                <a href="#"><i class="fab fa-google-plus-g icon-redes-footer"></i></a>
                <a href="https://www.instagram.com/fabricantedesanpancho/?hl=es-la"><i class="fab fa-instagram icon-redes-footer"></i></a>
            </div>
 
 
            <hr>
            <h4>© 2021 Maxitareas - Todos los Derechos Reservados <br> <br><a href="politica-de-privacidad" id="politica">Política de Privacidad |</a><a href="terminos-y-condiciones" id="politica"> Términos y Condiciones</a></h4>
 
        </footer>
 
    </div>
 
</div>
 
    <script src="js/script.js"></script>
</body>
</html>

CSS 1 (principal.css)

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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&display=swap');
 
 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Source Sans Pro', sans-serif;
}
 
 
body{
    background: #f6f6f6;
 
 
}
 
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #fff;
    box-shadow: 0 4px 25px -22px black;
    z-index: 10;
}
#head{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #fff;
    box-shadow: 0 4px 25px -22px black;
    z-index: 10;
}
#imajen{
    margin-left: 0%;
    margin-top: 20px;
    width: 70%;
    border-radius: 1em;
}
#imajen2{
    margin-left: 0%;
    margin-top: 20px;
    width: 60%;
    border-radius: 1em;
}
.header-content{
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    position: relative;
}
 
.logo{
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.logo h1 b{
    color: #46a2fd;
}
 
 
.menu {
    height: 80px;
    margin-right: 60px;
}
 
.menu nav{
    height: 100%;
}
 
.menu nav ul{
    height: 100%;
    display: flex;
    list-style: none;
}
 
.menu nav ul li{
    height: 100%;
    margin: 0px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
 
.menu-selected:before{
    content: '';
    width: 100%;
    height: 4px;
 
    position: absolute;
    top: 0;
    left: 0;
}
 
.menu nav ul li a{
    color: #777777;
    font-size: 18px;
    transition: color 300ms;
}
#amazon{
    float: right;
}
#boton{
    width: 190px;
    height: 46px;
    background: blue;
    color: white;
}
 
.menu nav ul li a:hover{
 
}
 
.menu .text-menu-selected{
 
}
 
.menu nav ul li a i{
    display: none;
}
 
#icon-menu{
    width: 50px;
    height: 50px;
    position: absolute;
    right: 20px;
    top: 16px;
    padding: 10px;
    font-size: 20px;
    background: #eeeeeefa;
    border-radius: 100%;
    color: #787878;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
 
#icon-menu:hover{
    opacity: 0.8;
}
 
 
 
/*Buscador de contenido*/
 
#ctn-icon-search{
    position: absolute;
    right: 20px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
#ctn-icon-search i{
    font-size: 18px;
    color: #777777;
    cursor: pointer;
    transition: all 300ms;
 
}
 
#ctn-icon-search i:hover{
    color: #46a2fd;
}
 
 
#ctn-bars-search{
    position: fixed;
    top: -10px;
    width: 100%;
    background: #fff;
    padding: 20px;
    z-index: 9;
    transition: all 600ms;
}
 
#ctn-bars-search input{
    display: block;
    width: 1200px;
    margin: auto;
    padding: 10px;
    font-size: 18px;
    outline: 0;
}
 
#box-search{
    position: fixed;
    top: 165px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    background: #fff;
    z-index: 8;
    overflow: hidden;
    display: none;
}
 
#box-search li a{
    display: block;
    width: 1200px;
    color: #777777;
    padding: 12px 20px;
}
 
#box-search li a:hover{
    background: #f3f3f3;
}
 
#box-search li a i{
    margin-right: 10px;
    color: #777777;
}
 
 
#cover-ctn-search{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    background: rgba(0,0,0,0.5);
    z-index: 7;
    display: none;
}
 
 
 
 
/*Footer - pie de pagina*/
 
.container-footer{
    width: 100%;
    padding: 40px 0;
    background: #fff;
    margin-top: 40px;
 
}
 
.container-footer footer{
    max-width: 1200px;
    margin: auto;
}
 
.container-footer footer .logo-footer{
    text-align: center;
}
 
.container-footer footer .logo-footer img{
    width: 100px;
}
 
.container-footer footer .redes-footer{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
 
 
.container-footer footer .redes-footer .icon-redes-footer{
    font-size: 20px;
    margin: 20px;
    background: #efefef;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    color: #a2a2a2;
}
#politica{
    color: black;
}
 
footer .redes-footer .fa-facebook-f:hover{
    background: #41579A;
    color: #fff;
}
 
footer .redes-footer .fa-google-plus-g:hover{
    background: #DE4C34;
    color: #fff;
}
 
footer .redes-footer .fa-instagram:hover{
    background: linear-gradient(to top right, #FCDE30, #E9712A, #D2313B, #AE4198, #7540A1, #5443A8);
    color: #fff;
}
 
 
.container-footer footer hr{
    margin-top: 20px;
    border: none;
    height: 2px;
    background: #c0c0c07a;
}
 
 
.container-footer h4{
    text-align: center;
    margin-top: 40px;
    color: #8e8e8e;
    font-weight: 500;
 
}
 
/* Responsive Design - adaptable a dispositivos moviles*/
 
@media screen and (max-width: 1220px){
 
    .header-content,
    .container-footer footer{
        max-width: 1000px;
        padding: 0 20px;
    }
 
    #ctn-bars-search,
    #ctn-bars-search input,
    #box-search{
        width: 100%;
    }
 
}
 
 
 
@media screen and (max-width: 800px){
 
    body{
        overflow-x: hidden;
    }
 
    .container-all{
        transition: all 300ms cubic-bezier(1,0,0,1);
    }
 
    .move-container-all{
        transform: translateX(300px);
    }
 
    .menu{
        width: 0px;
        height: 100vh;
        position: fixed;
        top: 80px;
        left: 0;
        background: #fff;
        overflow: hidden;
        transform: translateX(-350px);
        box-shadow: 10px 0 20px -25px black;
        transition: all 300ms cubic-bezier(1,0,0,1);
    }
 
    .show-lateral {
        width: 300px;
        transform: translateX(0px);
    }
 
    .menu nav ul {
        flex-direction: column;
    }
 
    .menu nav ul li{
        max-width: 200px;
        height: 50px;
        justify-content: flex-start;
    }
 
    .menu-selected:before{
        width: 0;
    }
 
    .menu nav ul li a{
        margin-top: 40px;
        color: #858585;
    }
 
    .menu nav ul li a i{
        width: 20px;
        display: inline-block;
        margin-right: 10px;
 
    }
 
    #icon-menu{
        display: flex;
        right: 60px;
    }
 
    .container-aside{
        flex-wrap: wrap;
    }
 
}
.si img{
    width: 40%;
    height: 190px;
    float: right;
    border-radius: 3em;
 
}
 
CSS 2 (articulos.css)
 
/*Portada*/
 
 
.article-container-cover{
    width: 100%;
    height: 500px;
    position: relative;
    margin-top: 80px;
    background-image: url(../img/img8.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
 
.article-container-cover:before{
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(25, 81, 235, 0.76);
    position: absolute;
    top: 0;
    left: 0;
}
 
.container-info-cover{
    max-width: 800px;
    height: 500px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
#youtube-img{
    width: 60%;
    height: 290px;
}
#tomatues{
    color: #53B6DB;
}
.article-container-cover-hosting{
    width: 100%;
    height: 500px;
    position: relative;
    margin-top: 80px;
    background-image: url(../img/codigo.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
 
.article-container-cover-hosting:before{
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(25, 81, 235, 0.76);
    position: absolute;
    top: 0;
    left: 0;
}
 
.container-info-cover-hosting{
    max-width: 800px;
    height: 500px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
#text-aside{
    font-family: verdana;
    text-decoration-style: none;
}
.container-info-cover-hosting h1{
    font-size: 60px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 20px;
}
 
.container-info-cover-hosting p{
    color: #fff;
    font-size: 20px;
    font-weight: 300;
}
#cache-img{
    width: 80%;
    height: 300px;
    margin-top: 20px;
}
#btnCopiar{
    width: 160px;
    height: 50px;
    border-radius: 1em;
}
#asideo{
    background-image: url(../img/fondo.jpg);
    color: white;
 
    background-repeat: no-repeat;
    background-size: cover;
 
}
 
.container-info-cover h1{
    font-size: 60px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 20px;
}
 
.container-info-cover p{
    color: #fff;
    font-size: 20px;
    font-weight: 300;
}
 
/*Contenedor - contenido del articulo*/
 
.container-content{
    width: 1200px;
    margin: auto;
    he
    margin-top: 40px;
    display: flex;
    justify-content: center;
 
}
 
#textoACopiar{
    font-size: 0.85em;
    margin-left: -21px;
}
 
 
article{
    width: 100%;
    padding: 20px;
    padding-bottom: 40px;
    box-shadow: -10px 0 20px -30px black;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    background: #fff;
}
 
article:before{
    content: '';
    width: 100%;
    height: 6px;
    position: absolute;
    top: 0;
    left: 0;
    background: #46a2fd;
}
 
article h1{
    margin-top: 20px;
    font-weight: 500;
    font-size: 40px;
}
 
article p{
    margin-top: 20px;
    font-size: 18px;
    color: #3c3c3c;
}
 
article img{
    width: 50%;
    height: 10%;
    margin-top: 30px;
    display:block;
    margin:auto;
 
}
#si img{
 
}
 
/*Aside de los articulos de relacionados*/
 
.container-aside aside{
  width: 320px;
  border-right: 6px;
  box-shadow: 0 0 20px -20px black;
  border-radius: 6px;
  overflow: hidden;
  margin-left: 40px;
  margin-bottom: 40px;
  padding-bottom: 20px;
  background: #fff;
  text-decoration-style: none;
  list-style: none;
}
 
.container-aside aside img{
    width: 100%;
}
 
.container-aside aside h2,
.container-aside aside p{
    margin-top: 20px;
    padding: 0px 20px;
}
#amazon{
    float: right;
    opacity: 0.5;
    padding: 15px;
}
#boton{
    width: 250px;
    height: 43px;
    background: #53B6DB;
    color: white;
    font-size: 1em;
    border: none;
    border-radius: 1em;
    font-family: verdana;
    cursor: pointer;
}
.container-aside aside button{
    margin-top: 20px;
    margin-left: 20px;
    padding: 10px 50px;
    font-size: 16px;
    background: #46a2fd;
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 6px;
}
 
.container-aside aside button:hover{
    opacity: 0.9;
}
 
@media screen and (max-width: 1220px){
 
    .container-content{
        max-width: 1000px;
        padding: 0 20px;
    }
 
 
}
 
@media screen and (max-width: 1020px){
 
    .container-content{
        width: 100%;
        flex-direction: column;
    }
 
    article{
        box-shadow: 0 0 0 0;
    }
 
    .container-aside{
        display: flex;
        justify-content: center;
    }
 
    .container-aside aside{
        max-width: 300px;
        margin: 10px;
    }
 
}
 
@media screen and (max-width: 800px){
 
    .container-aside{
        flex-wrap: wrap;
    }
 
    #icon-menu{
        right: 20px;
    }
 
}
ayuda
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder