div+css布局实现人物图文介绍卡片效果代码-html代码-BFW代码库

div+css布局实现人物图文介绍卡片效果代码

代码语言：html

代码描述：div+css布局实现人物图文介绍卡片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
/* :empty {
  display: none;
}
 */
.user-profile {
  display: grid;
  align-items: start;
  gap: 1rem;
  padding: 1rem;
  background-color: hsl(0 0% 50% / 0.2);
  border-radius: 200px 1rem 1rem 200px;
  box-shadow: 0 0 1rem hsl(0 0% 0% / 0.3);

  .name {
    font-size: 1.75rem;
    display: flex;
    gap: 2rem;
    align-items: center;
  }

  .role {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    background: hsl(0 0% 0% / 0.5);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .profile-image {
    width: 200px;
    aspect-ratio: 1;
    border-radius: 100vw;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .socials {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    list-style: none;
    margin: 0 1rem;
    margin-left: auto;
    padding: 0;
  }

  .socials svg {
    width: 1.5rem;
  }
}

html {
  color-scheme: dark;
  font-family: system-ui;
}

body {
  margin: 2rem;
}

* {
  box-sizing: border-box;
  margin: 0;
}

.flex-group {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.........完整代码请登录后点击上方下载按钮下载查看