Berufsschule/Webshop
Berufsschule/Webshop
Template
5
2
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

added example style and layout on page

Browse Source
This commit is contained in:
Fabian 2024-11-15 11:02:59 +01:00
parent acb4622f56
commit 9bc7bb9bb4
2 changed files with 53 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/example/index.html
View File

@ -13,12 +13,30 @@
<a href="#">Clients</a> <a href="#">Clients</a>
<a href="#">Contact</a> <a href="#">Contact</a>
</div> </div>
<div id="main"> <div id="main">
<button class="openbtn" onclick="openNav()">&#9776; Open Sidebar</button> <div class="content">
<h2>Collapsed Sidebar</h2> <div class="grid-container">
<p>Content...</p> <div class="header">
<p>header</p>
</div>
<div class="left">
<button class="openbtn" onclick="openNav()">&#9776;</button>
<h2>Collapsed Sidebar</h2>
</div>
<div class="main">
<p>main</p>
</div>
<div class="right">
<p>right</p>
</div>
<div class="footer">
<p>footer</p>
</div>
</div>
</div>
</div> </div>
<!-- scripts -->
<script src="example.js"></script> <script src="example.js"></script>
</body> </body>
</html> </html>

31
static/Styles/example.css
View File

@ -65,4 +65,35 @@
.sidebar a { .sidebar a {
font-size: 18px; font-size: 18px;
} }
}
/* grid layout for the content */
.grid-container {
display: grid;
grid-template-areas: 'left header header'
'left main right'
'footer footer footer';
grid-template-columns: [left] 80px [line2] calc(100% - 160px) [line3] 80px [right];
grid-template-rows: [top] 80px [line2] calc(100% - 160px) [line3] 80px [bottom];
}
.left {
grid-area: left;
}
.right {
grid-area: right;
}
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
} }