1 files changed, 97 insertions, 0 deletions
diff --git a/files/ca/learn/css/caixes_estil/creació_carta/index.html b/files/ca/learn/css/caixes_estil/creació_carta/index.html
new file mode 100644
index 0000000000..2623d6d0dd
--- /dev/null
+++ b/files/ca/learn/css/caixes_estil/creació_carta/index.html
@@ -0,0 +1,97 @@
+---
+title: Creació d'una carta amb encapçalat de fantasia
+slug: Learn/CSS/Caixes_estil/Creació_carta
+tags:
+  - Assessment
+  - Background
+  - Beginner
+  - CSS
+  - CodingScripting
+  - border
+  - borderBoxes
+  - letter
+  - letterhead
+  - letterheaded
+  - paper
+translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">Si voleu fer una impressió correcta, escriviu una carta amb un bon paper i una capçalera agradable pot ser un començament realment bo. En aquesta avaluació, us desafiarem a crear una plantilla en línia per aconseguir-ho.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisits previs:</th>
+   <td><span id="result_box" lang="ca"><span>Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul</span></span>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectiu:</th>
+   <td>Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara la implementació de fons.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punt_de_partida"><span id="result_box" lang="ca"><span>Punt de partida</span></span></h2>
+
+<p><span id="result_box" lang="ca"><span>Per començar aquesta avaluació, heu de:</span></span></p>
+
+<ul>
+ <li><span id="result_box" lang="ca"><span>Feu còpies locals del codi</span></span> <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html">HTML</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css">CSS</a> — <span id="result_box" lang="ca"><span>deseu-les com</span></span> <code>index.html</code> i <code>style.css</code> <span id="result_box" lang="ca"><span>en un directori nou</span></span>.</li>
+ <li><span id="result_box" lang="ca"><span>Deseu còpies locals de les imatges</span></span> <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png">top</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png">bottom</a> i <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png">logo</a> <span id="result_box" lang="ca"><span>en el mateix directori que els fitxers de codi.</span></span></li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Com a alternativa, podeu utilitzar un lloc com <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element &lt;<code>style</code>&gt; al capdavant del document.</p>
+</div>
+
+<h2 id="Resum_del_projecte">Resum del projecte</h2>
+
+<p>Se us ha donat els fitxers necessaris per crear una plantilla de paper amb capçalera. Només cal que col·loqueu els fitxers junts. Per arribar-hi, heu de:</p>
+
+<h3 id="La_carta_principal">La carta principal</h3>
+
+<ul>
+ <li>Apliqueu el CSS a l'HTML.</li>
+ <li>Afegiu una declaració de fons a la carta que:
+  <ul>
+   <li>Fixeu la imatge superior a la part superior de la carta</li>
+   <li>Fixeu la imatge inferior a la part inferior de la carta</li>
+   <li>Afegiu un gradient semitransparent a la part superior de tots dos fons anteriors que dóna una mica de textura a la lletra. Feu que sigui lleugerament fosc a la part superior i inferior, però que sigui completament transparent per a una gran part del centre.</li>
+  </ul>
+ </li>
+ <li>Afegiu una altra declaració de fons, que només afegeixi la imatge superior a la part superior de la carta, com a alternativa per a navegadors que no admetin la declaració anterior.</li>
+ <li>Afegiu un color de fons blanc a la carta.</li>
+ <li>Afegiu una vora sòlida superior i inferior de 1 mm a la carta, en un color que es mantngui amb la resta del esquema de color.</li>
+</ul>
+
+<h3 id="El_logotip"><span id="result_box" lang="ca"><span>El logotip</span></span></h3>
+
+<ul>
+ <li>A {{htmlelement("h1")}}, afegiu el logotip com a imatge de fons.</li>
+ <li>Afegiu un filtre al logotip per donar-li una ombra subtil.</li>
+ <li>Ara comenteu el filtre i implementeu l'ombra en un mode diferent (una mica més compatible amb el navegador creuat), que encara segueix la forma de la imatge rodona.</li>
+</ul>
+
+<h2 id="Consells_i_suggeriments">Consells i suggeriments</h2>
+
+<ul>
+ <li>Recordeu que pofeu crear una alternativa per als navegadors més antics, posant la versió alternativa com a primera declaració, seguida de la versió que funciona només en els navegadors més recents. Els navegadors més antics aplicaran la primera declaració i ignoraran la segona, mentre que els nous exploradors aplicaran la primera i després la reemplaçaran amb la segona</li>
+ <li>No dubteu a crear els vostres propis gràfics per a l'avaluació si ho voleu.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13144/letterhead.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p> </p>
+
+<h2 id="Avaluació"><span id="result_box" lang="ca"><span>Avaluació</span></span></h2>
+
+<p>Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">en el fil de conversa en l'àrea d'aprenentatge</a>, o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenteu primer l'exercici - no es guanya res fent trampes!</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</p>