Skip to content
OverviewSolutions
13
Comments
8

Elevate

@i7ector220 points

Writing code one line at a time

Latest solutions

View more solutions

Latest comments

  • Elevate•220
    @i7ector

    @filecc good job on completing the challenge!

    Some things to consider to improve your solution for the desktop view:

    • increase the font size for the heading and sub heading
    • add some margin to the left and right on the first and fourth box
    • decrease the overall size of the boxes

    Hope this helps good luck and happy coding :)

    Marked as helpful
  • Elevate•220
    @i7ector

    Good work @SachithKarunathilake!

    regarding your question above, the way you did works as there is many ways to achieve the same result when it comes to coding.

    things to consider...

    display: none;

    • removes the element from the page view
    • code for the hidden element is still present
    • element itself will not be displayed
    • will not take up any space
    .example-element {
  display: none;
}

    visibility: hidden;

    • removes the element from the page view
    • element will still take up space on the page
    .example-element {
  visibility: hidden;
}

    hope this helps! good luck and happy coding :)

    Marked as helpful
  • Elevate•220
    @i7ector

    Great work @Atharva-0710!

    from looking at your design and code I can see that it's not responsive, so if you would like to improve on the work you have done then you can make it responsive using CSS media queries.

    you can checkout the link below to have a better understanding of it if you like.

    Media Queries / Responsive Design Examples

    also regarding the accessibility errors you can change the h3 to h2 and the font size and other properties in your css.

    hope you find this useful! good luck & happy coding :)

  • Elevate•220
    @i7ector

    Good work @putracode354!

    here are few things you can do to make your design and code better.

    to fix the error with the divs you need to remove the href="#" from your code in your HTML. look at the examples below:

    <div href="#" class="example example1">
  example 1 - hrefs are not used in divs
</div> 
<div class="example example2">
 example 2 - how it should be
</div> 
<div id="exampleid" class="example example3">
 example 3 - you can have a id and a class in the div
</div>

    you can add a border radius to round the corners of the main card in your CSS. look at the example below:

    .main-card-example {
   border-radius: 15px;
}

    you can also add a background color for this project in your CSS. look at example below:

    body {
  background-color: hsl(0, 0%, 95%);
}

    hope this helps, good luck and happy coding :)

  • Elevate•220
    @i7ector

    Good try @MayckL2!

    here's something that will make your forms look much better.

    HTML example:

    <div class="insert-name">
<label>Name</label>
  <input type="text" placeholder="e.g Stephen King" required />
<label>Email Address</label>
  <input type="text" placeholder="e.g stephanking@lorem.com" required />
<label>Phone Number</label>
  <input type="text" placeholder="e.g +1 234567890" required />
</div>

    by adding the placeholder in the input tag you'll be able to display any text and when an user goes to type they don't need to get rid of the old text before being able to input info.

    then you can go into your css style file and target the placeholder and customise it to your liking.

    CSS Styles example:

    .insert-name input::placeholder {
  font-weight: bold;
  color: #000000;
  opacity: 0.5;
}

    so you select the div and then you select the input tag in that div and then :placeholder in the above example you'll be able to style the placeholder, for example you'll be able to change the text color, font-size, weight and the main thing is the opacity which you can do 0.5 and or 50% to achieve the look and functionality in the design you built above.

    hope this helps! good luck and happy coding :)

    Marked as helpful
  • Elevate•220
    @i7ector

    Also, regarding the circle not working properly here are a few ways to fix the issue:

    you can try from some of the examples below:

    code that's required in html

    div class="insert-name"></div>

    or

    <span class="insert-name"></span>

    then in your css styles file use the following properties:

    .insert-name {
  width: 150px;
  height: 150px;
  background: linear-gradient(180deg, hsla(256, 72%, 46%, 1), hsla(241, 72%, 46%, 0));
  border-radius: 50%;
  display: inline-block;

    you can adjust some of the properties to your needs of course like the width, height and colors etc...

    let me know if this helped good luck and have fun :)

    Marked as helpful
View more comments