Hướng dẫn tạo một trang đơn Layout E-Store HTML5 CSS3

Xem: 524    Tải: 16   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 3 đánh giá ) File đã được kiểm thử
Miễn Phí [megacode]huong-dan-tao-mot-trang-don-layout.rar (340.28 KB)
Tải miễn phí

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-tao-mot-trang-don-layout.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

Chúng ta hãy bắt đầu. Cho phép tạo thư mục mới và một số thư mục bên trong (để giữ cho tất cả các cấu trúc tốt)

Chúng ta hãy bắt đầu. Cho phép tạo thư mục mới và một số thư mục bên trong (để giữ cho tất cả các cấu trúc tốt):

css - trong đó sẽ chứa css của chúng tôi (NIVO-slider.css, reset.css và style.css) hình ảnh - trong đó sẽ chứa tất cả các hình ảnh được sử dụng
js - sẽ chứa các file JS (html5.js, jquery.js, jquery.nivo.slider.pack.js và main.js)
Bây giờ tôi sẽ cung cấp cho bạn những khu vực đầu HTML thông thường của index.html với CSS đính kèm / JS

<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>E-Store single page layout | Script Tutorials</title>
    <meta charset="utf-8">
 
    <!-- Linking styles -->
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen">
 
    <!-- Linking scripts -->
    <script src="js/jquery.js"></script>
    <script src="js/jquery.nivo.slider.pack.js"></script>   
    <script src="js/main.js"></script>
 
    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5.js"></script>
    <![endif]-->
</head></span></span>

Di chuyển về phía trước - bố trí chính (cơ thể)
Tổng số các bố trí bao gồm 4 phần chính: header (với menu, logo, hình thức tìm kiếm, biểu tượng xã hội, cộng với menu phụ với các loại), phần trượt (NIVO Slider), phần nội dung chính (hai cột bố trí cho tất cả các nội dung còn lại của bạn) và chân trang (có bản quyền) như :

<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><body>
 
<div class="container">
 
        <header><!-- Defining the header section of the page -->
 
            <nav><!-- Defining the navigation menu -->
                <ul>
                    <li class="selected"><a href="#">Home</a></li>
                    <li><a href="#">Specials</a></li>
                    .......
                </ul>
            </nav>
 
 
            <div class="top_head"><!-- Defining the top head element -->
                <div class="logo"><!-- Defining the logo element -->
                    <a href="https://www.script-tutorials.com/">
                        <img src="images/logo.jpg" title="E-Store template" alt="E-Store template" />
                    </a>
                </div>
 
                <section id="search"><!-- Search form -->
                    <form action="#" onsubmit="return false;" method="get">
                        .......
                    </form>
 
                    <ul id="social"><!-- Social profiles links -->
                        .......
                    </ul>
                </section>
            </div>
 
            <section id="submenu"><!-- Defining the sub menu -->
                <ul>
                    <li><a href="#">Category #1</a></li>
                    <li><a href="#">Category #2</a></li>
                    .......
                </ul>
            </section>
 
        </header>
 
        <div id="slider"><!-- Defining the main content section -->
 
        <!-- Promo slider -->
            <section id="slider-wrapper">
                .......
            </section>
        </div>
 
        <div id="main"><!-- Defining submain content section -->
            <section id="content"><!-- Defining the content section #2 -->
                <div id="left">
                    <h3>Last products</h3>
                    <ul>
                        ............
                    </ul>
                </div>
                <div id="right">
                    <h3>Top sells</h3>
                    <ul>
                        ............
                    </ul>
                </div>
            </section>
        </div>
 
 
    <footer><!-- Defining the footer section of the page -->
        <div id="privacy">
        </div>
    </footer>
 
</div>
 
</body></span></span>

Và đây là code Css:

<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">/* base styles */
* {
    margin: 0;
    padding: 0;
}
body {
    background: url("../images/body-bg.jpg") no-repeat fixed center top #FFFFFF;
    color: #7F7F7F;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    line-height: 17px;
}
img {
    border: 0 none;
}
.container {
    margin:30px auto 0;
    position:relative;
    text-align:left;
    width:1000px;
    padding-left: 20px;
    padding-right: 20px;
}</span></span>

Header section with nav menu, logo, search bar, submenu etc

header area

Here are HTML for this section:

<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><header><!-- Defining the header section of the page -->
 
    <nav><!-- Defining the navigation menu -->
        <ul>
            <li class="selected"><a href="#">Home</a></li>
            <li><a href="#">Specials</a></li>
            <li><a href="#">All Products</a></li>
            <li><a href="#">Contact us</a></li>
            <li><a href="#">About</a></li>
            <li><a href="https://www.script-tutorials.com/creating-new-html5css3-single-page-layout-e-store/">Back To Tutorial</a></li>
        </ul>
    </nav>
 
 
    <div class="top_head"><!-- Defining the top head element -->
        <div class="logo"><!-- Defining the logo element -->
            <a href="https://www.script-tutorials.com/">
                <img src="images/logo.jpg" title="E-Store template" alt="E-Store template" />
            </a>
        </div>
 
        <section id="search"><!-- Search form -->
            <form action="#" onsubmit="return false;" method="get">
                <input type="text" onfocus="if (this.value =='Search..' ) this.value=''" onblur="if (this.value=='') this.value='Search..'" value="Search.." name="q">
                <input type="submit" value="Search">
            </form>
 
            <ul id="social"><!-- Social profiles links -->
                <li><a href="#" title="facebook" rel="external nofollow"><img alt="" src="images/facebook.png"></a></li>
                <li><a href="#" title="twitter" rel="external nofollow"><img alt="" src="images/twitter.png"></a></li>
                <li><a href="#" title="linkedin" rel="external nofollow"><img alt="" src="images/linkedin.png"></a></li>
                <li><a href="#" title="rss" rel="external nofollow"><img alt="" src="images/rss.png"></a></li>
            </ul>
        </section>
    </div>
 
    <section id="submenu"><!-- Defining the sub menu -->
        <ul>
            <li><a href="#">Category #1</a></li>
            <li><a href="#">Category #2</a></li>
            <li><a href="#">Category #3</a></li>
            <li><a href="#">Category #4</a></li>
            <li><a href="#">Category #5</a></li>
            <li><a href="#">Category #6</a></li>
        </ul>
    </section>
 
</header></span></span>
CSS cho phần header:
<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">/* header section */
header {
    background: url("../images/header-bg.png") repeat scroll left top #fff;
    border-bottom:2px solid #e0e0e0;
    position: relative;
    z-index: 10;
}
.top_head {
    overflow: hidden;
    position: relative;
}
.logo {
    float: left;
    padding: 37px 0 0 39px;
}
#search {
    float: right;
    margin: 21px 41px 0 0;
    text-align: right;
}
#search form {
    float:right;
}
#search form input[type="text"] {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E0E0E0;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    height: 15px;
    padding: 5px;
    width: 129px;
}
#search form input[type="submit"] {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-left-width:0px;
    color: #383838;
    cursor:pointer;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: bold;
    height: 27px;
    padding: 0;
    width: 64px;
}
#social {
    float:right;
    list-style:none outside none;
    margin:0 30px 0 0;
    padding:0;
}
#social li {
    float:left;
    padding:0 0 0 5px;
}
#social li a:hover img {
    margin-top:1px;
}
 
/*navigation menu*/
nav {
    background-color:#00942f;
    overflow: hidden;
}
nav ul {
    margin: 0;
    padding: 0;
}
nav ul li {
    float: left;
}
nav ul li a {
    color: #FFFFFF;
    display: block;
    font-size: 11px;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    padding: 4px 10px 4px 11px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
}
nav ul li a:hover, nav ul li.selected a {
    background: none repeat scroll 0 0 #353535;
}
#submenu {
    background: -moz-linear-gradient(#ffffff, #f6f6f6); /* FF 3.6+ */  
    background: -ms-linear-gradient(#ffffff, #f6f6f6); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f6f6f6)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#ffffff, #f6f6f6); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#ffffff, #f6f6f6); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6')"; /* IE8+ */  
    background: linear-gradient(#ffffff, #f6f6f6); /* the standard */ 
 
    border: 1px solid #E0E0E0;
    height: 34px;
    margin: 20px 40px;
}
#submenu ul {
    margin: 0;
    padding: 0;
}
#submenu li {
    float: left;
    line-height: 1em;
    list-style: none outside none;
    margin: 0;
    position: relative;
}
#submenu li a {
    background: url("../images/smenup.png") no-repeat scroll 0 9px transparent;
    border-right: 1px solid #E0E0E0;
    color: #383838;
    display: block;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    margin: 0 0 0 19px;
    padding: 9px 18px 11px 24px;
    text-decoration: none;
    text-transform: uppercase;
}
#submenu li a:hover {
    background-image: url("../images/smenua.png");
}</span></span>

Slider and Main content section

After our header area – we have next two areas – slider (nivoSlider) and main content area.

Main content area

<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><div id="slider"><!-- Defining the main content section -->
 
<!-- Promo slider -->
    <section id="slider-wrapper">
        <div id="slider" class="nivoSlider">
            <img style="display: none;" src="images/promo1.jpg" alt="" title="#htmlcaption-1">
            <img style="display: none;" src="images/promo2.jpg" alt="" title="#htmlcaption-2">
            <img style="display: none;" src="images/promo3.jpg" alt="" title="#htmlcaption-3">
        </div>
        <div id="htmlcaption-1" class="nivo-html-caption">
            <h5 class="p2">Welcome to the our E-Shop</h5>
            <p>Put any description here</p>
        </div>
        <div id="htmlcaption-1" class="nivo-html-caption">
            <h5 class="p2">This is promo area</h5>
            <p>Put any description here</p>
        </div>
        <div id="htmlcaption-2" class="nivo-html-caption">
            <h5 class="p2">Where you can add any feature products</h5>
            <p>Put any description here</p>
        </div>
        <div id="htmlcaption-3" class="nivo-html-caption">
            <h5 class="p2">Or something else</h5>
            <p>Put any description here</p>
        </div>
    </section>
</div>
 
<div id="main"><!-- Defining submain content section -->
    <section id="content"><!-- Defining the content section #2 -->
        <div id="left">
            <h3>Last products</h3>
            <ul>
                <li>
                    <div class="img"><a href="#"><img alt="" src="images/post1.jpg"></a></div>
                    <div class="info">
                        <a class="title" href="#">Product 1</a>
                        <p>long description here 1</p>
                        <div class="price">
                            <span class="st">Our price:</span><strong>$550.00</strong>
                        </div>
                        <div class="actions">
                            <a href="#">Details</a>
                            <a href="#">Add to cart</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img alt="" src="images/post2.jpg"></a></div>
                    <div class="info">
                        <a class="title" href="#">Product 2</a>
                        <p>long description here 2</p>
                        <div class="price">
                            <span class="st">Our price:</span><strong>$250.00</strong>
                        </div>
                        <div class="actions">
                            <a href="#">Details</a>
                            <a href="#">Add to cart</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img alt="" src="images/post3.jpg"></a></div>
                    <div class="info">
                        <a class="title" href="#">Product 3</a>
                        <p>long description here 3</p>
                        <div class="price">
                            <span class="st">Our price:</span><strong>$350.00</strong>
                        </div>
                        <div class="actions">
                            <a href="#">Details</a>
                            <a href="#">Add to cart</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img alt="" src="images/post4.jpg"></a></div>
                    <div class="info">
                        <a class="title" href="#">Product 4</a>
                        <p>long description here 1</p>
                        <div class="price">
                            <span class="st">Our price:</span><strong>$550.00</strong>
                        </div>
                        <div class="actions">
                            <a href="#">Details</a>
                            <a href="#">Add to cart</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img alt="" src="images/post5.jpg"></a></div>
                    <div class="info">
                        <a class="title" href="#">Product 5</a>
                        <p>long description here 2</p>
                        <div class="price">
                            <span class="st">Our price:</span><strong>$250.00</strong>
                        </div>
                        <div class="actions">
                            <a href="#">Details</a>
                            <a href="#">Add to cart</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img alt="" src="images/post6.jpg"></a></div>
                    <div class="info">
                        <a class="title" href="#">Product 6</a>
                        <p>long description here 3</p>
                        <div class="price">
                            <span class="st">Our price:</span><strong>$350.00</strong>
                        </div>
                        <div class="actions">
                            <a href="#">Details</a>
                            <a href="#">Add to cart</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div id="right">
            <h3>Top sells</h3>
            <ul>
                <li>
                    <div class="img"><a href="#"><img alt="" src="images/post6.jpg"></a></div>
                    <div class="info">
                        <a class="title" href="#">Product 7</a>
                        <div class="price">
                            <span class="usual">$600.00 </span>&nbsp;
                            <span class="special">$500.00</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img alt="" src="images/post5.jpg"></a></div>
                    <div class="info">
                        <a class="title" href="#">Product 8</a>
                        <div class="price">
                            <span class="usual">$500.00 </span>&nbsp;
                            <span class="special">$400.00</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img alt="" src="images/post4.jpg"></a></div>
                    <div class="info">
                        <a class="title" href="#">Product 9</a>
                        <div class="price">
                            <span class="usual">$700.00 </span>&nbsp;
                            <span class="special">$600.25</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img alt="" src="images/post3.jpg"></a></div>
                    <div class="info">
                        <a class="title" href="#">Product 10</a>
                        <div class="price">
                            <span class="usual">$805.00 </span>&nbsp;
                            <span class="special">$714.25</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img alt="" src="images/post2.jpg"></a></div>
                    <div class="info">
                        <a class="title" href="#">Product 11</a>
                        <div class="price">
                            <span class="usual">$1205.00 </span>&nbsp;
                            <span class="special">$1000.25</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img alt="" src="images/post1.jpg"></a></div>
                    <div class="info">
                        <a class="title" href="#">Product 12</a>
                        <div class="price">
                            <span class="usual">$200.00 </span>&nbsp;
                            <span class="special">$190.25</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </section>
</div></span></span>
Nội dung chính của Css:
<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">/* main section */
#main {
    background-color: #fff;
    padding:20px 0;
}
#content {
    overflow: hidden;
}
#content #left, #content #right {
    border: 1px solid #E9E9E9;
    float: left;
    margin: 0 2%;
    width: 63%;
}
#content #right {
    margin-left: 0;
    width: 30%;
}
#content h3 {
    background: -moz-linear-gradient(#ffffff, #F6F6F6); /* FF 3.6+ */  
    background: -ms-linear-gradient(#ffffff, #F6F6F6); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #F6F6F6)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#ffffff, #F6F6F6); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#ffffff, #F6F6F6); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F6F6F6'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F6F6F6')"; /* IE8+ */  
    background: linear-gradient(#ffffff, #F6F6F6); /* the standard */ 
 
    border-bottom: 1px solid #E0E0E0;
    color: #3C3C3C;
    font-size: 12px;
    font-weight: bold;
    line-height: 15px;
    padding: 11px 0 12px 20px;
    text-transform: uppercase;
}
#content ul {
    list-style:none outside none;
    margin:0;
    padding:0;
}
#content #left ul li {
    float:left;
    padding-bottom: 21px;
    width: 33%;
}
#content #left ul li:hover {
    background-color: #fbfbfb;
}
#content #right ul li {
    border-top: 1px solid #E7E7E7;
    overflow: hidden;
}
#content #right ul li:hover {
    background-color: #fbfbfb;
}
#content #right ul li:first-child {
    border-width: none;
}
#content #left ul li .img {
    text-align: center;
}
#content #right ul li .img {
    background-color: #FFFFFF;
    float: left;
    height: 94px;
    text-align: center;
    width: 113px;
}
#content #left ul li .img img {
    height:128px;
    width:128px;
}
#content #right ul li .img img {
    height:70px;
    margin-top: 11px;
    width:70px;
}
#content #left ul li .info {
    padding: 17px 20px 0 19px;
}
#content #right ul li .info {
    float: left;
    overflow: hidden;
    padding: 17px 0 0 21px;
    width: 164px;
}
#content ul li .info .title {
    color: #4B4B4B;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    text-decoration: none;
    text-transform: uppercase;
    width: 150px;
}
#content ul li .info .title:hover {
    color: #049733;
}
#content #left ul li .info p {
    color: #7F7F7F;
    font-size: 11px;
    line-height: 16px;
    padding-top: 3px;
}
#content #left ul li .info .price {
    background: none repeat scroll 0 0 #F7F7F7;
    color: #383838;
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    margin: 17px 0 10px;
    padding: 6px 0 6px 8px;
}
#content #right ul li .info .price {
    color: #383838;
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    padding-top: 25px;
}
#content #left ul li .info .price .st {
    color: #7F7F7F;
    font-size: 11px;
    line-height: 16px;
    margin-right: 3px;
}
#content #right ul li .info .price .usual, #content #right ul li .info .price .special {
    color: #7F7F7F;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    padding-right: 6px;
    text-decoration: line-through;
}
#content #right ul li .info .price .special {
    color: #FD7A01;
    font-weight: bold;
    text-decoration: none;
}
#content #left ul li .info .actions {
    overflow:hidden;
}
#content #left ul li .info .actions a {
    border: 1px solid #E0E0E0;
    color: #fd7a01;
    display: block;
    float:right;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    padding: 5px;
    text-decoration: none;
}
#content #left ul li .info .actions a:first-child {
    color: #009832;
    float:left;
}</span></span>

Phong cách tùy chỉnh các thanh trượt của chúng tôi (NIVO Slider) sẽ trong tập tin bên ngoài
css / NIVO-slider.css
File này luôn luôn có sẵn trong gói của chúng tôi.
phần Footer
Cuối cùng, đây là khu vực chân của chúng tôi

footer area

<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><footer><!-- Defining the footer section of the page -->
    <div id="privacy">
        E-Store template © 2011 <a class="link" href="https://www.script-tutorials.com/">Privacy Policy</a><br />
        <a class="link" href="https://www.script-tutorials.com/creating-new-html5css3-single-page-layout-e-store/">Template by Script Tutorials</a>
    </div>
</footer></span></span>

CSS cho phần chân trang :

<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">/* footer section */
footer {
    background: none repeat scroll 0 0 #FFFFFF;
    border-top: 1px solid #E0E0E0;
    margin: 0 0 5px;
    padding: 15px 0 15px 20px;
}
footer #privacy {
    color: #9B9B9B;
    font-size: 12px;
    line-height: 20px;
    overflow: hidden;
    width: 100%;
}
footer a{
    color: #9B9B9B;
    text-decoration: none;
}</span></span>

JS cho mẫu của chúng tôi
Dưới đây là tất cả các kịch bản cần thiết JS:

js / html5.js, js / jquery.js và js / jquery.nivo.slider.pack.js
Tất cả các thư viện này đã có sẵn trong gói :

<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random',
        slices:15,
        boxCols:8,
        boxRows:8,
        animSpeed:500,
        pauseTime:4000,
        directionNav:false,
        directionNavHide:false,
        controlNav:false,
        captionOpacity:1
    });
});</span></span>

 

 
 

Hướng dẫn tạo một trang đơn Layout E-Store HTML5 CSS3

Hướng dẫn tạo một trang đơn Layout E-Store HTML5 CSS3 Đăng ngày 27-01-2016  Chúng ta hãy bắt đầu. Cho phép tạo thư mục mới và một số thư mục bên trong (để giữ cho tất cả các cấu trúc tốt) 5/10 524

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
Hỗ trợ kỹ thuật cho thành viên:
Số di động (Hotline): 0125.99999.25
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;