Snipper Landing Page

{"ops":[{"insert":"Perfect to practice creating graphs, CSS grid, and much more.\n"}]}

Ideate Dashboard 

Workside Job Board

Love the work you've done and the fact that it's responsive. My only 2 comments is that the image technically isn't 'stuck' at the bottom and that the items in the footer change to a hamburger menu on mobile. Other than that, great job!


<b>I actually haven't noticed the hamburger menu on mobile - thanks for pointing it out!</b>

Hey Loctong! 

Looks like you've got this pretty good on 1920x1080 but it looks like it breaks at smaller breakpoints (<1080, you can check how it looks on other devices by using the developer tools on any browser), so that may worth looking at using Media Queries. 

Good start though!

Hi, moeminm!
 Thanks for your comments.
 I am on the way to update 
Thanks


btw, It is working well with Ipad (768) :D

Hmm, weird, iPad looks broken on my screen (maybe cuz i'm using Safari 👀)

No comments design-wise, looks like you've done a good job of replicating the actual design! I'll leave the code to someone more experienced.

Looks like you've done a wonderful job, my only comment is to remove the underlines under the buttons! Can you let me know which image was missing from the asset file so I can update it? Thank you!

ahh yes I forgot the underline thank you! and the hero images for the tablet and mobile I only had the desktop image.

unless the figma design is a little off shows different assets for desktop tablet and mobile.

Thanks for reporting this, will look into it and update the Figma files! 

Great job, my only comment is to have the hamburger menu switch to an 'X' icon when active!

You've done a great job on desktop! Remove the underlines and you should be fine... But the mobile view is similar is similar to desktop and just looks as if it has been shrunken down. Take a bit more time to make it like the original.

Well done Jaspal, your solutions are always so well done! 🚀

Thank you so much brother, means alot 😁

I did just the website on desktop to start. I haven't done the rest yet, but I think it looks nice!

- raster image of diagram should be made vector, maybe using the svg path from the figma file, and adding a color linear gradient.
- colors are grey for all the cards, but should be white.
- scroll behaviour is non-existent. There is going to be lots of rows on the tables.
- margins/paddings are all different to the figma file.
- font sizes and font weights are all different to the figma file.
- horizontal scrolling is needed to see the referral image, and then the top-nav logos don't stay in place.
- everything overfows its containers with a small window. Would recommend fixed sizing for the graph / referral vertically to prevent overflow (e.g. 400px).

Yeah It is amazing thanks for the help in the footer part I didn't know how to do it so I had a look at your code thanks I do really appreciate your help

Had to post twice because this f****** platform dosent have options to edit your submits...

In general, I was just changed name on Github so i had to change name on my github pages.

Bro, a major part of making fronted is to make it as responsive as possible. 
eg : http://magabee.rf.gd/100daysofcode-2/53-snipper-landing-page/

My attempt at responsive development.

Snipper Landing Page - My First Codewell Challenge

Please review my source code

Snippet Template Solution

Snipper Landing Page.

Fun, love this platform

Snipper Template complete 

{"ops":[{"insert":"Build with React framework, using styled components with tailwind css\n"}]}

React Tailwind css

Fantastic Practice!

Snipper Landing Page Challenge

{"ops":[{"insert":"This is my first attempt at creating a responsive  website. \n"}]}

First Challenge 

{"ops":[{"insert":"I hope your feedback\n"}]}

Snipper landing page with HTML And Tailwind CSS

{"ops":[{"insert":"gulp-sass browser-sync \n"}]}

Snippet Template challenge codewell

Finished Using Tailwind CSS and Semantic Tags

Snippet_Template_Starter_Files

Landing Page

{"ops":[{"insert":"Snipper Landing Page made using HTML, CSS, JavaScript.\n"}]}

Snipper-Landing-Page

Snipper - Gorgeous Code Snippets solution by psplawski

{"ops":[{"insert":"Snipper Landing Page\nMade with pure HTML&CSS\n"}]}

Snipper-landing-page

{"ops":[{"insert":"Feel free to ask for any questions, it was a fun challenge!\n"}]}

Katalina G / CW-Snippet-Template

Workside template

Solution to sidebar in tablet mode

{"ops":[{"insert":"Responsive landing page built with Svelte Kit and Tailwind CSS.\n"}]}

Snipper (Svelte Kit + Tailwind CSS)

Snipper Landing page solution. Pure css

Personal solution for the "Snipper Landing Page" challenge

Snipper Template Starter

{"ops":[{"insert":"I used vanilla CSS and HTML to complete the challenge. Used Flexbox. \n"}]}

Challenge Completed using HTML and CSS 

Snippet Template

Snipper Template

{"ops":[{"insert":"Made with React.js\n"}]}

Snipper Landing Page by Fran Mella

{"ops":[{"insert":"I was a nice project.\n"}]}

Snipper Snippet Landing Page

{"ops":[{"insert":"This is my second project using Tailwind CSS. I am absolutely loving it.\n"}]}

Built with Tailwind & React

{"ops":[{"insert":"Created with  HTML and CSS\n"}]}

Workside job

Ideate-Dashboard

Snipper Solution - HTML, CSS, Vanilla JS

{"ops":[{"insert":"Snipper Landing Page (HTML, CSS, JS)\n"}]}

My solution 9/10

{"ops":[{"insert":"Another fun challenge completed\n"}]}

{"ops":[{"insert":"Another challenge from codewell, \nHappy coding guys!\n"}]}

Snoppet-landing-page with html and css

{"ops":[{"insert":"html css vanilla js \nmobile first \ngrid and flexbox\n"}]}

{"ops":[{"insert":"Built with ReactJS, Tailwind and React-icons. Really a fun challenge!\n"}]}

Snipper Challenge with ReactJS

{"ops":[{"insert":"Built with Bootstrap, Jquery incl.(\"wow animation\", \"niceScroll\")\n"}]}

Snipper do Cria

{"ops":[{"insert":"i used the grid for building this page\n"}]}

 Ideate-Dashboard

sniper landingpage challenge

{"ops":[{"insert":"Snipper Landing Page using flexbox.\n"}]}

{"ops":[{"insert":"Responsive landing page Snippet\n"}]}

Responsive landing page Snippet

{"ops":[{"insert":"Responsive page created using HTML and CSS\n"}]}

{"ops":[{"insert":"Snipper Landing Page\n"}]}

{"ops":[{"insert":"Simple project for practice, fully responsive, made with TailwindCSS\n"}]}

Responsive with TailwindCSS

{"ops":[{"insert":"Used React and tailwind-css to provide responsiveness.\n"}]}