├── img
├── cb.png
├── bg-header2.jpg
└── bg-header3.jpeg
├── index.html
└── css
└── estilos.css
/img/cb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/particules-js/HEAD/img/cb.png
--------------------------------------------------------------------------------
/img/bg-header2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/particules-js/HEAD/img/bg-header2.jpg
--------------------------------------------------------------------------------
/img/bg-header3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/particules-js/HEAD/img/bg-header3.jpeg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Particles JS
8 |
9 |
16 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/css/estilos.css:
--------------------------------------------------------------------------------
1 | /* ESTILOS GENERALES */
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | }
7 |
8 | body {
9 | background-color:#000;
10 | color: #fff;
11 | font-size: 18px;
12 | font-family: 'Lato', sans-serif;
13 | font-weight: 300;
14 | }
15 |
16 | #particles-js {
17 | height: 100vh;
18 | width: 100%;
19 | position: fixed;
20 | z-index: -1;
21 | }
22 |
23 | .contenedor {
24 | width: 90%;
25 | max-width: 1200px;
26 | background-size: cover;
27 | background-image: url('../img/bg-header3.jpeg');
28 | background-position:center;
29 | margin-left: auto;
30 | margin-right: auto;
31 | margin-top: 15px;
32 | padding: 20px 30px;
33 | position: relative;
34 | z-index: 99;
35 | opacity: .85;
36 | }
37 |
38 | .contenedor.header {
39 | height: calc(100vh - 55px);
40 | border: 3px solid #555555;
41 | }
42 |
43 | .barra-navegacion ul {
44 | display: flex;
45 | justify-content: space-between;
46 | align-items: center;
47 | }
48 |
49 | .barra-navegacion li {
50 | list-style: none;
51 | display: inline-block;
52 | }
53 |
54 | .barra-navegacion .logo {
55 | color:#3dff3e;
56 | font-size: 50px;
57 | }
58 |
59 | .barra-navegacion a {
60 | text-decoration: none;
61 | color: #fff;
62 | font-size: 19px;
63 | font-family: 'Lato', sans-serif;
64 | font-weight: 400;
65 | text-transform: uppercase;
66 | border-bottom: 1px solid transparent;
67 | transition: .5s ease;
68 | }
69 |
70 | .barra-navegacion a:hover {
71 | color: #3dff3e;
72 | border-bottom: 1px solid currentcolor;
73 | }
74 |
75 | .contenido-descripcion {
76 | width: 60%;
77 | display: flex;
78 | height: 100%;
79 | align-items: center;
80 | }
81 |
82 | .contenido-descripcion .titulo {
83 | text-transform: uppercase;
84 | letter-spacing: 5px;
85 | }
86 |
87 | .contenido-descripcion .titulo span:first-child {
88 | font-size: 50px;
89 | display: block;
90 | font-weight: 300;
91 | }
92 |
93 | .contenido-descripcion .titulo span:last-child {
94 | font-weight: 900;
95 | font-size: 100px;
96 | }
97 |
98 | .contenido-descripcion .btn-link {
99 | display: inline-block;
100 | padding: 10px 20px;
101 | margin: 25px 0;
102 | text-transform: uppercase;
103 | text-decoration: none;
104 | color: #3dff3e;
105 | border: 1px solid #555555;
106 | animation: parpadeo 2s linear infinite;
107 | transition: .7s ease;
108 | }
109 |
110 | .contenido-descripcion .btn-link:hover {
111 | border: 1px solid #3dff3e;
112 | animation: none;
113 | }
114 |
115 |
116 | @keyframes parpadeo {
117 | 0%, 41%, 45%, 47%, 49.5%, 100% {
118 | opacity: 1;
119 | }
120 |
121 | 42%, 44%, 46%,48%, 50% {
122 | opacity: 0;
123 | }
124 | }
125 |
--------------------------------------------------------------------------------