franpcode/API-and-CRUD-for-Ecommerce-with-Node.js-FRONTEND
1
0
Fork 0
mirror of https://github.com/FranP-code/API-and-CRUD-for-Ecommerce-with-Node.js-FRONTEND.git synced 2025-10-12 23:52:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Header y barra lateral listos

Browse Source
This commit is contained in:
Francisco Pessano
2021-11-09 11:40:45 -03:00
parent 9de5ad15fa
commit 92b0cd0bc9
2 changed files with 135 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
index.html
View File

@@ -7,30 +7,38 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Columbus</title>
</head>
<body>
<div class="menu-lateral">
<img src="./img/three lines menu-min.png" alt="three lines menu"> <!--Source: https://www.flaticon.com/premium-icon/menu_3502458?term=three%20lines&page=1&position=4&page=1&position=4&related_id=3502458&origin=search-->
<img src="./img/three lines menu-min.png" alt="three lines menu" class="button"> <!--Source: https://www.flaticon.com/premium-icon/menu_3502458?term=three%20lines&page=1&position=4&page=1&position=4&related_id=3502458&origin=search-->
</div>
<header>
<div class="logo">
<h1>Columbus</h1>
<h3>Bakery Wholesale</h3>
</div>
<div class="perfil">
<span id="perfil-nombre">Ana María</span>
<span id="nacionalidad">ARG</span>
</div>
<a href="#" id="more-options">
<img src="./img/menu-min.png" alt="menu image"> <!-- Source: https://www.flaticon.es/icono-gratis/menu_483345?term=menu%20vertical&page=1&position=10&page=1&position=10&related_id=483345&origin=search-->
</a>
</header>
<div class="pagina-principal">
<header>
<div class="logo">
<h1>Columbus</h1>
<h3>Bakery Wholesale</h3>
</div>
<div class="perfil">
<div class="informacion-personal">
<div class="text">
<span id="perfil-nombre">Ana María</span>
<span id="nacionalidad">ARG</span>
</div>
<img src="./img/perfil.png" alt="profile image" class="profile-img button">
</div>
<img src="./img/menu-min.png" alt="menu image" class="profile-menu button"> <!-- Source: https://www.flaticon.es/icono-gratis/menu_483345?term=menu%20vertical&page=1&position=10&page=1&position=10&related_id=483345&origin=search-->
</div>
</header>
<div class="primer-columna">
<div class="checkout">
<table id="products-display-checkout">
@@ -50,7 +58,7 @@
</tr>
</table>
<br>
<hr>
<div>
<span class="total">Total</span>

110
style.css
View File

@@ -0,0 +1,110 @@
body {
margin: 0;
padding: 0;
font-family: Roboto, helveltica;
display: flex;
}
.button {
cursor: pointer;
}
.menu-lateral {
width: 5vw;
height: 100vh;
box-sizing: border-box;
background-color: rgb(114, 114, 114);
padding: 1vh 1vw;
grid-column: 1 / 1;
}
.menu-lateral img {
width: 3vw;
filter: invert(100%);
}
header {
width: 94vw;
height: fit-content;
box-sizing: border-box;
display: flex;
justify-content: space-between;
background-color: rgb(67, 165, 172);
color: #fff;
}
header .logo {
font-family: Dancing Script, helveltica;
display: flex;
user-select: none;
}
header .logo h3 {
font-weight: normal;
display: flex;
align-items: center;
margin-left: 1vw;
}
header .perfil {
width: 25vw;
display: flex;
justify-content: space-around;
align-items: center;
}
header .perfil .informacion-personal {
display: flex;
}
header .perfil .informacion-personal .text {
display: flex;
flex-direction: column;
justify-content: center;
}
header .perfil .informacion-personal .text #nacionalidad {
font-weight: bold;
}
header .perfil img.profile-img {
width: 5vw;
height: 5vw;
border: 1px solid rgb(255, 255, 255);
border-radius: 100%;
object-fit: cover;
}
header .perfil img.profile-menu {
height: 3vw;
filter: invert(1);
}