Skip to content

Commit dbf53a8

Browse files
ximecalderonximecalderon
committed
Agrega template de header fullstock
1 parent f00a016 commit dbf53a8

File tree

8 files changed

+266
-0
lines changed

8 files changed

+266
-0
lines changed

‎fullstock-templates/assets/css/header.css

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
.top-nav {
2+
background-color: black;
3+
}
4+
5+
.top-nav__content {
6+
margin: auto;
7+
max-width: 80rem;
8+
}
9+
10+
.top-nav__links {
11+
padding: 0 1rem;
12+
min-height: 2.5rem;
13+
margin: 0;
14+
list-style: none;
15+
display: flex;
16+
align-items: center;
17+
justify-content: flex-end;
18+
gap: 1rem;
19+
}
20+
21+
.top-nav__links > * {
22+
margin: 0 !important;
23+
}
24+
25+
.top-nav__link {
26+
font-size: 0.875rem;
27+
line-height: 1.25rem;
28+
font-weight: 500;
29+
color: white;
30+
text-decoration: none;
31+
}
32+
33+
.main-nav {
34+
border: 1px solid #d9d9e0;
35+
}
36+
37+
.main-nav__container {
38+
margin: auto;
39+
padding: 0 1rem;
40+
max-width: 80rem;
41+
display: flex;
42+
justify-content: space-between;
43+
flex-wrap: wrap;
44+
column-gap: 6rem;
45+
}
46+
47+
.logo-container {
48+
display: flex;
49+
align-items: center;
50+
width: 8rem;
51+
}
52+
53+
.main-nav__actions {
54+
display: flex;
55+
align-items: center;
56+
gap: 0.5rem;
57+
}
58+
59+
.icon-container {
60+
margin-top: 0.5rem;
61+
margin-bottom: 0.5rem;
62+
width: 2.5rem;
63+
height: 2.5rem;
64+
display: flex;
65+
justify-content: center;
66+
align-items: center;
67+
}
68+
69+
.divider--vertical {
70+
width: 1px;
71+
height: 1.5rem;
72+
background-color: #d9d9e0;
73+
}
74+
75+
.main-nav__pages {
76+
margin: 0;
77+
padding: 0;
78+
width: 100%;
79+
border-top: 1px solid #d9d9e0;
80+
display: flex;
81+
list-style: none;
82+
justify-content: center;
83+
align-items: center;
84+
flex-wrap: wrap;
85+
}
86+
87+
.main-nav__pages-wrapper {
88+
flex-grow: 1;
89+
}
90+
91+
.main-nav__pages > * {
92+
margin: 0 !important;
93+
}
94+
95+
.main-nav__page {
96+
display: block;
97+
padding: 0.875rem 0.75rem;
98+
font-size: 0.875rem;
99+
line-height: 1.25rem;
100+
font-weight: 500;
101+
color: #60646c;
102+
text-decoration: none;
103+
}
104+
105+
.main-nav__page:hover {
106+
background-color: #f0f1fe;
107+
}
108+
109+
@media (max-width: 26.25rem) {
110+
.main-nav__container {
111+
column-gap: 1rem;
112+
}
113+
}
114+
115+
@media (min-width: 48rem) {
116+
.nav__links {
117+
padding: 0 2rem;
118+
}
119+
120+
.main-nav__container {
121+
flex-wrap: nowrap;
122+
padding: 0 2rem;
123+
gap: 3rem;
124+
}
125+
126+
.logo-container {
127+
width: 10rem;
128+
}
129+
130+
.main-nav__pages {
131+
border-top: none;
132+
}
133+
134+
.main-nav__page {
135+
padding: 1.375rem 0.75rem;
136+
}
137+
138+
.main-nav__actions {
139+
order: 1;
140+
}
141+
}

‎fullstock-templates/assets/css/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@
55
@import "./base.css";
66

77
/* Capas que sirven para estilos especificos */
8+
@import "./header.css";
89
@import "./categories.css";
910
@import "./products.css";

‎fullstock-templates/assets/svg/abbreviated-logo.svg

Lines changed: 6 additions & 0 deletions
Loading

‎fullstock-templates/assets/svg/full-logo.svg

Lines changed: 13 additions & 0 deletions
Loading

‎fullstock-templates/assets/svg/search.svg

Lines changed: 3 additions & 0 deletions
Loading

‎fullstock-templates/assets/svg/shopping-cart.svg

Lines changed: 3 additions & 0 deletions
Loading

‎fullstock-templates/assets/svg/user.svg

Lines changed: 3 additions & 0 deletions
Loading

‎fullstock-templates/header.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Header</title>
7+
<link rel="stylesheet" href="./assets/css/index.css" />
8+
</head>
9+
<body>
10+
<header>
11+
<div class="top-nav">
12+
<nav class="top-nav__content">
13+
<ul class="top-nav__links">
14+
<li><a class="top-nav__link" href="/">Iniciar Sesión</a></li>
15+
<li><a class="top-nav__link" href="/">Crear cuenta</a></li>
16+
</ul>
17+
</nav>
18+
</div>
19+
<div class="main-nav">
20+
<div class="main-nav__container">
21+
<div class="logo-container">
22+
<img
23+
width="100%"
24+
src="./assets/svg/full-logo.svg"
25+
alt="Logo de Full Stock"
26+
/>
27+
</div>
28+
<div class="main-nav__actions">
29+
<div class="icon-container">
30+
<svg
31+
width="24"
32+
height="24"
33+
viewBox="0 0 24 24"
34+
fill="none"
35+
xmlns="http://www.w3.org/2000/svg"
36+
>
37+
<path
38+
d="M21 21L16.7 16.7M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
39+
stroke="#60646C"
40+
stroke-width="2"
41+
stroke-linecap="round"
42+
stroke-linejoin="round"
43+
/>
44+
</svg>
45+
</div>
46+
<div class="icon-container">
47+
<svg
48+
width="24"
49+
height="24"
50+
viewBox="0 0 24 24"
51+
fill="none"
52+
xmlns="http://www.w3.org/2000/svg"
53+
>
54+
<path
55+
d="M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13ZM12 13C14.1217 13 16.1566 13.8429 17.6569 15.3431C19.1571 16.8434 20 18.8783 20 21M12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21"
56+
stroke="#60646C"
57+
stroke-width="2"
58+
stroke-linecap="round"
59+
stroke-linejoin="round"
60+
/>
61+
</svg>
62+
</div>
63+
<div class="divider--vertical"></div>
64+
<div class="icon-container">
65+
<svg
66+
width="24"
67+
height="24"
68+
viewBox="0 0 24 24"
69+
fill="none"
70+
xmlns="http://www.w3.org/2000/svg"
71+
>
72+
<path
73+
d="M2.05005 2.05005H4.05005L6.71005 14.47C6.80763 14.9249 7.06072 15.3315 7.42576 15.6199C7.7908 15.9083 8.24495 16.0604 8.71005 16.05H18.49C18.9452 16.0493 19.3865 15.8933 19.7411 15.6079C20.0956 15.3224 20.3422 14.9246 20.4401 14.48L22.09 7.05005H5.12005M9 21C9 21.5523 8.55228 22 8 22C7.44772 22 7 21.5523 7 21C7 20.4477 7.44772 20 8 20C8.55228 20 9 20.4477 9 21ZM20 21C20 21.5523 19.5523 22 19 22C18.4477 22 18 21.5523 18 21C18 20.4477 18.4477 20 19 20C19.5523 20 20 20.4477 20 21Z"
74+
stroke="#60646C"
75+
stroke-width="2"
76+
stroke-linecap="round"
77+
stroke-linejoin="round"
78+
/>
79+
</svg>
80+
</div>
81+
</div>
82+
<div class="main-nav__pages-wrapper">
83+
<nav>
84+
<ul class="main-nav__pages">
85+
<li><a class="main-nav__page" href="/">Polos</a></li>
86+
<li><a class="main-nav__page" href="/">Tazas</a></li>
87+
<li><a class="main-nav__page" href="/">Stickers</a></li>
88+
<li><a class="main-nav__page" href="/">Compañía</a></li>
89+
</ul>
90+
</nav>
91+
</div>
92+
</div>
93+
</div>
94+
</header>
95+
</body>
96+
</html>

0 commit comments

Comments
 (0)