alvin/Challenge_14_Magazijn_App_plannen
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Challenge_14_Magazijn_App_plannen.git synced 2026-03-06 13:22:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Alvin

Browse Source
This commit is contained in:
HodiamontHods
2025-09-30 11:37:54 +02:00
parent 96eefa95a4
commit de6e8bbac1
2 changed files with 40 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
concept/index.html
View File

@@ -7,14 +7,20 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<header> <header>
<ul> <div class="header-buttons">
<li><a href=""><button>hallo</button></a></li> <div class="left-buttons">
<li><a href=""><button>alvin</button></a></li> <button>home</button>
<li><a href=""></a><button>Senna</button></li> <button>info</button>
</ul> <button>Magazijn</button>
</div>
<div class="right-buttons">
<button>winkelmand</button>
<button>vertalen</button>
</div>
</div>
</header>
</header>
</body> </body>
</html> </html>

35
concept/style.css
View File

@@ -1,25 +1,42 @@
body{ body{
background-color: #cd977e; background: linear-gradient(to right, #d3705a, #cd977e);
} }
header{
background-color: #1f4952;
border-radius: 15px;
padding: 1rem;
}
.header-buttons {
display: flex;
justify-content: space-between;
align-items: center;
}
.left-buttons, .right-buttons {
display: flex;
gap: 10px;
}
ul { ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #d3705a; display: none; /* Hide old ul if still present */
display: flex;
justify-content: center;
border-radius: 15px;
} }
button{ button{
color: white; color: white;
font-size: large; font-size: large;
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif ; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif ;
background-color: #1f4952; background-color: #d3705a;
height: 100px; height: 75px;
width: 150px; width: 100px;
margin: 1rem;
border-radius: 5px; border-radius: 5px;
} }
button:hover{
background-color: #cd977e;
}