728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>freight1</title>
<script
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="css/homepage.css" />
</head>
<body>
<header>
<div class="container">
<div class="logo">
<a href="#"
><i class="fa-solid fa-truck" style="color: #ffffff"></i
></a>
</div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">센터안내</a></li>
<li><a href="#">운임안내</a></li>
<li><a href="#">차량안내</a></li>
<li><a href="#">견적문의</a></li>
</ul>
<ul class="icon">
<li>
<a href="#"><i class="fa-solid fa-phone"></i>전화</a>
</li>
<li>
<a href="#"><i class="fa-regular fa-envelope"></i>문자</a>
</li>
<li>
<a href="#"><i class="fa-regular fa-message"></i>카톡</a>
</li>
</ul>
</div>
</header>
<div class="front">
<div class="mainimages">
<img src="/홈페이지구현/img/maintruck.png" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
</div>
<div class="post">
<h1>
<b>전국화물 실시간배차</b><br />
화물용달은 전국 어디서나 1533-9943
</h1>
</div>
</div>
<!--front-->
<div class="exp">
<h1>
--화물은 전국 어디서나 최단시간 최적운임으로 실시간 화물용달을 배차해
드리고 있습니다.
</h1>
<div class="phone">
<div class="btnGroup">
<button class="ph1">
<a href="#"><i class="fa-solid fa-phone"></i></a>고객센터 바로전화
1533-9943
</button>
<button class="ph1">
<a href="#"><i class="fa-solid fa-phone"></i></a>담당소장 직통
010-4417-8224
</button>
</div>
<div class="lineGroup">
<div class="line1">
<div class="exp1">
<img src="/css-example-main/홈페이지구현/img/truck1.png" alt="" />
</div>
</div>
<div class="line2">
<div class="if">
<ul>
<li>
<i class="fa-solid fa-check"></i
><a href="#">전국 네트워크를 통한 빠른 배차</a>
</li>
<li>
<i class="fa-solid fa-check"></i
><a href="#">다마스부터2톤이상 모든 화물자 배차</a>
</li>
<li>
<i class="fa-solid fa-check"></i
><a href="#">일반화물, 특수화물, 기업물류 정기배차 운용</a>
</li>
<li>
<i class="fa-solid fa-check"></i
><a href="#">안전하고 정확한 배송 서비스</a>
</li>
</ul>
<button class="ph2">
<a href=""><i class="fa-regular fa-pen-to-square"></i></a>온라인
견적문의
</button>
</div>
</div>
</div>
</div>
<!--phone-->
</div>
<!--exp-->
<div class="exp2">
<div class="logo">
<ul>
<li>
<a href=""><i class="fa-solid fa-clock"></i></a>
<p>
빠르고 정확한 배차 배송 서비스로 <br />
고객의 시간을 절약해 드립니다.
</p>
</li>
<li>
<a href=""><i class="fa-solid fa-person"></i></a>
<p>
실시간 상담접수로 전화, 문자, 카톡, <br />온라인문의 모두
가능합니다.
</p>
</li>
</ul>
<ul>
<li>
<a href=""><i class="fa-regular fa-credit-card"></i></a>
<p>
가장 효율적인 배차 시스템으로 고객 <br />의물류비용을 절감해
드립니다.
</p>
</li>
<li>
<a href=""><i class="fa-solid fa-truck-fast"></i></a>
<p>
화물을 안전하게 배송함을 최우선으 <br />으로 하여 안심 할 수
있습니다.
</p>
</li>
</ul>
</div>
<div class="picture"><img src="/css-example-main/홈페이지구현/img/truck2.png" width="660px" height="501px" /> <img src="" alt="" /></div>
</div>
<!--exp2-->
<div class="service">
<h1>전국화물실시간배차센터의 전문서비스</h1>
<ul>
<li>
<a href="#"
><i class="fa-solid fa-user-clock" style="color: #ff0000"></i
></a>
<h3>빠르고 정확한 배차</h3>
<p>전국 전상망 프로그램을 이용하여 전국 어디서나 빠른배차</p>
</li>
<li>
<a href="#"
><i class="fa-solid fa-truck-field" style="color: #ff0000"></i
></a>
<h3>1톤~25톤 화물전차종</h3>
<p>고객님의 화물의 크기와 용도에 맞도록 최적의 차량을 배차</p>
</li>
<li>
<a href="#"
><i class="fa-solid fa-cart-shopping" style="color: #ff0000"></i
></a>
<h3>안전한 화물운송</h3>
<p>배송을 마칠때 까지 화물을 안전하게 보관 및 운송</p>
</li>
<li>
<a href="#"
><i class="fa-regular fa-building" style="color: #ff0000"></i
></a>
<h3>기업물류 정기운송</h3>
<p>기업에서 이용하는 정기물류, 특수물류 등 전문운송 배차</p>
</li>
<li>
<a href="#"
><i class="fa-solid fa-credit-card" style="color: #ff0000"></i
></a>
<h3>운송비 절감</h3>
<p>가장 효울적인 전국망 배차시스템으로 고객의 물류비용 절감</p>
</li>
<li>
<a href="#"
><i class="fa-solid fa-person" style="color: #ff0000"></i
></a>
<h3>실시간 상담접수</h3>
<p>전화, 문자, 카톡, 온라인 상담, 이메일 문의 접수 및 즉시 상담</p>
</li>
</ul>
<div class="phone2">
<button>고객센터 바로전화1533-9943</button>
<button>담당소장 직통 010-4417-8224</button>
</div>
</div>
<!--service-->
<div class="charge">
<h2>운송요금안내</h2>
<div class="tag">
<b>운송거리별 요금표(전국권,시내운송)</b><b>단위: 만원(vat별도)</b>
</div>
<form>
<table>
<tr>
<td>차량종류</td>
<td>0.5톤</td>
<td>1톤</td>
<td>1.4톤</td>
<td>2.5톤</td>
<td>5톤</td>
<td>8톤</td>
<td>11톤</td>
<td>18톤</td>
<td>25톤</td>
<td>추레라</td>
</tr>
<tr>
<td>운송거리</td>
<td>다마스</td>
<td></td>
<td></td>
<td></td>
<td>5톤장축</td>
<td>5톤플러스</td>
<td>5톤풀축</td>
<td></td>
<td></td>
<td>펑카</td>
</tr>
<tr>
<td>15k</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>7</td>
<td>9</td>
<td>11</td>
<td>13</td>
<td>17</td>
<td>19</td>
<td>22</td>
</tr>
<tr>
<td>30k</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>18</td>
<td>20</td>
<td>23</td>
</tr>
<tr>
<td>50k</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>16</td>
<td>21</td>
<td>22</td>
<td>25</td>
</tr>
<tr>
<td>70k</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>11</td>
<td>13</td>
<td>16</td>
<td>18</td>
<td>22</td>
<td>24</td>
<td>26</td>
</tr>
<tr>
<td>90k</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>12</td>
<td>14</td>
<td>18</td>
<td>20</td>
<td>23</td>
<td>25</td>
<td>28</td>
</tr>
<tr>
<td>110k</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>13</td>
<td>15</td>
<td>19</td>
<td>22</td>
<td>25</td>
<td>27</td>
<td>30</td>
</tr>
<tr>
<td>130k</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>14</td>
<td>16</td>
<td>20</td>
<td>23</td>
<td>26</td>
<td>28</td>
<td>32</td>
</tr>
<tr>
<td>150k</td>
<td>10</td>
<td>11</td>
<td>13</td>
<td>15</td>
<td>18</td>
<td>22</td>
<td>25</td>
<td>28</td>
<td>30</td>
<td>34</td>
</tr>
<tr>
<td>200k</td>
<td>12</td>
<td>13</td>
<td>15</td>
<td>18</td>
<td>21</td>
<td>25</td>
<td>28</td>
<td>32</td>
<td>34</td>
<td>36</td>
</tr>
</table>
</form>
<div>
<b
>※최저요금 기준으로<b>기사 수작업, 화물의 특성, 결제방식</b>등에
따라서</b
>
<a href="#">요금조정 있을 수 있음</a>
</div>
</div>
<!--charge-->
<div class="phone3">
<div><p>고객센터</p></div>
<div><b>전국어디서나 1533-9943</b><b>기타문의</b></div>
<div>
<ul>
<li>고객센터 바로전화1533-9943</li>
<li>담당소장 직통010-4417-8224</li>
</ul>
</div>
</div>
<!--phone3-->
<div class="info">
<div>
<h2>화물차량안내</h2>
</div>
<div class="pic">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<!--pic-->
</div>
<!--info-->
<div class="mail">
<div>
<h12>온라인 견적문의</h12>
</div>
<div class="mwssage">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<footer>
<img src="" alt="" />
<p>전국화물실시간 배차 해피콜 전국화물</p>
<b>상호:(주)해피콜전국화물</b
><b>주소:대전 유성구 계룡로 105번길 15, 312호(봉명동, 한진오피스텔)</b>
<b>전화:1533-9943</b><b>팩스:042-822-4207</b>
<br />
<b>사업자등록번호:469-81-02356</b><b>대표:김신,문정은</b
><b>담당소장:김명의</b><b>화물운송사업허가증:관허 제 주선 1999-03-06호</b>
</footer>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
header {
width: 100%;
min-width: 1200px;
background-color: #000;
color: #fff;
}
.if {
text-align: left;
}
header > .container > .icon {
display: flex;
}
header > .container > .icon > li {
padding: 0 20px;
}
header > .container {
width: 1200px;
height: 70px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.menu {
display: flex;
}
.menu > li {
padding: 20px;
}
.menu > li:nth-child(1) a {
border-bottom: 1px solid red;
}
.ph1 {
margin-bottom: 50px;
background-color: orange;
border-radius: 10px;
padding: 5px;
border: 1px solid white;
color: white;
font-size: 25px;
margin-right: 50px;
}
.ph2 {
margin-top: 100px;
margin-left: 90px;
background-color: orange;
border-radius: 10px;
padding: 5px;
border: 1px solid white;
color: white;
font-size: 25px;
}
.front {
text-align: center;
width: 1200px;
height: 100%;
height: 500px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.line1 {
margin-right: 30px;
}
.line1 {
height: 100%;
}
.exp {
text-align: center;
width: 1200px;
height: 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.exp > h1 {
margin-top: 100px;
}
.exp1 {
width: 520px;
height: 520px;
height: 100%;
background: url(/img/truck1.png);
margin-top: 40px;
}
.front > .post {
position: absolute;
top: 40%;
left: 30%;
}
.phone {
width: 1200px;
height: 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
margin-top: 50px;
}
.phone > .lineGroup{
width:100%;
display:flex;
align-items: center;
}
.phone > .lineGroup > .line2 {margin-top: 80px;
font-size: 25px;
margin-left: 50px;
}
.exp2 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.exp2 > .logo {text-align: center;
width: 525px;
outline: 1px solid blue;
text-align: center;
justify-content:space-evenly;}
.exp2 > .logo > ul {display: flex;
outline: 1px solid red ;
background-color:skyblue;
align-content: center;
align-items: center;
}
.exp2 > .logo > ul {width:525px;
height: 245px;
margin: 1px;
left: 30px;}
.exp2 > .logo > ul > li {margin: 10px;}
.exp2 > .logo > .picture {width: 600px;}
728x90
반응형
'코딩을해보자 > 프론트엔드' 카테고리의 다른 글
| FIGMA(피그마) (0) | 2024.09.30 |
|---|---|
| 비 전공자 프론트 엔드 1달 해본 후기 (8) | 2024.09.24 |
| 프론트엔드에서 flex를 배우는데 잘 안된다. 실패중 (0) | 2024.09.04 |
| 비전공자 초보자가 보는 프론트 앤드 수업 근황 (0) | 2024.08.22 |
| 복습 겸 적어보는 프론트 앤드 수업 3일 차(각종 연결 및 불러오기 과정) (0) | 2024.08.22 |