azzBeo

azzBeo.markdown

azzBeo

A Pen by Pan Stav Geffen on CodePen.

License.

index.html

<div class="card">
	
  <header>
  	<img class="profile" src="https://s3.amazonaws.com/uifaces/faces/twitter/holdenweb/128.jpg">
    
    <div class="credentials">
      <div class="name">ישראל ישראלי</div>
      <div class="description">כמה וכמה מילים לגבי ישראל ישראלי</div>
      
    </div>
    
  </header>
  
  <main>
  	
    <ul class="props">
      <li class="directMessage fa fa-newspaper-o">מאמרים</li>
      <li class="directMessage fa fa-envelope-o">פנייה ישירה</li>
      <li class="personalWebsite fa fa-home">אתר אינטרנט</li>
      <li class="certificates fa fa-certificate">תעודות</li>
    </ul>
    
  </main>
  
</div>

style.sass

body
	margin-top: 50px
	direction: rtl
	background-color: grey

$cardWidth: 420px
$profileOffset: 24px
  
.card  
	width: $cardWidth
	margin: auto
	background-color: white

	box-shadow: -1px 1px 5px #3F3F3F
  
	$headerColor: #D3D3D3

	header
		$headerHeight: 100px 
    
		height: $headerHeight
		margin-bottom: $profileOffset*2
		background-color: $headerColor
    
		.profile
			float: right
			height: $headerHeight
			width: $headerHeight
			position: relative
			top: $profileOffset
			right: $profileOffset
      
		.credentials
			float: right
			margin:
				top: $profileOffset
				right: $profileOffset*1.5
  
		.name
			font-weight: bold
			margin-bottom: $profileOffset/3
  
		.description
			font-size: .8em
  
	main
		width: $cardWidth
		min-height: 200px
    
		.props
			margin-right: $profileOffset/4
			padding-right: 0px
			li
				display: block
				margin-bottom: .7em
				cursor: pointer
      
				font-size: .9em
				color: darken($headerColor, 40%)
      
				&:before
					color: $headerColor
      
				&:hover
					color: #1E364E
					&:before
						color: darken($headerColor, 40%)
  
		.fa:before
			padding-left: $profileOffset/4