Skip to content

Commit 6040424

Browse files
Vanesa-RVanesa-R
authored
Merge pull request #2 from Vanesa-R/develop
Develop
2 parents 33764cb + 9e6c176 commit 6040424

5 files changed

Lines changed: 3208 additions & 0 deletions

File tree

‎css/style.css‎

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300&family=Viga&display=swap');
2+
3+
:root {
4+
--oxygen: 'Oxygen', sans-serif;
5+
--viga: 'Viga', sans-serif;
6+
7+
--white: hsl(60, 20%, 99%);
8+
--ice: hsl(154, 73%, 90%);
9+
10+
--turquoise: rgb(28, 216, 210);
11+
--blue: rgb(186, 244, 219);
12+
13+
--green: hsl(178, 77%, 38%);
14+
--mint: hsl(155, 71%, 75%);
15+
--bermuda: hsl(154, 60%, 68%);
16+
17+
--black: hsl(0, 0%, 16%);
18+
}
19+
20+
21+
body {
22+
width: 100%;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
font-size: 18px;
27+
color: var(--black);
28+
background: linear-gradient(to right, var(--turquoise), var(--mint));
29+
}
30+
31+
32+
/* Main */
33+
.main {
34+
width: 100%;
35+
min-height: 100vh;
36+
display: flex;
37+
flex-direction: column;
38+
justify-content: center;
39+
padding: 1.5em;
40+
font-family: var(--oxygen);
41+
}
42+
43+
/* Title*/
44+
.title {
45+
font-family: var(--viga);
46+
font-size: 1.5em;
47+
font-weight: 100;
48+
text-align: center;
49+
50+
}
51+
52+
/* Contenedor de codificadores*/
53+
54+
.encoders,
55+
.tabs {
56+
margin-top: 3em;
57+
}
58+
59+
.text,
60+
.btn,
61+
.text-generate {
62+
border: none;
63+
outline: none;
64+
resize: none;
65+
}
66+
67+
.text, .code__inputs, .text-generate {
68+
width: 100%;
69+
}
70+
71+
.text,
72+
.text-generate {
73+
padding-left: 1em;
74+
padding-right: 1em;
75+
line-height: 3.1em;
76+
height: 3.2em;
77+
min-height: 3.2em;
78+
background-color: var(--white);
79+
border: 1px solid var(--turquoise);
80+
border-radius: .4em;
81+
}
82+
83+
84+
.btn {
85+
position: relative;
86+
margin: 1em .3em 1em 0em;
87+
padding: .6em;
88+
border: 1px solid transparent;
89+
border-radius: .4em;
90+
color: var(--black);
91+
cursor: pointer;
92+
transition: background-color 400ms ease, border-color 400ms ease;
93+
}
94+
95+
.btn:first-child{
96+
background-color: var(--green);
97+
}
98+
99+
.btn:not(:first-child){
100+
background-color: var(--blue);
101+
}
102+
103+
.btn:hover {
104+
border-color: var(--green);
105+
}
106+
107+
.btn:first-child:hover{
108+
background-color: var(--turquoise);
109+
}
110+
111+
.btn:not(:first-child):hover{
112+
background-color: var(--ice);
113+
}
114+
115+
116+
.numbers,
117+
.entities {
118+
display: flex;
119+
flex-direction: column;
120+
justify-content: flex-start;
121+
}
122+
123+
.description {
124+
font-weight: 600;
125+
font-size: .9em;
126+
margin: 1.5em 0 .5em 0;
127+
color: rgb(75, 75, 75);
128+
}
129+
130+
.code__inputs {
131+
display: flex;
132+
align-items: center;
133+
}
134+
135+
.code__inputs .btn {
136+
margin-left: .4em;
137+
}
138+
139+
.message {
140+
position: relative;
141+
visibility: hidden;
142+
align-self: center;
143+
padding: .3em 1em;
144+
font-size: .7em;
145+
color: var(--white);
146+
transition: visibility 300ms ease;
147+
}
148+
149+
.message::before{
150+
position: absolute;
151+
content: "";
152+
width: 100%;
153+
height: 100%;
154+
inset: 0;
155+
background-color: var(--black);
156+
opacity: .6;
157+
z-index: -1;
158+
}
159+
160+
.message.--copied{
161+
visibility: visible;
162+
}
163+
164+
/* Pestaña*/
165+
.tabs {
166+
display: flex;
167+
justify-content: flex-start;
168+
align-items: stretch;
169+
overflow: hidden;
170+
border-radius: .4em;
171+
font-size: .9em;
172+
background-color: var(--white);
173+
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
174+
}
175+
.tab_nav {
176+
width: 25%;
177+
cursor: pointer;
178+
background-color: var(--blue);
179+
}
180+
.tab_nav ul {
181+
list-style: none;
182+
}
183+
.tab_nav ul li {
184+
font-size: .8em;
185+
text-align: center;
186+
padding: .8em;
187+
transition: background-color 500ms ease, font-weight 200ms ease;
188+
}
189+
.tab_nav ul li:hover {
190+
background-color: var(--ice);
191+
}
192+
.tab_nav ul li.--active {
193+
background-color: var(--bermuda);
194+
font-weight: 600;
195+
}
196+
197+
.tab-content {
198+
width: 80%;
199+
}
200+
201+
/* Tabla de símbolos y entidades*/
202+
203+
.table {
204+
width: 100%;
205+
text-align: center;
206+
font-size: .9em;
207+
border-collapse: collapse;
208+
display: none;
209+
overflow: hidden;
210+
}
211+
.table.--active {
212+
display: table;
213+
}
214+
215+
td {
216+
padding: .2em;
217+
}
218+
219+
th {
220+
padding: .6em 0em;
221+
font-size: .87em;
222+
}
223+
224+
tbody tr:nth-child(odd) {
225+
background-color: #F1FBEF;
226+
}
227+
.table code {
228+
font-family: var(--oxygen);
229+
}
230+
231+
.space {
232+
padding: .9em;
233+
}
234+
235+
th:nth-child(2),
236+
td:nth-child(2),
237+
th:nth-child(3),
238+
td:nth-child(3) {
239+
display: none;
240+
}
241+
242+
243+
/* Queries*/
244+
245+
@media (min-width: 768px){
246+
th:nth-child(2),
247+
td:nth-child(2){
248+
display: block;
249+
}
250+
}
251+
252+
@media (min-width: 1024px){
253+
body {
254+
height: 100vh;
255+
overflow: hidden;
256+
}
257+
258+
.main {
259+
width: 80%;
260+
flex-direction: row-reverse;
261+
align-items: center;
262+
justify-content: space-between;
263+
padding: 0;
264+
}
265+
.encoders{
266+
margin-top: 0;
267+
}
268+
.container__encode{
269+
width: 30%;
270+
margin-left: 2em;
271+
}
272+
.title {
273+
text-align: left;
274+
margin-bottom: 2em;
275+
}
276+
.tabs {
277+
width: 70%;
278+
min-height: 85vh;
279+
margin-top: 2em;
280+
}
281+
}

‎images/favicon.png‎

6.02 KB
Loading

0 commit comments

Comments
 (0)