Snipper Landing Page

Javascript30 Navbar

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>

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.

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

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.

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.

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

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/

Uploaded wrong netlify link, not in the index.html

Correct link: https://dazzling-druid-2cd454.netlify.app

My attempt at responsive development.

Snipper Landing Page - My First Codewell Challenge

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

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

{"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"}]}

a bit tricky for me

JavaScript30_Navbar

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

Ondeck - Video Calling Service

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

On Deck solution built with nuxt.js

Snipper Solution - HTML, CSS, Vanilla JS

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

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

Javascript30 Navbar Solution

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

ondeck

{"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

JavaScript30 Navbar 

My solution 9/10

javascript navbar

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

Gone well

landing page navbar

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

navbar

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

javascript30 navbar

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

Snoppet-landing-page with html and css

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

This is my solution

JS30 Navbar Challenge

Javascript30

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

LandingPage_Javascript30

Javascript30-Navbar

It's alive

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

{"ops":[{"insert":"Made with React JS.\nGive me your feedback!\n"}]}

JS30NAVBAR

My navbar

{"ops":[{"insert":"developed a webpage using Tailwindcss Library.\n"}]}

Javascript 30 Navbar - Tushar Kanjariya

Navbar challenge using sass

Odneck Awsome Landing page

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

Snipper Challenge with ReactJS

On desk

{"ops":[{"insert":"thats a small solution for the layout\n"}]}

My first simple solution!

{"ops":[{"insert":"Interesting template.\nGive me your feedback!\n"}]}

JS30 Navbar

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

{"ops":[{"insert":"This Is My First Challenge!\n"}]}

{"ops":[{"insert":"this is my first project\n"}]}

codewell project

Javascropt30-Navbar Challange COMPLETED

javascript30-navbar-starter

Snipper do Cria

{"ops":[{"insert":"What do you think ?\n"}]}

Solution !!

{"ops":[{"insert":"very high responsive\n"}]}

{"ops":[{"insert":"Ondeck landing page using Flexbox and css classes.\n"}]}

Javascript 30 NavBar using FlexBox

Ondeck landing with Flexbox

NavBar responsivo 

sniper landingpage challenge

{"ops":[{"insert":"Muito bom para praticar e fixar os conceitos do framework TailwindCSS.\n"}]}

Responsive Navbar ReactJS + Tailwind

The best navbar :)

{"ops":[{"insert":"I could not find information about drop-down menu. I create a new one.\n"}]}

Created with vue.js and tailwind.css

Challenge Done !

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

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

Responsive landing page Navbar

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

Responsive landing page Snippet

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

JavaScript30 Landing Page

Landing Page With follow along Navbar

Landing page using HTML and CSS

desafio

{"ops":[{"insert":"this nav bar is created using html and CSS and js \n"}]}

JavaScript Navbar with Sub Menu

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

Navbar Start

MySolution

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

{"ops":[{"insert":"amazing challenge.\nthanks you codewell \n"}]}

Evariste Nouaga

Created with React.js and Typescript

{"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"}]}

Snippets

Nav Bar responsive solution

{"ops":[{"attributes":{"bold":true},"insert":"Javascript30 Navbar"},{"insert":"\n"}]}

Desafio #001

Nav Bar responsive solution

Created with React.js and Typescript