# Beautiful Design App

**URL:** <https://community.glideapps.com/t/beautiful-design-app/16191>\
**Category:** Project Showcase\
**Created:** [September 22, 2020, 12:23pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191 "2020-09-22T12:23:59Z")\
**Posts on this page:** 20\
**Page:** 15

<div class="post-metadata">

**Author:** ![Pedroydzito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedroydzito/32/85187_2.png) [@Pedroydzito](https://community.glideapps.com/u/Pedroydzito)\
**Post date:** [January 26, 2021, 5:39pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/286 "2021-01-26T17:39:03Z")

</div>

You’re welcome bro!

---

<div class="post-metadata">

**Author:** ![Francisco\_Maldonado](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/francisco_maldonado/32/18423_2.png) [@Francisco\_Maldonado](https://community.glideapps.com/u/Francisco_Maldonado)\
**Post date:** [January 26, 2021, 6:00pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/287 "2021-01-26T18:00:57Z")

</div>

Hello @Robert_Petitto. Will you have one that works for the title but in inline list view cards?

---

<div class="post-metadata">

**Author:** ![Pedroydzito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedroydzito/32/85187_2.png) [@Pedroydzito](https://community.glideapps.com/u/Pedroydzito)\
**Post date:** [January 26, 2021, 6:18pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/288 "2021-01-26T18:18:20Z")

</div>

I made cards like this for an instagram style feed …

 ![Captura de tela 2021-01-26 151745](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/9/1986253dc029e3498342ca1d4723436e2fb7e58d.png)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 26, 2021, 7:10pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/289 "2021-01-26T19:10:02Z")

</div>

> [@Pedroydzito](#):
>
> This progress bar has a text under an absolute image added by css code.

Care to share? 🙂

---

<div class="post-metadata">

**Author:** ![Pedroydzito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedroydzito/32/85187_2.png) [@Pedroydzito](https://community.glideapps.com/u/Pedroydzito)\
**Post date:** [January 26, 2021, 7:58pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/290 "2021-01-26T19:58:44Z")

</div>

```
<!--Card-->

<!--Description-->
<span><style>
[data-test=card-item-subtitle] {
position:absolute;
padding-left: 40px;
bottom: 7px;
</style></span>

<!--Title-->
<span><style>
[data-test=app-avatar-text] {
position:absolute;
padding-left: 32px;
bottom: 28px;
</style></span>

<!--Favorite Button-->
<span><style>
[data-test=app-toggle-icon-overlay] {
position:absolute;
padding: 14px;
bottom: 12px;
margin-left: -35px;
background:#1e232a;
filter: drop-shadow(rgba(0, 0, 0, 0) 0px 0px 0px)
</style></span>
```

---

<div class="post-metadata">

**Author:** ![Pedroydzito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedroydzito/32/85187_2.png) [@Pedroydzito](https://community.glideapps.com/u/Pedroydzito)\
**Post date:** [January 26, 2021, 8:13pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/291 "2021-01-26T20:13:31Z")

</div>

I still can’t limit the width of the text so that it doesn’t pass the favorite button, so for now I just changed the button’s background to the card color…

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [January 26, 2021, 8:28pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/292 "2021-01-26T20:28:17Z")

</div>

That’s great! I would only set background color to `transparent;` and change drop-shadow a bit slightly

I guess @Robert_Petitto meant the code of how you did those ones together

> [@Pedroydzito](#):
>
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/d/ed573879cd51f58ae333f5fb2ba13cf14958a204.png)
> 
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/c/7c3a326669b866aef998539900aa7da8db0ee864.png)
> 
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/3/a3382f350917be3c5e116db6bff187f609a5b11a.png)

---

<div class="post-metadata">

**Author:** ![Pedroydzito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedroydzito/32/85187_2.png) [@Pedroydzito](https://community.glideapps.com/u/Pedroydzito)\
**Post date:** [January 26, 2021, 8:29pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/293 "2021-01-26T20:29:13Z")

</div>

Ouh… KKKKKKKK

---

<div class="post-metadata">

**Author:** ![Pedroydzito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedroydzito/32/85187_2.png) [@Pedroydzito](https://community.glideapps.com/u/Pedroydzito)\
**Post date:** [January 26, 2021, 8:40pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/294 "2021-01-26T20:40:27Z")

</div>

```
<!--Image-->
<p style="position: Absolute;
width: 43px;
left: 50%;
margin-top: 0px;
margin-left: -140px;
transform: translate(-50%, 0%)">
<img src="https://i.imgur.com/FvPtAkr.png" /></p>

<!--Progress Bar-->
<pre><span><style>
.fckzPp {position: absolute;
background: #13161d;
height: 9px;
width: 261px;
left: 50%;
border-radius: 100px;
margin-right: -50%;
margin-left: 26px;
transform: translate(-50%, 0%)}
</pre></style></span>

```

And the text I created a template column, to be updated as the tasks are done.

```
<!--Text-->
<center><h5><font color="#efbc00">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FINISHED% Concluído<font color="#ffffff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; CONCLUDED/REMAINING Tarefas

```

Certainly there is a better way to make the spacing better, but it worked, except for the fact that the size is tiny when it is on its side, but I still have to fix it …

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [January 27, 2021, 11:16pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/295 "2021-01-27T23:16:57Z")

</div>

Has anybody ever been able to increase the number tiles or cards going across from 4 tiles to something like 7 tiles? I thought I saw it done once, but I can’t find anything in the forum.

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [January 27, 2021, 11:17pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/296 "2021-01-27T23:17:38Z")

</div>

Maybe @Robert_Petitto !

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [January 27, 2021, 11:22pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/297 "2021-01-27T23:22:48Z")

</div>

Hmm, looking closer, that might be hardcoded in the div tag layout. I’m not sure I can override that.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 27, 2021, 11:33pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/298 "2021-01-27T23:33:34Z")

</div>

Sure have!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/c/cc659817450225f1c39515179587be5f3ffdd0c6.jpeg)

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [January 27, 2021, 11:37pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/299 "2021-01-27T23:37:23Z")

</div>

Yes!!! Go over to Jeff’s magic calendar concept thread. We have taken it a bit further. With your help, we could make the calendar 7 wide.

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [January 27, 2021, 11:45pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/300 "2021-01-27T23:45:41Z")

</div>

Open the treasure bucket 😈

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [January 27, 2021, 11:49pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/301 "2021-01-27T23:49:05Z")

</div>

Is that a vertical or horizontal orientation on the list? Vertical with 7 wide and up to 6 rows would be preferred, but I could maybe make work with horizontal and multiple lists if need be.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 27, 2021, 11:53pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/302 "2021-01-27T23:53:44Z")

</div>

It’s horizontal, but i could probably finagle it to be a vertical list. Let me play with it a bit.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [January 27, 2021, 11:58pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/303 "2021-01-27T23:58:34Z")

</div>

In a vertical list, each row is a div tag with only the number of column under that tag, so I don’t think we can alter that much. I think I try to get something working with the horizontal layout.

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [January 28, 2021, 12:01am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/304 "2021-01-28T00:01:08Z")

</div>

treasure bucket 😅

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [January 28, 2021, 12:17am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/305 "2021-01-28T00:17:04Z")

</div>

Getting there.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/2/92fb3b8b7a161fa6e4564b88f91ddd7a587293f8.png)

[Previous page](https://community.glideapps.com/t/beautiful-design-app/16191.md?page=14)

[Next page](https://community.glideapps.com/t/beautiful-design-app/16191.md?page=16)