Beautiful Design App

Hard to compete with @Lucas_Pires and @PlanetZero, but I’m really proud of what we delivered for Medtronic. Really clean.

6 Likes

CSS Magic on a profile page:

12 Likes

Thanks to @Lucas_Pires:

animated 7

15 Likes

How do you do the circle profile pic?

1 Like

:star_struck: :star_struck: :star_struck:

3 Likes

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:

.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:

<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

<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:

23 Likes

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

2 Likes

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

11 Likes

:heart_eyes: 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?

2 Likes

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

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

2 Likes

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?

Thanks for sharing! That is awesome!!!

1 Like

Hey @Deena,

Would you share how you accomplish this?

It is gorgeous!!!

Sure, the Gif or the profile layout?

Both if you don’t mind.

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

  2. Template in Mojo app

  3. Converted video to GIF in Gif Maker

12 Likes

Thanks!

1 Like

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

@Deena @Lucas_Pires

2 Likes

Put your CSS code here to check it @SantiagoPerez

1 Like

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.

2 Likes