GithubHelp home page GithubHelp logo

manikmaity / profile-card-component Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 16 KB

his is a solution to the [Profile card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ).

Home Page: https://manikmaity.github.io/Profile-card-component/

HTML 42.78% CSS 57.22%
frontend-mentor html profile-card-component web-development card css responsive

profile-card-component's Introduction

Profile-card-component

This is a solution to the Profile card component challenge on Frontend Mentor.



Table of contents

Overview

The challenge

There are challenges in this projects -

  1. Place the pattern in the background
  2. Make the it look perfectly

Screenshot

Desktop Preview

screencapture-file-C-Users-Manik-OneDrive-Desktop-Starting-Over-Again-profile-card-component-main-index-html-2023-05-16-23_07_53

Mobile Preview

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • :hover, :root
  • Desktop First
  • Padding, margin, border radius

What I learned

  1. I have learned lot about position and background-image but I could not make the bg pattern show. Even I watched videos of this challege but that did not work also i think its because of my laptop or my browser

Update

Finally fixed the project by added background patterns. razalalkhan helped me in this.

profile-card-component's People

Contributors

manikmaity avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.