Add changes to visuals

templates/visuals.html

@@ -5,9 +5,9 @@
 <nav id="visuals-nav" class="nav flex-column d-none d-xl-block col-xl-2 bd-toc">
   <ul class="nav nav-pills flex-column sticky-top">
     {% for id, item in bag('visuals').items() %}
-      <li class="nav-item">
+    <li class="nav-item">
-        <a class="nav-link" href="{{ item.path }}">{{ item.label }}</a>
+      <a class="nav-link" href="{{ item.path }}">{{ item.label }}</a>
-      </li>
+    </li>
     {% endfor %}
   </ul>
 </nav>
@@ -49,8 +49,9 @@
     </div>
   </div>
 
+  <h1 id="grid"></h1>
   <div class="page-header mb-4 mt-5">
-    <h3 id="grid">Grid</h3>
+    <h3>Grid</h3>
     <p class="text-muted">Some Description about grids</p>
   </div>
   <div class="bg-light p-5">
@@ -95,8 +96,9 @@
     </div>
   </div>
 
+  <h1 id="typography"> </h1>
   <div class="page-header mb-4 mt-5">
-    <h3 id="typography">Typography</h3>
+    <h3>Typography</h3>
     <p class="text-muted">Some Description about headings and body text.</p>
   </div>
   <div class="row">
@@ -114,18 +116,76 @@
     </div>
   </div>
   <div class="row">
-    <div class="col pt-3">
+    <div class="col-12 pt-5">
-      <p class="font-size-lg">Privacy is a right, not a privilege.<a href="#">nostrud voluptate</a> Tor protects your identity online—namely your IP address—by encrypting your traffic in at least three layers and bouncing it through a chain of three volunteer computers chosen among thousands around the world, each of which strips off just one layer of encryption before bouncing your data to the next computer. All of that makes it very difficult for anyone to trace your connection from origin to destination—not the volunteer computers relaying your information, not your internet service provider, and not the websites or online services you visit.
+      <p class="text-black small text-muted">Paragraph</p>
-        That overhaul should cement <mark>Tor’s reputation as an indispensable anonymity tool</mark>, says Marc Rogers, a security researcher for tech firm Cloudflare, who has also worked on a still-in-development Tor-based network router project himself. “It’s still pretty much the only game in town,” he says. “After this update, I can say that yes, Tor is the best privacy tool out there.”
+    </div>
-        Here's how you can use Tor today, whether you want to want to browse controversial sites in peace, or send messages the NSA can't peep.
+    <div class="col">
+      <p>
+        Privacy experts warn that law enforcement, intelligence services, and malicious hackers run their own exit nodes for exactly that surveillance purpose. It's critical, then, <mark>for Tor users to only visit HTTPS-protected websites</mark> to ensure that the information that passes between the browser and the site remains encrypted.
       </p>
     </div>
-    <div class="col pt-3">
+    <div class="col">
-      <p class="font-size-lg serif">Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure <a href="#">nostrud voluptate</a> aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiat adipisicing ex in dolore ullamco ad ullamco velit nisi irure ad tempor minim fugiat fugiat aute Excepteur in id culpa id velit proident commodo enim cillum Ut quis dolor cillum enim ullamco est in eu laboris Ut Excepteur nisi aliquip occaecat deserunt incididunt eiusmod aute Excepteur Excepteur non ut ut fugiat nostrud laboris dolore Excepteur id qui eiusmod esse mollit fugiat eiusmod dolore quis quis aliquip reprehenderit sint commodo dolore proident officia Duis eiusmod esse cupidatat id consequat aliqua Excepteur dolore tempor consequat laboris dolore sit aliqua eu sed dolore laboris ad tempor et in incididunt dolore dolor irure anim adipisicing cillum dolor in laborum laboris veniam voluptate Ut irure ad dolor irure in ex sint dolor deserunt ut adipisicing est pariatur Excepteur dolore ullamco pariatur in non Excepteur mollit consequat laborum ullamco reprehenderit ea id ut anim ex consectetur occaecat.</p>
+      <p class="font-family-serif">
+        The Tor network is a group of volunteer-operated servers that allows people to improve their privacy and security on the Internet. Tor's users employ <a href="#">this network</a> by connecting through a series of virtual tunnels rather than making a direct connection, thus allowing both organizations and individuals to share information over public networks without compromising their privacy.
+      </p>
+    </div>
+    <div class="col">
+      <p class="text-right">
+        شبكة تور هي مجموعة من الخوادم التي يديرها المتطوعون والتي تسمح للناس بتحسين خصوصيتهم وأمنهم على الإنترنت. يستخدم مستخدمو تور هذه الشبكة من خلال الاتصال من خلال سلسلة من الأنفاق الافتراضية بدلا من إجراء اتصال مباشر، مما يسمح للمنظمات والأفراد على حد سواء لتبادل المعلومات عبر الشبكات العامة دون المساس بخصوصيتهم. وعلى نفس المنوال، يعتبر تور أداة فعالة للرقابة على الرقابة، مما يسمح للمستخدمين بالوصول إلى وجهات أو محتويات محجوبة. يمكن أيضا استخدام تور كبنة بناء لمطوري البرمجيات لإنشاء أدوات اتصال جديدة مع ميزات خصوصية مضمنة.
+      </p>
     </div>
   </div>
 
-  {% include 'footer.html' %}
+  <h1 id="assets"> </h1>
+  <div class="page-header mb-4 mt-5">
+    <h3>Identity Assets</h3>
+    <p class="text-muted">Some Description</p>
+  </div>
+  <div class="row">
+    <div class="col-6">
+      <div class="image border p-5">
+        <img src="/visuals/color.svg">
+      </div>
+      <h6 class="text-left pt-3">Default</h6>
+    </div>
+    <div class="col-3">
+      <div class="image border p-5">
+        <img src="/visuals/purple.svg">
+      </div>
+      <h6 class="text-left pt-3">Purple</h6>
+    </div>
+    <div class="col-3">
+      <div class="image border p-5">
+        <img src="/visuals/black.svg">
+      </div>
+      <h6 class="text-left pt-3">Black</h6>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-3">
+      <div class="image border bg-primary p-5">
+        <img src="/visuals/white.svg">
+      </div>
+      <h6 class="text-left pt-3">Invert</h6>
+    </div>
+    <div class="col-3">
+      <div class="image border bg-dark p-5">
+        <img src="/visuals/white.svg">
+      </div>
+      <h6 class="text-left pt-3">Dark</h6>
+    </div>
+    <div class="col-6">
+      <div class="border p-5 text-left">
+        <h6>Download Tor Logo Assets</h6>
+        <p>This package includes .png and .svg files</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+{% include 'footer.html' %}
 
 </main>
 {% endblock %}