integercompany / hackaton

linkup

hackaton's Issues

Careers

Header: 100% x 65px; + Menu
Video
Background:# eaeaea
100%x500px
h1- 36px, Roboto Slab
Description about our open positions
Background:# 464149
h1- 36px, Roboto Slab
2 or 3 block with text:
Font - 14px, Roboto Slab
4)Let’s meet
h1- 36px, Roboto Slab;
background:# fff;
size: 100%x?px;
2 blocks:
Img:
Text:
Skype: small icon
Linkedin: small icon
Emaile
+
Some information

font - Roboto Slab, 16-18px
5)Footer: 100%x100px

ADDITIONAL INFO

Fonts:
Roboto Slab
Oswald
Helveticaneuecyr light
Effects:
http://www.designweekportland.com/
http://tympanus.net/Development/HoverEffectIdeas/index.html
http://tympanus.net/Tutorials/HoverSlideEffect/
http://dabblet.com/gist/8255020
http://codepen.io/emweisiger/full/KxHbl/
http://tympanus.net/Development/PseudoElementsAnimationsTransitions/index4.html
http://codepen.io/mikehobizal/full/EHDsu/
http://hovercards.codecanyon.eideus.com/
http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/
http://tympanus.net/Development/HoverEffectIdeas/ Sadie
http://www.thepetedesign.com/demos/onepage_scroll_demo.html#
http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
http://buildinternet.com/project/supersized/
http://cssdeck.com/labs/rxcleo5w

http://codepen.io/fixcl/pen/dPXQRg
http://demo.tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
http://codepen.io/vcurd/pen/caFxz

http://dabblet.com/gist/8255020

About us

Header: 100% x 65px; + Menu
Our people:
h1- 36px, Roboto Slab;
background:# eaeaea;
size: 100%x900px;
img: 250x250px(+/-) 4 blocks per 1 row
text: 250x125px,
font - Roboto Slab, 18px

Our office
h1- 36px, Roboto Slab;
background:# 464149;
size: 100%x600px;
position: center;

Events
h1- 36px, Roboto Slab;
background:# fff;
size: 100%x?px; (depends of count of fotos)

http://cssdeck.com/labs/collage

http://tympanus.net/Tutorials/HoverSlideEffect/

5)Footer: 100%x100px

Сollect contact information

Type here !

Blog page

Blog
Header: 100% x 65px; + Menu
Main section:
Width 100%
Height auto
Background:# eaeaea
Or
background: #2f3238;

2 or 3 blocks per one row according this design

http://tympanus.net/Development/HoverEffectIdeas/
Zoe
3)Footer: 100%x100px

Header & footer

Contacts

Contacts
Header: 100% x 65px; + Menu
Contact
Our info:
Right block: address, social networks, phones
Left block:
Form:
h1 – Contact us!
Name – check only all symbols
Email – check @ .
Phone – only numbers and special symbols (- + )
Comments – all symbols
Numbers + field for - “Enter the numbers above” (check spam)
Button – submit
All fields are important, so check if everything is completed!!
fields located under each other – background - #fff, 282x32px, placeholder (text-color - lightgrey)
Text: font: black, 12-16px, Roboto Slab + red stars (important fields)
Button “Submit”:
Gradient – #0692b2  #1db5d5 
Size: 100x32px(+/-)
Font – white, 12px, Roboto Slab
Map: 100%x425px
Footer: 100%x100px

Blog 2 templates

Start page

Home
About us
Careers
Projects
Blog
Contact
list of languages(EN, UA, HU) – drop-down

Font - Helveticaneuecyr light ( sans-serif), size 18 px(1.2 rem);
Position – left (margin-left: 5%);
Color – #027262 and text-shadow #25ae78; (or white? Depends of video)
Line-heigth – 20px;

Button “GET STARTED” – gradient from # 053b77 to # 3578be (90deg)
Button size 365x140px, position center;
Text - font - Helveticaneuecyr light ( sans-serif), size 18-20 px(1.4 rem), color - #fff

Down button ” PLEASE CONTACT US” – gradient from # 2b8687 to # 25ae78 (90deg)
Button size 170x35px, position left and fixed;
Text - font - Helveticaneuecyr light ( sans-serif), size 16-18px(1.4 rem),bold, color - #fff;
Icon- letter (background: # 2b8687) and small white envelope icon(size 24x24px)

Contact form

When you press the button “PLEASE CONTACT US” will be appear the form:
h2 – Please contact us!
Name – check only all symbols
Email – check @ .
Phone – only numbers and special symbols (- + )
Comments – all symbols
Button – submit
All fields are important, so check if everything is completed!!
Form:
Form background - #f1eaea, size – 310x370px;
form-header:
gradient – #0692b2  #1db5d5 
height – 37px ;
form-body:
four fields located under each other – background - #fff, 282x32px, placeholder (text-color - lightgrey)
Text:
h2 – white, 14px Roboto Slab
Font: black, 12px, Roboto Slab + red stars (important fields)
Button “Submit”:
Gradient – #0692b2  #1db5d5 
Size: 100x32px
Font – white, 12px, Roboto Slab

Small block wich look like cloud:
Gradient – #0692b2  #1db5d5
Font – white, 12px, Roboto Slab
Top right corner, size – 110x40px

blog 2 templates

Task_1

Create button.

Projects page

Header: 100% x 65px; + Menu
Project-gallery:
100%x600px;
Position – center;
Description of our projects
Background:# eaeaea;
100%x?px

2 or 3 blocks with text
Corresponding block consists information about appropriate project.
Background: #fff;
h2: font- 22px, Roboto Slab
Text: font – 16-18px, Roboto Slab
Medium icons: 128x128/ 64x64
http://cssdeck.com/labs/rxcleo5w

5)Footer: 100%x100px
http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/

Create a common data base !

HOT HOT

Video from youtube on start page !