Skip to content
OverviewSolutions
7
Comments
12
Lartzmanuel
@Lartzmanuel

All comments

  • Lartzmanuel•190
    @Lartzmanuel

    Site looks pretty great! Great job👍 In your github repo I found your .gitignore file. gitignore are not meant to be accessed by anyone who views your repository. This is because gitignore files usually contain sensitive data such as passwords. I don't know how you uploaded it in your repo but make sure it's not accessible to others so that sensitive data wouldn't be compromised! Hope this helps!

  • Lartzmanuel•190
    @Lartzmanuel

    Hi there, I just checked your site using mobile phone and everything wasn't in place. Try to make your design responsive to mobile screen by designing your app using mobile first approach Remove the box shadow as it was not in the original design Add some padding in your input to also create some spacing. Try to also play around the font sizes to get your design closer to the original design I hope this helps!👍

  • Lartzmanuel•190
    @Lartzmanuel

    You can use media queries like this:

    @media-query only screen and (min-width: 700px){
.image-container {
    content: url(/assets/images/etc);
    Object-fit: cover;
  }
}

    Note that I just used 700px as my break point for example sake. You can adjust the break point to your liking.

    I hope this helps👍

  • Lartzmanuel•190
    @Lartzmanuel

    Hey Man, Site looks pretty great in terms of layout. A few things need to be handled. When you hover over some of elements they don't change colors as required in the project. You also need to handle your button's background when hovered on. Your site is not mobile responsive. These issues when handled will make the site perfect! Keep up the good work man :)

    Marked as helpful
  • Lartzmanuel•190
    @Lartzmanuel

    Hey there, Checked out your site and it's pretty cool.. But a few things.. It'd be better to rather target all html elements and reset to allow proper layout control. Code below

    * { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    Aside that I think every other thing is fine. Hope this helps!

    Marked as helpful
  • Lartzmanuel•190
    @Lartzmanuel

    Hi there👋. You managed to get your design almost like the original design. That's great!..And what did you say? You this everything under an hour that's really crazy💪. Checked out your codes too and it was clean. Saw a few things in your code I've never known. You're really someone I'd like to learn from🤗🤗

    Great Job there!!

  • Lartzmanuel•190
    @Lartzmanuel

    Site looks great but some few alterations have to be made. On mobile screen your image has some padding. Which is not supposed to be so according to the original design. Also "Valid email required" which shows up after a user enters an invalid email should appear at the right top corner of the input box. Your success message screen which also appears after a successful validation is actually supposed to be for a desktop screen rather than a mobile screen. There's a success screen for mobile view too. Kindly check that out and make the design for that too. I hope this helps!

  • Lartzmanuel•190
    @Lartzmanuel

    Site looks really great man! Just checked it out and everything works fine. Great Job!!

    Marked as helpful
  • Lartzmanuel•190
    @Lartzmanuel

    Site looks cool. A few things you need to add

    body {
 display: flex;
 Justify-content: center;
 align-items: center;
 min-height: 100vh;
}

    This code will center you card both horizontally and vertically.

    Also try to adjust paddings of the texts so that it can look close to the original design

    Hope this helps👍

  • Lartzmanuel•190
    @Lartzmanuel

    To add custom fonts you can use the @font-face rule..

    @font-face {
  font-family: 'The font family ';
  src: url('path to the font');
}

    To learn more you can read from here

    Hope this helps👍

    Also try to make your site responsive for all screens

  • Lartzmanuel•190
    @Lartzmanuel
    body {
display:flex;
flex-direction: column;
Justify-content: center;
Align-items:center;
min-height: 100vh;
}

    When the flex direction is set to column it will bring the info beside your card to the bottom just as you would want. With the min-height you can choose to use 100dvh.

    Hope you find this useful👍

    Marked as helpful
  • Lartzmanuel•190
    @Lartzmanuel

    Media queries in CSS are used to apply different styles for different devices or screen sizes. They allow you to create responsive designs that adapt to various devices, such as desktops, tablets, and mobile phones. Here's a general structure for writing media queries:

    @media only screen and (max-width: 600px) {
  /* Styles for small screens */
}

/* Media query for medium screens (e.g., tablets) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  /* Styles for medium screens */
}

/* Media query for large screens (e.g., desktops) */
@media only screen and (min-width: 1025px) {
  /* Styles for large screens */
}

    If you use a mobile workflow first, note that the initial styles you write before any media query will be for mobile screens. You can read more about media queries here

    I hope I helped :)