Model Examples
No edit summary |
No edit summary |
||
| Line 37: | Line 37: | ||
</div> | </div> | ||
</div> | </div> | ||
<style> | |||
body, html { | |||
margin: 0; | |||
padding: 0; | |||
font-family: 'Outfit', sans-serif; | |||
} | |||
.container { | |||
display: flex; | |||
} | |||
.sidebar { | |||
flex: 0 0 200px; /* Adjust the width as needed */ | |||
padding: 20px; | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.menu-item { | |||
color: #0060A8; | |||
font-size: 16px; | |||
font-weight: 500; | |||
margin-bottom: 10px; /* Space between menu items */ | |||
word-wrap: break-word; | |||
} | |||
.card-container { | |||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
grid-gap: 32px; | |||
padding: 0; | |||
margin: 0 auto; | |||
max-width: 960px; | |||
} | |||
.cards { | |||
width: 296px; | |||
background: white; | |||
border-radius: 6px; | |||
border: 1px solid #E3E8EE; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
margin-bottom: 32px; /* Space between card rows */ | |||
} | |||
.card img { | |||
width: 100%; | |||
border-top-left-radius: 6px; | |||
border-top-right-radius: 6px; | |||
} | |||
.contentss { | |||
padding: 24px; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: flex-start; | |||
} | |||
.title { | |||
color: #112B3C; | |||
font-size: 20px; | |||
font-weight: 700; | |||
margin-bottom: 10px; /* Adjust as needed */ | |||
} | |||
.description { | |||
font-size: 14px; | |||
font-weight: 300; | |||
color: black; | |||
} | |||
.download-link { | |||
display: flex; | |||
align-items: center; | |||
gap: 6px; | |||
color: #F67A07; | |||
font-size: 14px; | |||
font-weight: 600; | |||
} | |||
.download-indicator { | |||
width: 12px; | |||
height: 12px; | |||
background: #F67A07; | |||
transform: rotate(-90deg); | |||
border: 2px solid #F67A07; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<div class="container"> | |||
<div class="sidebar"> | |||
<!-- Menu items --> | |||
<div class="menu-item">Complete models</div> | |||
<div class="menu-item">Another model</div> | |||
<div class="menu-item">Final model</div> | |||
</div> | |||
<div class="card-container"> | |||
<!-- Card 1 --> | |||
<div class="cards"> | |||
<img src="https://via.placeholder.com/301x175" alt="Placeholder"> | |||
<div class="contentss"> | |||
<div class="title">Base App</div> | |||
<div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div> | |||
<div class="download-link"> | |||
<div class="download-indicator"></div> | |||
<div>Download .zip</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- Card 2 --> | |||
<!-- Repeat the structure for other cards as needed --> | |||
<!-- ... --> | |||
<div class="cards"> | |||
<img src="https://via.placeholder.com/301x175" alt="Placeholder"> | |||
<div class="contentss"> | |||
<div class="title">Base App</div> | |||
<div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div> | |||
<div class="download-link"> | |||
<div class="download-indicator"></div> | |||
<div>Download .zip</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="cards"> | |||
<img src="https://via.placeholder.com/301x175" alt="Placeholder"> | |||
<div class="contentss"> | |||
<div class="title">Base App</div> | |||
<div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div> | |||
<div class="download-link"> | |||
<div class="download-indicator"></div> | |||
<div>Download .zip</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="cards"> | |||
<img src="https://via.placeholder.com/301x175" alt="Placeholder"> | |||
<div class="contentss"> | |||
<div class="title">Base App</div> | |||
<div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div> | |||
<div class="download-link"> | |||
<div class="download-indicator"></div> | |||
<div>Download .zip</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="cards"> | |||
<img src="https://via.placeholder.com/301x175" alt="Placeholder"> | |||
<div class="contentss"> | |||
<div class="title">Base App</div> | |||
<div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div> | |||
<div class="download-link"> | |||
<div class="download-indicator"></div> | |||
<div>Download .zip</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="cards"> | |||
<img src="https://via.placeholder.com/301x175" alt="Placeholder"> | |||
<div class="contentss"> | |||
<div class="title">Base App</div> | |||
<div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div> | |||
<div class="download-link"> | |||
<div class="download-indicator"></div> | |||
<div>Download .zip</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</html> | </html> | ||
Revision as of 18:21, 7 November 2023
Model Samples
MODEL SAMPLES
Get started with MDriven sample models.
Explore our models and choose what you want to build..
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip