Fiber Landing Page 

IndieBrew Landing Page

Javascript30 Navbar

This is perfect! My only comment is that in tablet size the image in the 'Diversify your portfolio' section isn't fixed to the bottom and is instead in a square that is vertically and horizontally centered. Other than that, great job! 

How long did this take you?

Thank you for the feedback. I fixed that issue with the align-self property of flexbox.
It took 3-4 hours to complete the project.

Very well done for only 3-4 hours of coding! 

This is awesome, love the little animation you've added in the hamburger menu on mobile as well!

Click the 'Sign Up' button to see the register design. 

This is so awesome, I love how you've implemented the scrollable testimonials section, VERY clean, good job!

Coding isn't my expertise so i'll leave that to someone else, you've done a great job at making it responsive.

My comments are all spacing and font-related. You'll find that the sign up button, for example, has a different font-size than the rest of the navbar elements. There's a lot white space in all sections, I recommend you use a container with a width of 1140px. The shadows on the testimonials section are also harsh. 

Other than that, I think you've done a really great job, keep it up!



You've nailed this one IMO, great job. TimeNow is a free template and has a landing page and a pricing page, you might like it, check it out!

Well done! The 'Start Free Trial' is broken for me, i'm using Safari if that helps.

Glad you're taking the initiative to focus more on accessibility! This looks really good, my only comment would be to have the sign up page take up the entire page instead of being centered. Great job otherwise!!

Love it! Looks really clean on all sizes, you've done a wonderful job :)

Your Implementation was spot on, great work!

The animations were a silver lining to the great layout

I like the scale effect you added to some buttons, I would've never thought of using that, really cool man.
also the scrollbar it's really cool

Hello! You've done great. Here are my feedbacks
-  I noticed you made use of padding with percentage as the unit on each section, this isn't a very good idea cause on a very large screen it could break the layout and make it look messy.

I'll advice you have a container class like this:

```
.container {

}
```

I'm sorry for sending the message without completing it...

.container {
   width: 90%;
   max-width: 1200px;
   margin: 0 auto;
}

Then you can use that class around each section of your page, allowing the sections to have the same max-width;

Also using the unit percentage isn't really the most efficient way, cause it's relative to its parent.  I advise you to learn about units like rem and em.



Hello! You've done great, I have some suggestions that you could work on 

So I noticed you made use of these properties on each section, I'm guessing you're making use of the padding for mobile devices view, which is totally cool but here another approach.

// yours
header, main, footer {
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 30px;
}

// another approach
.container {
   width: 90%;
   max-width: 1000px;
  margin: 0 auto;
}

the width of 90% does give mobile devices some space, which fixes the padding. But your implementation is all good though.

Also I notice this:

<div class="header-wrap">

</div>

Also I noticed this:

<div class="header-wrap">
  <header> .... </header>
</div>

Semantically there's no need for the div element, you could use the header, main, footer elements directly.

Lastly, the solution lacks white space, majority of the elements are too close to each other. 

That's all, I hope it was helpful even though you didn't ask :)

Hello! Thank you so much for your feedback! I'll note and implement it for my next project! ^^

Hi There, I just checked your solution you have attempted it very well. Keep doing the good work. Hope you build more 🔥💜

How did you figure out the colors and the gradient? Great work btw!

Thanks bro, I took colors from figma file, gradient form previous solutions 🥺, or make it on special service(i dont remeber exactly)

You changed the width of body that resulted in inresponsiveness of your website. Use padding in body for gap

Hi SauravHeavyCoder
Thank you for the feedback provided. much appreciated
I will try it in the future and if i understand you correctly i should rather use a 10% padding on the left and right and not a fixed width of 80% with a margin of 0 and auto.


Hover animation on navbar links is so cool. How you do it?

Nice bro. Just update your live website link.

nice site. but when you reduce the page size with ctrl - the site contents fly around

You didn't set up GitHub Pages to see the website live.

Very great work and neat codes but you should try to reduce the width of the hero-image img so the hero image wont overlap the footer at full screen for desktop.
Also you can try reducing the (*) padding so the gradle menu in it can align well with the rest in the drop down menu 
great work!!! whoever you are

sorry the Repositorie is deleted by mistake check my another submission.
thankyou

Fiber

I used this challenge to try out mint. 

{"ops":[{"insert":"Using Bootstrap and vanilla JS.\n"}]}

Fun project that took about a day

Excellent gradient and flexbox practice. 

{"ops":[{"insert":"Created using Next.js\n"}]}

Fiber Landing Page

Fiber Codewell Challenge

Fiber Challenge with HTML5, CSS, JAVASCRIPT, SASS

Fiber landing page with SCSS

Fiber Landing Page using SCSS 

Build Using SCSS

Slap dashie pass

Fibr landing page with accessibility and srcset

Fiber Lading Page, sign up incoming... 

Fiber 

{"ops":[{"attributes":{"code-block":true},"insert":"\n"}]}

InderBrew -Codewell

INDIE BREW solution

Fiber Landing page solution

{"ops":[{"insert":"it's a good challenge,i learned more from it , and I advice anyone to do it\n"}]}

Website (html5 css3 bootstrap)

C.J Fiber Demo 

React Tailwind css

Fiber Landing Page - Built with Gasby

Fiber Landing page with signup form, slick slider carousel + mobile nav menu

{"ops":[{"insert":"made a fully responsive react website, with mobile menu and signup page\n"}]}

Fiber landing page with react

 Solution Fiber landing page Using HTML and CSS

{"ops":[{"insert":"This is my first Codewell solution. \n"}]}

Mobile first Responsive Fiber landing page (HTML&CSS)

{"ops":[{"insert":"This is Fiber website create with both HTML and CSS\n"}]}

IndieBrew (HTML/CSS) by Njorthr

{"ops":[{"insert":"I made the whole thing usign the grid system of bootstrap for responsive\n"}]}

Responsive Fiber website, made using bootstrap and js

IndieBrew Responsive Code With HTML Tailwind CSS and JS

Fiber landing page made with html and css

{"ops":[{"insert":"Used html, css and js\n"}]}

Fiber Portfolio

{"ops":[{"insert":"Made it using html and css , responsive for mobile devices to laptop . \n"}]}

IndieBrew landing page and sign-up page

{"ops":[{"insert":"Best for beginners to get knowledge of basics.\n"}]}

Finally done but  i tried  Responsive web but cant Done

nice experience

Fiber Clone 

{"ops":[{"insert":"No Bootstrap and Js\n"}]}

{"ops":[{"insert":"Anyone can comment!\n"}]}

Fiber with HTML and CSS

{"ops":[{"insert":"Responsive IndieBrew landing page. Build with HTML&CSS.\n"}]}

IndieBrew Landing page 

{"ops":[{"insert":"Html and CSS only\n"}]}

IndieBrew landing page

Fully responsive solution with React and tailwindcss

{"ops":[{"insert":"Really nice challenge, I enjoyed a lot 😀.\n"}]}

Fiber full responsive with TailwindCSS

{"ops":[{"insert":"click SignUp button to see the form\n"}]}

Fiber Main page with Form Register

Fiber Codewell

{"ops":[{"insert":"Used HTML and CSS, It was an interesting project\n"}]}

Solution using flex box, responsive units, and Javascript.

{"ops":[{"insert":"Built with Grid css and Flexbox.\nI hope your feedback\n"}]}

{"ops":[{"insert":"It was an awsome project to practice.\n"}]}

{"ops":[{"insert":"Built with Bootstrap 5.\n"}]}

Fiber - Create Portfolio in Minutes

Fiber Landing Page with SCSS & JS

Fiber Project Made with SCSS and Bootstrap5

{"ops":[{"insert":"Landing page built using html css and javascript.\n"}]}

{"ops":[{"insert":"I made this challenge using html, css and js.\nAny feedback would be great.\n"}]}

Fiber Landing page

{"ops":[{"insert":"I have learn a lot by making this real life template with starter files.\n"}]}

indiebrew solution

{"ops":[{"insert":"Great real life project\n\n"}]}

Fiber solution by Mr. Ravi

Fiber Landing Page by Hayden

{"ops":[{"insert":"Any feedback would be great!\n"}]}

Fiber landing page

IndieBrew Landing Page with Responsive menu

Fiber Started Files

Fiber Challenge

Indie Brew Template

{"ops":[{"insert":"This is my first solution in codewell\n"}]}

My first challenge on Codewell

Fiber landing page + signup page 

Fiber website solution

fiber landing page

Indie Brew Starter Files

Responsive mobile first landing page Fiber

Fiber Starter

{"ops":[{"insert":"Any comments and suggestions will be appreciated. Thank you!\n"}]}

Indie Brew

Fiber landing page & signup

My IndieBrew solution

{"ops":[{"insert":"didn't do the scrollable testimonials tho\n"}]}

First project with no tutorial

Fiber without carrousel

indieBriew

{"ops":[{"insert":"any feedback would be much appreciated \n"}]}

interesting project

{"ops":[{"insert":"Static site with Jekyll, bulma, scss\n"}]}

Static site with Jekyll, bulma, scss

{"ops":[{"insert":"Your feedback is useful for me :)\n"}]}

Fiber Landing Page using Sveltekit and Tailwindcss

a bit tricky for me

JavaScript30_Navbar

{"ops":[{"insert":"A responsive landing page of Ondeck - Video calling service app\n"}]}

Ondeck - Video Calling Service

Fiber Landing Page + Signup Form

{"ops":[{"insert":"Solution to On Deck landing page built with nuxt.js and fully responsive\n"}]}

On Deck solution built with nuxt.js

{"ops":[{"insert":"Ondeck - Javascript30 Navbar  Solution\n"}]}

Javascript30 Navbar Solution

{"ops":[{"insert":"solution to a codewell exercise\n"}]}

ondeck

{"ops":[{"insert":"hope yall like it\n"}]}

Fiber landing page built with html css and javascript with a little bit of form validation

Fiber Landing Page made with Sass & JavaScript

{"ops":[{"insert":"this is my solution to the exercise\n"}]}

Solution to codewell navbar with js

Ondeck

{"ops":[{"insert":"I have coded for desktop/pc.\n"}]}

Barra de navegacion con JavaScript

JavaScript NavBar

{"ops":[{"insert":"Responsive, with grid and js. \nWithout figma file :( \n"}]}

CodeWell01 - Navbar

Javascript30 Navar

{"ops":[{"insert":"This project was a bit challenging 😅\n"}]}

Navbar javascript

{"ops":[{"insert":"Interesting project\n"}]}

js30NavBar

{"ops":[{"insert":"I have used HTML and CSS if you have any advice you can give it, thanks\n"}]}

JavaScript30 Navbar 

javascript navbar

{"ops":[{"insert":"Gone pretty well ! added the responsive menu too.\n"}]}

Gone well

landing page navbar

navbar

{"ops":[{"insert":"This is my solution.\n"}]}

javascript30 navbar

{"ops":[{"insert":"I only use a little bit of Javascript for mobile navigation.\n"}]}

This is my solution

Fiber challange

IndieBrew landing page built with html and css

JS30 Navbar Challenge

Javascript30

{"ops":[{"insert":"First Challenge complete✌🏻"},{"attributes":{"header":2},"insert":"\n"}]}

LandingPage_Javascript30

{"ops":[{"insert":"just trying this out\n\n"}]}

Fiber challenge

{"ops":[{"insert":"Bootstrap v5\nHTML5\nCSS3\n"}]}

Fiber-Landing-Page

Fiber Page with TailwindCSS

Javascript30-Navbar

{"ops":[{"insert":"build with Vue, Vite and Tailwind\nfeedback is appreciated !!\n"}]}

Fiber | Vue + Vite + Tailwind

Fiber Landing Page

Fiber Page with TailwindCSS