Skip to content

Commit

Permalink
ToChangeCopy.html
Browse files Browse the repository at this point in the history 
Adição de comentários em cada copy para viabilizar suas edições por qualquer um
  • Loading branch information
@ms-guilherme
ms-guilherme authored May 28, 2024
1 parent 65fcdf0 commit 61c7bbf
Showing 1 changed file with 59 additions and 35 deletions.
94 changes: 59 additions & 35 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,50 +3,61 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mikes Route</title>
<title>Mikes Route</title> <!--Título que vai aparecer na aba do navegador-->
<link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div id="company">
<img src="images/logo.png" alt="Key West View">
<div><span>M</span>ikes Route</div> <!--Or Key Streamline´s, Or Quickhaul-->
<div><span>M</span>ikes Route</div> <!--Nome que acompanha a logo no cabeçalho-->
</div>

<div id="menu">
<div id="menu"> <!--Índices do Menu (links para as respectivas seções)-->
<a href="#sec-hero">Home</a>
<a href="#sec-proposal">Proposal</a>
<a href="#sec-reviews">Reviews</a>
<a href="#sec-contact">Contact</a>
<img src="images/bars-icon.png" alt="Menu Opener">
</div>

<div id="call"><img src="images/phone.png" alt="">Call (954) 348-2964</div>
<div id="call"><img src="images/phone.png" alt="">Call (954) 348-2964</div> <!--Pop-Up com o Número (Mike WhatsApp)-->
</header>

<section id="sec-hero">

<div id="hero-content">
<h1>We save your time</h1>
<!--<p>Texto</p> para inserir algum novo parágrafo não-estilizado-->
<!--<b>Texto em negrito</b> para inserir, dentro de um texto <p>...</p>, uma palavra em negrito/bold-->
<!--<i>Texto em itálico</i> para inserir, dentro de um texto <p>, uma palavra em itálico. Exemplo: <p>Texto em <i>Itálico</i></p>-->
<!--Em imagens (<img>), há o Texto Alternativo (alt) para substituir a imagem quando essa não for carregada devidamente, e para quando passarmos o mouse sobre ela-->

<div id="hero-content">
<h1>We save your time</h1> <!--Título na primeira seção-->
<p>Trust Mikes Route to <b>secure your packet</b>, making it reach Key West by <i>our</i> investiment of time and gas!</p> <br>
<!--Acima é o Primeiro texto da primeira seção, logo de baixo do título. "<br>" é uma quebra de linha, para distanciar esses textos-->
<p>Our commitment to excellence ensures <i>reliable</i> delivery, providing peace of mind with every shipment.</p> <br>
<!--Acima é o Segundo texto/parágrafo da primeira seção-->
<p>Check our Proposal Details and see how we do it!</p>
<!--Acima é o Terceiro texto/parágrafo da primeira seção-->
<div id="content-btns">
<a class="btn btn-low" href="#sec-proposal">Proposal</a>
<a class="btn" href="#sec-contact">Save Time</a>
<a class="btn btn-low" href="#sec-proposal">Proposal</a> <!--Botão de link, meio transparente, para a seção de Proposta-->
<a class="btn" href="#sec-contact">Save Time</a> <!--Segundo botão de link, escuro e chamativo, para a última seção de Contactar-->
</div>
</div>

<div id="hero-bg">
<div id="bg-form">
<h2>Save <b>Time</b></h2>
<h2>Save <b>Time</b></h2> <!--Título do Mini-Formulário da primeira seção-->
<form action="">
<input type="text" placeholder="Your name..." required>
<input type="email" placeholder="Your best email..." required>
<input type="text" placeholder="Your name..." required> <!--Campo para preencher com o nome do usuário-->
<!--"Required" faz com que não seja permitido enviar o formulário com esse campo vazio-->
<input type="email" placeholder="Your best email..." required> <!--Campo para o email-->
<div>
<input class="btn btn-low" type="button" value="Phone Number" onclick="formWithNumber()">
<input class="btn" type="submit" value="SAVE">
<!--Acima é o botão para escolher informar um número de telefone, ao invés de um email-->
<!--Fiz isso para que de fato seja um mini-formulário,, ao contrário do formulário completo ao final do site-->
<input class="btn" type="submit" value="SAVE"> <!--Botão de Enviar Formulário ("Save" de "Save Time")-->
</div>
</form>
</div>
Expand All @@ -55,40 +66,53 @@ <h2>Save <b>Time</b></h2>


<section id="sec-proposal">
<h1>We <i>will</i> made it</h1>
<h1>We <i>will</i> made it</h1> <!--Título da Seção de Proposta, onde nos apresentamos, mostramos nossa missão, nossos serviços, vantagens-->
<p>Mikes Route mission is that you <b>truly forget the pain of driving for hours and hours</b> along the repetitive route to <i>Key West</i>, only to turn around and repeat it again.</p>
<!--Acima, o primeiro texto da seção de Proposta-->
<p><b>We made it for you</b>. Give us one or more packs and some point at Key West to delivery it, that it <i>will be delivered</i>.</p>
<!--Acima, o segundo texto/parágrafo da seção de Proposta. Não há "<br>"s quebrando a linha, porém estou o fazendo por outros meios, distanciando os dois textos-->

<div id="perks">
<div id="perks"> <!--Aqui, é onde são criados os retângulozinhos para alguns dos serviços que ofereçemos-->
<div>
<img src="images/gps.png" alt="Current Location">
<h2>Monitoring</h2>
<p>You can easily check the current location and time-arrival of your itens</p>
<img src="images/gps.png" alt="Current Location"> <!--Ícone do serviço-->
<h2>Monitoring</h2> <!--Título do serviço (menor que os títulos comuns)-->
<p>You can easily check the current location and time-arrival of your itens</p> <!--Texto/descrição do serviço-->
<!--Para telas menores, como nos telefones, textos ou títulos maiores que esses daqui seriam quebrados em muitas linhas, piorando a leitura-->
</div>
<div>
<img src="images/lock.png" alt="Secure and Private"> <!--Ícone-->
<h2>Secure and Private</h2> <!--Título-->
<p>Packets always remain private, untouched, while safely wrapped and contained</p> <!--Texto/descrição-->
</div>
<!--Para adicionar mais um retângulo de serviço, use o template abaixo, removendo o "<!--" e "-- >" de seu código-->
<!--
<div>
<img src="images/lock.png" alt="Secure and Private">
<h2>Secure and Private</h2>
<p>Packets always remain private, untouched, while safely wrapped and contained</p>
<h2>título...</h2>
<p>Descrição...</p>
</div>
-->
</div>
</section>

<section id="sec-reviews">
<h1>We are making it</h1>
<p>Check out some of our recent clients!</p> <br> <br>
<h1>We are making it</h1> <!--Título da seção de Reviews-->
<p>Check out some of our recent clients!</p> <br> <br> <!--Sub-título-->

<div id="reviews-conteiner">
<div class="review">
<img src="images/client.png" alt="Client Henry D.">
<h2>Henry D.</h2>
<p>from Miami Downtown</p>
<div class="review"> <!--Retângulo da primeira reviews-->
<img src="images/client.png" alt="Client Henry D."> <!--Ícone genérico ou foto da pessoa-->
<h2>Henry D.</h2> <!--Nome da pessoa-->
<p>from Miami Downtown</p> <!--Lugar de onde é ou nome da empresa-->
<p>"I had an urgent document that needed to be delivered to Key West, and this service was a lifesaver! The pickup was prompt, and the delivery was on time as promised.<br>I received regular updates on the status of my package, and the whole process was seamless. Highly recommend this service for anyone in need of reliable and fast delivery!"</p>
<!--Acima, o comentário da pessoa. Textos grandes não ficam ruins-->
</div>
<div class="review">
<img src="images/client.png" alt="Client Sara L.">
<h2>Sara L.</h2>
<p>from Miami Beach</p>
<div class="review"> <!--Segunda reviews, escondida atrás da primeira até que seja selecionada. Não há limites para o número de reviews-->
<img src="images/client.png" alt="Client Sara L."> <!--Ícone/Foto-->
<h2>Sara L.</h2> <!--Nome-->
<p>from Miami Beach</p> <!--Cidade/Empresa-->
<p>"Excellent service! I regularly need to send items to my business partner in Key West, and this company has never let me down.<br>Packages always arrive on time, and I appreciate the transparency with the tracking updates. Couldn't ask for a better delivery service!"</p>
<!--Acima, a análize da pessoa-->
</div>
</div>
<div id="selector">
Expand All @@ -101,18 +125,18 @@ <h2>Sara L.</h2>
<section id="sec-contact">
<div id="contact-bg">
<div id="contact-form">
<h1>Save <b>Time</b></h1>
<h1>Save <b>Time</b></h1> <!--Título do Formulário completo ao final da página-->
<form action="">
<input type="text" placeholder="Your name..." required>
<input type="email" placeholder="Your best email..." required>
<input type="tel" placeholder="Your phone number...">
<input type="text" placeholder="Your name..." required> <!--Nome obrigatório-->
<input type="email" placeholder="Your best email..." required> <!--Email obrigatório-->
<input type="tel" placeholder="Your phone number..."> <!--Número obrigatório-->
<div>
<input class="btn" type="submit" value="SAVE TIME">
<input class="btn" type="submit" value="SAVE TIME"> <!--Botão de enviar-->
</div>
</form>
</div>
</div>
</section>

</body>
</html>
</html>

0 comments on commit 61c7bbf

Please sign in to comment.