-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (118 loc) · 5.82 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- disable block content coment in some browsers like IE its important they must in coment to they work. -->
<!-- saved from url=(0023)http://www.contoso.com/ -->
<!-- saved from url=(0014)about:internet -->
<title>company website</title>
<!-- Bootstrap link files -->
<!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- [if lt IE 9]> -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!-- <![endif] -->
<!-- link style css file -->
<link rel="stylesheet" type="text/css" href="style.css?<?=3filemtime('style.css');?>">
<!-- fontAwesome link cdn -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- font farsi link Lalezar -->
<!-- <link href="https://v1.fontapi.ir/css/Lalezar" rel="stylesheet"> -->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</head>
<body>
<div class="bg-image"></div>
<div class="conainer-fluid">
<div id="deviceSize"></div>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/LogoMakr-7L3Qzz.png"></a>
</div>
<!-- fix style header -->
<div id="myNavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">HTML5</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">page1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">page1-1</a></li>
<li><a href="#">page1-2</a></li>
<li><a href="#">page1-3</a></li>
</ul>
</li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-user-circle" aria-hidden="true"></i> user</a></li>
<li><a href="#"><i class="fa fa-sign-in" aria-hidden="true"></i> login</a></li>
</ul>
</div>
</div>
</div>
<h1>این وب سایت به صورت امتحانی و فقط به منظور نمایش نمونه کار می باشد</h1><br>
<div class="row">
<div class="col-md-4">
<img src="images/LogoMakr-7L3Qzz (1).png" id="price">
<h3>Price it</h3>
<p>Get in touch for an immediate no obligation quote!</p>
</div>
<div class="col-md-4">
<img src="images/LogoMakr-7L3Qzz (2).png">
<h3>Plan it</h3>
<p>We will agree on a deadline and commit to it.</p>
</div>
<div class="col-md-4">
<img src="images/LogoMakr-7L3Qzz (3).png">
<h3>Make it</h3>
<p>We will deliver your website on time with the best quality.</p>
</div>
</div>
<div class="footer">
<p>©Development Island.</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- <script src="js/bootstrap.min.js"></script> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!-- script formula hase computing window size -->
<!-- this script tag show and hide after about one second in my mobile chorom browser -->
<script>
$(function(){
$( window ).resize(function() {
var windowWidth = $(window).width();
if(windowWidth<576){
$('#deviceSize').text('Device Size: ' + windowWidth + 'px - Extra small devices (Phones and other divises)');
}
else if(windowWidth<768){
$('#deviceSize').text('Device Size: ' + windowWidth + 'px - small devices (Phones)');
}
else if(windowWidth<992){
$('#deviceSize').text('Device Size: ' + windowWidth + 'px - Medium devices (Tablets)');
}
else if(windowWidth<1200){
$('#deviceSize').text('Device Size: ' + windowWidth + 'px - Large devices (Desktops)');
}
else{
$('#deviceSize').text('Device Size: ' + windowWidth + 'px - Extra large (Desktops & TV)');
}
}
);
}
);
</script>
</body>
</html>