All comments

Sergio Barria•165
@sergiobarriaSubmitted over 3 years ago
Hi everyone!

This is the first challenge I submit on this platform. I really like this concept, because it helps sharpen our skills using real live projects (or close to that). I decided to use simple HTML, CSS and JavaScript because this project didn't require too much functionality, therefore I felt that using something like react would be overkill. What I liked about this project is that it seemed simple on the surface but you needed to put some effort on the positioning of items. The one thing I couldn't solve was to put a gradient border color on the navbar links (the one that is active).

I would gladly receive some feedback from you (and if you know how to add the border with gradient, please let me know).
HTML, CSS (Flexbox & CSS Grid), JavaScript
4
Wisdom Ojimah•170
@detachedsoulPosted over 3 years ago
Check this out:

https://stackoverflow.com/questions/2717127/gradient-borders
1
Sergio Barria•165
@sergiobarriaSubmitted over 3 years ago
Hi everyone!

This is the first challenge I submit on this platform. I really like this concept, because it helps sharpen our skills using real live projects (or close to that). I decided to use simple HTML, CSS and JavaScript because this project didn't require too much functionality, therefore I felt that using something like react would be overkill. What I liked about this project is that it seemed simple on the surface but you needed to put some effort on the positioning of items. The one thing I couldn't solve was to put a gradient border color on the navbar links (the one that is active).

I would gladly receive some feedback from you (and if you know how to add the border with gradient, please let me know).
HTML, CSS (Flexbox & CSS Grid), JavaScript
4
Wisdom Ojimah•170
@detachedsoulPosted over 3 years ago
For now you can't give your borders a gradient color.

One thing you can do is to make the element you want to give the gradient color a position of relative, and then use the ::before or ::after pseudo class to get your specified color.

For example, let say you have this html structure:

<li> <a href="">some text</a> </li>

your css would then be something like:

li { position: relative; } li::after { content: ''; position: absolute; bottom: your value; width: your width; background: your gradient; }

You can give it a try and let me know if it works.
1
Millz•530
@BrezusSubmitted over 3 years ago
Hey guys how do i change the color of an svg i tried to do it but i could not get the desired color and I'm sure there are other things that need to be addressed as always any feedback is greatly appreciated
Regular HTML & CSS, Flexbox $ Grid
2
Wisdom Ojimah•170
@detachedsoulPosted over 3 years ago
I would also suggest you remove the outline of your input when focused.
0
Millz•530
@BrezusSubmitted over 3 years ago
Hey guys how do i change the color of an svg i tried to do it but i could not get the desired color and I'm sure there are other things that need to be addressed as always any feedback is greatly appreciated
Regular HTML & CSS, Flexbox $ Grid
2
Wisdom Ojimah•170
@detachedsoulPosted over 3 years ago
To change the color of an svg, you can give the svg a class, id, or even use the svg tag and do something like:

svg { fill: your color; }

or if you decide to use a class:

.your-class{ fill: your color; }

Please note that the class should be one the svg itself. Also your svg shouldn't be used in an img tag for this to work. You can just copy the full svg code. For example , instead of doing:

<img src="svg-file.svg">

you would do something like:

<svg width="60" height="64" viewBox="0 0 60 64" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M29.8043 0C13.3702 0 0 12.5701 0 28.0207C0 29.733 0 42.9785 0 43.2142C0 " fill="#2C99B0"/> </svg>

In your case the code would be the svg's code. Just use a code editor to get the code of the svg you are trying to use and give the svg a class. Hope it helps!
0
Mojtaba Mosavi•3,760
@MojtabaMosaviSubmitted over 3 years ago
This one toke a bit more time than I expected but this happens always. I would really appreciate it if you share your toughts about any of the following qestion.
1. I dicided to exclude the hero section from the main, is doing so in any inappropriate or bad practice ?
2. Should all the typografi for components be written in the same file as for the rest of the page ?
3. In the testimonials section, the first testimonial has quoate icon on top of it the needs to be partially underneth the testimonial, I tried with z-index but for some mystrious reason it didn't work, how can it be fixed ?
4. What tool do you use for measuring font-size in you projects ?
5. You guys who always get the measurment aspect of the design right, I would appreciate if you share some of your tips/tricks.
Happy coding :)
fylo-dark-theme-landing-page-master
2
Wisdom Ojimah•170
@detachedsoulPosted over 3 years ago
What I would have done is instead of making the quotes a background image, you put it in the first testimony card and make that card positioned relatively. Then you can make the quote absolute and manipulate it as you like.

Something like:

<div //this would be position: relative > <img src="your quotes> // testimonial content </div>

You can now use z-index the quotes and move it around.
1

@AksharmeetSubmitted over 3 years ago

I always have trouble with background images. This time I couldn't position background images bottom and top to where I wanted them to be, I think the solution to this problem would be an obvious one but for me that wasn't the case. I would be glad to get some help on the same.

Static Template

Wisdom Ojimah•170

@detachedsoulPosted over 3 years ago

You could use css gird for the layout.

You can change

<div id="heading-div">
      <h1 id="top-heading" class="dark-violet">
         10,000+ of our <br>users love our <br>products.
      </h1> 

      <p id="para-1">
        We only provide great products combined with excellent customer service.
        See what our satisfied customers are saying about our services.
      </p>
   </div>

    <div id="right-rating">
     <div class="light-pink" id="top-pink">
        <div class="star">
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
        </div>

        <div class="rating dark-violet" >
           Rated 5 Stars in Reviews
        </div>
     </div>

     <div class="light-pink" id="middle-pink">
        <div class="star">
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
        </div>

        <div  class="rating dark-violet">
          Rated 5 Stars in Report Guru
        </div>
     </div>

     <div class="light-pink" id="last-pink">
        <div class="star">
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
        </div>
        
        <div  class="rating dark-violet">
          Rated 5 Stars in BestTech
       </div>
     </div>
</div>


to:

<div class="grid"> <div> <div id="heading-div"> <h1 id="top-heading" class="dark-violet"> 10,000+ of our <br>users love our <br>products. </h1>

  <p id="para-1">
    We only provide great products combined with excellent customer service.
    See what our satisfied customers are saying about our services.
  </p>

</div> <div> <div> <div id="right-rating"> <div class="light-pink" id="top-pink"> <div class="star"> <img src="icon-star.svg" alt="5 Stars as icons" > <img src="icon-star.svg" alt="5 Stars as icons" > <img src="icon-star.svg" alt="5 Stars as icons" > <img src="icon-star.svg" alt="5 Stars as icons" > <img src="icon-star.svg" alt="5 Stars as icons" > </div>

    <div class="rating dark-violet" >
       Rated 5 Stars in Reviews
    </div>
 </div>

 <div class="light-pink" id="middle-pink">
    <div class="star">
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
    </div>

    <div  class="rating dark-violet">
      Rated 5 Stars in Report Guru
    </div>
 </div>

 <div class="light-pink" id="last-pink">
    <div class="star">
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
    </div>
    
               <div  class="rating dark-violet">
             Rated 5 Stars in BestTech
          </div>
       </div>
    </div>
</div>

</div>```

Your css can then be something like:

.grid {
    display: grid;
   grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
}


That would be for the first two columns.

manuel fuentes•20
@KoalaCodesSubmitted over 3 years ago
why does my grid have two gaps in the bottom?
Testimonial
1
Wisdom Ojimah•170
@detachedsoulPosted over 3 years ago
You've changed the flow of the elements. The last grid now has to start from the top and all the way down.

I solved that by giving each individual div a display of grid.

Let's say you have this format:

<div class="your main grid"> <div style="dispaly: grid;"> // Your content </div> <div style="dispaly: grid;"> // Your content </div> <div style="dispaly: grid;"> // Your content </div> </div>
1
Chamu•13,130
@ChamuMutezvaSubmitted over 3 years ago
Another exciting challenge which i took time to practice React and sass. On the Sass side my particular focus was to use sass modules namely @use and @forward. Trying also to unlearn some habits - that is using rems for margin and padding from my traditional px.

Your feedback is always welcome.
Payapi - React and sass modules
1
Wisdom Ojimah•170
@detachedsoulPosted over 3 years ago
You should probably remove the border and outline from your inputs and buttons or use something nicer.
0
Tayanne Silva Novais•20
@tayhsnSubmitted over 3 years ago
I wanna know how to improve the subscribe box that are between two divs. I had a little bit trouble with that.
Landing page responsive @ Fylo Dark
2
Wisdom Ojimah•170
@detachedsoulPosted over 3 years ago
You could remove the border from your input and the button, and then use the :focus pseudo class to add the border.

Give the testimonial and subscribe box some left and right padding.

What I would also suggest for the subscribe box is to put it in the footer, make the footer relative so that you can move the subscribe box within the footer. That way other elements outside the footer won't interfere with the box.
0
Naman Kandol•250
@namankandolSubmitted over 3 years ago
I was facing problems to center the grid the grid in desktop version of the website. Can you please tell me how to center a grid?
Testimonial Grid Section
2
Wisdom Ojimah•170
@detachedsoulPosted over 3 years ago
To center a grid, you can just do

place-items: center;

I would also suggest you giving the body a little padding at the bottom.
0

Wisdom Ojimah

All comments

HTML, CSS (Flexbox & CSS Grid), JavaScript

HTML, CSS (Flexbox & CSS Grid), JavaScript

Regular HTML & CSS, Flexbox $ Grid

Regular HTML & CSS, Flexbox $ Grid

fylo-dark-theme-landing-page-master

Static Template

Testimonial

Payapi - React and sass modules

Landing page responsive @ Fylo Dark

Testimonial Grid Section