Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/hp-portfolio-design.markdown

Last active March 1, 2019 06:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save harunpehlivan/973355e947a1fbe02ed4d67f1c52009f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save harunpehlivan/973355e947a1fbe02ed4d67f1c52009f to your computer and use it in GitHub Desktop.
Download ZIP
HP- Portfolio design
Raw
hp-portfolio-design.markdown

HP- Portfolio design

Started building my portfolio on CodePen, then finished it off with content locally, so thought I'd add the finishing touches to the CodePen version!

A Pen by HARUN PEHLİVAN on CodePen.

License.

Raw
index.html
<div class="topbar">
<h1> HARUN PEHLİVAN</h1>
<ul class="social">
<li><a class="fa fa-2x fa-twitter" href="https://twitter.com/HTERCUMANP" target="_blank" title="Twitter" alt="Twitter"></a></li>
<li><a class="fa fa-2x fa-codepen" href="https://codepen.io/harunpehlivan" target="_blank" title="Codepen" alt="CodePen Profile"></a></li>
<li><a class="fa fa-2x fa-github" href="https://gist.github.com/harunpehlivan" target="_blank" title="Github" alt="Github"></a></li>
<li><a class="fa fa-2x fa-envelope-o" href="[email protected]" target="_blank" title="Contact" alt="Contact"></a></li>
<li><a class="fa fa-2x fa-rss" href="https://codepen.io/harunpehlivan/posts/published" target="_blank" title="Blog" alt="Blog"></a></li>
</ul>
</div>
<div class="fa fa-times fa-2x close">&nbsp;</div>
<div class="wrapper" id="portfolio">
<div class="project one" id="bcmcr">
<h2 class="title">TERCUMAN EĞİTİM BİLİM TEKNİK ARAŞTIRMA GELİŞTİRME MERKEZİ</h2>
<div class="content">
<a href="http://tebimtebitagem.ticiz.com" target="_blank">
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebimtebitagem.ticiz.com?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebimtebitagem.ticiz.com?w=360" alt="TERCUMAN BİLİŞİM MERKEZİ " title="TERCUMAN BİLİŞİM MERKEZİ"/>
</picture>
</a>
<a href="http://harunpehlivantebimtebitagem.business.site/" class="button" target="_blank">TEBİTAGEM <i class="fa fa-arrow-right"></i></a>
<div class="details">
<b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, PHP | <b>Plugins:</b> <a href="https://github.com/harunpehlivan" target="_blank">HARUN PEHLİVAN</a>
</div>
<p>The <a href="http://tebimtebitagem.ticiz.com" target="_blank">2008</a><a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a></p>
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebimtebitagem.ticiz.com?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" alt="TERCUMAN BİLİŞİM MERKEZİ" title="TERCUMAN BİLİŞİM MERKEZİ"/>
</picture>
<p>7 24 ONLİNE EDU ARGE PROJECT</p>
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebimtebitagem.ticiz.com?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebimtebitagem.ticiz.com?w=360" alt="TERCUMAN INFORMATICS CENTER"/>
</picture>
<p>TERCUMAN INFORMATICS CENTER TERCUMAN EDUCATION, SCIENCE, TECHNICAL RESEARCH AND DEVELOPMENT CENTER</p>
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebimtebitagem.ticiz.com?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebimtebitagem.ticiz.com?w=360" alt="TEBİM"/>
</picture>
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.business.site?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.business.site?w=360" class="left" alt="TERCUMAN EĞİTİM BİLİM TEKNİK ARAŞTIRMA GELİŞTİRME MERKEZİ"/>
</picture>
<picture class="clearfix">
<source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" class="right" alt="TEBİM"/>
</picture>
<p>EĞİTİM BİLİM TEKNİK ARGE PROJE <a href="https://1017556.site123.me/" target="_blank">7 24</a> ONLİNEYİZ</p>
</div>
</div>
<div class="project two" id="edition-records">
<h2 class="title"> HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP </h2>
<div class="content">
<a href="https://harunpehlivantebimtebitagem.site123.me/" target="_blank">
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2F1017556.site123.me?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" alt=" HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP " title="HP IT GROUP"/>
</picture>
</a>
<a href="https://harunpehlivantebimtebitagem.site123.me" class="button" target="_blank"> HP IT GROUP <i class="fa fa-arrow-right"></i></a>
<div class="details">
<b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, PHP
</div>
<p><a href="https://harunpehlivantebimtebitagem.site123.me" target="_blank">HP IT GROUP</a> EĞİTİM BİLİM TEKNİK ARGE PROJE</p>
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" alt="HP IT GROUP"/>
</picture>
<p> 7+24 ÇALIŞIYORUZ</p>
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" class="left" alt="7 24"/>
</picture>
<picture class="clearfix">
<source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" class="right" alt="ONLİNE"/>
</picture>
<p>GÜNÜMÜZÜN İMKANLARINI KULLANARAK TÜKETMEYE DEĞİL ÜRETMEK İÇİN</p>
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" alt="FARKLIYIZ"/>
</picture>
<p>MİSYONUMUZLA VİZYONUMUZLA DEĞİŞTİRMEYE GELİŞTİRMEYE VARIZ</p>
</div>
</div>
<div class="project three" id="uberbooths">
<h2 class="title">HP IT GROUP</h2>
<div class="content">
<a href="http://harunpehlivantebimtebitagem.sitem.xyz" target="_blank">
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" alt="YENİ ÇALIŞMA KONSEPTİ" title="YENİ KONSEPTİMİZ"/>
</picture>
</a>
<a href="http://harunpehlivantebimtebitagem.sitem.xyz" class="button" target="_blank">HP IT GROUP <i class="fa fa-arrow-right"></i></a>
<div class="details">
<b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, Javascript, PHP | <b>Plugins:</b> <a href="https://tr.gravatar.com/tebm" target="_blank">Gravatar</a>
</div>
<p><a href="http://harunpehlivantebimtebitagem.sitem.xyz" target="_blank">HP IT GROUP</a> DEĞİŞEN GELİŞEN ÇALIŞMA KONSEPTİMİZLE VARIZ</p>
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" alt=""/>
</picture>
<p>İNOVASYONUMUZ
her geçen gün yeni fikirlere şahid olmaktayız bu yeni fikirlere sahip olmak için
yeni değişen gelişen çalışma konseptimizdir</p>
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" alt="İNOVASYONUMUZ"/>
</picture>
<p>YENİ FİKİR EDİNMELİYİZ DEĞİŞMELİYİZ
GELİŞMELİYİZ</p>
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" alt="KONSEPTİMİZ"/>
</picture>
<p>VİZYON MİSYON SAHİBİYİZ</p>
</div>
</div>
<div class="project four" id="tim-garland">
<h2 class="title">WEB ÇALIŞMALARIM</h2>
<div class="content">
<a href="https://webcalismalarim.glitch.me" target="_blank">
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" alt="WEB ÇALIŞMALARIM" title="WEB ÇALIŞMALARIM"/>
</picture>
</a>
<a href="https://webcalismalarim.glitch.me" class="button" target="_blank">WEB ÇALIŞMALARIM <i class="fa fa-arrow-right"></i></a>
<div class="details">
<b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, PHP | <b>Plugins:</b> <a href="https://gist.github.com/harunpehlivan" target="_blank">HARUN PEHLİVAN</a>
</div>
<p><a href="https://webcalismalarim.glitch.me" target="_blank">WEB ÇALIŞMALARIM</a> CODEPEN ÇALIŞMALARIM<a href="https://webcalismalarim.glitch.me" target="_blank">CODEPEN'</a> BURADA YER ALAN TÜM ÇALIŞMALARIM</p>
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" alt="WEB ÇALIŞMALARIM"/>
</picture>
<p>CODEPEN DE YER ALAN EB ÇALIŞMALARIM</p>
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" alt="WEB ÇALIŞMALARIM"/>
</picture>
<p>CODEPEN PLATFORMUNDA DERLENEN ÇALIŞMALARIM YER ALMAKTADIR</p>
<picture>
<source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" media="(max-width: 480px)">
<img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" alt="WEB ÇALIŞMALARIM"/>
</picture>
<p>CODEPEN DE DERLENEN ÇALIŞMALARIM</p>
</div>
</div>
<div class="project five" id="soundcloud-visualiser">
<h2 class="title">Soundcloud Data</h2>
<div class="content">
<a href="https://55sketch.github.io/soundcloud" target="_blank">
<picture>
<source srcset="https://55sketch.github.io/images/soundcloud_mobile.jpg" media="(max-width: 480px)">
<img src="https://55sketch.github.io/images/soundcloud.jpg" alt="Soundcloud Visualiser website screenshot" title="Click Image To Visit Site"/>
</picture>
</a>
<a href="https://55sketch.github.io/soundcloud" class="button" target="_blank">Visit Site <i class="fa fa-arrow-right"></i></a>
<div class="details">
<b>Platform:</b> Static | <b>Languages:</b> HTML, CSS, JQuery, JSON, API | <b>Plugins:</b> <a href="https://github.com/soundcloud/SoundCloud-API-jQuery-plugin" target="_blank">SoundCloud API JQuery Plugin</a>, <a href="https://isotope.metafizzy.co" target="_blank">Isotope</a>
</div>
<p>Built as an exercise in learning how to utilise Web APIs, my <a href="https://55sketch.github.io/soundcloud" target="_blank">SoundCloud Data Visualiser</a> allows users to log in with their SoundCloud account and view their stats for Plays, Downloads and Favourites</p>
<p>The stats can be sorted using the Isotope plugin, and the relative size of the bars can be adjusted to suit the user's taste</p>
<p>If you don't have a SoundCloud account, you can view a basic version of the visualiser on my <a href="https://codepen.io/nickmoreton/pen/Eveaq" target="_blank">CodePen account</a></p>
</div>
</div>
</div>
Raw
script.js
$(function(){
var topbar = $('.topbar').height()+20;
var height = $(window).innerHeight();
var width = $(window).innerWidth();
if(580 >= width){
$('.fa-2x').removeClass('fa-2x').addClass('fa-lg');
}
else {
$('.project').css({'min-height':height-topbar, 'height':'auto'});
}
$('.title').fitText(0.9,{ maxFontSize: '28px' });
if ( window.location.hash ) {
$(window.location.hash).click();
}
$('.social').tooltip();
});
if(screen && screen.width > 580) {
$(window).resize(function(){
var height = $(window).innerHeight();
var topbar = $('.topbar').height()+20;
$('.project').css({'min-height':height-topbar});
});
}
$('body').on('click', '.project', function(){
$(this).addClass('selected').siblings().addClass('deselected');
window.location.hash = $(this).attr('id');
$(this).siblings().children('.title').hide();
$('.close').fadeIn();
setTimeout(function(){
$('.selected').children('.content').fadeIn();
},500);
});
$('body').on('click', '.close', function(){
$(this).fadeOut();
window.location.hash = '';
$('.selected').children('.content').fadeOut();
setTimeout(function(){
$('.selected').siblings().removeClass('deselected');
$('.selected').removeClass('selected');
setTimeout(function(){
$('.title').fadeIn();
$('.title').fitText(0.9,{ maxFontSize: '28px' });
},500);
},500);
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/jquery.fittext.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/picturefill.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/jquery-ui.js"></script>
Raw
style.less
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
@base: #00ADD5;
@complement1: lighten(spin(@base, 180),15%);
@complement2: lighten(spin(@base, 180),10%);
@complement3: lighten(spin(@base, 205),30%);
@complement4: lighten(spin(@base, 205),20%);
@lighten1: lighten(@base, 15%);
@lighten2: lighten(@base, 25%);
@lighten3: lighten(@base, 30%);
@projects: 5;
* {
box-sizing:border-box;
}
body {
font-size:20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position:relative;
}
img {
max-width:100%;
}
.topbar {
padding:10px 30px;
height:106px;
a, a:link, a:visited {
color:black;
text-decoration:none;
display:block;
}
a:hover, a:active {
color:#333;
}
}
h1 {
float:left;
margin:20px 0;
}
h2 {
font-size:30px;
}
.social {
float:right;
margin:24px 0;
text-align:center;
padding:0;
}
.social li {
display:inline-block;
margin:0 8px;
}
.wrapper {
position:relative;
width:100%;
overflow-x:hidden;
}
.project {
float:left;
transition: width 0.5s ease;
overflow:auto;
cursor:pointer;
position:relative;
width:calc(100% / @projects);
height:0;
}
.selected {
cursor:auto;
width:100%;
}
.deselected {
width:0;
}
.close {
position:absolute;
right:50px;
top:158px;
color:white;
cursor:pointer;
display:none;
z-index:9999;
max-width:40px;
}
.title {
display:block;
padding:5px 10px;
background:white;
left:0;
margin-top:50px;
width:90%;
text-align: right;
}
.project:hover > .title, .selected > .title {
color:white;
}
.content {
width:80%;
margin:auto;
display:none;
background:white;
padding:20px;
margin-top:50px;
margin-bottom:30px;
line-height: 1.5;
font-weight: 300;
text-align: justify;
}
.details {
margin: 10px 0;
background:#eee;
padding:5px;
border-radius: 3px;
font-size: 0.85em;
font-family: 'Source Code Pro', "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
font-weight: 300;
text-align: left;
}
.details b {
font-weight: 500;
}
a.button {
color:white !important;
text-transform: uppercase;
text-decoration:none;
padding:10px;
border-radius: 3px;
margin:10px 0;
display:inline-block;
font-weight: bold;
}
.ui-tooltip {
padding: 5px 10px;
color: black;
border-radius: 3px;
font: bold 12px "Helvetica Neue", Sans-Serif;
text-transform: uppercase;
box-shadow: none;
border:solid 2px black;
}
.project:nth-of-type(8n+1) {
background:@complement1;
border-top:5px solid darken(@complement1,10);
a, a:link, a:visited {
color:@complement1;
}
a:hover, a:active {
color:darken(@complement1,10);
}
a.button {
background:@complement1;
&:hover{
background:darken(@complement1,10);
}
}
}
.project:nth-of-type(8n+1):hover > .title, .project:nth-of-type(8n+1).selected > .title {
background:darken(@complement1,10);
}
.project:nth-of-type(8n+2) {
background:@complement2;
border-top:5px solid darken(@complement2,10);
a, a:link, a:visited {
color:@complement2;
}
a:hover, a:active {
color:darken(@complement2,10);
}
a.button {
background:@complement2;
&:hover{
background:darken(@complement2,10);
}
}
}
.project:nth-of-type(8n+2):hover > .title, .project:nth-of-type(8n+2).selected > .title {
background:darken(@complement2,10);
}
.project:nth-of-type(8n+3) {
background:@base;
border-top:5px solid darken(@base,10);
a, a:link, a:visited {
color:@base;
}
a:hover, a:active {
color:darken(@base,10);
}
a.button {
background:@base;
&:hover{
background:darken(@base,10);
}
}
}
.project:nth-of-type(8n+3):hover > .title, .project:nth-of-type(8n+3).selected > .title {
background:darken(@base,20);
}
.project:nth-of-type(8n+4) {
background:@lighten1;
border-top:5px solid darken(@lighten1,10);
a, a:link, a:visited {
color:@lighten1;
}
a:hover, a:active {
color:darken(@lighten1,10);
}
a.button {
background:@lighten1;
&:hover{
background:darken(@lighten1,10);
}
}
}
.project:nth-of-type(8n+4):hover > .title, .project:nth-of-type(8n+4).selected > .title {
background:darken(@lighten1,20);
}
.project:nth-of-type(8n+5) {
background:@lighten2;
border-top:5px solid darken(@lighten2,10);
a, a:link, a:visited {
color:@lighten2;
}
a:hover, a:active {
color:darken(@lighten2,10);
}
a.button {
background:@lighten2;
&:hover{
background:darken(@lighten2,10);
}
}
}
.project:nth-of-type(8n+5):hover > .title, .project:nth-of-type(8n+5).selected > .title {
background:darken(@lighten2,20);
}
.project:nth-of-type(8n+6) {
background:@lighten3;
border-top:5px solid darken(@lighten3,10);
a, a:link, a:visited {
color:@lighten3;
}
a:hover, a:active {
color:darken(@lighten3,10);
}
a.button {
background:@lighten3;
&:hover{
background:darken(@lighten3,10);
}
}
}
.project:nth-of-type(8n+6):hover > .title, .project:nth-of-type(8n+6).selected > .title {
background:darken(@lighten3,20);
}
.project:nth-of-type(8n+7) {
background:@complement3;
border-top:5px solid darken(@complement3,10);
a, a:link, a:visited {
color:@complement3;
}
a:hover, a:active {
color:darken(@complement3,10);
}
a.button {
background:@complement3;
&:hover{
background:darken(@complement3,10);
}
}
}
.project:nth-of-type(8n+7):hover > .title, .project:nth-of-type(8n+7).selected > .title {
background:darken(@complement3,20);
}
.project:nth-of-type(8n+8) {
background:@complement4;
border-top:5px solid darken(@complement4,10);
a, a:link, a:visited {
color:@complement4;
}
a:hover, a:active {
color:darken(@complement4,10);
}
a.button {
background:@complement4;
&:hover{
background:darken(@complement4,10);
}
}
}
.project:nth-of-type(8n+8):hover > .title, .project:nth-of-type(8n+8).selected > .title {
background:darken(@complement4,20);
}
.left {
display:block;
width:49%;
margin-left:0;
margin-right: 1%;
float:left;
}
.right {
display:block;
width:49%;
margin-left: 1%;
margin-right:0;
float:left;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
@media screen and (max-width:580px){
.content {
width:95%;
margin-top:30px;
padding: 10px;
}
h1 {
margin:5px auto;
text-align:center;
display:block;
float:none;
}
h2 {
font-size:18px;
}
.social {
margin:5px auto;
float:none;
}
.title {
margin:20px 0;
}
.close {
right:0px;
top:145px;
}
.project {
width:100%;
border-top:none !important;
height:auto;
}
.deselected {
height:0;
min-height:0;
}
.left, .right {
width:100%;
float:none;
margin:10px 0;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment