Example for media queries and liquid template

index.html:

<!DOCTYPE html>
<html>
<head>
<title>Responsive web Page</title>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=0″>
<!– <script src=”js/jquery.js” type=”text/javascript”></script>–>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
<script src=”js/jquery-1.9.1.js” type=”text/javascript”></script>
<link href=”css/bootstrap.css” rel=”stylesheet” type=”text/css” />
<!–<link href=”css/bootstrap.min.css” rel=”stylesheet” type=”text/css” />–>
</head>
<body>
<!–========================================================
HEADER
=========================================================–>
<header id=”header”>
<div id=”stuck_container” style=”background: #2a2a2a;”>
<div class=”container”>
<div class=”row”>
<div>
<img src=”images/logo.png” alt=”logo” class=”logo-image”>
<div class=”logo-box”>
<h1 style=”color:White”>moblo</h1>
<div class=”slogan”>Cellular Repair Center</div>
</div>
</div>
<div class=”pmenu”>
<nav>
<ul class=”menu”>
<li class=”current”><a href=”index.html”>About Us</a></li>
<li><a href=”index.html”>Services</a></li>
<li><a href=”index.html”>Iphone Repair</a></li>
<li><a href=”index.html”>Blog</a></li>
<li><a href=”index.html”>Contacts</a></li>
</ul>
<select class=”select-menu sf-menu sf-js-enabled sf-arrows”>
<option value=”index.html” selected=”selected”>&nbsp;About Us</option>
<option value=”index.html”>&nbsp;Services</option>
<option value=”index.html”>&nbsp;Iphone Repair</option>
<option value=”index.html”>&nbsp;Blog</option>
<option value=”index.html”>&nbsp;Contacts</option>
</select>
</nav>
</div>
</div>
</div>
</div>
</header>
<!–========================================================
CONTENT
=========================================================–>
<section id=”content”>

<div class=”bg-color-2″>
<div class=”container”>
<div class=”row” style=””>
<!–<div class=”grid_12 wow fadeInRight animated” style=”visibility: visible; -webkit-animation: fadeInRight;”>–>
<h2 class=”font-color-1 center-object offset-1″>We fix broken, damaged<br><span class=”font-weight-light”>cellular phones.</span></h2>
<div class=”custom-text-1″>Lorem ipsum dolor sit amet, consectetur adipisc ing elit. Sed mauris erat, accumsan fermentum sit amet.</div>
<div class=”center-object”>
<a href=”#” class=”btn-big”>how it works</a>
</div>
</div>
<!–</div>–>
</div>

<div class=”container”>
<div class=”row”>
<div class=”grid_12″ style=”visibility: visible; -webkit-animation: fadeInLeft;”>
<div class=”page-head-box”>
<img src=”images/page1_img1.png” alt=”” class=”custom-img-1″>
<img src=”images/page1_img2.png” alt=”” class=”custom-img-2″>
<img src=”images/page1_img3.png” alt=”” class=”custom-img-3″>
</div>
</div>
</div>
</div>
</div>

<div style=”padding-bottom:110px”>
<div class=”container”>
<div class=”row fblock”>
<div class=”grid_4″ style=””>
<div class=”block-1 offset-7″>
<img src=”images/page1_img4.png” alt=””>
<h2 class=”offset-5″>e-mail</h2>
<h4 class=”offset-6″>repairs</h4>
<p class=”p-inset-1 p__lh”>Dolor nunc vule putateulr ips dol consem donec semp ertet laciniate ultricie upien disse comete dolo lectus fgilla itollicil tua ludin dolor nec met quam.</p>
<a href=”#” class=”btn-default” style=”background: #f25f43;”>read more</a>
</div>
</div>

<div class=”grid_4″ style=””>
<div class=”block-1 offset-7″>
<img src=”images/page1_img5.png” alt=””>
<h2 class=”offset-5″>walk-in</h2>
<h4 class=”offset-6″>repairs</h4>
<p class=”p-inset-1 p__lh”>Dolor nunc vule putateulr ips dol consem donec semp ertet laciniate ultricie upien disse comete dolo lectus fgilla itollicil tua ludin dolor nec met quam.</p>
<a href=”#” class=”btn-default” style=”background: #f25f43;”>read more</a>
</div>
</div>

<div class=”grid_4″ style=””>
<div class=”block-1 offset-7″>
<img src=”images/page1_img6.png” alt=””>
<h2 class=”offset-5″>10 minutes</h2>
<h4 class=”offset-6″>repairs</h4>
<p class=”p-inset-1 p__lh”>Dolor nunc vule putateulr ips dol consem donec semp ertet laciniate ultricie upien disse comete dolo lectus fgilla itollicil tua ludin dolor nec met quam.</p>
<a href=”#” class=”btn-default” style=”background: #f25f43;”>read more</a>
</div>
</div>

</div>
</div>
</div>

<div class=”bg-inset-3″>
<div class=”container”>
<div class=”row”>
<div class=”grid_4″>
<h3>what We<span class=”font-color-2 font-weight-light”><br>Repair</span></h3>

<ul class=”list”>
<li><a href=”#”><i class=”fa fa-chevron-right”></i>all makes of cell phones and PDA’s</a></li>
<li><a href=”#”><i class=”fa fa-chevron-right”></i>iPod and mp3 players</a></li>
<li><a href=”#”><i class=”fa fa-chevron-right”></i>video game devices*</a></li>
<li><a href=”#”><i class=”fa fa-chevron-right”></i>laptops*</a></li>
<li><a href=”#”><i class=”fa fa-chevron-right”></i>GPS units</a></li>
</ul>

<p class=”p__lh”><span class=”custom-text-2″>*</span>Lorem ipsum dolor sit amet, consectetur adipisc elit. Proin ultricies vestibulum velit, bibendum et condimentum metusi dolore ipsum commete sit amet ing elit.</p>
<a href=”#” class=”btn-default” style=”background: #f25f43;”>read more</a>
</div>

<div class=”grid_4″>
<h3>WELCOME TO<span class=”font-color-2 font-weight-light”><br>our site</span></h3>
<h5>Mes cuml dia sed inenias ingertlo aliiqtes dolore ipsum sitet ame.</h5>

<p class=”p-inset-2″>Nemo enim ipsam voluptatem voluptas sit. Aspernatur aut odit aut fugit sed quia consequuntur magni dolor eseos qui rationevolupta tem nesciunt lacusueni ascet dolingerto otis aliiqt sit amet eism com odictor ligulate cotameti dapibu emo enim ipsam voluptatem voluptas sit.</p>
<p class=”p-inset-3″>Nemo enim ipsam voluptatem voluptas sit. Aspernatur aut odit aut fugit sed quia consequuntur magni dolor eseos qui rationevolupta tem nesciunt lacusueni ascet dolingerto otis aliiqt sit amet eism com odictor ligulate cotameti dapibu emo enim ipsam voluptatem voluptas sit. Aspernatur aut odit aut fugit sed quia. Consequuntur magni dolores eos qui rationevoluptatem nesciunt.</p>
</div>

<div class=”grid_4″>
<h3>Success<span class=”font-color-2 font-weight-light”><br>Stories</span></h3>
<p class=”p-inset-4″>“ Nemo enim ipsam voluptatem volupt asperna tur aut odit aut fugit sed quia conse quuntur magni dolor eseos qui. ”</p>
<h5 class=”font-color-3 offset-8″><i class=”fa fa-user icon-fa”></i>Mark snow</h5>
<div class=”h-line”></div>
<p class=”p-inset-5″>“ Nemo enim ipsam voluptatem volupt asperna tur aut odit aut fugit sed quia conse quuntur magni dolor eseos qui. ”</p>
<h5 class=”font-color-3 offset-8″><i class=”fa fa-user icon-fa”></i>Diana willow</h5>
<div class=”h-line”></div>
<p class=”p-inset-5″>“ Nemo enim ipsam voluptatem volupt asperna tur aut odit aut fugit sed quia conse quuntur magni dolor eseos qui. ”</p>
<h5 class=”font-color-3 offset-8″><i class=”fa fa-user icon-fa”></i>Mike smith</h5>
</div>

</div>
</div>
</div>
</section>

<footer id=”footer” style=”padding: 35px 0 28px 0;font: 300 14px ‘Open Sans’, sans-serif;color: #adadad;background: #2a2a2a;”>
<div class=”container”>
<div class=”row”>
<div class=”grid_6″>
<span id=”copyright-title”>moblo</span>
<span>© 2014 |
<a href=”index.html”>Privacy Policy</a> <!–{%FOOTER_LINK} –>
</span>
</div>
<div class=”grid_6″>
<div class=”social-links”>
<a href=”#”><i class=”fa fa-facebook”></i></a>
<a href=”#”><i class=”fa fa-rss”></i></a>
<a href=”#”><i class=”fa fa-twitter”></i></a>
<a href=”#”><i class=”fa fa-google-plus”></i></a>
</div>
</div>
</div>
</div>
</footer>

</body>
</html>

 

style.css:

/*========================================================
Main layout styles
=========================================================*/
body {
background: #2a2a2a;
font: 14px/24px “Arial”;
color: #bbbaba;
}
.grid_4
{
width: 360px;float: left;min-height: 1px;margin-left: 30px;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: #ffffff;
}
.link-inverse-color a:hover {
color: #2a2a2a;
}
.link-light-color a:hover {
color: #f25f43;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: ‘Open Sans’, sans-serif;
font-weight: 600;
color: #2a2a2a;
text-transform: uppercase;
}
h1 {
font-size: 60px;
color: #ffffff;
}
h2 {
font-size: 50px;
line-height: 50px;
}
h3 {
margin-top: 118px;
font-size: 40px;
line-height: 40px;
}
h4 {
font-size: 30px;
font-weight: 300;
}
h5 {
margin-top: 42px;
font-size: 20px;
font-weight: 400;
color: #f25f43;
line-height: 25px;
}
h6 {
margin-top: 12px;
font-size: 15px;
font-weight: 300;
color: #2a2a2a;
line-height: 25px;
}
p {
padding-top: 24px;
}
p.p-inset-1 {
padding-top: 37px;
}
p.p-inset-2 {
padding-top: 12px;
}
p.p-inset-3 {
padding-top: 20px;
}
p.p-inset-4 {
padding-top: 41px;
}
p.p-inset-5 {
padding-top: 26px;
}
p.p-inset-6 {
padding-top: 17px;
}
p.p-inset-7 {
padding-top: 42px;
}
p.p-inset-8 {
padding-top: 13px;
}
p.p__lh {
line-height: 23px;
}
.font__ls {
letter-spacing: -3px;
}
.font-color-1 {
color: #ffffff;
}
.font-color-2 {
color: #f25f43;
}
.font-color-3 {
color: #2a2a2a;
}
.font-weight-light {
font-weight: 300;
}
.center-object {
text-align: center;
}
.stick-to-right {
float: right;
}
.offset-1 {
margin-top: 90px;
}
.offset-2 {
margin-top: 82px;
}
.offset-3 {
margin-top: 72px;
}
.offset-4 {
margin-top: 93px;
}
.offset-5 {
margin-top: 32px;
}
.offset-6 {
margin-top: 6px;
}
.offset-7 {
margin-top: 109px;
}
.offset-8 {
margin-top: 12px;
}
.offset-9 {
margin-top: 114px;
}
.offset-10 {
margin-top: 37px;
}
.offset-11 {
margin-top: 88px;
}
.offset-12 {
margin-top: 118px;
}
.offset-13 {
margin-top: 24px;
}
.offset-14 {
margin-top: 117px;
}
.clear {
clear: both;
}
/*========================================================
HEADER styles
=========================================================*/

/* Main menu styles
========================================================*/
header nav {
float: right;
font: 600 14px ‘Open Sans’, sans-serif;
text-transform: uppercase;
display: inline-block;
}
.menu {
margin-top: 28px;
float: right;
display: block;
}
.menu > li {
float: left;
position: relative;
list-style:none;
}
.menu > li > a {
display: block;
margin-left: 29px;
color: #d7dadb;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
.menu > li > a:hover {
color: #f25f43;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
.menu > li.current > a {
color: #f25f43;
}
.menu > li.sfHover > a {
color: #f25f43;
}
.menu a {
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
.menu a:hover {
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
.select-menu {
font: 14px/24px “Arial”;
color: #2a2a2a;
border: 2px solid #9e9e9e;
}
/*========================================================
RESPONSIVE LAYOUTS STYLES
=========================================================*/
@media only screen and (max-width: 979px) {
.menu > li > a {
margin-left: 10px;
}
}
@media only screen and (max-width: 767px) {
nav {
float: none;
}
.menu {
float: none;
width: 100%;
margin-top: 50px;
}
}
/* Stuck menu styles
========================================================*/

.logo-image {
float: left;
margin-right: 22px;
}
.logo-box {
display: block;
position: relative;
margin-top: 8px;
}
.slogan {
font: 300 14px ‘Open Sans’, sans-serif;
color: #838383;
text-transform: uppercase;
margin-left: 70px;
margin-top: 20px;
}
/*========================================================
CONTENT styles
=========================================================*/
#content {
padding: 0 0 0 0;
background: #ffffff;
overflow: hidden;
}
.custom-text-1 {
margin-top: 27px;
font: 300 21px/30px ‘Open Sans’, sans-serif;
color: #933928;
text-align: center;
padding: 0 200px;
text-transform: uppercase;
}
.custom-text-2 {
display: inline-block;
margin-top: 13px;
padding-right: 8px;
font: 600 30px/10px ‘Open Sans’, sans-serif;
color: #f25f43;
text-transform: uppercase;
}
.custom-text-3 {
margin-top: 27px;
font: 300 21px/30px ‘Open Sans’, sans-serif;
color: #ffffff;
text-align: center;
padding: 0 20px;
text-transform: uppercase;
}
.block-1 {
text-align: center;
}
.block-2 {
background: #f25f43;
padding: 14px 0 43px 0;
}
.icon-fa {
float: left;
padding-right: 12px;
color: #f25f43;
font-size: 20px;
}
.h-line {
border: none;
background-color: #fbfbfb;
height: 1px;
margin-top: 27px;
}
.page-head-box {
position: relative;
height: 366px;
}
.custom-img-1,
.custom-img-2,
.custom-img-3 {
position: absolute;
}
.custom-img-1 {
bottom: 0;
}
.custom-img-2 {
width: 304px;
left: 50%;
margin-left: -152px;
bottom: 0;
}
.custom-img-3 {
right: 0;
bottom: 0;
}
.info-blok {
margin-top: 50px;
}
.info-blok-2 {
margin-top: 66px;
}
.info-img {
float: left;
margin-top: 8px;
margin-right: 29px;
}
.info-data {
display: block;
font: 300 15px/25px ‘Open Sans’, sans-serif;
color: #5d6166;
text-transform: uppercase;
}
.info-data tr th {
text-align: left;
}
.info-data tr .th-1 {
padding-right: 40px;
}
.info-data tr .th-2 {
padding-right: 47px;
}
.info-data tr .th-3 {
color: #bab9b9;
}
.post {
margin-top: 75px;
}
.post-1 {
margin-top: 45px;
}
.post_block {
position: relative;
display: block;
padding-left: 101px;
padding-right: 143px;
}
.post > .calendar-date {
margin-top: 4px;
font: 600 65px/48px ‘Open Sans’, sans-serif;
color: #f25f43;
text-transform: uppercase;
float: left;
}
.post > .calendar-date > span {
display: block;
font-size: 30px;
color: #2a2a2a;
font-weight: 300;
text-align: center;
margin-right: 39px;
}
.post_image {
margin-top: 4px;
margin-right: 30px;
float: left;
}
.post-icon-fa {
float: left;
padding-right: 12px;
color: #f25f43;
font-size: 20px;
}
.post-user {
margin-top: 9px;
float: left;
padding-right: 34px;
}
.post-user-2 {
margin-top: 9px;
}
.post-pad {
padding-right: 8px;
}
.contact_adrress {
margin-top: 12px;
}
.contact_adrress span {
float: left;
text-align: left;
}
dl dd {
display: block;
text-align: right;
width: 206px;
}
.map {
margin-top: 36px;
}
.map_c {
position: relative;
overflow: hidden;
width: 428px;
height: 300px;
margin-top: 12px;
}
/*========================================================
BACKGROUND BLOK styles
=========================================================*/
.bg-color-2 {
background: #f25f43;
}
.bg-color-3 {
background: #f8f8f8;
}
.bg-inset-1 {
padding-bottom: 80px;
}
.bg-inset-2 {
padding-bottom: 111px;
}
.bg-inset-3 {
margin-bottom: 124px;
}
.bg-inset-4 {
padding-bottom: 12px;
}
.bg-inset-5 {
padding-bottom: 72px;
}
.bg-inset-6 {
padding-bottom: 121px;
}
.bg-inset-6 {
padding-bottom: 134px;
}
.bg-offset-1 {
margin-top: 1px;
}
/*========================================================
BUTTON styles
=========================================================*/
.btn-default {
background: #f25f43;
display: inline-block;
font: 600 15px/50px ‘Open Sans’, sans-serif;
color: #ffffff;
text-align: center;
text-transform: uppercase;
padding: 0 18px;
margin-top: 39px;
}
.btn-default:hover {
background: #2a2a2a;
color: #ffffff;
}
.btn__inverse {
background: #2a2a2a;
}
.btn__inverse:hover {
background: #f25f43;
color: #ffffff;
}
.default__mt {
margin-top: 0px;
}
.default__pd {
padding: 0;
}
.btn-big {
background: #2a2a2a;
display: inline-block;
font: 600 17px/14px ‘Open Sans’, sans-serif;
color: #ffffff;
text-align: center;
text-transform: uppercase;
padding: 28px 22px;
margin-top: 34px;
}
.btn-big:hover {
background: #ffffff;
color: #f25f43;
}
.btn-big-pad {
padding: 28px 37px;
}
/*========================================================
LISTS styles
=========================================================*/
.list {
margin-top: 44px;
}
.list.list__mt-1 {
margin-top: 32px;
}
.list.list__mt-2 {
margin-top: 45px;
}
.list li {
padding-left: 24px;
padding-bottom: 11px;
}
.list li a {
font: 300 15px ‘Open Sans’, sans-serif;
color: #2a2a2a;
text-transform: uppercase;
}
.list li a:hover {
color: #f25f43;
}
.list li i {
color: #f25f43;
font-size: 12px;
left: -24px;
margin-top: 5px;
position: relative;
}
/*========================================================
FOOTER styles
=========================================================*/

#copyright-title {
font-weight: 400;
color: #ffffff;
text-transform: uppercase;
}
.social-links {
overflow: hidden;
float: right;
margin-top: -7px;
}
.social-links a + a {
margin-left: 4px;
}
.social-links a {
width: 34px;
height: 34px;
position: relative;
display: inline-block;
font-size: 16px;
text-align: center;
color: #fff;
background: #4a4a4a;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}
.social-links i {
line-height: 34px;
}
.social-links a:hover {
background: #f25f43;
color: #fff;
}
/*========================================================
Widget styles
=========================================================*/
/* UItoTop styles
========================================================*/
#toTop {
display: none;
text-decoration: none;
position: fixed;
bottom: 40px;
left: 51%;
margin-left: 640px;
overflow: hidden;
border: none;
color: #c5c5c5;
width: 73px;
height: 73px;
font-size: 30px;
line-height: 65px;
z-index: 20;
background: #eeeeee;
text-align: center;
-webkit-transition: color 0.5s ease;
transition: color 0.5s ease;
}
#toTop:hover {
outline: none;
color: #f25f43;
}
/* Stellar(parallaxBG) styles
========================================================*/
.stellar-block {
background-attachment: fixed;
background-position: 50% 0%;
position: relative;
background-repeat: no-repeat;
padding-bottom: 100px;
z-index: 8;
}
.first {
background-image: url(../images/bg_pic2.jpg);
background-color: #fff;
background-position: 50% 100%;
}
.second {
background-image: url(../images/slide.jpg);
background-color: #fff;
}
@media only screen and (max-width: 979px) {
.stellar-block {
background-attachment: scroll;
background-position: 50% 50%;
position: relative;
background-repeat: no-repeat;
background-size: auto 100%;
padding-bottom: 100px;
z-index: 8;
}
}
/*========================================================
RESPONSIVE LAYOUTS STYLES
=========================================================*/
@media only screen and (max-width: 1199px) {
.page-head-box {
height: 326px;
}
.custom-img-1,
.custom-img-2,
.custom-img-3 {
width: 30%;
}
.custom-img-2 {
margin-left: -141px;
}

}
@media only screen and (max-width: 979px) {
h2 {
font-size: 40px;
}
.custom-text-1 {
padding: 0 0;
}
.page-head-box {
height: 266px;
}
.custom-img-2 {
margin-left: -110px;

}
.post_image {
margin-right: 30px;
width: 40%;
}
.info-data {
font: 300 12px/25px ‘Open Sans’, sans-serif;
}
.info-data tr th:nth-child(1) {
padding-right: 5px;
}
.info-data tr th:nth-child(2) {
padding-right: 7px;
}

.container {
width: 420px;
padding: 0 0px;
margin:auto;
}

}
@media only screen and (max-width: 767px) {
#header {
text-align: center;
}

[class*=”grid_”] {
float: none;
display: block;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.grid_4
{
margin-bottom: 25px;
}

.logo-image {
float: none;
margin-right: 0;
}
.logo-box {
margin-top: 40px;
}
.slogan {
margin-left: 0px;
}
.page-head-box {
height: 166px;
}
.custom-img-2 {
margin-left: -63px;
}
.post_image {
margin-top: 20px;
margin-right: 0;
width: 100%;
float: none;
}

#footer {
text-align: center;
}

}
@media only screen and (max-width: 480px) {
.page-head-box {
height: 120px;
}
.custom-img-2 {
margin-left: -40px;
}

}
@media only screen and (max-width:767px)
{
.container {
width: 420px;
padding: 0 0px;
}
.menu
{
display:none;
margin-top:50px;
}

.sf-menu {
float: none;
width: 100%;
margin-top: 50px;
margin-bottom:20px;
}
}

@media (max-width: 979px) and (min-width: 768px){
.container {
width:748px;
}

.grid_4
{
width: 360px;float: left;min-height: 1px;margin-left: 30px;
}
}

@media (max-width: 479px){
body {
padding: 0;
}
.container {
width: 300px;
padding: 0 15px;
}
.row {
margin-left: 0;
}
[class*=”grid_”] {
float: none;
display: block;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}

/*Core variables and mixins*/

Advertisements

What is a flow chart

Flow Chart Defined

A flow chart is a graphical or symbolic representation of a process. Each step in the process is represented by a different symbol and contains a short description of the process step. The flow chart symbols are linked together with arrows showing the process flow direction.

  • Common Flowchart Symbols

    Different flow chart symbols have different meanings. The most common flow chart symbols are:

    • Terminator: An oval flow chart shape indicating the start or end of the process.
    • Process: A rectangular flow chart shape indicating a normal process flow step.
    • Decision: A diamond flow chart shape indication a branch in the process flow.
    • Connector: A small, labeled, circular flow chart shape used to indicate a jump in the process flow. (Shown as the circle with the letter “A”, below.)
    • Data: A parallelogram that indicates data input or output (I/O) for a process.
    • Document: Used to indicate a document or report (see image in sample flow chart below).

    A simple flow chart showing the symbols described above can be seen below:simple-flow-chart-example

Flowchart Symbols

What do the different flowchart shapes mean?

Which flowchart shape should you use? If you are new to flowcharting, the large number of shapes can be intimidating. This page should help in making your decision. Most charts can be drawn with the first five basic flowchart shapes listed. The others are optional and often only confuse people.

The following is a basic overview, with descriptions and meanings, of the most common flowchart symbols – also commonly called flowchart shapesflow diagram symbols or process mapping symbols, depending upon what type of diagram you’re creating. The table below lists the flowchart symbol drawing, the name of the flowchart symbol in Microsoft Office (with aliases in parentheses), and a short description of where and how the flowchart symbol is used.

1

2

3

4

5

6

The Most Commonly used Flowchart Symbols

The majority of flowcharts rely on just a few of the process-related symbols to do all the heavy lifting: TerminatorProcessDecision,Document, and Connector.