-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
224 lines (192 loc) · 17.8 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
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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html>
<head>
<title>Marques Soares +</title>
<meta charset="UTF-8">
<meta name="description" content="Conheça de perto as vantagens de ser Marques Soares +">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header class="page-header">
<nav class="page-header__nav gridrow">
<div class="flex-item">
<h1 class="page-header__nav-card-name">
Cartão Marques Soares
<svg viewBox="0 0 60 60" role="img" aria-label="Símbolo + desenhado" Title="+">
<path d="M52.4,28.6c0.2,0,0.3,0,0.5-0.1c0.3-0.1,0.5-0.1,0.7-0.2c0.3-0.1,0.7-0.2,1-0.3c0.3-0.1,0.5-0.1,0.8-0.1c0.2,0,0.3,0.1,0.3,0.2c-0.3,0.7-0.8,1.3-1.4,1.8c-0.7,0.7-1.5,1.4-2.4,2c-0.6,0.4-1.2,0.8-1.8,1.1c-0.5,0.2-1,0.3-1.5,0.3c-0.2,0.1-0.4,0.1-0.7,0.1c0,0.1,0,0.1,0.1,0.2c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c0,0,0.1,0.1,0.1,0.2c-0.6,0-1.1-0.2-1.6,0.1c-0.4,0.2-0.8,0-1.3,0.1c-1.3,0.2-3.8,0.1-5.1,0.3c-1.7,0.2-3.2,0.1-4.9,0.3c-1.1,0.1-2-0.5-3.2-0.3c-0.6,0.1-1.3,0.2-1.9,0.3c-0.1,0-0.2,0.1-0.3,0.2c-0.1,0.1-0.1,0.2-0.1,0.4c-0.1,0.5-0.3,1-0.6,1.5c-0.1-0.1-0.1-0.2-0.1-0.3c0-0.1,0.1-0.2,0.1-0.3c0.1-0.1,0.1-0.1,0.1-0.2c0,0,0-0.1,0-0.1c0.1,0,0.1-0.1,0.1-0.2c0-0.1-0.1-0.1-0.2-0.1c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0.1-0.2,0.3c0,0.1,0,0.2-0.1,0.3c-0.1,0-0.1,0.1-0.2,0.1L28.5,36c-0.1,0-0.1,0.1-0.1,0.2l0.2,0.1c0.1,0.1,0.2,0.1,0.3,0.2c0.1,0,0.1,0.1,0,0.2c-0.1,0.1-0.3,0.2-0.5,0.3c0.1,0.1,0.1,0.2,0.1,0.4c0,0.1,0,0.3-0.1,0.4v0.1c-0.1,0.4-0.3,0.7-0.5,1.1c-0.3,0.5-0.5,1.1-0.5,1.6c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.2,0.2-0.3,0.2c-0.1,0-0.2,0.1-0.3,0.1c-0.1,0.1-0.1,0.1-0.2,0.2l-0.7,1.9c-0.3,0.7-0.6,1.4-0.8,2.2c-0.6,1.8-1.1,3.7-1.6,5.5l-0.7,2.3c0,0-0.1-0.1-0.1-0.1L22.7,53c0,0,0-0.1,0-0.1c0,0-0.1,0-0.2,0c-0.1,0.1-0.1,0.2-0.2,0.3L21.9,54c-0.2-0.1-0.3-0.2-0.5-0.3c-0.2-0.2-0.5-0.4-0.8-0.5c-1.2-0.3-1.6-1.3-1.4-2.8c-0.1-0.3-0.2-0.7-0.3-0.9c-0.1-0.2-0.2-0.4-0.4-0.5c-1.2-0.3-1.6-1.3-1.3-2.9c0.5-2.7,1.2-5.3,2.2-7.8l0.5-1.3l0.3-0.7c-2.3,0.4-4.7,0.6-7,0.8c-0.1,0-0.3,0-0.4,0c-0.2,0-0.3,0-0.5,0c-1.6,0.1-2.5-0.5-2.9-2c-0.2-0.5-0.4-1-0.7-1.4c-0.3-0.5-0.6-1-0.8-1.6c-0.3-0.4-0.4-0.8-0.5-1.2c-0.1-0.4-0.3-0.9-0.5-1.2c-0.2-0.4-0.4-0.9-0.5-1.4c-0.1-0.5,0-1,0.4-1.3C7,26.6,7.5,26.4,8,26.4c1.4,0,2.8-0.1,4.2-0.2c1.5-0.1,3.1-0.2,4.6-0.2c1.6-0.1,3.1-0.2,4.7-0.5l1.7-0.2c0.2,0,0.4-0.1,0.6-0.2c0.2-0.1,0.3-0.3,0.4-0.5l1.8-5.2c0.5-1.6,1.1-3.3,1.6-4.9c0.2-0.6,0.4-1.2,0.6-1.8c0.6-1.9,1.3-3.7,2.2-5.5c0.3-0.5,0.7-0.9,1.3-1.1c0.5-0.2,1.1-0.2,1.5,0.1C34.3,7,35.1,8,35.7,9.1c0.1,0.2,0.2,0.5,0.2,0.8c0,0.3-0.1,0.6-0.2,0.9c0.8,0.7,1.5,1.6,2.1,2.5c0.1,0.3,0.2,0.6,0.1,0.9c0,0.3-0.1,0.7-0.3,1c-0.6,1.4-1.2,2.7-1.7,4.1c-0.5,1.5-1.1,2.9-1.7,4.3l-0.1,0.2c0.3,0,0.6-0.1,1-0.1c0.9-0.1,1.5,0.1,2.4,0c1.3-0.1,3.5,0.2,4.9,0c0.9-0.2,2.6,0.1,3.5,0c1-0.1,1.4,0.2,2.4,0c0.3-0.1,0.7,0.3,1.6,0.1s1.7-0.2,2.6-0.3c0.6-0.1,1.1-0.1,1.7,0c0.1,0,0,0.2-0.3,0.4c-0.3,0.2-0.7,0.5-1.1,0.9c-0.4,0.3-0.9,0.8-1.3,1.1c-0.3,0.2-0.5,0.5-0.7,0.7c-0.1,0.5-0.4,1-0.8,1.3c-0.4,0.3-0.8,0.5-1.3,0.7c0.6-0.1,1.1-0.2,1.6-0.3c0.7-0.1,1.3-0.1,2,0.1C52.2,28.5,52.3,28.5,52.4,28.6z M29.1,37.1c-0.1,0.8-0.4,1.6-0.7,2.3c-0.2,0.4-0.3,0.7-0.5,1.1C28.1,39.4,28.6,38.2,29.1,37.1L29.1,37.1z"/>
</svg>
</h1>
</div>
<div class="flex-item">
<picture class="page-header__nav-logo">
<source srcset="imgs/ms_logo.svg" media="(min-width: 900px)">
<img src="imgs/ms_logo-symbol.svg" alt="Marques Soares Logótipo">
</picture>
</div>
<div class="flex-item">
<a class="page-header__nav-link" href="" rel="nofollow">
<span>Já é cliente MS+?</span>
<img src="imgs/ms_login.svg" alt="Iniciar Sessão">
</a>
</div>
</nav>
<div class="page-header__content gridrow">
<div class="col-12 col-sm-9 col-md-7 col-lg-6">
<h2>Comigo, <span>ao longo da vida.</span></h2>
<q>Compro na Marques Soares há mais de 50 anos.
Para mim, para o meu marido, para os meus filhos
e agora também para o meu neto.</q>
<a class="button col-12 col-sm-9 col-lg-8" href="#" alt="Aderir ao cartão" target="_blank"><span>Fazer parte desta história</span></a>
</div>
</div>
<nav class="page-header__slide-nav gridrowfull">
<p class="page-header__slide-label">Maria Amélia</p>
<a class="slide-bullet active-slide" data-persona-index="0" rel="nofollow"></a>
<a class="slide-bullet" data-persona-index="1" rel="nofollow"></a>
<a class="slide-bullet" data-persona-index="2" rel="nofollow"></a>
</nav>
<div class="page-header__bg-video-container">
<div class="page-header__bg-video-overlay"></div>
<video class="page-header__bg-video" muted autoplay loop>
<source src="video/ms_header-video_01.mp4" type="video/mp4">
</video>
<div class="page-header__bg-video-progress-bar gridrowfull">
<span></span>
</div>
</div>
</header>
<main>
<section id="card-advantages" class="section-advantages">
<header class="gridrowfull">
<div class="gridrow">
<a class="offset-1 col-10 offset-sm-2 col-sm-8 offset-md-8 col-md-4" href="#card-advantages" rel="nofollow">
<img class="section-advantages__ms-card" src="imgs/ms_card.svg" alt="Cartão de Cliente Marques Soares +">
</a>
<h3 class="section-title col-12 col-md-8">Conheça de perto as vantagens de ser Marques Soares +</h3>
</div>
</header>
<div class="featured-advantages gridrow">
<div class="col-12">
<div class="featured-advantages__item col-6 col-lg-3" id="item-1">
<img class="featured-advantages__item-icon" src="imgs/ms_experimentar-em-casa.svg" alt="Ícone Experimentar em casa">
<h4 class="section-subtitle">Experimentar em casa</h4>
<p class="featured-advantages__item-description">Leve os artigos para uma escolha mais ponderada e compre depois apenas os que quiser.</p>
</div>
<div class="featured-advantages__item col-6 col-lg-3" id="item-2">
<img class="featured-advantages__item-icon" src="imgs/ms_pagamento.svg" alt="Ícone Experimentar em casa">
<h4 class="section-subtitle">Escolher como pagar</h4>
<p class="featured-advantages__item-description">Pague a pronto ou em 10 mensalidades, sem juros e sem comissões de abertura.</p>
</div>
<div class="featured-advantages__item col-6 col-lg-3" id="item-3">
<img class="featured-advantages__item-icon" src="imgs/ms_arranjos.svg" alt="Ícone Experimentar em casa">
<h4 class="section-subtitle">Arranjos gratuitos</h4>
<p class="featured-advantages__item-description">Beneficie de arranjos gratuitos na altura de compra e em qualquer momento do ano.</p>
</div>
<div class="featured-advantages__item col-6 col-lg-3" id="item-4">
<img class="featured-advantages__item-icon" src="imgs/ms_app.svg" alt="Ícone Experimentar em casa">
<h4 class="section-subtitle">Uma app exclusiva</h4>
<p class="featured-advantages__item-description">Não requer instalação e foi feita a pensar em si, com sugestões à sua medida. <a href="#app" rel="nofollow">Saiba mais</a></p>
</div>
</div>
</div>
<div class="gridrow">
<div class="other-advantages col-12">
<h4 class="section-subtitle">
<span>E muitas</span>
<svg viewBox="0 0 60 60" role="img" aria-label="Símbolo + desenhado" Title="+">
<path d="M52.4,28.6c0.2,0,0.3,0,0.5-0.1c0.3-0.1,0.5-0.1,0.7-0.2c0.3-0.1,0.7-0.2,1-0.3c0.3-0.1,0.5-0.1,0.8-0.1c0.2,0,0.3,0.1,0.3,0.2c-0.3,0.7-0.8,1.3-1.4,1.8c-0.7,0.7-1.5,1.4-2.4,2c-0.6,0.4-1.2,0.8-1.8,1.1c-0.5,0.2-1,0.3-1.5,0.3c-0.2,0.1-0.4,0.1-0.7,0.1c0,0.1,0,0.1,0.1,0.2c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c0,0,0.1,0.1,0.1,0.2c-0.6,0-1.1-0.2-1.6,0.1c-0.4,0.2-0.8,0-1.3,0.1c-1.3,0.2-3.8,0.1-5.1,0.3c-1.7,0.2-3.2,0.1-4.9,0.3c-1.1,0.1-2-0.5-3.2-0.3c-0.6,0.1-1.3,0.2-1.9,0.3c-0.1,0-0.2,0.1-0.3,0.2c-0.1,0.1-0.1,0.2-0.1,0.4c-0.1,0.5-0.3,1-0.6,1.5c-0.1-0.1-0.1-0.2-0.1-0.3c0-0.1,0.1-0.2,0.1-0.3c0.1-0.1,0.1-0.1,0.1-0.2c0,0,0-0.1,0-0.1c0.1,0,0.1-0.1,0.1-0.2c0-0.1-0.1-0.1-0.2-0.1c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0.1-0.2,0.3c0,0.1,0,0.2-0.1,0.3c-0.1,0-0.1,0.1-0.2,0.1L28.5,36c-0.1,0-0.1,0.1-0.1,0.2l0.2,0.1c0.1,0.1,0.2,0.1,0.3,0.2c0.1,0,0.1,0.1,0,0.2c-0.1,0.1-0.3,0.2-0.5,0.3c0.1,0.1,0.1,0.2,0.1,0.4c0,0.1,0,0.3-0.1,0.4v0.1c-0.1,0.4-0.3,0.7-0.5,1.1c-0.3,0.5-0.5,1.1-0.5,1.6c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.2,0.2-0.3,0.2c-0.1,0-0.2,0.1-0.3,0.1c-0.1,0.1-0.1,0.1-0.2,0.2l-0.7,1.9c-0.3,0.7-0.6,1.4-0.8,2.2c-0.6,1.8-1.1,3.7-1.6,5.5l-0.7,2.3c0,0-0.1-0.1-0.1-0.1L22.7,53c0,0,0-0.1,0-0.1c0,0-0.1,0-0.2,0c-0.1,0.1-0.1,0.2-0.2,0.3L21.9,54c-0.2-0.1-0.3-0.2-0.5-0.3c-0.2-0.2-0.5-0.4-0.8-0.5c-1.2-0.3-1.6-1.3-1.4-2.8c-0.1-0.3-0.2-0.7-0.3-0.9c-0.1-0.2-0.2-0.4-0.4-0.5c-1.2-0.3-1.6-1.3-1.3-2.9c0.5-2.7,1.2-5.3,2.2-7.8l0.5-1.3l0.3-0.7c-2.3,0.4-4.7,0.6-7,0.8c-0.1,0-0.3,0-0.4,0c-0.2,0-0.3,0-0.5,0c-1.6,0.1-2.5-0.5-2.9-2c-0.2-0.5-0.4-1-0.7-1.4c-0.3-0.5-0.6-1-0.8-1.6c-0.3-0.4-0.4-0.8-0.5-1.2c-0.1-0.4-0.3-0.9-0.5-1.2c-0.2-0.4-0.4-0.9-0.5-1.4c-0.1-0.5,0-1,0.4-1.3C7,26.6,7.5,26.4,8,26.4c1.4,0,2.8-0.1,4.2-0.2c1.5-0.1,3.1-0.2,4.6-0.2c1.6-0.1,3.1-0.2,4.7-0.5l1.7-0.2c0.2,0,0.4-0.1,0.6-0.2c0.2-0.1,0.3-0.3,0.4-0.5l1.8-5.2c0.5-1.6,1.1-3.3,1.6-4.9c0.2-0.6,0.4-1.2,0.6-1.8c0.6-1.9,1.3-3.7,2.2-5.5c0.3-0.5,0.7-0.9,1.3-1.1c0.5-0.2,1.1-0.2,1.5,0.1C34.3,7,35.1,8,35.7,9.1c0.1,0.2,0.2,0.5,0.2,0.8c0,0.3-0.1,0.6-0.2,0.9c0.8,0.7,1.5,1.6,2.1,2.5c0.1,0.3,0.2,0.6,0.1,0.9c0,0.3-0.1,0.7-0.3,1c-0.6,1.4-1.2,2.7-1.7,4.1c-0.5,1.5-1.1,2.9-1.7,4.3l-0.1,0.2c0.3,0,0.6-0.1,1-0.1c0.9-0.1,1.5,0.1,2.4,0c1.3-0.1,3.5,0.2,4.9,0c0.9-0.2,2.6,0.1,3.5,0c1-0.1,1.4,0.2,2.4,0c0.3-0.1,0.7,0.3,1.6,0.1s1.7-0.2,2.6-0.3c0.6-0.1,1.1-0.1,1.7,0c0.1,0,0,0.2-0.3,0.4c-0.3,0.2-0.7,0.5-1.1,0.9c-0.4,0.3-0.9,0.8-1.3,1.1c-0.3,0.2-0.5,0.5-0.7,0.7c-0.1,0.5-0.4,1-0.8,1.3c-0.4,0.3-0.8,0.5-1.3,0.7c0.6-0.1,1.1-0.2,1.6-0.3c0.7-0.1,1.3-0.1,2,0.1C52.2,28.5,52.3,28.5,52.4,28.6z M29.1,37.1c-0.1,0.8-0.4,1.6-0.7,2.3c-0.2,0.4-0.3,0.7-0.5,1.1C28.1,39.4,28.6,38.2,29.1,37.1L29.1,37.1z"/>
</svg>
<span>vantagens</span>
</h4>
<ul class="other-advantages__list">
<li>Cartão gratuito e sem anuidade</li>
<li>Atendimento personalizado</li>
<li>Até 10% desconto em cartão em compras a pronto pagamento</li>
<li>Entrega gratuita no grande Porto</li>
<li>Consultas de optometria e audiologia gratuitas</li>
<li>Parque de estacionamento gratuito</li>
<li>Gift Cards debitados só no momento da compra</li>
<li>Envio gratuito dos catálogos</li>
<li>Campanhas e promoções em 1ª mão</li>
<li>Acesso a eventos exclusivos</li>
</ul>
</div>
<div class="section-advantages__cta-and-notes col-12">
<p class="restrictions-note">Aplicam-se algumas restrições. Ler <a href="https://www.marquessoares.pt/pt/guia-de-compra/condicoes-cartao_1057.html" rel="external" target="_blank">Termos e Condições</a>.</p>
<a class="button" href="#" target="_blank">Aderir ao cartão</a>
<p class="note">Também pode aderir numa das nossas <a href="https://www.marquessoares.pt/pt/marques-soares/lojas_217.html" rel="external" target="_blank">lojas físicas</a>.</p>
</div>
</div>
<div class="section-advantages__clients-notes gridrowfull">
<div class="gridrow">
<div class="col-12 col-md-7 col-lg-6">
<div class="section-advantages__clients-notes_note-1">
<img src="imgs/ms_client.svg" alt="Ícone actulização de conta de cliente">
<p>Se tem Cartão Fidelização e pretende actualizá-lo para o cartão Marques Soares +, usufruindo de todas estas vantagens exclusivas, disponibilizamos para si uma <a href="">adesão ainda + simples</a>.</p>
</div>
</div>
<p class="section-advantages__clients-notes_note-2 col-12 offset-sm-1 col-sm-10 offset-md-1 offset-lg-2 col-md-4">Se já é cliente Conta Corrente (agora Cartão Marques Soares +) tem ainda mais vantagens para si. Entre na nova app Marques Soares + e experiencie o poder da personalização.</p>
</div>
</div>
</section>
<section id="app" class="section-app gridrow">
<div class="section-app__iphone offset-1 col-10 offset-sm-2 col-sm-8 offset-lg-1 col-md-4">
<img src="imgs/ms_iphone.png" alt="Iphone com vídeo da aplicação MS+">
<video class="section-app__video" muted autoplay loop poster="">
<source src="video/ms_app.mp4" type="video/mp4">
</video>
</div>
<div class="section-app__content col-12 col-md-8 col-lg-7">
<h3 class="section-title">Nova app Marques Soares + feita a pensar em si</h3>
<p>Com a app MS+ estamos ainda mais próximos de si. Associe o seu Cartão Marques Soares + à nossa app e inicie hoje mesmo uma experiência de compra única e personalizada.</p>
<ul>
<li>Personalize o seu perfil (preferências e medidas).</li>
<li>Tenha os seus favoritos da loja online sempre à mão.</li>
<li>Receba sugestões talhadas para si, com base no seu perfil.</li>
<li>Seja notificado em 1ª mão de campanhas e promoções.</li>
<li>Aceda a workshops e eventos exclusivos.</li>
<li>Consulte o extrato dos movimentos do seu cartão.</li>
</ul>
<p>Tudo isto e mais sem ter de fazer download ou instalar.</p>
</div>
<div class="col-12 offset-md-8 col-md-4">
<a class="button" href="">Entrar na app</a>
</div>
</section>
</main>
<footer class="page-footer">
<div class="page-footer__part1 gridrowfull">
<div class="gridrow">
<div class="page-footer__logo col-12">
<a href="#" rel="nofollow"><img src="imgs/ms_logo-symbol.svg" alt="Marques Soares Logótipo"></a>
</div>
<nav class="page-footer__links col-12">
<a href="https://www.marquessoares.pt/pt/" rel="external" target="_blank">Loja Online</a>
<a href="https://www.marquessoares.pt/pt/guia-de-compra/faqs_238.html" rel="external" target="_blank">FAQs</a>
<a href="https://www.marquessoares.pt/pt/marques-soares/contactos_222.html" rel="external" target="_blank">Contactos</a>
</nav>
<div class="page-footer__social-icons col-12">
<a class="facebook-icon" href="https://www.facebook.com/armazensmarquessoares/" target="_blank" rel="external nofollow">
<img src="imgs/ms_facebook.svg" alt="Ícone do Facebook">
</a>
<a class="instagram-icon" href="https://www.instagram.com/marquessoares.pt/" target="_blank" rel="external nofollow">
<img src="imgs/ms_instagram.svg" alt="Ícone do Instagram">
</a>
</div>
</div>
</div>
<div class="page-footer__part2 gridrowfull">
<div class="gridrow">
<p class="page-footer__copyright col-12 col-md-6">2019 © Marques Soares. Todos os direitos reservados.</p>
<div class="page-footer__policies col-12 col-md-6">
<a href="https://www.marquessoares.pt/pt/termos-e-condicoes_318.html" rel="external" target="_blank">Termos e Condições</a>
<a href="https://www.marquessoares.pt/pt/politica-de-privacidade_319.html" rel="external" target="_blank">Política de Privacidade</a>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>