- 
  const navLinksCount = 6
  const columnsCount = 4

  const availableTags = [
    { label: 'Lost', color: '#E2FBD7' },
    { label: 'Designer', color: '#DAD7FE' },
    { label: 'Columbus', color: '#FFF5CC' },
    { label: 'Harare', color: '#CCF8FE' },
    { label: 'Alexandria', color: '#FFF5CC' },
    { label: 'Behance', color: '#DAD7FE' },
    { label: 'Dogs', color: '#CCF8FE' }
  ]
  const titles = [
    'Melbourne',
    'Brisbane',
    'Helsinki',
    'Kathmandu',
    'Memphis',
    'Kuala Lumpur',
    'Bengaluru'
  ]
  const descriptions = [
    'Your business is in a continual battle for your customers’ recognition whether you know it or not.',
    'When you enter into any new area of science, you almost always find.',
    'Your business is in a continual battle for your customers’ recognition whether you know it or not.',
    'When you enter into any new area '
  ]
  const possibleDates = [
    '22 Sep 2020',
    '23 Sep 2020',
    '01 Jun 2021',
    '28 Apr 2021',
    '01 Apr 2021',
    '05 Jan 2021',
    '11 Feb 2021',
  ]
  const possibleTimes = [
    '02:52PM',
    '01:36AM',
    '06:58PM',
    '02:41PM',
    '06:20PM',
    '04:15AM'
  ]

.root
  nav.nav
    .navTop
      .circle
    ul.links
      each val, i in new Array(navLinksCount).fill(null)
        li.navLink
          .circle
    
  main.main
    header.header
    
      .searchBar
        svg.searchIcon(
          width="18"
          height="18"
          viewBox="0 0 18 18"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        )
          path(
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M2 8C2 4.691 4.691 2 8 2C11.309 2 14 4.691 14 8C14 11.309 11.309 14 8 14C4.691 14 2 11.309 2 8ZM17.707 16.293L14.312 12.897C15.365 11.543 16 9.846 16 8C16 3.589 12.411 0 8 0C3.589 0 0 3.589 0 8C0 12.411 3.589 16 8 16C9.846 16 11.543 15.365 12.897 14.312L16.293 17.707C16.488 17.902 16.744 18 17 18C17.256 18 17.512 17.902 17.707 17.707C18.098 17.316 18.098 16.684 17.707 16.293Z" fill="black"
          )
        h5.searchTitle Search

      ul.profileSwitcher
        each val, i in new Array(4).fill(null)
          li(class={
            profileWrapper: true,
            activeProfile: i === 0
          })
            .profile
              img(src=`https://randomuser.me/api/portraits/men/${i}.jpg`)
              
    .listWrapper
      .listContainer
        h3.listHeading Telescope
        ul.list
          each val, i in new Array(3)
            - const date = possibleDates[Math.floor(Math.random() * possibleDates.length)]
            - const profilePic = `https://randomuser.me/api/portraits/women/${i}.jpg`
            - const time = possibleTimes[Math.floor(Math.random() * possibleTimes.length)]
            - const price = Math.round(Math.random() * 220) + 80
            - const formatPrice = `$${price}.00`
            - const priceColor = price < 100 ? 'red' : price < 200 ? 'blue' : 'orange'
            li.listItem
              .listCell
                img.listProfilePic(
                  src=profilePic
                )
              .listCell
                h5.listTime= date
              .listCell
                h5.listTime= time
              .listCell
                h6.listPrice(
                  style=`color: ${priceColor}`
                )= formatPrice
            
      .listContainer
        h3.listHeading Asteroids
        ul.list
          each val, i in new Array(3)
            - const date = possibleDates[Math.floor(Math.random() * possibleDates.length)]
            - const profilePic = `https://randomuser.me/api/portraits/women/${i}.jpg`
            - const time = possibleTimes[Math.floor(Math.random() * possibleTimes.length)]
            - const price = Math.round(Math.random() * 220) + 80
            - const formatPrice = `$${price}.00`
            - const priceColor = price < 100 ? 'red' : price < 200 ? 'blue' : 'orange'
            li.listItem
              .listCell
                img.listProfilePic(
                  src=profilePic
                )
              .listCell
                h5.listTime= date
              .listCell
                h5.listTime= time
              .listCell
                h6.listPrice(
                  style=`color: ${priceColor}`
                )= formatPrice
          
    .columnsWrapper
      each val, i in new Array(columnsCount).fill(null)
        .column
          - const itemsCount = 5 + Math.round(Math.random() * 4)
            each val, n in new Array(itemsCount).fill(null)
              - let tags = availableTags.filter(_ => Math.random() < 0.3)
              - tags = tags.length ? tags : [availableTags[0]]
              - const title = titles[Math.floor(Math.random() * titles.length)]
              - const paragraph = descriptions[Math.floor(Math.random() * descriptions.length)]
              - const isPoster = Math.random() < 0.5
              .feedItem    
                if isPoster
                  img.feedItemBG(
                    src=`https://picsum.photos/200/${300 + i + n}`
                  )
                div(class={
                  feedWrapper: true,
                  hasBackground: isPoster
                })
                  ul.feedTags(
                    style=`
                      --ref-margin-bottom: ${isPoster ? (100 + Math.random() * 60) : 42};
                      `
                  )
                    each val in tags
                      li.feedTag(
                        style=`background: ${val.color}`
                      )= val.label
                  h2.feedTitle !{title}
                  p.feedDesc !{paragraph}
                  if !isPoster
                    button.feedButton Detalies
View Compiled
:root {
  --ideal-viewport-width: 1600;
}

@function scaleValue($value) {
  @return calc(
    #{$value} * (clamp(350px, 100vw, 3840px) / var(--ideal-viewport-width))
  );
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

button {
  cursor: pointer;
}

body {
  font-family: 'Hind', sans-serif;
  background: #F2F2F2;
}

.root {
  display: flex;
}

// Header -------------

.header {
  padding: #{scaleValue(18)} 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.searchIcon {
  max-width: #{scaleValue(36)};
  max-height: #{scaleValue(36)};
}

.searchBar {
  display: flex;
  align-items: center;
}

.searchIcon {
  display: block;
  margin-right: #{scaleValue(8)};
}

.searchTitle {
  font-size: #{scaleValue(14)};
  color: rgba(#000, 0.72);
}

.profileSwitcher {
  display: flex;
}

.profileWrapper {
  position: relative;
  margin-right: #{scaleValue(9)};
  &:last-of-type {
    margin-right: 0;
  }
  &.activeProfile {
    &:before {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: #{scaleValue(12)};
      height: #{scaleValue(12)};
      background: #34B53A;
      border-radius: 50%;
    }
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.profile {
  width: #{scaleValue(44)};
  height: #{scaleValue(44)};
  border-radius: 50%;
  overflow: hidden;
}

// Navigation -------------

.nav {
  width: #{scaleValue(96)};
  border-top-right-radius: #{scaleValue(20)};
  border-bottom-right-radius: #{scaleValue(20)};
  height: 100vh;
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.navTop {
  height: #{scaleValue(80)};
  border-bottom: 1px solid rgba(#000, 0.12);
  margin-bottom: #{scaleValue(20)};
  display: flex;
  justify-content: center;
  align-items: center;
}

.navLink {
  margin-bottom: #{scaleValue(20)};
}

.circle {
  width: #{scaleValue(36)};
  height: #{scaleValue(36)};
  background: rgba(black, 0.12);
  border-radius: 50%;
}

// List wrapper -------------

.listWrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: #{scaleValue(50)};
}

.list {
  width: #{scaleValue(692)};
  padding: #{scaleValue(5)} #{scaleValue(40)};
  background: white;
  border-radius: #{scaleValue(10)};
}

.listHeading {
  font-size: #{scaleValue(22)};
  margin-bottom: #{scaleValue(12)};
  font-weight: 400;
  color: rgba(#000, 0.72);
}

.listItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: #{scaleValue(20)} 0;
  border-bottom: 1px solid rgba(#000, 0.12);
  &:last-of-type {
    border-bottom: 0;
  }
}

.listProfilePic {
  width: #{scaleValue(50)};
  height: #{scaleValue(50)};
  border-radius: 50%;
}

.listTime {
  font-size: #{scaleValue(18)};
  color: rgba(#000, 0.72);
  font-weight: 400;
}

.listPrice {
  width: 100%;
  font-size: #{scaleValue(22)};
  display: flex;
  justify-content: flex-end;
}

.listCell {
  width: 30%;
  display: flex;
  align-items: center;
}

// Timeline feed -------------

.main {
  padding-left: #{scaleValue(136)};
  padding-right: #{scaleValue(30)};
}

.columnsWrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.column {
  width: calc(25% - #{scaleValue(40)});
}

.feedItem {
  position: relative;
  margin-bottom: #{scaleValue(50)};
  border-radius: #{scaleValue(10)};
  overflow: hidden;
  background: white;
}

.feedDesc {
  // margin: #{scaleValue(32)} 0 0 0;
  font-size: #{scaleValue(16)};
}

.feedTags {
  margin-bottom: #{scaleValue(var(--ref-margin-bottom))};
}

.feedTag {
  display: inline-block;
  margin-right: #{scaleValue(6)};
  margin-bottom: #{scaleValue(6)};
  padding: #{scaleValue(5)} #{scaleValue(10)};
  border-radius: #{scaleValue(4)};
  font-size: #{scaleValue(15)};
  color: #111;
  
  &:last-of-type {
    margin-right: 0;
  }
}

.feedTitle {
  font-size: #{scaleValue(40)};
}

.feedItemLink {
  
}

.feedButton {
  margin-top: #{scaleValue(32)};
  font-size: #{scaleValue(20)};
  color: #4339F2;
  background: none;
  border: none;
}

.feedItemBG {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.feedWrapper {
  padding: #{scaleValue(16)} #{scaleValue(20)};
  position: relative;
  z-index: 2;
  &.hasBackground {
    background: rgba(black, 0.3);    
    color: white;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.