Atri-Technocrat · mohitepranita · Oct 5, 2019 · Oct 5, 2019 · Oct 5, 2019 · Oct 5, 2019
diff --git a/Component/companyletter.html b/Component/companyletter.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Demo app </title>
+    <link rel="shortcut icon" type="image/x-icon" href="img/faviconlogo.jpg">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
+    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
+        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+    <link rel="stylesheet" href="../css/style.css">
+    <link rel="stylesheet" href="../css/companyletter.css">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Appdent is a app landing page. Where include 6+ landing page template.">
+    <meta name="author" content="WowThemez">
+</head>
+
+<body>
+    <div class="col-lg-11 col-md-11 col-sm-12 col-xs-12 pull-left bg-color-blue border-radius-bt wt-ht"></div>
+    <div class="col-lg-1 col-md-1 d-none d-md-block pull-left bg-color-gray border-radius-top wt-ht"></div>
+    <div class="content">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 header-text">
+            <div class="pull-left">
+                <img src="../assets//image/Only_logo.png" alt="Avatar" class="avatar p-o">
+            </div>
+            <div class="line-height-tw ft-wt color-blue">
+                <div class="p-l-f-p">
+                    <p>ATRINA TECHNOLOGIES</p>
+                </div>
+                <div class="p-l-f-p">
+                    <p>PVT. LTD.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="footer1 col-lg-1 col-md-1 d-none d-md-block pull-left border-radius-bt-ft wt-ht"></div>
+    <div class="footer col-lg-11 col-md-11 col-sm-12 col-xs-12 pull-right border-radius-top-ft">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 color-wt">
+            <p class="text-font">Patanwala Estate, Ghatkopar West, Mumbai, Maharashtra 400086</p>
+        </div>
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 color-wt text-font">
+            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 pull-left">
+                <i class="fa fa-phone p-r-f" aria-hidden="true"></i>+91 9892626182</div>
+            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 pull-left">
+                <i class="fa fa-envelope p-r-f" aria-hidden="true"></i>contact@atritechnocrat.com</div>
+            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 pull-left">
+                <i class="fa fa-globe p-r-f" aria-hidden="true"></i>www.atritechnocrat.com</div>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/Component/footer.html b/Component/footer.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Demo app </title>
+    <link rel="shortcut icon" type="image/x-icon" href="img/faviconlogo.jpg">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
+    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
+        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+    <!-- <link rel="stylesheet" href="../css/style.css"> -->
+    <link rel="stylesheet" href="../css/companyletter.css">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Appdent is a app landing page. Where include 6+ landing page template.">
+    <meta name="author" content="WowThemez">
+</head>
+
+<body>
+    <div class="footer1 col-lg-1 col-md-1 d-none d-md-block pull-left border-radius-bt-ft wt-ht"></div>
+    <div class="footer col-lg-11 col-md-11 col-sm-12 col-xs-12 pull-right border-radius-top-ft">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 color-wt">
+            <p class="text-font">Patanwala Estate, Ghatkopar West, Mumbai, Maharashtra 400086</p>
+        </div>
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 color-wt text-font">
+            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 pull-left">
+                <i class="fa fa-phone p-r-f" aria-hidden="true"></i>+91 9892626182
+            </div>
+            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 pull-left">
+                <i class="fa fa-envelope p-r-f" aria-hidden="true"></i>contact@atritechnocrat.com
+            </div>
+            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 pull-left">
+                <i class="fa fa-globe p-r-f" aria-hidden="true"></i>www.atritechnocrat.com
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/Component/header.html b/Component/header.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Demo app </title>
+    <link rel="shortcut icon" type="image/x-icon" href="img/faviconlogo.jpg">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
+    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
+        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+    <!-- <link rel="stylesheet" href="../css/style.css"> -->
+    <link rel="stylesheet" href="../css/companyletter.css">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Appdent is a app landing page. Where include 6+ landing page template.">
+    <meta name="author" content="WowThemez">
+</head>
+
+<body>
+    <div class="col-lg-11 col-md-11 col-sm-12 col-xs-12 pull-left bg-color-blue border-radius-bt wt-ht"></div>
+    <div class="col-lg-1 col-md-1 d-none d-md-block pull-left bg-color-gray border-radius-top wt-ht"></div>
+    <div class="content">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 header-text">
+            <div class="pull-left">
+                <img src="../assets//image/Only_logo.png" alt="Avatar" class="avatar p-o">
+            </div>
+            <div class="line-height-tw ft-wt color-blue">
+                <div class="p-l-f-p">
+                    <p>ATRINA TECHNOLOGIES</p>
+                </div>
+                <div class="p-l-f-p">
+                    <p>PVT. LTD.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/assets/image/Only_logo.png b/assets/image/Only_logo.png
diff --git a/assets/image/avatariann123.png b/assets/image/avatariann123.png
diff --git a/css/companyletter.css b/css/companyletter.css
@@ -0,0 +1,196 @@
+.avatar {
+    vertical-align: middle;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 1px solid;
+}
+.content-background{
+    background-image: url("../../assets//image/background.jpg");
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 100%;
+    height: 100% !important;
+}
+.footer {
+    position: fixed;
+    bottom: 0; 
+    right: 0;
+    width: 100%;
+    background-color: #254F7D;
+    text-align: center;
+ }
+.footer1 {
+    position: fixed;
+    left: 0;
+    bottom: 0; 
+    width: 100%;
+    background-color: gray;
+    text-align: center;
+}
+.pull-left{
+    float: left;
+    margin: auto
+}
+.wt-ht{
+    width: 100%;
+    height: 20px;
+}
+.bg-color-blue{
+    background-color: #254F7D;
+}
+.bg-color-gray{
+    background-color:gray;
+}
+.border-radius-bt{
+    border-radius: 0px 0px 25px 0px;
+}
+.border-radius-top{
+    border-radius: 25px 0px 0px 0px;
+}
+.border-radius-top-ft{
+    border-radius: 50px 0px 0px 0px;
+}
+.border-radius-bt-ft{
+    border-radius: 0px 50px 0px 0px;
+}
+.line-height-tw{
+    line-height: 20px;
+}
+.ft-wt{
+    font-weight: 500 !important;
+}
+.color-blue{
+    color: #254F7D;
+}
+.p-o{
+    padding: 1px !important;
+}
+.p-l-f-p{
+    padding-left: 4% !important;
+}
+.p-r-f{
+    padding-right: 5px !important;
+}
+.color-wt{
+    color: white;
+}
+.content{
+    padding: 40px !important;
+}
+
+@media (min-width: 1200px)
+{
+.container {
+    max-width: 1080px !important;
+}
+}
+
+
+/* Landscape tablets and medium desktops */
+@media (min-width: 992px) and (max-width: 1199px) {
+.text-font {
+        font-size: 19px;
+} 
+.header-text {
+    font-size: 28px;
+}
+.p-l-f-p {
+    padding-left: 6% !important;
+}
+}
+
+/* Portrait tablets and small desktops */
+@media (min-width: 768px) and (max-width: 991px) {
+.text-font {
+        font-size: 13px;
+}
+.p-l-f-p {
+    padding-left: 8% !important;
+}
+.line-height-tw {
+    line-height: 12px;
+}
+.header-text {
+    font-size: 20px;
+}
+.line-height-tw {
+    line-height: 20px;
+}
+}
+
+/* Landscape phones and portrait tablets */
+@media (max-width: 767px) {
+.text-font {
+        font-size: 13px;
+}
+.p-l-f-p {
+    padding-left: 8% !important;
+}
+.line-height-tw {
+    line-height: 20px;
+}
+.header-text {
+    font-size: 16px;
+}
+}
+
+/* Portrait phones and smaller */
+@media (max-width: 480px) {
+.text-font {
+        font-size: 13px;
+}
+.border-radius-top-ft {
+        border-radius: 0px 0px 0px 0px;
+} 
+.line-height-tw {
+    line-height: 8px;
+}
+.header-text {
+    font-size: 12px;
+}
+.avatar {
+    width: 35px !important;
+    height: 35px !important;
+}
+.p-l-f-p {
+    padding-left: 13% !important;
+}
+.content {
+    padding: 30px !important;
+}
+.line-height-tw {
+    line-height: 18px;
+}
+}
+@media (max-width: 375px) {
+.text-font {
+        font-size: 12px;
+}
+.border-radius-top-ft {
+        border-radius: 0px 0px 0px 0px;
+}
+.p-l-f-p {
+    padding-left: 16% !important;
+} 
+.line-height-tw {
+    line-height: 18px;
+}
+}
+@media (max-width: 320px) {
+.text-font {
+    font-size: 12px;
+}
+.border-radius-top-ft {
+    border-radius: 0px 0px 0px 0px;
+}
+.p-l-f-p {
+    padding-left: 18% !important;
+}
+.line-height-tw {
+    line-height: 18px;
+}
+}
+/*end new responsive code*/