Permalink
Browse files

changing icons

  • Loading branch information...
1 parent 2cd11a0 commit 9a84cd0b9ee202fbf176604a3f429455076368e5 @rodbeh committed Dec 29, 2013
Showing with 37 additions and 34 deletions.
  1. +35 −32 public/css/main.css
  2. +2 −2 views/home.erb
View
@@ -54,7 +54,6 @@ textarea {
font-family: "Helvetica", "Arial", Sans;
font-weight: normal
}
-.header-tab h1,
.header-container h1,
.header-container h2 {
display: none
@@ -79,54 +78,52 @@ footer {
height: 60px;
margin-top: 60px;
position: relative;
- background: transparent url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-lettering-portrait.png)
-}
-.ie7 .title {
- padding-top: 20px
+ background: transparent url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-background.jpg)
}
a#dribbble,
a#twitter,
a#github,
a#linkedin,
a#codeschool {
- width: 100px;
- height: 100px;
- margin: 10px;
+ width: 150px;
+ height: 150px;
+ margin: 0;
display: inline-block;
text-indent: -999em;
- background-repeat: repeat-x;
- background-color: #ddd;
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/social-media-sprite.png)
+ background-repeat: no-repeat;
+ background-color: #fff;
+ background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/icos-sprite.png);
+ background-size: 750px 300px
}
a#twitter {
- background-position: 430px 0
+ background-position: 0 -152px
}
a#twitter:hover {
- background-position: 430px -110px
+ background-position: 0 0
}
a#dribbble {
- background-position: 0 -110px
+ background-position: -150px -152px
}
a#dribbble:hover {
- background-position: 0 0
+ background-position: -150px 0
}
a#github {
- background-position: 320px -110px
+ background-position: -300px -152px
}
a#github:hover {
- background-position: 320px 0
+ background-position: -300px 0
}
a#codeschool {
- background-position: 100px -110px
+ background-position: -450px -152px
}
a#codeschool:hover {
- background-position: 100px 0
+ background-position: -450px 0
}
a#linkedin {
- background-position: 210px 0
+ background-position: -600px -152px
}
a#linkedin:hover {
- background-position: 210px -110px
+ background-position: -600px 0
}
.clearfix:before,
.clearfix:after {
@@ -139,30 +136,28 @@ a#linkedin:hover {
.clearfix {
*zoom: 1
}
-.header-tab,
.header-container,
.header-container header div {
position: relative;
background-color: transparent;
background-position-x: 50%;
- background-position-y: 0;
+ background-position-y: 50%;
background-repeat: repeat-x
}
.header-container header div {
background-repeat: no-repeat
}
-.header-tab {
- height: 70px;
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/header-backgroung-CA.png)
-}
mark {
background: white;
box-shadow: inset 0 -14px 0 rgba(33,194,244,0.3)
}
section {
- margin-top: 1em;
+ margin-top: 0.3em;
margin-bottom: 2em;
}
+h2 b.block {
+ display: block;
+}
@media only screen and (min-width: 320px) {
.wrapper {
@@ -256,11 +251,19 @@ section {
width: 682px;
margin: 0 auto
}
+ .header-tab h1 {
+ margin: 0;
+ font-size: 1em;
+ line-height: 1.2em;
+ padding: .5em;
+ font-style: italic;
+ font-weight: normal
+ }
.header-container {
background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-background.jpg)
}
.header-container header div {
- height: 385px;
+ height: 245px;
background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-lettering-portrait.png)
}
.less-space-between-words {
@@ -299,7 +302,7 @@ section {
background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-background.jpg)
}
.header-container header div {
- height: 485px;
+ height: 326px;
background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-lettering-landscape.png)
}
}
@@ -310,9 +313,9 @@ section {
background-size: 1024px 768px
}
.header-container {
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-background@2x.jpg);
+ background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-background@2x.jpg)
}
.header-container header div {
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-lettering-landscape@2x.png);
+ background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-lettering-landscape@2x.png)
}
}
View
@@ -12,12 +12,12 @@
<div class="main-container">
<div class="main wrapper clearfix less-space-between-words">
<section>
- <h2>You might call me a Front-End, UX, or Interaction designer.</h2>
+ <h2>You might call me a Front-End, UX, <b class="block">or Interaction designer.</b></h2>
<p>My main mission is to deliver optimal user experience through metaphors and intuitive behaviors.</p>
<p><mark>I bridge together the users and the Back-End</mark>. I live and breathe interaction. <span class="block">I design icons, draw out paper prototypes, and program in Ruby for fun.</span></p>
<p><mark>I build prototypes just for the buzz of seeing people react to using them</mark>. I love reading <i>Gladwell</i>, and watching <i>Johnathan Ive</i> and <i>Dieter Rams</i> unearthing the close relationship between manufactured objects and their creators. I am dedicated to writing ever better and more clearly marked-up, more readable HTML5, CSS3, and JavaScript code.</p>
<p><mark>I realise the impossibility of the notion of perfect code, but I strive for it anyway</mark>. <span class="block">I'm a fan of jQuery, Agile and Scrum. Github completely transformed my way of working.</span> I'm at ease working with other developers, clients, marketing, and with other departments.</p>
- <p><mark>I love the stimulation my work provides for both sides of my mind</mark>. <strong class="block">I love my work !!</strong></p>
+ <p><mark>I love the stimulation my work provides for both sides of my mind</mark>. <strong class="block"><i>I really love my work</i> !!</strong></p>
</section>
<section>
<p>

0 comments on commit 9a84cd0

Please sign in to comment.