Spense Landing Page

Fiber Landing Page 

Gradie Sign Up Page

IndieBrew Landing Page

Snipper Landing Page

Comment Module 

Commune Waitlist Page

TimeNow Landing Page

Unifeed Blog Page

Newsletter Popup Template

Hosterr Waitlist Page

linkProfile App

Meeet Waitlist Template

Chirp Landing Page

Arclight Landing Page

Web Developer Portfolio

Javascript30 Navbar

What problems are you having when trying to use the font face? My only comment is to use align-items: center; on this class 'articles__secondary--container' to center the text with the image, other than great job, very responsive!

Thank you moeminm !
I dowloaded the font face Manrope, but it's as if it wasn't taken into account and the code uses Verdana instead :

@font-face {
  font-family: "Manrope";
  src: url("./fonts/Manrope-VariableFont_wght.ttf") format ("truetype");
}

* {
  margin: 0;
  font-family: "Manrope", "Verdana", "Times New Roman";
}

Did you import the font? Check this article out https://css-tricks.com/snippets/css/using-font-face/

Alternatively, you can just link the font in the <head> using this: 

<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap" rel="stylesheet">

and adding font-family: 'Manrope', sans-serif; in the CSS.

Looks awesome, love the little animation you've put for the logos, makes it pop up even more! :D

Your Implementation was spot on, great work!

The animations were a silver lining to the great layout

👋Hi vishalbrdr!

For the "View live project" link, it's a GitHub repo link.

Have uploaded your project to Netlify or GitHub page?

Live project link seems to be working fine for me

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.


Hamburger Button working for mobile navigation

I did web design and responsive design (for tablets and mobile phones)

Unifeed blog page using React

Fiber Landing page solution

{"ops":[{"insert":"SignUp page\n\n-HTML\n-CSS\n"}]}

Sign Up page

{"ops":[{"insert":"Newsletter popup with email validation using javascript. Flexbox.\n"}]}

Newsletter popup with email validation

 Solution Fiber landing page Using HTML and CSS

Comment Box with Tailwindcss(JIT)

Gradie Sign Up Page with HTML and CSS

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

{"ops":[{"insert":"Any feeback will be appreciated.\n"}]}

Unifeed Blog Template using Bootstrap 5.1

{"ops":[{"insert":"the most intresting part was collabs images in various degree\n"}]}

Developer portfolio

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

Challenge Completed using HTML and CSS 

{"ops":[{"insert":"It is amazing project to practice HTML and CSS. Must try.\n"}]}

Johnathan Specter

My IndieBrew solution

Snipper Template

Web Development Portfolio Challenge

{"ops":[{"insert":"This was a great project. I used CSS basic and flexbox.\n"}]}

Newsletter-Popup-Template

{"ops":[{"insert":"Successfully completed this Challenge using css flex-box.\n"}]}

Newsletter Modal Template

{"ops":[{"insert":"First practice in codewell.\nRate my work\n"}]}

Jonathan

Fiber landing page

{"ops":[{"insert":"Without Figma file.\n"}]}

{"ops":[{"insert":"Just a React JS test.\n"}]}

Codewell Portfolio

{"ops":[{"insert":"used HTML CSS and Bootstrap, Check the live deployment of what i made\n\n"}]}

NEWSLETTER SITE SAMPLE 

Commune Waitlist Page using tailwind css solution.

{"ops":[{"insert":"It's made using only HTML & CSS.\n"}]}

The Commune Waitlist Page

HTML & CSS,  Desktop first approach

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

Jonathan Specter challenge

First Try Not So Responsive Spense

JavaScript30_Navbar

{"ops":[{"insert":"Responsive Spense landing page coded using HTML, CSS, and JavaScript.\n"}]}

Gradie Login Page

{"ops":[{"insert":"Here is my solution to portfolio challenge\n"}]}

Website Portfolio Solution

link_Profile_starter

Chirp landing page

web Developer Portfolio Website

javascript navbar

{"ops":[{"insert":"Its responsive as mentioned in problem statement.\n"}]}

{"ops":[{"insert":"Was fun challenge :)\n"}]}

Fiber

{"ops":[{"insert":"the Newsletter challenges with just HTML + CSS \n"}]}

Newsletter challenges

{"ops":[{"insert":"the hardest part was the rotation of the shapes\n"}]}

Arclight Landing page with React and styled components

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

javascript30 navbar

{"ops":[{"insert":"hosterr-project-challenge\n"}]}

hosterr-project-challenge

commune-waitlist-starter

{"ops":[{"insert":"I created this web with dedication and passion. I tried my best.\n"}]}

Newsletter popup template

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

Snoppet-landing-page with html and css

Unifeed Blog

newsletter

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

Snipper Challenge with ReactJS

{"ops":[{"insert":"Amazing Challange\n"}]}

Spense landing Page

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

My first simple solution!

Chirp Landing page. 

{"ops":[{"insert":"This project is good for those who want to work on their CSS skills. \n"}]}

Meet page challenge using React

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

{"ops":[{"insert":"Can anybody send a link of similar projects to Newsletter Popup\n"}]}

Newsletter Popup 

{"ops":[{"insert":"Good practice for my freshly acquired responsive skills\n"}]}

First personal practice of html/css

{"ops":[{"insert":"Made with Tailwindcss\n"}]}

Arclight - Tailwindcss

Newsletter-Popup-Starter

{"ops":[{"insert":"Responsive landing page Chirp using sass/scss- jquery\n"}]}

Responsive landing page Chirp using sass/scss- jquery

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

Responsive landing page Navbar

{"ops":[{"insert":"Responsive page Blog using sass/scss\n"}]}

Responsive page Blog using sass/scss

{"ops":[{"insert":"Responsive page Sign up using sass/scss\n"}]}

Responsive page Sign up using sass/scss

{"ops":[{"insert":"the image are not visible don't know why but it was good project to begin\n"}]}

Solution 1

{"ops":[{"insert":"Responisve landing page Spense\n"}]}

Responisve landing page Spense

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

Responsive landing page Snippet

{"ops":[{"insert":"Responsive page created using Flexbox\n"}]}

{"ops":[{"insert":"Responsive landing page Indie Brew using sass/scss - jquerry\n"}]}

Responsive landing page Indie Brew using sass/scss - jquerry

{"ops":[{"insert":"Responsive landing page Fiber using sass/scss - jquerry\n"}]}

Responsive landing page Fiber using sass/scss - jquerry

gradie-sign-up-page

{"ops":[{"insert":"Responsive landing page Timer now using sass/scss - jquery\n"}]}

Responsive landing page Timer now using sass/scss - jquery

Almost Perfect

Hosterr Main web page design. HTML and CSS

{"ops":[{"insert":"Made with HTML and CSS3 \n"}]}

Gradient sign up page

{"ops":[{"insert":"Responsive\nHTML + CSS + JS\n"}]}

{"ops":[{"insert":"project to get you started. Purely on HTML,CSS .\n"}]}

Newsletter popup Template 

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

{"ops":[{"insert":"Made with flex method\n"}]}

Gradie sign up

Gradie Sign Up Challenge

Meeet New Entrepreneurs Solution

Comment Module

Fiber LanadingPage Website 

JavaScript30 Landing Page

Landing Page With follow along Navbar

{"ops":[{"insert":"I tried to make it responsive.\npls feel free to suggest anything 👊👊\n"}]}

Chrip-Landing-Page 

Commune-Responsive-Landing-Page

Landing page using HTML and CSS

Newsletter Popup

{"ops":[{"insert":"I appreciate any feedback or suggestions you have regarding the solution.\n"}]}

Sign up page

Web Developer Portfolio Using Tailwindcss

My solution

my solution

My solution-2

Web-Developer-Portfolio-Project

{"ops":[{"insert":"completed the challenge.\nif you find any problem please let me know\n"}]}