# 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:** 3

<div class="post-metadata">

**Author:** ![Deena](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/deena/32/9877_2.png) [@Deena](https://community.glideapps.com/u/Deena)\
**Post date:** [September 25, 2020, 2:29am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/41 "2020-09-25T02:29:40Z")

</div>

Thanks to @Lucas_Pires:

![animated 7](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/c/cad5304850af818806d172fd6a364dae403a650c.gif)

---

<div class="post-metadata">

**Author:** ![\_eric](https://avatars.discourse-cdn.com/v4/letter/_/5f9b8f/32.png) [@\_eric](https://community.glideapps.com/u/_eric)\
**Post date:** [September 25, 2020, 2:44am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/42 "2020-09-25T02:44:24Z")

</div>

How do you do the circle profile pic?

---

<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:** [September 25, 2020, 2:47am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/43 "2020-09-25T02:47:59Z")

</div>

🤩 🤩 🤩

---

<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:** [September 25, 2020, 3:09am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/44 "2020-09-25T03:09:21Z")

</div>

Several ways. Depends what else is on the screen. You can use an image component and then style it. I’m using a round tile component, setting it to 2 tiles per row and then creating a Rich text box with this CSS:

```auto
.fdeRBK {
    grid-template-columns: repeat(1, 1fr);
    width: 200px;
    margin: auto;
}

```

If you want the colored background, I placed the rich text box with the CSS at the very top and included this CSS:

```auto
<pre>
<span><style>
[data-test=app-markdown-view] {
background-image: url("https://www.colorbook.io/imagecreator.php?hex=ff5723&width=1054&height=548");
position: absolute;
height:100px;
width: 100%;
}

```

So the entire code in the Rich text box is

```auto
<pre>
<span><style>
.fdeRBK {
    grid-template-columns: repeat(1, 1fr);
    width: 200px;
    margin: auto;
}
[data-test=app-markdown-view] {
background-image: url("https://www.colorbook.io/imagecreator.php?hex=ff5723&width=1054&height=548");
position: absolute;
height:100px;
width: 100%;
}

```

Note, you can change the background image to whatever you want. The one I included, you can change the hexcode to match your theme!

Variations:

 ![Screen Shot 2020-09-24 at 10.49.44 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/3/3022d95615ecd870a266cf6bc16912fe9ff94e1d.png)

 ![2020-09-24 23.08.37](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/7/75e77f03ae9dfa94382157c549e302b834fe6698.gif)

---

<div class="post-metadata">

**Author:** ![\_eric](https://avatars.discourse-cdn.com/v4/letter/_/5f9b8f/32.png) [@\_eric](https://community.glideapps.com/u/_eric)\
**Post date:** [September 25, 2020, 3:12am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/45 "2020-09-25T03:12:57Z")

</div>

This is incredible! Thanks so much for sharing this info.

---

<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:** [September 25, 2020, 4:45am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/46 "2020-09-25T04:45:48Z")

</div>

Oh, wow! Never seen that lol

@_eric I use CSS and Template column

```
<center><div style="background-image: url(AVATAR); 
-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
border: 1px solid white; 
width:200px; 
height:200px; 
background-repeat: 
no-repeat, center; 
back ground-attachment:scroll; 
background-size: cover; 
background-position: center center;"></div>
<h2>NAME</h2>
TITLE

```

Replace in template column each one (Avatar, Name, Title)

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/a/afc6ae5210c80113e90e9db239c95be43ebdae3e.png)

---

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [September 25, 2020, 5:47am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/47 "2020-09-25T05:47:41Z")

</div>

😍 How do you get the white text box to overlay on the image like that? The one right below the social icons, and can it work for the title and details of an inline list?

---

<div class="post-metadata">

**Author:** ![Trustin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trustin/32/88217_2.png) [@Trustin](https://community.glideapps.com/u/Trustin)\
**Post date:** [September 25, 2020, 8:25am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/48 "2020-09-25T08:25:38Z")

</div>

Hi! I am new to the community!  
As a coffee home brewer, i love to trying out new beans but find it difficult to track and keep the bags  
I spend a month creating an app to help me to just that. Keep track of my brew.

[Brew Better App](https://brewbetter.glideapp.io/)

Feedbacks are welcome!  
Learning so much from all of your sharing! Keep it coming!

---

<div class="post-metadata">

**Author:** ![ilimp](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ilimp/32/12111_2.png) [@ilimp](https://community.glideapps.com/u/ilimp)\
**Post date:** [September 25, 2020, 8:50am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/49 "2020-09-25T08:50:56Z")

</div>

Great! But one question. If I have two lists on same page. They are both become using this style (1 column centered). How to make only one list using this style?

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [September 25, 2020, 9:19am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/50 "2020-09-25T09:19:34Z")

</div>

Thanks for sharing! That is awesome!!!

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [September 25, 2020, 9:20am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/51 "2020-09-25T09:20:52Z")

</div>

Hey @Deena,

Would you share how you accomplish this?

It is gorgeous!!!

---

<div class="post-metadata">

**Author:** ![Deena](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/deena/32/9877_2.png) [@Deena](https://community.glideapps.com/u/Deena)\
**Post date:** [September 25, 2020, 2:27pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/52 "2020-09-25T14:27:32Z")

</div>

Sure, the Gif or the profile layout?

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [September 25, 2020, 2:30pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/53 "2020-09-25T14:30:18Z")

</div>

Both if you don’t mind.

---

<div class="post-metadata">

**Author:** ![Deena](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/deena/32/9877_2.png) [@Deena](https://community.glideapps.com/u/Deena)\
**Post date:** [September 25, 2020, 2:34pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/54 "2020-09-25T14:34:59Z")

</div>

1. @Lucas_Pires sent me the code. It won’t let me copy paste here, so you can grab it from this file:

> **[Profile Layout Code](https://docs.google.com/document/d/1F0iwtlecciW8hlk84nA5hLDXroxhhPTvSZkKDDZIn8o/edit?usp=sharing)**
>
> \<img src="COVER" width="100%" style="object-fit: cover; opacity:0.9;border-top-left-radius:20px;border-top-right-radius:20px;margin-bottom:30px;"\> \<p\>\<div style=" background-image: url(AVATAR); -moz-border-radius: 50%; ...

1. Screen recording on iPhone

2. Template in Mojo app  

3. Converted video to GIF in Gif Maker

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [September 25, 2020, 2:40pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/55 "2020-09-25T14:40:29Z")

</div>

Thanks!

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [September 25, 2020, 3:04pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/56 "2020-09-25T15:04:41Z")

</div>

These are great. Only thing I can’t display the picture.any ideas on what I’m doing wrong?

@Deena @Lucas_Pires

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/1/12dd4fccbc6c7376d47d741af9159e8a109205c2.jpeg)

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [September 25, 2020, 3:06pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/57 "2020-09-25T15:06:48Z")

</div>

Put your CSS code here to check it @SantiagoPerez

---

<div class="post-metadata">

**Author:** ![Deena](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/deena/32/9877_2.png) [@Deena](https://community.glideapps.com/u/Deena)\
**Post date:** [September 25, 2020, 3:06pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/58 "2020-09-25T15:06:51Z")

</div>

You have to go into the code and insert the URL for the picture you want to use. Did you try that? I’m like the blind leading the blind lol.

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [September 25, 2020, 3:08pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/59 "2020-09-25T15:08:19Z")

</div>

Yes! @Deena

Here it is @gvalero

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/8/805d3d05d546861936a87b4a487c05f4b8edca71.jpeg) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/5/5c01757908207a445e9a1b04807a5df828ad4457.jpeg)

---

<div class="post-metadata">

**Author:** ![Deena](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/deena/32/9877_2.png) [@Deena](https://community.glideapps.com/u/Deena)\
**Post date:** [September 25, 2020, 3:11pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/60 "2020-09-25T15:11:11Z")

</div>

![Screen Shot 2020-09-25 at 11.10.32 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/1/1b40be12a8468c9c8ff7855069df08bbb1fbf09d.png)

 ![Screen Shot 2020-09-25 at 11.12.29 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/9/9b2e6c4c632c625fec7656f75c8744b3f38088fb.jpeg)

 ![Screen Shot 2020-09-25 at 11.12.19 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/d/d0476470bc934543fc8953699de4cdc3949ce257.jpeg)

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

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