-
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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.