css布局实现旅游分享社交平台首页UI效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现旅游分享社交平台首页UI效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700;800&display=swap');
    
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      font-size: 62.5%;
    }
    
    body {
      display: grid;
      place-content: center;
      color: hsl(270, 10%, 80%);
      font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(to top right, hsl(270, 50%, 50%), hsl(290, 60%, 70%));
      min-height: 100vh;
      padding: 3rem;
      overflow-x: hidden;
    }
    
    button {
      font-size: inherit;
      font-family: inherit;
    }
    
    button:hover,
    button:focus {
      outline: none;
    }
    
    a,
    a:hover,
    a:focus {
      outline: none;
      text-decoration: none;
    }
    
    .dash {
      background: hsl(270, 50%, 10%);
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      box-shadow: 4px 4px 30px hsla(270, 30%, 10%, .4);
      max-width: 1266px;
    }
    
    .dash * {
      transition: all .1s;
    }
    
    .header {
      height: 5rem;
      display: flex;
      align-items: center;
      z-index: 2;
      box-shadow: 0 4px 12px hsla(270, 30%, 3%, .2);
    }
    
    .header__heading {
      width: 6rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .header__heading>a {
      font-weight: bold;
      letter-spacing: 2px;
      color: hsl(270, 50%, 10%);
      background: hsl(220, 60%, 60%);
      padding: .2rem .7rem;
      font-size: 1.5rem;
      border-radius: 4px;
    }
    
    .header__heading>a:hover {
      background: hsl(220, 80%, 64%);
    }
    
    .header__search {
      flex-grow: 1;
      padding: 0 8.6rem;
    }
    
    .header__search-icon {
      width: 3.8rem;
      height: 3.8rem;
      border-radius: 3.8rem;
      background: hsl(270, 32%, 17%);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    
    .header__search-icon:hover {
      background: hsl(270, 32%, 20%);
    }
    
    .header__search-icon>svg {
      height: 1.6rem;
      opacity: .4;
    }
    
    .header__search-icon:hover>svg {
      opacity: .7;
    }
    
    .header__options {
      padding-right: 2.8rem;
    }
    
    .header__pro {
      color: #eef0ff;
      background: linear-gradient(to top right, #546FFF, #8A9CFF);
      border: 0;
      margin-right: 5rem;
      font-size: 1.2rem;
      padding: .7rem 1.8rem;
      border-radius: 6px;
      font-weight: 700;
      cursor: pointer;
    }
    
    .header__link {
      font-size: 1.4rem;
      opacity: .8;
      color: inherit;
    }
    
    .header__link:first-of-type:hover {
      opacity: 1;
    }
    
    .header__link:not(:first-of-type) {
      margin-left: 2rem;
      opacity: 1;
    }
    
    .body {
      flex-grow: 2;
      display: flex;
    }
    
    .sidebar {
      width: 8rem;
      box-shadow: 2px 0 12px hsla(270, 30%, 10%, .2);
    }
    
    .sidebar__icon {
      display: flex;
      flex-direction: column;
      align-items: center;
    
      margin-top: 4rem;
      cursor: pointer;
    }
    
    .sidebar__icon:first-of-type {
      margin-top: 5rem;
    }
    
    .sidebar__icon:not(:first-of-type) {
      opacity: .3;
    }
    
    .sidebar__icon:not(:first-of-type):hover {
      opacity: 1;
    }
    
    .sidebar__icon:last-child {
      margin-top: 10rem;
    }
    
    .sidebar__icon>svg {
      height: 2.2rem;
    }
    
    .ss-heading {
      font-weight: 400;
      text-transform: uppercase;
      font-size: 1.4rem;
      letter-spacing: 3px;
      color: hsl(235, 5%, 70%);
    }
    
    .ss-show {
      color: hsl(210, 60%, 60%);
      font-size: 1.2rem;
    }
    
    .ss-show:hover {
      color: hsl(210, 70%, 70%);
    }
    
    .ss-dots {
      display: flex;
    }
    
    .ss-dots>span {
      width: 6px;
      height: 6px;
      border: 1px solid currentColor;
      border-radius: 6px;
      margin-right: 2px;
      opacity: .6;
      cursor: pointer;
    }
    
    .ss-dots>span:hover {
      opacity: 1;
    }
    
    .main {
      flex-grow: 2;
      background: linear-gradient(to right top, hsla(270, 50%, 8%, .5), hsla(270, 50%, 8%, .6) 20%, hsla(270, 50%, 8%, .1)), linear-gradient(to right bottom, hsl(270, 50%, 8%), transparent 66%), linear-gradient(to bottom, transparent, hsl(270, 50%, 8%) 56%), url("//repo.bfw.wiki/bfwrepo/image/6284273e2b668.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_1215,h_260,/quality,q_90") no-repeat;
      background-size: auto 500px;
      padding: 4rem 0 0 8rem;
      display: flex;
      border-bottom-right-radius: 8px;
    }
    
    .main__col-1 {
      width: 30%;
    }
    
    .main__heading {
      font-size: 3rem;
      font-weight: 300;
      display: flex;
      align-items: center;
    }
    
    .main__heading>span {
      width: 4rem;
      height: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px;
      margin-right: 1.6rem;
      margin-bottom: -2px;
    }
    
    .main__heading svg {
      height: .7em;
    }
    
    .main__desc {
      margin: 1.5rem 0 1rem;
      font-size: 1.4rem;
      opacity: .6
    }
    
    .main__sub {
      font-size: 1.2rem;
    }
    
    .main__sub span:first-of-type {
      opacity: .4;
    }
    
    .main__list-heading-wrap {
      display: flex;
      align-items: center;
      font-size: 1rem;
      margin: 8rem 0 5rem;
    }
    
    .main__list-heading {
      flex-grow: 2;
    }
    
    .main__list {
      list-style: none;
      position: relative;
    }
    
    .main__list::before {
      content: "Wadi";
      position: absolute;
      bottom: 17%;
      left: -18%;
      opacity: .03;
      font-size: 18rem;
      font-weight: bold;
    }
    
    .main__list-item {
      padding: 0 0 5.7rem 2rem;
      border-left: 2px solid hsla(0, 0%, 50%, .2);
      position: relative;
      display: flex;
      color: #9D9DAC;
    }
    
    .main__list-item:first-of-type .main__list-content {
      color: hsl(240, 8%, 90%);
    }
    
    .main__list-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 8px;
      width: 4px;
      height: 4px;
      border-radius: 4px;
      background: hsl(210, 70%, 70%);
      transform: translateX(-3px);
    }
    
    .main__list-item:first-of-type::before {
      top: 0;
    }
    
    .main__list-item:first-of-type .main__list-content {
      line-height: .3;
    }
    
    .main__list-item:last-of-type {
      padding-bottom: 2.6rem;
    }
    
    .main__list-item-image {
      width: 4rem;
      height: 4rem;
      border-radius: 1px;
      margin-right: 1rem;
      box-shadow: 0 2px 10px hsla(270, 30%, 2%, .6);
    }
    
    .main__list-item-image img {
      border-radius: inherit;
    }
    
    .main__list-content {
      font-size: 1.4rem;
      cursor: pointer;
    }
    
    .main__list-content:hover {
      color: hsl(240, 8%, 90%);
    }
    
    .main__list-sub {
      margin-top: .4rem;
      font-size: 1.1rem;
      opacity: .6;
    }
    
    .main__col-2 {
      width: 70%;
      padding-left: 6rem;
    }
    
    .main__cards-container {
      width: 70%;
      border-radius: 8px;
      padding: 3rem;
      background: hsl(270, 50%, 11%);
      box-shadow: 0 6px 16px 0 hsla(270, 30%, 3%, .4);
      margin-left: auto;
      transform: translateX(4rem)
    }
    
    .main__cards-container-heading-wrap {
      display: flex;
      align-items: center;
      padding: 1rem 0;
    }
    
    .main__cards-container-heading {
      flex-grow: 2;
    }
    
    .main__cards {
      list-style: none;
      padding: 2.6rem 0 2rem;
      display: flex;
    }
    
    .main__card {
      color: hsla(0, 0%, 100%, .8);
      transform: translateX(-15rem);
      flex-shrink: 0;
      margin-left: 1.5rem;
      width: 21rem;
      border-radius: 8px;
      text-align: right;
      padding: 2.2rem;
      box-shadow: 0 2px 12px hsla(var(--hue), 50%, 60%, .2), 0 4px 32px hsla(var(--hue), 50%, 60%, .2);
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }
    
    .main__card-image-container {
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
    }
    
    .main__card-image-container::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(to right, hsla(var(--hue), 60%, 60%, .3), 40%, hsl(var(--hue), 70%, 60%));
    }
    
    .main__card-heading {
      font-size: 2rem;
      font-weight: normal;
    }
    
    .main__card-heading-sub {
      margin-top: .4rem;
      font-size: 1.2rem;
    }
    
    .main__card-heading-type {
      margin-top: 2.8rem;
    }
    
    .main__cards-pagination {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .main__cards-buttons>button {
      color: inherit;
      background: transparent;
      border: 0;
      cursor: pointer;
    }
    
    .main__cards-buttons>button:hover {
      opacity: 1 !important;
    }
    
    .main__cards-buttons svg {
      height: 1.6rem;
    }
    
    .main__crossing-container {
      width: 88%;
      background-color: hsl(270, 50%, 11%);
      background-image: linear-gradient(120deg, hsla(26, 80%, 50%, .5), 10%, hsl(270, 50%, 11%) 60%), url("//repo.bfw.wiki/bfwrepo/image/62842767e917f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_125,/quality,q_90");
      box-shadow: 0 6px 16px 0 hsla(270, 30%, 3%, .4);
      border-radius: 8px;
      padding: 2rem 3.6rem;
      display: flex;
      align-items: center;
      transform: translate(-2rem, 2.4rem);
      position: relative;
      z-index: 2;
    }
    
    .main__crossing-image {
      border: 3px solid hsl(215, 60%, 40%);
      border-right-color: transparent;
      box-shadow: 0 0 12px hsla(270, 30%, 10%, .4);
      transform: rotate(-45deg);
      width: 5.4rem;
      height: 5.4rem;
      border-radius: 5.4rem;
      overflow: hidden;
    }
    
    .main__crossing-image>img {
      width: 5.4rem;
      transform: translate(-3px, -3px) rotate(45deg);
      border-radius: 5.4rem;
      border: 6px solid transparent;
    }
    
    .main__crossing-current {
      flex-grow: 2;
      margin-left: 3rem;
    }
    
    .main__crossing-upper {
      text-transform: uppercase;
      margin-bottom: .6rem;
      letter-spacing: 2px;
    }
    
    .main__crossing-heading {
      font-weight: normal;
      font-size: 1.6rem;
    }
    
    .main__discover {
      width: 88%;
      background-color: hsl(270, 50%, 11%);
      box-shadow: 0 8px 12px 0 hsla(270, 30%, 5%, .2);
      border-radius: 8px;
      padding: 8rem 3.6rem 2rem;
      margin-left: auto;
      transform: translate(1.4rem, -2.1rem);
    }
    
    .main__discover-heading-container {
      display: flex;
      align-items: center;
    }
    
    .main__discover-heading {
      flex-grow: 2;
    }
    
    .main__discover-places {
      padding: 4rem 0 1rem;
      list-style: none;
      display: flex;
      align-items: center;
    }
    
    .main__discover-place {
      flex-shrink: 0;
      margin-right: 1.4rem;
      background: hsl(270, 50%, 15%);
      transform: translateX(-8rem);
      padding: 1.6rem;
      width: 24%;
      border-radius: 8px;
      box-shadow: 0 4px 10px 0 hsla(270, 30%, 7%, .2);
      cursor: pointer;
    }
    
    .main__discover-place:hover {
      background: hsl(270, 50%, 17%);
    }
    
    .main__discover-place-heading {
      font-size: 1.4rem;
      font-weight: normal;
      margin-bottom: 6px;
    }
    
    .main__discover-place-sub {
      font-size: 1rem;
      opacity: .4;
    }
    
    .main__discover__more {
      margin-top: 3.6rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .main__discover__more-svg {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 3rem;
      height: 3rem;
      border-radius: 8px;
    }
    
    .main__discover__more svg {
      height: 2.6rem;
      transform: translate(2.4px, 1.6px);
    }
    
    .main__discover-right {
      opacity: .6;
      margin-left: -45px;
      cursor: pointer;
    }
    
    .main__discover-right:hover {
      opacity: 1;
    }
    
    .main__discover-right>svg {
      height: 1.6rem;
    }
    
    .main__footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .2rem 0 2.3rem 10rem;
    }
    
    .main__footer-more svg {
      height: 1em;
      vertical-align: middle;
    }
    
    .main__info {
      display: flex;
      align-items: center;
    }
    
    .main__info-link {
      color: inherit;
      font-size: 1.4rem;
    }
    
    .main__info-link:hover {
      color: #fff;
    }
    
    .main__info-link:hover svg {
      opacity: .7;
    }
    
    .main__info-link svg {
      height: 1.4em;
      transform: translateY(1px);
      opacity: .4;
    }
    
    .main__info-link+.main__info-link {
      margin-left: .6rem;
    }
    
    .main__cp {
      margin: 0 1rem 0 2.6rem;
    }
    
    .main__cr {
      opacity: .4;
      margin-right: 5rem;
    }
    
    .main__cr:hover {
      opacity: .7;
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <!-- 

~ Created this in more than 16+ hours
- More info on GitHub ;) 

-->

    <div class="dash">

        <!-- HEADER -->
        <header class="header">
            <h1 class="header__heading"><a href=""  rel="noreferrer noopener">DI</a></h1>
            <div class="header__search">
                <div class="header__search-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
                </div>
            </div>
            <div class="header__options">
                <button class="header__pro">GO PRO</button>
                <a href="#" class="header__link">Log in</a>
                <a href="#" class="header__link">Sign up</a>
            </div>
        </header>

        <!-- BODY -->
        <div class="body">

            <!-- SIDEBAR -->
            <div class="sidebar">

                <div class="sidebar__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
        </svg>
                </div>

                <div class="sidebar__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
                </div>

                <div class="sidebar__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
                </div>

                <div class="sidebar__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
        </svg>
                </div>

                <div class="sidebar__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
        </svg>
                </div>

                <div class="sidebar__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
                </div>

            </div>

            <!-- MAIN -->
            <main class="main">

                <!-- COL-1 -->
                <div class="main__col-1">

                    <!-- HEADING -->
                    <div>
                        <h2 class="main__heading"><span style="background: linear-gradient(to bottom, hsl(247, 88%, 70%), hsl(282, 82%, 51%)); box-shadow: 0 2px 12px hsla(247, 88%, 70%, .3)">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#fff">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
            </svg>
            </span> Abubaker Saeed</h2>
                        <p class="main__desc">Mixtures of places that I've visited & traveled which are worth to check out again ^_^</p>
                        <p class="main__sub"><span>Profile Collaborators:</span> <span>Cloud Strife & Jack Sparrow</span></p>
                    </div>

                    <!-- LIST -->
                    <div class="main__list-heading-wrap">
                        <h2 class="main__list-heading ss-heading">Recently Visit</h2>
                        <a href="#" class="ss-show">show all</a>
                    </div>

                    <ul class="main__list">

                        <li class="main__list-item">
                            <div>
                                <p class="main__list-content">Center Point</p>
                            </div>
                        </li>

                        <li class="main__list-item">
                            <div class="main__list-content-wrap">
                                <p class="main__list-content">Masmak Fortress</p>
                                <p class="main__list-sub">My Favorite</p>
                            </div>
                        </li>

                        <li class="main__list-item">
                            <div class="main__list-item-image">
                                <img src.........完整代码请登录后点击上方下载按钮下载查看