Skip to content

Commit d2d8c9a

Browse files
lauramesalauramesa
committed
dando estilos al navegador y al main
1 parent 1070fbe commit d2d8c9a

File tree

4 files changed

+447
-11
lines changed

4 files changed

+447
-11
lines changed

‎index.html‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,30 @@
99
<meta name="robots" content="index">
1010
<meta name="robots" content="follow">
1111
<title>encriptador</title>
12+
<link rel="stylesheet" href="/public/css/index.css">
13+
<link rel="stylesheet" href="/public/css/normalize.css">
1214
</head>
1315
<body>
14-
<header>
15-
<nav>
16-
<img src="logo.png">
16+
<header class="home__page">
17+
<nav class="nav container">
18+
<img src="/public/img/Logo.png" alt="">
1719
</nav>
1820
</header>
19-
<section class="stay">
20-
<article class="inputText">
21-
<input type="text" placeholder="ingresa texto aquí">
22-
<button class="encrypt">encriptar</button>
23-
<button class="decrypt">desencriptar</button>
21+
<main class="main__page container">
22+
<article class="entrada">
23+
<textarea class="inputText" name="entrada" id="" cols="30" rows="10" placeholder="ingresa texto aquí."></textarea>
24+
<div class="botones">
25+
<button class="encrypt">encriptar</button>
26+
<button class="decrypt">desencriptar</button>
27+
</div>
2428
</article>
25-
<article class="outputText">
29+
<article class="salida">
30+
<p>Ningun mensaje fue encontrado</p>
2631
<button class="copyText">copiar</button>
2732
</article>
28-
</section>
29-
<footer>
33+
</main>
34+
<main class="container">
35+
<footer class="pieDePagina">
3036
<section class="pie">
3137
<img src="logo.png">
3238
<ul class="contactSocialNetwork">

‎public/css/index.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap');
2+
:root{
3+
--color-cielo: #F3F5FC;
4+
--color-azul:#0A3871;
5+
--color-azulClaro:#D8DFE8;
6+
--color-blanco:#ffffff;
7+
--padding-container:40px 0;
8+
}
9+
body{
10+
background-color: var(--color-cielo);
11+
font-family: 'Poppins', sans-serif;
12+
}
13+
.container{
14+
width: 90%;
15+
max-width: 1200px;
16+
margin: 0 auto;
17+
overflow: hidden;
18+
padding: var(--padding-container);
19+
}
20+
.home__page{
21+
width: 100%;
22+
height: auto;
23+
position: relative;
24+
display: flex;
25+
background-color: var(--color-azulClaro);
26+
}
27+
nav{
28+
width: 100%;
29+
height: auto;
30+
max-width: 960px;
31+
--padding-container: 0;
32+
}
33+
header nav img{
34+
width: 55px;
35+
height: 55px;
36+
margin: 5px;
37+
}
38+
.main__page {
39+
display: flex;
40+
justify-content: space-evenly;
41+
height: 550px;
42+
}
43+
.entrada{
44+
margin: 10px;
45+
}
46+
.encrypt, .decrypt{
47+
padding: 7px 10px;
48+
border-radius: 15px;
49+
color: var(--color-blanco);
50+
background-color: var(--color-azul);
51+
display: inline-block;
52+
}
53+
.inputText{
54+
width: 70vw;
55+
max-width: 900px;
56+
min-width: 400px;
57+
}
58+
59+
60+
.pieDePagina{
61+
width: 100%;
62+
height: auto;
63+
position: relative;
64+
display: flex;
65+
background-color: var(--color-azul);
66+
--padding-container: 0;
67+
68+
}
69+
/*----------------------------------------------*/
70+
@media screen and (max-width: 767px) {
71+
.main__page {
72+
flex-direction: column;
73+
align-items: center;
74+
}
75+
.entrada {
76+
margin-top: 20px;
77+
}
78+
}

0 commit comments

Comments
 (0)