Главная » Языки программирования

Красивое оформление профиля css

Содержание
  1. How to make a profile card with HTML & CSS
  2. Making the card
  3. HTML
  4. CSS
  5. Introduction
  6. HTML
  7. description
  8. HTML
  9. CSS
  10. Programming skills
  11. HTML
  12. CSS
  13. Email and Socials
  14. 22 CSS Profile Cards
  15. Related Articles
  16. Author
  17. Links
  18. Made with
  19. About a code
  20. PopDog Card
  21. Author
  22. Links
  23. Made with
  24. About a code
  25. Profile Cards — CSS Grid
  26. Author
  27. Links
  28. Made with
  29. About a code
  30. Profile Card
  31. Author
  32. Links
  33. Made with
  34. About a code
  35. InfoCard CSS Only
  36. Author
  37. Links
  38. Made with
  39. About a code
  40. Social Card Hover
  41. Author
  42. Links
  43. Made with
  44. About a code
  45. CSS Card
  46. Author
  47. Links
  48. Made with
  49. About a code
  50. Fairly Colourful Profile Card
  51. Author
  52. Links
  53. Made with
  54. About a code
  55. Game-Based Cards
  56. Author
  57. Links
  58. Made with
  59. About a code
  60. Profile Card Design
  61. Author
  62. Links
  63. Made with
  64. About the code
  65. Profile Card Hover Over It Once
  66. Author
  67. Links
  68. Made with
  69. About the code
  70. Player/User Cards
  71. Author
  72. Links
  73. Made with
  74. About the code
  75. Profile Card UI Design
  76. Author
  77. Links
  78. Made with
  79. About the code
  80. Cv Card Profile
  81. Author
  82. Links
  83. Made with
  84. About the code
  85. Profile Card
  86. Author
  87. Links
  88. Made with
  89. About the code
  90. UI Profile Cards
  91. Author
  92. 17 Best CSS Profile Cards 2023
  93. 1. Fairly Colourful Profile Card
  94. 2. Profile Card UI Design Cool Hover Effect
  95. 3. CSS Profile Card
  96. 4. Social Card + 3D Hover Effect
  97. 5. Profile Cards – CSS Grid
  98. 6. Profile Card Design
  99. 7. Flashing Twitter Author Card
  100. 8. 90’s Profile Card
  101. 9. Profile Card
  102. 10. UI Profile Cards
  103. 11. Profile Card
  104. 12. Daily UI Profile
  105. 13. Profile Card
  106. 14. Card Challenge
  107. 15. Material Design: Profile Card
  108. 16. InfoCard CSS Only
  109. 17. Profile Card Hover Over It Once
Читайте также:  Python scipy least squares

How to make a profile card with HTML & CSS

When showing others what you do you don’t always need to show your portfolio website containing 50+ things about you and what you’ve done. Instead, you should sometimes find a way to quickly show the main things about you, and that’s where profile cards come in! Profile cards are easy to make with good knowledge of HTML and CSS, you just have to have an idea of what your profile card would look like. In this blog, I’ll show how I made my profile card, but if you have any suggestions to put on it comment down below.

Making the card

First, I made a card div with a white background and a width of 360px with a height of 455px . I gave it a border-radius of 10px and a box shadow to make it look good. Then I gave the card a padding of 10px for every side except for the bottom to make it seem full. Finally, I gave it a display of flex and made it a flex column with everything having a gap of 15px .

HTML

CSS

.card  width: 360px; height: 455px; border-radius: 10px; background-color: white; padding: 10px 10px 0 10px; box-shadow: 10px 15px; display: flex; flex-direction: column; gap: 15px; >

Introduction

What I like to call the introduction, is the top part of a profile card where you show your name and occupancy/what you do (people also add pfp’s in web designs). First, we made a div that contains our profile image, h2 element (name), and h3 element (occupancy). The div has a text-align of center and a font-family of Poiret One . For the profile image, we give it a small width of 60px and a border radius of 50%.

HTML

  class="pfp">  src="https://res.cloudinary.com/practicaldev/image/fetch/s--TaFBhrk---/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/933459/4c8158c5-9aaf-4354-98c1-3c67f6fc49ba.jpg" alt="catPhoto"> Lens Dorsainvil Web Developer  
.pfp  text-align: center; font-family: Poiret One; > .pfp > img  border-radius: 50%; width: 60px; border: solid; >

description

All I did for the description text was make a paragraph element with a font-family of Red Hat Display and a text-align of center .

HTML

 class="intro">A 13 year old boy learning web-development and UX/UI design for fun and for a future job. Wanting to explore computer science and game development. Hoping to be a software engineer one day!

CSS

.intro  text-align: center; font-family: Red Hat Display; font-weight: 300; >

Programming skills

I also added all the programming languages that I use. I got the icons from Devicon so go check it out! I contained all the icons in a div and gave it a display of flex to space them evenly. Of course, I also had to give them a small width.

HTML

  class="programmingLanguages">  class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" />  class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" />  class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" />  class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" />  class="language" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/csharp/csharp-original.svg" />

CSS

 .programmingLanguages  display: flex; justify-content: space-around; > .language  width: 40px; >

Email and Socials

  class="email"> lensdorsainvi711@outlook.com 
 .email  background-color: black; color: white; display: flex; justify-content: center; font-family: Poppins; border-radius: 5px; transition: 0.3s; > /*BONUS: hover effect*/ .email:hover  background-color: #00D9C0; >

However, for my social media icons I got from Ionicons (except for the DEV icon) I contained them all in a div and set it to flex so I can put them at the bottom right with justify-content: flex-end . 

  class="socials">  src="https://d2fltix0v2e0sb.cloudfront.net/dev-black.png" alt="dev">  name="logo-codepen">  name="logo-twitter">  name="logo-github">  
.socials  display: flex; justify-content: flex-end; /*Also a gap to space them out*/ gap: 8px; > .socials > img  width: 25px; > ion-icon  font-size: 25px; >

There’s lots of other profile card designs you can see such as on web design web apps like Dribbble. You can also make a profile card just for practice with HTML and CSS, in fact, I think this is great for beginners! If you have any question or things to say just comment them, you can also comment a profile card that you made if you want. If you want to use my design fork it on Codepen or the GitHub repo and customize it your way! Have a good day/night 👋.

Источник

22 CSS Profile Cards

Collection of free HTML and CSS profile card code examples from Codepen, GitHub and other resources. Update of November 2021 collection. 4 new items.

Author

Made with

About a code

PopDog Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Profile Cards — CSS Grid

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Profile Card

Author

Made with

About a code

Profile Card

This is some kind of profile card. The Hire me button has a moving gradient hover animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

InfoCard CSS Only

A simple self expanding info card using very basic tools and transitions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Social Card Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Card

Author

Made with

About a code

CSS Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Fairly Colourful Profile Card

Author

Made with

About a code

Fairly Colourful Profile Card

A simple and a little bit colorful design concept of a profile card.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Game-Based Cards

Author

Made with

About a code

Game-Based Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Profile Card Design

Author

Made with

About a code

Profile Card Design

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Profile Card Hover Over It Once

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Player/User Cards

Player/user cards with hover effect in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Profile Card UI Design

Profile card UI design with cool hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, font-awesome.css

Author

Made with

About the code

Cv Card Profile

A digital card profile in wich resume all your essential professional panorama and easily share.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Profile Card

Profile card with animation in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

UI Profile Cards

UI profile cards with CSS transition effects on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Profile Card

Author

Источник

17 Best CSS Profile Cards 2023

CSS Profile Cards

17 Best CSS Profile Cards In 2023

If you’re looking for the perfect way to put a creative CSS profile cards on your site, you’re at the right place.

While you’re at it, why not add a sleek look to an interesting look? Today we are going to try to create a list of the best CSS profile cards with animated, simple, elegant and more options.

Below is a link to each demo and code piece. Whether you want to start with your own design or you are looking for a fully finished profile cards, you have it all.

So undoubtedly let’s get to the list.

1. Fairly Colourful Profile Card

Fairly Colourful Profile Card

Fairly Colourful Profile Card
Made By: Takane Ichinose

2. Profile Card UI Design Cool Hover Effect

Profile Card UI Design Cool Hover Effect

Profile Card UI Design Cool Hover Effect
Made By: FrankieDoodie

3. CSS Profile Card

CSS Profile Card

CSS Profile Card
Made By: Byurhan Beyzat

4. Social Card + 3D Hover Effect

3D Hover Effect

Social Card + 3D Hover Effect
Made By: Bobby Korec

5. Profile Cards – CSS Grid

Profile Cards – CSS Grid

Profile Cards – CSS Grid
Made By: Alina N.

6. Profile Card Design

Profile Card Design

Profile Card Design
Made By: Florin Pop

7. Flashing Twitter Author Card

Flashing Twitter Author Card

Flashing Twitter Author Card
Made By: David East

8. 90’s Profile Card

90's Profile Card

90’s Profile Card
Made By: Ondřej Bárta

9. Profile Card

Profile Card

Profile Card
Made By: Russ Perry

10. UI Profile Cards

UI Profile Cards

UI Profile Cards
Made By: neil pearce

11. Profile Card

Profile Card

Profile Card
Made By: Jove Angelevski

12. Daily UI Profile

Daily UI Profile

Daily UI Profile
Made By: Genaro Colusso

13. Profile Card

Profile Card

Profile Card
Made By: Matthias Martin

14. Card Challenge

Card Challenge

Card Challenge
Made By: Carlita Centeno

15. Material Design: Profile Card

Material Design Profile Card

Material Design: Profile Card
Made By: Emil Devantie Brockdorff

16. InfoCard CSS Only

InfoCard CSS Only

InfoCard CSS Only V1
Made By: Emil Alicic

17. Profile Card Hover Over It Once

Profile Card Hover Over It Once

Profile Card Hover Over It Once
Made By: Atul Prajapati

Источник

Оцените статью
© 2024 Программирование