It all starts with an Idea. Take your idea and learn how to create your own Cloud Based Startup in Armenia. Learn the technology and paths to needed to having a profitable company.
7. CSS Media Queries
@media screen and (min-width: 480px) {
.content {
float: left;
}
.social_icons {
display: none
}
// and so on...
}
● 480px
● 600px
● 768px
● 900px
● 1200px
8. HTML
<div class="section group">
<div class="col span_1_of_3">
This is column 1
</div>
<div class="col span_1_of_3">
This is column 2
</div>
<div class="col span_1_of_3">
This is column 3
</div>
</div>
9. CSS
/* SECTIONS */
.section {clear: both;
padding: 0px;
margin: 0px;}
/* COLUMN SETUP */
.col {display: block;
float:left;
margin: 1% 0 1% 1.6%;}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {content:"";
display:table;}
.group:after {clear:both;}
/* GRID OF THREE */
.span_3_of_3 {width: 100%;}
.span_2_of_3 {width: 66.1%;}
.span_1_of_3 {width: 32.2%;}
/* GO FULL WIDTH AT LESS THAN
480 PIXELS */
@media only screen and (max-width:
480px) {
.col { margin: 1% 0 1% 0%;}}
@media only screen and (max-width:
480px) {
.span_3_of_3 {width: 100%; }
.span_2_of_3 {width: 100%; }
.span_1_of_3 {width: 100%;}}
11. How it Works
/* SECTIONS */
.section {clear: both;
padding: 0px;
margin: 0px;}
.section
splits up the page horizontally. You'll
need a few of these to break up the
content, and you can use them in your
main wrapper, or within other divs.
12. How it Works
/* COLUMN SETUP */
.col {display: block;
float:left;
margin: 1% 0 1% 1.6%;}
.col:first-child { margin-left: 0;
}
.col
divides the section into columns. Each
column has a left margin of 1.6%
(around 20 pixels on a normal
monitor), except the first one. Using.
col:first-child { margin-left: 0; }
means you don't need to use class="
last"anywhere. It works in all browsers
since IE6.
13. How it Works
/* GROUPING */
.group:before,
.group:after {content:"";
display:table;}
.group:after {clear:both;}
.group
solves floating problems, by forcing
the section to self clear its children
(aka the clearfix hack). This is good in
Firefox 3.5+, Safari 4+, Chrome, Opera
9+ and IE 6+.
14. How it Works
/* GRID OF THREE */
.span_3_of_3 {width: 100%;}
.span_2_of_3 {width: 66.1%;}
.span_1_of_3 {width: 32.2%;}
.span_1_of_3
specifies the width of the column.
Using percentages means it's 100%
fluid.
15. How it Works
/* GO FULL WIDTH AT LESS
THAN 480 PIXELS */
@media only screen and (max-
width: 480px) {
.col { margin: 1% 0 1% 0%;}}
@media only screen and (max-
width: 480px) {
.span_3_of_3 {width: 100%; }
.span_2_of_3 {width: 100%; }
.span_1_of_3 {width: 100%;}}
@media queries
as soon as the screen size
gets less than 480 pixels the
columns stack and the
margins disappear.
20. Bootstrap
● From Twitter
● 12-grid responsive layout
● Custom jQuery plugins
for common UIs like
carousels and modal
window
● Bootstrap customizer
● Well documented with
lots of examples
● getbootstrap.com
21. Skeleton
● simple and clean
responsive CSS
boilerplate for HTML5
● Grid responsive layout
● A PSD template for
mocking up your web
designs
● If you want to get started
with responsive design
quickly
● www.getskeleton.com
22. Foundation
● From ZURB
● 12-grid responsive layout
● Rapid-prototyping
capabilities
● Prototyping
● Well documented with
lots of examples
● foundation.zurb.com
63. 188,000+ ViewsResults :
1. Embeds in 17 websites
2. 382 downloads, 32 likes, 10 comments
3. 400+ social media activities
4. Most talked about on LinkedIn
67. Marketing Tips
1. Customers determine your priority
2. Focus on your customers and
the money will follow
3. Word of mouth = $$$
4. It is a numbers game
5. Patience, success takes time