Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Gian Ramelb• 160

    @rame0033

    Submitted

    What are you most proud of, and what would you do differently next time?

    The use of pseudo-code ::before and ::after helped me to add content like accent designs and radio button for the choices in the message container.

    The snippet below will show how I did the styling for the mockup radio button

    .time:before {
  content: '';
  display: inline-block;
  height: 1rem;
  width: 1rem;
  border: 0.1rem solid var(--radio-btn);
  border-radius: 50%;
  margin-right: 0.5rem;
}

    What challenges did you encounter, and how did you overcome them?

    I was hesitant to do the phone app but I discovered to make a container that will have respective divs for every element and class to style each individual properly.

    Solution to Chat App Illustration

    1

    Raphael Bröderbauer• 720

    @DigitaleWeltLibrary

    Posted

    Hey, good soluten.

    I have two points for improvement:

    • Give the main element a height. Then you can't see the footer on the screen.
    • The violet banner on the left side is on the mobile version smaller. Then you can read the text easier.
    main{
      min-height: 100dvh;
}

    I hope i could help you to improve your skills. 😉

    Happy coding 😊

    Marked as helpful

    0
  • Levi Mwendwa• 30

    @levit3

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud that I was able to do this without any frameworks as I have been struggling a bit with plain css. I would like to use frameworks like bootstrap or tailwind css next time.

    What challenges did you encounter, and how did you overcome them?

    I could not center the qr code elements to the center of the page. I managed to center it horizontally using flexbox but failed to do so vertically.

    What specific areas of your project would you like help with?

    Centering of components on the page for it to also be responsive on mobile screens

    A qr-code page designed using plain css

    2

    Raphael Bröderbauer• 720

    @DigitaleWeltLibrary

    Posted

    Hey, good soluten but i have some points for improvment.

    • For centering the card vertically too, you have to set up a height.
    body {
  min-height: 100dvh;
}
    • Never use a fix width. If you want to make the card responsive then use the min function, it will always use the lower width. When the width of the screen is lower than 350px the card get a width of 90dvw. (Learn about the min function)
    #container {
    width: min(350px, 90dvw);
}
    • Making the image responsive too. Firstly i give it a width of 90%. Then i want every side of the image the same size and therefore i use aspect-ratio. Lastly i center the image with margin. (Don´t forget the display: block; for it)
    img#qr-code {
    /* position: relative; */
    /* margin: 17px; */
    aspect-ratio: 1 / 1;
    width: 90%;
    margin: 1rem auto;
    display: block;
}

    My solution of the challenge.

    I hope i could help you to improve your skills. 😉 Happy coding 😊

    0
  • Raphael Bröderbauer• 720

    @DigitaleWeltLibrary

    Posted

    Hey, good soluten but i have some points for improvment.

    • Firstly i want to center the card in the middle of the screen. Therefore i use grid . Then i have to to say that every element in the grid container should be centered verticaly and horicontaly. Normaly every adult container has the height of all the children. We want the full theefore we use height (you can use min-height) too. 100dvh is the full height of the screen without the searchbar.
    body{
    display: grid;
    place-items: center;
    height: 100dvh;
}
    • The card: The gridcentered the card in the middle of the screen, therefore we didn`t need the margin anymore. Never declare the height, because when the headline or the paragraf is longer the content overlaps.* Instead of using pxuse the min function. It means when the screen is widther than 350px the width is equale to 350px. When it´s no widther than 350px it´s 96dvw of the screen width. (The min function makes it easier to make websites responsive. 😉)
    .back{
    /* width: 300px; */
    /* height: 450px; */
    /* margin: auto; */
    padding: 10px;
    width: min(90dvw, 350px);
}
    • The img: As i said before never use px. The best choose is to use % as i used in the CSS. Then use aspect-ratio to make the width and the height the same. And again it´s responsive 😉.
    img {
    border-radius: 20px;
    /* width: 280px; */
    /* height: 280px; */
    aspect-ratio: 1 / 1;
    width: 90%;
}
    • You didn´t need the div with the img in it. This is how I would set it up
           <section>
            <img src="PATH" alt="TEXT" >
            <h1>TEXT</h1>
            <p>TEXT</p>
        </section>

    Maybe it helps you to see my solution of the challenge.😁

    I hope i could help you. Happy coding 😊

    Marked as helpful

    1
  • Raphael Bröderbauer• 720

    @DigitaleWeltLibrary

    Posted

    Hey good solution.

    Small suggestions for improvement:

    • Remove this from your CSS to make both card parts the same size
    • this is how you add the shadow
    // ------------------------------------- remove ------------------------
@media screen and (min-width: 768px){
     .card__puntuation {
        // height: 90%;
       }

       .card__summary {
         // height: 90%;
         // padding: 60px 20px 60px 0px;
// -------------------------------------------------------------

       // the shadow
         box-shadow: 0.5rem 0.5rem rgb(0 0 0 / 10%);
         border-radius: 2rem;
        // end shadow
       }
}
// ------------------------------------- remove ------------------------
.card__puntuation {
   //  height: 50%;
}
// -------------------------------------------------------------

    Happy Coding 😉

    Marked as helpful

    0
  • Raphael Bröderbauer• 720

    @DigitaleWeltLibrary

    Posted

    Small improvements:

    HTML:

    <img src="images/image-qr-code.png" alt="myIMG"/>

    CSS:

    .container{
    width: min(300px,90dvw);
}

img{
    width: 100%;
}

    Happy coding 😉

    0
  • Raphael Bröderbauer• 720

    @DigitaleWeltLibrary

    Posted

    Hey, good soulution.

    If you use min you can pass multiple values and the smaller one is always taken. The unit dvw is dynamic and indicates the width of the browser. So it's 90dvw from the screen. If this is larger than 310px, the px will be taken. Alternatively, you could give the card a margin on the mobile version.

    .main-card {
    width: min(310px,90dvw);
}

    Happy Coding 😉

    Marked as helpful

    0
  • Raphael Bröderbauer• 720

    @DigitaleWeltLibrary

    Posted

    Hey, good solution.

    You don't need media queries instead use width: min(90dvw, 350px); and keep your CSS shorter.

    .card{
     width: min(90dvw,350px);
}

    Happy Coding 😉

    Marked as helpful

    0
  • Raphael Bröderbauer• 720

    @DigitaleWeltLibrary

    Posted

    Hey good solution.

    Small suggestions for improvement:

    • the min function always uses the smaller value and this gives you a distance when viewing the mobile phone
    • with object-fit you can prevent your images from distorting

    The improved CSS:

    .card-nft{
    width: min(375px, 90dvw);
}

img{
    object-fit: cover;
}


/* possible solution for the turquoise background: */
.card-nft-header {
    position: relative;
    transition: .75s all;
}

.card-nft-header::before {
    width: 100%;
    background: var(--primary-cyan);
    top: 1px;
    height: 100%;
    position: absolute;
    border-radius: 1rem;
    content: "";
    opacity: 0;
}

.card-nft-header:hover::before {
    opacity: 1;
    transition: .75s all;
}

    Happy Coding 😉

    Marked as helpful

    0
  • Raphael Bröderbauer• 720

    @DigitaleWeltLibrary

    Posted

    Hey, you forgot to upload the image to github.

    Happy coding 😉

    0
  • Raphael Bröderbauer• 720

    @DigitaleWeltLibrary

    Posted

    Hey, good solution.

    Some improvements:

    • give the body tag a height of 100dvh (is the whole screen height)
    • give the img tag a width of 100% to cover the entire width
    • your last p tag is no longer on the card (.barcode-container). Either you remove the height or you give it the value min-content

    The improved CSS:

    body{
   height: 100dvh;
}

img{
    width: 100%;
}

.barcode-container{
   height: min-content;

   /* use this to have a border in the phone view */
   width: min(300px, 90dvw - 40px);
   /* or */
   box-sizing: border-box;
}

    Happy Coding 😉

    Marked as helpful

    0
  • Raphael Bröderbauer• 720

    @DigitaleWeltLibrary

    Posted

    Hey, good solution.

    Small improvement:

    • Give the time specification a smaller width to avoid overflow
    • With transition you can give the hovered elements an effect

    improved CSS:

    .container{
    display: grid;
    place-items: center;
    min-height: 100dvh;
}

.card-time{
    width: max-content;
}

h3, .card-creation div > span{
   transition: all .75s;
}

    You forgot the hover effect on the image. A little tip: use background-image for it

    Happy coding 😉

    Marked as helpful

    0
  • Raphael Bröderbauer• 720

    @DigitaleWeltLibrary

    Posted

    Hey, good solution.

    With transition you can give your elements an effect:

    .overlay, h1, .creator-name {
    transition: .75s all;
}

    Happy coding 😉

    Marked as helpful

    0