Skip to content

Instantly share code, notes, and snippets.

@abdurraufahmad

abdurraufahmad/darul-quran-dibah-ui-design.markdown

Last active September 15, 2019 16:01
Show Gist options
  • Save abdurraufahmad/d2a2a98a5e29fe661989f246bdbbb68e to your computer and use it in GitHub Desktop.
Save abdurraufahmad/d2a2a98a5e29fe661989f246bdbbb68e to your computer and use it in GitHub Desktop.
Download ZIP
Darul Quran Dibah UI Design
Raw
index.pug
mixin card
.card
.title Friends
span 700
.thumb-wrapper
.thumb-unit
.name Ustaz Abubakar Muhd
.thumb-unit
.name Ustaz Abubakar
.thumb-unit
.name Ustaz Kabir Wasagu
.thumb-unit
.name Alrm. Anas
.thumb-unit
.name Alrm. Anas Uciri
.thumb-unit
.name Alrm. Abdullah
.thumb-unit
.name Alrm. Nasiru
.thumb-unit
.name Alrm. Sulaiman
header
.navigation
.icon: i.fa.fa-align-left
.text DARUL QURAN RIBAH
.awesome-form
input(type="text" placeholder='search...')
.other
.user-info
.face
.text Darul Quran Ribah
.text Home
.text Find Friends
.other-icons
i.fa.fa-user
i.fa.fa-comment
i.fa.fa-globe
i.fa.fa-align-right
.main-content
.cover
.face
.sub-navigation
a(href="#") Feed
a(href="#") About
a(href="#") Friends
a(href="#") Photos
a(href="#") More
.col-wrapper
.col-50
.card
.text
span: i.fa.fa-graduation-cap
| Darul Quran Ribah, Student
.text
span: i.fa.fa-home
| Lives in Kebbi, Nigeria
.text
span: i.fa.fa-map
| Student's, Nigeria
+card
+card
.col-50
.card.status
.icon-wrapper
a(href="#"): i.fa.fa-edit
span Status
a(href="#"): i.fa.fa-photo
span Photos/Videos
.message
input(type="message")
label Write Something.....
.card.feed-1
.user
.face
.text
span Darul Quran Ribah
| posted a status
.time Dec 25
.user-status Assalamu Alaikum
Takaitaccen tarihin mAkarantar Alhafiz Abubakar Muhammad Ribah.
Wannan makaranta ta fara karatu daga zauren gidan Mal. Abubakar Ribah. Da Dalibbai sukayi yi yawa aka dawo masallaci kofar gidan Alh.bello daga Nan aka zabi Dalibbai masu hazaka suka fara hardar Alqur'an azauren malam ashekara ta 1992, bayannan ganin cigaba da akasamu a fannin Alqur'an da Tajweed 'yan uwa da abokai suka fara kawo 'ya'yansu masu masauki acikin gari.
Bayan haka baki wadanda basu da masauki acikin gari suka fara kawo nasu yara.Wannan ya kawo tunanin tanada masu masaukai. Wanda ahalin yanzu wanan makaranta Tana da Dalibbai na cikin gari Yara maza da mata(956) matan Aure (407) da Kuma bakin Dalibbai (1,576) wadanda suka fito daga kananan Hukumomin wannan Jaha da sauran Jahohin Nigeria. Wanda yanzu haka wanan makaranta Tana da Dalibbai Yara Maza da mata da Kuma matan Aure 2,936.
.reaction
.text Unlinke
.text Comment
.text Share
.reaction-info
.text
span: i.fa.fa-heart
| Kebbi State, Nigeria
span and
| 50 otheres
span Like this
.comment
.face
.comment-form
input(type="text")
label Write a Comment
.icon-wrap
i.fa.fa-camera
i.fa.fa-smile-o
.card.feed-2
.user
.face
.text
span Darul Quran Ribah
| uploaded a photo
.time Dec 25
.caption Yesterday was freaking Good #5Star!!!
.person-image
.card.feed-2
.user
.face
.text
span Darul Quran Ribah
| uploaded a photo
.time Dec 25
.caption Student's
.person-image
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Raw
style.sass
//General Imports
@import url('https://fonts.googleapis.com/css?family=Arima+Madurai:300,400,700,900')
//variables
$blue: #1b215f
$black: #000
$white: #fff
$cream: #ececec
$grey: #959595
$me: url(https://scontent.facc5-1.fna.fbcdn.net/v/t1.0-9/42611772_10156852010122743_5685230802212749312_n.jpg?_nc_cat=104&_nc_ht=scontent.facc5-1.fna&oh=d7bcf16b2ec7460fb27d31fb70e9d05b&oe=5C422567)
$girl-beach: url(https://s-media-cache-ak0.pinimg.com/736x/2f/20/a8/2f20a803c6d0f7af2241dfb7edfd9559.jpg)
$nas: url(https://cdn.theatlantic.com/assets/media/mt/culture_test/nas%20def%20jam%20hamilton%20330.jpg)
$lebron: url(http://a2.espncdn.com/combiner/i?img=%2Fphoto%2F2018%2F0701%2Fnba_lebron_james1x_1296x729.png)
//General Styling
*
box-sizing: border-box
body
font-family: 'Arima Madurai', cursive
background: $cream
h1,h2,h3,h4,h5,h6,p
margin: 0
padding: 0
a
text-decoration: none
color: black // unless stated otherwise
//layout
.col-wrapper
width: 100%
display: flex
margin-top: 30px
.col-50
width: 48%
margin: 0px 1%
//styling
header
width: 100%
background: $blue
color: white
display: flex
justify-content: space-between
align-items: center
padding: 15px 20px
.navigation
display: flex
font-size: 20px
.icon
cursor: pointer
.text
text-transform: uppercase
margin-left: 20px
.awesome-form
width: 400px
height: 30px
border-radius: 50%
display: flex
position: relative
font-size: 20px
input
width: 100%
padding: 10px
border-radius: 20px
background: white
font:
size: 15px
weight: 300
letter-spacing: 1px
label
color: black
position: absolute
top: 50%
transform: translateY(-50%)
right: 20px
.other
display: flex
justify-content: space-between
align-items: center
font-size: 20px
.user-info
display: flex
align-items: center
.face
width: 40px
height: 40px
box-shadow: 0px 4px 20px rgba($black, 0.4)
background:
image: $me
size: cover
position: center
repeat: no-repeat
border-radius: 50%
background:
image: $me
.text
margin-left: 20px
.other-icons
margin-left: 30px
i
margin-left: 20px
cursor: pointer
.main-content
width: 1400px
max-width: 100%
height: 300px
margin: 30px auto
.cover
width: 100%
position: relative
background:
image: $lebron
repeat: no-repeat
size: cover
position: top center
&:before
content: ""
display: block
padding-top: 40%
.face
width: 250px
height: 250px
border-radius: 50%
display: inline-block
border: 5px solid white
box-shadow: 0px 4px 15px rgba($black, 0.4)
position: absolute
top: 100%
left: 50px
transform: translateY(-80%)
background:
image: $me
size: cover
position: center
.sub-navigation
width: 50%
margin-left: 50%
padding: 20px 0px
a
display: inline-block
font-size: 18px
font-weight: 900
margin-left: 40px
.card
background: $white
width: 100%
padding: 20px
border-radius: 5px
box-shadow: 0px 3px 13px rgba($black, 0.2)
margin-bottom: 20px
&.about
font-size: 18px
.text
margin-bottom: 10px
span
display: inliine-block
margin-right: 10px
color: $grey
.card
.title
font-size: 30px
span
color: $blue
font-weight: 900
margin-left: 10px
font-size: 18px
.thumb-wrapper
width: 100%
&:after
content: ""
display: block
clear: both
.thumb-unit
width: 25%
cursor: pointer
background:
color: orange
size: cover
position: center
repeat: no-repeat
float: left
position: relative
&:before
content: ""
display: block
padding-top: 100%
&:hover .name
opacity: 1
transform: translate(-50%, -50%)
.name
position: absolute
top: 50%
left: 50%
transform: translate(-50%,-20%)
color: white
display: inline-block
background: rgba($blue, 0.8)
text-align: center
padding: 10px
width: 100px
height: 100px
justify-content: center
align-items: center
border-radius: 100%
display: flex
transition: all ease-in-out 300ms
opacity: 0
&:nth-child(1)
background-image: $nas
&:nth-child(2)
background-image: url(http://www.utne.com/~/media/Images/UTR/Editorial/Articles/Online%20Articles/2014/04-01/Albert%20Einstein%20the%20Humanitarian/Albert-Einstein%20jpg.jpg)
&:nth-child(3)
background-image: url(http://www.newsmax.com/Newsmax/files/b9/b9b6cb6e-3967-431a-b931-d6d001911860.jpg)
&:nth-child(4)
background-image: url(https://i.dailymail.co.uk/i/pix/2015/03/03/2649026100000578-2977946-image-m-62_1425408123065.jpg)
&:nth-child(5)
background-image: $me
&:nth-child(6)
background-image: $lebron
&:nth-child(7)
background-image: url(http://www.yorokobu.es/wp-content/uploads/1pablo.jpeg)
&:nth-child(8)
background-image: url(http://images.huffingtonpost.com/2016-01-18-1453130532-1976774-MartinLutherKingspeaking.jpg)
.status
width: 100%
.icon-wrapper
display: flex
justify-content: space-between
font-size: 20px
span
margin-left: 10px
color: $blue
font-weight: 900
.message
width: 100%
background: red
position: relative
margin-top: 20px
overflow: hidden
input
width: 100%
height: 60px
border: none
outline: none
&:focus + label
left: 100%
label
position: absolute
top: 50%
left: 20px
font-size: 20px
transform: translateY(-50%)
transition: all ease-in-out 300ms
.user
display: flex
align-items: center
margin-bottom: 20px
.face
width: 50px
height: 50px
background: red
margin-right: 20px
border-radius: 50%
box-shadow: 0px 3px 15px rgba($black, 0.4)
background:
image: $me
size: cover
position: center
.text
font-size: 18px
span
color: $grey
font-weight: 900
.time
font-size: 14px
color: $grey
font-weight: 900
.user-status
font-size: 20px
.reaction
display: flex
margin-top: 20px
.text
font:
size: 18px
weight: 900
color: $blue
margin-right: 20px
.reaction-info
font:
size: 15px
weight: 900
color: $blue
.text
span
color: $grey
margin-left: 10px
&:first-child
margin-left: 0px
font-size: 20px
color: red
.comment
display: flex
justify-content: space-between
align-items: center
.face
width: 40px
height: 40px
background:
image: $me
size: cover
position: center
border-radius: 50%
.comment-form
background: red
flex: 1
width: 70%
margin: 0 10px
position: relative
overflow: hidden
input
width: 100%
padding: 10px
&:focus + label
left: 100%
opacity: 0
label
position: absolute
top: 50%
left: 20px
transform: translateY(-50%)
font-weight: 900
transition: all ease-in-out 300ms
opacity: 1
.icon-wrap
i
font-size: 20px
margin-left: 10px
color: $grey
.caption
font-size: 18px
.person-image
width: 100%
margin-top: 20px
background:
image: $lebron
size: cover
repeat: no-repeat
position: center
&:before
content: ""
display: block
padding-top: 100%
@media (max-width: 1200px)
.other .user-info
display: none
.main-content .cover
&:before
padding-top: 40%
@media (max-width: 1100px)
.awesome-form
display: none
.main-content .cover .face
transform: translateY(-120%)
width: 150px
height: 150px
.sub-navigation
width: 100%
margin-left: 0
text-align: center
.col-wrapper
display: block
.col-50
width: 95%
margin: 0 auto 30px auto
@media (max-width: 640px)
.main-content .cover .face
width: 100px
height: 100px
border-radius: 50%
top: 50%
left: 50%
transform: translate(-50%, -50%)
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment