-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbrand.html
174 lines (166 loc) · 11.3 KB
/
brand.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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="theme-color" content="#f5a605">
<meta name="title" content="르노 - 브랜드 | Passion for Life">
<meta name="description" content="르노의 걸어온 길과 나아갈 길을 확인하세요">
<meta name="keywords" content="르노, 온라인 견적, 캡처, 조에, 트위지, 마스터">
<meta property="og:site_name" content="Renault">
<meta property="og:title" content="르노 - 브랜드 | Passion for Life">
<meta property="og:description" content="르노의 걸어온 길과 나아갈 길을 확인하세요">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/stylesheet.css" rel="stylesheet">
<link href="css/sub.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon-64.ico">
<link rel="icon" href="favicon.png">
<link rel="canonical" href="https://deacct.github.io/renault_vertual_renewal/brand.html">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
<script src="js/sub.js"></script>
<title>르노 - 브랜드 | Passion for Life</title>
</head>
<body class="sub1">
<header>
<div class="header_inner">
<h1 class="logo"><a href="./index.html"><img src="img/rn-header-logo.svg" alt="르노"></a></h1>
<nav class="gnb">
<h2 class="blind">대메뉴</h2>
<ul>
<li class="current_page"><a href="./brand.html">브랜드</a></li>
<li><a href="./car.html">자동차</a></li>
<li><a href="./service.html">서비스</a></li>
<li><a href="./media.html">미디어</a></li>
</ul>
</nav>
<button class="search blind">검색</button>
<button class="hamburger mobile">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
<section id="visual">
<div class="visual_wrap">
<h2 class="title sub">브랜드</h2>
</div>
</section>
<main>
<div class="main_wrap">
<section id="introduce">
<div class="intd_inner">
<h2><span>Passion</span> <span>for Life</span></h2>
</div>
<div class="intd_pic">
<p>르노의 열정, 그 중심에는 혁신적인 엔지니어링 컨셉이 있습니다. 우리는 고객의 삶에 가장 밀접한 새로움을 창조하기 위해 매 순간 도전하고 있습니다.
</p>
</div>
<div class="intd_bg"></div>
</section>
<section id="years">
<div class="years_inner">
<div class="year_left">
<h2>역사</h2>
<div class="years_pic"></div>
</div>
<div class="year_right">
<div class="yearline"></div>
<ul class="years_wrap">
<li><span>1898</span><a href="#" class="on">르노 최초의 차 부아트레 탄생</a></li>
<li><span>1924</span><a href="#">르노 로고에 다이아모드 형상 도입</a></li>
<li><span>1946</span><a href="#">르노 최초의 후방 엔진 모델 4CV</a></li>
<li><span>1984</span><a href="#">세계 최초의 MPV, 에스파스</a></li>
<li><span>2010</span><a href="#">디자인의 새로운 전성기, 드지르</a></li>
</ul>
<strong><span>YYYY</span> years</strong>
</div>
</div>
</section>
<section id="racing">
<div class="race_inner">
<div class="race_pic"></div>
<div class="race_right">
<h2>레이싱</h2>
<div class="identity_wrap">
<svg viewBox="0 0 838 340" id="race_identity">
<path class="cls-1" d="M25,269.61s-3.75.22-6.72,7.81-3.68,15.63-6.38,19.26-10.07,3.25-9.69,7.93c1.32,16.39,74,17.83,74,17.83l108.63-1.66v-7.26" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M835.16,293.13l-463.75,16.1c11.44-24.21,18-74,6.6-105.21-31.69-72.64-127.22-89.37-181.81-33s-11.44,142.52-11.44,142.52-45.35,2.09-95.31.11-66-12.1-68.79-17.06c0,0-2.31-6.49,0-9.13,0,0,46.56,4.62,68.79-10.57s46-81.66,68.89-103.23,56.79-58.55,116.22-58.55,96,14.53,125,42.7,76.6,90.69,109.62,96.85,198.54-15.41,198.54-15.41" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M20.66,287.44s-.16-17.34,7.43-27.32C24.38,231,42.78,188.39,42.78,188.39s8.92-23.44,73-41.93a819.4,819.4,0,0,1,117.42-24.8" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M312.85,117.49s51.51-7.68,69.12-10.32,245-17,280.2-17.39,66.7-1.54,78.8-7.92,48.15-33.13,48.15-33.13,20.25,1.86,45.87,4.71" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M835.22,206.13c-8.35,10.67-17.72,20-27.55,25.18-33.9,18.05-182.25,32.58-236,37s-177,12.76-177,12.76" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M339.46,123S577.65,112,694.53,117.49c60.12,2.54,110.71,5.19,140.63,7.7" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M835.16,253.45c-32.11-.68-92.1,11.54-92.1,11.54" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M736.79,95.94s64.45-3.8,98.28-5.17" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M268.4,115.09s31.34-7.59,44.45-7.92,34.13.77,34.13.77" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M312.85,107.17s12.67,5.56,40.3,4.31" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M340.84,111.6S491.59,24.41,554.1,13,701.57-3.33,835.84,20.44" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M532.65,18.6l3.84,3.83a1200.31,1200.31,0,0,0-147.7,84" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M409,104.8S500,38.05,564.67,24s184.45-6.61,265.45,9.68l5.14,1" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M781.73,121.66s-48.79,88.73-83.2,133.07" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M44.39,185.56a880.88,880.88,0,0,1,114-11.92" transform="translate(-0.66 -1.98)"/>
<circle class="cls-1" cx="276.98" cy="239.46" r="95.09"/>
<path class="cls-1" d="M75.8,185.56,132,180.68S99.57,238.24,86.7,250.46s-52.5,11.23-52.5,11.23" transform="translate(-0.66 -1.98)"/>
<line class="cls-1" x1="62.6" y1="242.54" x2="94.95" y2="237.25"/>
<path class="cls-1" d="M113.77,256.4s25.09-.66,41.27-11.88" transform="translate(-0.66 -1.98)"/>
<path class="cls-1" d="M101.36,281.05s36.81-3.81,52-19.35" transform="translate(-0.66 -1.98)"/>
<polyline class="cls-1" points="36.95 200.09 88.02 196.52 111.5 210.48"/>
<path class="cls-1" d="M377.58,309l-4.85,5.47s310.94-.14,462.42-7.81" transform="translate(-0.66 -1.98)"/>
</svg>
</div>
<p>르노는 지금 모터스포츠에 대한 열정과 전기차 분야의 전문성을 활용하여, 새로운 FIA 포뮬러 E 챔피언십에 참가하고 있습니다. 2013년 5월부터 '포뮬러 E 홀딩'의 기술 파트너로서, 스파크-르노 SRT_01E의 개발에 적극적으로 참여하고 있습니다.</p>
</div>
</div>
</section>
<section id="future">
<div class="future_inner">
<h2>미래</h2>
<strong>우리는 수십년 동안 연료 효율은 높이고 오염 물질을 줄이는 차량 개발에 앞장서 왔습니다.</strong>
<div class="future_boxes">
<div>
<div class="env_icon">
<svg id="env" viewBox="0 0 37 37">
<path class="st0" d="M18.5,36.5c-9.9,0-18-8.1-18-18c0-4.8,1.9-9.4,5.3-12.7"/>
<polyline class="st0" points="0.5,5.5 6.5,5.5 6.5,11.5 "/>
<path class="st0" d="M18.5,0.5c9.9,0,18,8.1,18,18c0,4.8-1.9,9.4-5.3,12.7"/>
<polyline class="st0" points="36.5,31.5 30.5,31.5 30.5,25.5 "/>
<path class="st0" d="M24.5,20.5c0,3.3-2.7,6-6,6s-6-2.7-6-6c0-8,6-12,6-12S24.5,13.5,24.5,20.5z"/>
<path class="st0" d="M18.5,14.5c0,0-3,3-3,6c0,2,1,2,1,2"/>
</svg>
</div>
<p>우리의 차량이 환경에 미치는 영향을 줄여 나갈 것입니다</p>
</div>
<div>
<div class="sustain_icon">
<svg id="sustain" viewBox="0 0 56 32">
<path class="st0" d="M44.5,27.5h3h8c0-6.6-5.4-12-12-12l-11-12"/>
<polyline class="st0" points="17.5,27.5 31.5,27.5 36.5,27.5 "/>
<path class="st0" d="M17.5,3.5c-6.1,0-11,4.9-11,11c0,0.1,0,0.2,0,0.3c-0.5-0.2-1-0.3-1.5-0.3c-2.3,0-4.2,1.8-4.5,4l0,0v9h9"/>
<polygon class="st0" points="23.5,0.5 15.5,12.5 21.5,12.5 18.5,20.5 27.5,9.5 21.5,9.5 "/>
<circle class="st0" cx="13.5" cy="27.5" r="4"/>
<circle class="st0" cx="40.5" cy="27.5" r="4"/>
</svg>
</div>
<p>지속 가능한 이동수단으로서 전기차 분야의 선구자가 되겠습니다</p>
</div>
</div>
</div>
</section>
</div>
</main>
<footer>
<div class="footer_inner">
<h2 class="blind">sns와 저작권</h2>
<ul class="sns">
<li><a href="#" class="blind">페이스북</a></li>
<li><a href="#" class="blind">네이버 블로그</a></li>
<li><a href="#" class="blind">인스타그램</a></li>
<li><a href="#" class="blind">유튜브</a></li>
</ul>
<p>© Renault 2020</p>
</div>
</footer>
</body>
</html>