Created
July 21, 2017 06:45
-
-
Save alma4rebi/b9f0fb3d51abe02fbaa2950550fa4647 to your computer and use it in GitHub Desktop.
Card UI Portfolio Edit 2017.07.21
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- card ui --> | |
<div class="con"> | |
<div class="card"> | |
<img src="https://scontent-mad1-1.cdninstagram.com/t51.2885-19/s150x150/15535128_783417585141021_1541703662227685376_a.jpg" alt="AlmaGrebi" title="AlmaGrebi"> | |
<h1>AlmaGrebi</h1> | |
<h2> Front End Developer & UI/UX</h2> | |
<br> | |
<!-- <div class="skills"> --> | |
<p class="lang-bar">HTML</p> <div id="bars"><span class="html bar"></span></div> | |
<p class="lang-bar">CSS</p> <div id="bars"><span class="css bar"></span></div> | |
<p class="lang-bar"> JS </p><div id="bars" ><span class="js bar"></span></div> | |
<p class="lang-bar" title="Git">Git</p><div id="bars"><span class="git bar"></span></div> | |
<p class="lang-bar">Linux</p> | |
<div id="bars"><span class="linux bar"></span></div> | |
<!-- </div> --> | |
<br> | |
<button>Hire Me</button> | |
<br> | |
<div class="contact"> | |
<a href="https://www.facebook.com/alma4rebi" target="_blank" title="Facebook's AlmaGrebi" alt="AlmaGrebi"><i class="fa fa-facebook-official" aria-hidden="true "></i></a> | |
<a href="https://twitter.com/alma4rebi" target="_blank" title="Twitter" alt="AlmaGrebi"><i class="fa fa-twitter" aria-hidden="true"></i></a> | |
<a href="https://codepen.io/alma4rebi/" target="_blank" title="Codepen" alt="AlmaGrebi"><i class="fa fa-codepen" aria-hidden="true"></i></a> | |
<a href="https://www.linkedin.com/in/alma4rebi/" target="_blank" title="Linkedin" alt="AlmaGrebi"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a> | |
<a href="https://github.com/alma4rebi" target="_blank" title="Github" alt="AlmaGrebi"><i class="fa fa-github" aria-hidden="true"></i></a> | |
<a href="[email protected]" target="_blank" title="envelope" alt="AlmaGrebi"><i class="fa fa-envelope" aria-hidden="true"></i></a> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Fonts */ | |
@import url('https://fonts.googleapis.com/css?family=Amaranth|Changa+One|Comfortaa|Concert+One|Merriweather|Rozha+One'); | |
/* End Fonts */ | |
*{transition: all .3s linear} | |
body{ | |
background-color: #fbc2eb; | |
background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);; | |
/* font-family: 'Merriweather', serif; */ | |
/* font-family: 'Concert One', cursive; */ | |
font-family: 'Comfortaa', cursive; | |
background-repeat: no-repeat; | |
background-size: cover; | |
} | |
.card { | |
width: 700px; | |
height: 700px; | |
background: rgba(255, 255, 255, 0.56); | |
margin: 10px auto 0; | |
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); | |
padding: 20px; | |
text-align: center; | |
border-radius: 5px; | |
position: relative; | |
z-index: 1; | |
} | |
img { | |
margin-top: 10px; | |
border-radius: 50%; | |
width: 150px; height: 150px; | |
outline: none; | |
overflow: hidden; | |
} | |
h1 {margin-top: 10px; color: #222} | |
h2 {font-size: 80%; margin-top: -10px; color: #333} | |
p {line-height: 2} | |
.lang-bar {width:15%;} | |
#bars { | |
width: 100%; | |
height: 1.1%; | |
/* background: #EEE; */ | |
margin: 10px; | |
border-radius: 10px; | |
position: relative; | |
} | |
.bar{ | |
width: 100%; height: 100%; | |
z-index: 1; | |
position: absolute; | |
top:0; left:0; | |
border-radius: 10px; | |
} | |
.html{ | |
background: linear-gradient(to right, #ffc5cf, #ff2d55); | |
width: 80%; | |
} | |
.css{ | |
background: linear-gradient(to right, #9deaaa, #3cd656 50%); | |
width: 90%;} | |
.js{ | |
background: linear-gradient(to right, #78ffd4, #02ffae); | |
width: 50%; | |
} | |
.git{ | |
background: linear-gradient(to right, #ffe789, #ffd014); | |
width: 65%; | |
} | |
.linux { | |
background: linear-gradient(to right, #b6b5ed, #5856d6); | |
width: 75%; | |
} | |
.lang-bar{ | |
margin:0; padding: 0; | |
} | |
button, | |
button::after, | |
button::before{ | |
transition: all 0.3s; | |
content: ''; | |
position: absolute; | |
box-sizing: border-box; | |
cursor: pointer; | |
} | |
button{ | |
background: transparent; | |
border: 3px solid #333; | |
color: #333; | |
padding: .7em 3em; | |
position: relative; | |
border:none; | |
background-color: #EEE; | |
margin-top: 25px; | |
font-size: 90%; | |
outline: none; | |
border-radius: 5px; | |
font-family: 'Comfortaa', cursive; | |
} | |
button::before, | |
button::after{ | |
top:0; | |
width: 15%; height:100%; | |
border: 0 solid transparent; | |
transition: .3s; | |
} | |
button::before{ | |
left: 0px; | |
border-top: 3px solid ; | |
} | |
button::after { | |
border-bottom: 3px solid; | |
right: 0px; | |
} | |
button:hover:before, | |
button:hover:after{width: 100%; border-radius: 5px; } | |
button:active:before {margin-top: 2px;} | |
button:active:after {margin-top: -2px;} | |
/* contact */ | |
.contact{ | |
width:100%; | |
/* height: 10%; */ | |
margin-top: 5%; | |
} | |
.contact a {margin: 7px; font-size: 130%} | |
a, | |
a:link, | |
a:active, | |
a:visited, | |
a:hover { | |
color: #000; | |
text-decoration: none; | |
transition: .4s; | |
position: relative; | |
} | |
a:hover { | |
opacity: .90; | |
transform: scale(2.2, 2.2); | |
margin-left: 30px; | |
margin-right: 30px; | |
} | |
a { | |
color: #900; | |
text-decoration: none; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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