Lesson607 - Power Pages - A Complete Site - Snippet Main, Footer - Power Apps 1000 Videos

Description- This video covers Power Pages - A Complete Site - Snippet Main, Footer - 607/1000 Power Apps Videos

[@PowerAppsVideos-eb3pt]

Snippet Main

Responsive Web Page Layout

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
grid-template-areas:
"header header header"
"leftmenu main main"
"footer footer footer";
grid-template-columns: 1fr 3fr 3fr;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
.main img{
max-height: 200px;
}

.main {
grid-area: main;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
}
.main > div {
background: #f0f0f0;
padding: 20px;
text-align: center;
border: 1px solid #ccc;
}
.main div{
max-width: 300px;
}

@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"leftmenu"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto auto;
}
.main {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
header, .leftmenu, .main, footer {
padding: 5px;
}
.main > div {
padding: 10px;
}
}



Vegitables

Burger

Potato Fingures


Meal


Hot Meal


Fresh Vegitables


Snippet Footer

© 2024 NikhilCoprate. All Rights Reserved.

WebTemplate_CompleteSite


ToDoList

{% include 'snippet' snippet_name:'Header' %}
{% include 'snippet' snippet_name:'LeftMenu' %}
{% include 'snippet' snippet_name:'Main' %}
{% include 'snippet' snippet_name:'Footer' %}