HTMLify
index.html
Views: 462 | Author: cody
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 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vertical Tabs</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" type='text/css' > <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="tabs-container"> <ul class="tabs"> <li> <a id="tab1" title="Your Idea & Vision" href="#tab1"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bulb" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path> <path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3"></path> <path d="M9.7 17l4.6 0"></path> </svg> Your Idea & Vision </a> </li> <li> <a id="tab2" title="Product Specification" href="#tab2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-description" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M14 3v4a1 1 0 0 0 1 1h4"></path> <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path> <path d="M9 17h6"></path> <path d="M9 13h6"></path> </svg> Product Specification </a> </li> <li> <a id="tab3" title="UX/UI Design" href="#tab3"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brush" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M3 21v-4a4 4 0 1 1 4 4h-4"></path> <path d="M21 3a16 16 0 0 0 -12.8 10.2"></path> <path d="M21 3a16 16 0 0 1 -10.2 12.8"></path> <path d="M10.6 9a9 9 0 0 1 4.4 4.4"></path> </svg> UX/UI Design Prototype </a> </li> <li> <a id="tab4" title="Software Development" href="#tab4"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-robot" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M7 7h10a2 2 0 0 1 2 2v1l1 1v3l-1 1v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-3l-1 -1v-3l1 -1v-1a2 2 0 0 1 2 -2z"></path> <path d="M10 16h4"></path> <circle cx="8.5" cy="11.5" r=".5" fill="currentColor"></circle> <circle cx="15.5" cy="11.5" r=".5" fill="currentColor"></circle> <path d="M9 7l-1 -4"></path> <path d="M15 7l1 -4"></path> </svg> AI & Machine Learning </a> </li> <li> <a id="tab5" title="Architecture & Engineering" href="#tab5"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path> <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path> </svg> Architecture & Engineering </a> </li> <li> <a id="tab6" title="MVP Release & Iterations" href="#tab6"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rocket" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3"></path> <path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"></path> <path d="M15 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> </svg> MVP Release & Iterations </a> </li> </ul> <div class="tab-content-wrapper"> <section id="tab1-content" class="tab-content"> <h2>Your Idea & Vision</h2> <p> Maybe you have an idea and a vision of changing the world, your company want to execute new product or you just have a unique dataset, but you do not have the knowledge to get the most from your data.Our team is here to execute your vision and bring the product to life. </p> <img src="assets/idea.png" alt="idea"> </section> <section id="tab2-content" class="tab-content"> <h2>Product Specification</h2> <p> In this phase, we will remove vagueness and draft our minimum viable product in as much detail as we can. We will also evaluate the current capabilities of AI and how we can maximise the power of your data. This is the key phase and foundation for the future success of your product. </p> <img src="assets/product.png" alt="product"> </section> <section id="tab3-content" class="tab-content"> <h2>UX/UI Design</h2> <p> We will start to design UX & UI for already approved features. Our design process includes user research and accessibility as well as usability testing. The end goal of this phase is a smooth design and an easy-to-use product. We continually iterate over our design features. </p> <img src="assets/ui.png" alt="ui"> </section> <section id="tab4-content" class="tab-content"> <h2>AI & Machine Learning</h2> <p> The application of AI & machine learning is the key focus for every modern product. So many new market opportunities emerge every day. </p> <img src="assets/brain.png" alt="brain"> </section> <section id="tab5-content" class="tab-content"> <h2>Architecture & Engineering</h2> <p> Software architecture and engineering includes designing the database, backend, and frontend engineering, as well as preparing the infrastructure and automating your business processes. </p> <img src="assets/engineer.png" alt="engineer"> </section> <section id="tab6-content" class="tab-content"> <h2>MVP Release & Iterations</h2> <p> Now the product is finalized and ready for users. The product will continue to be extended in an agile way based on customers’ feedback. </p> <img src="assets/release.png" alt="release"> </section> </div> </div> <script src="script.js"></script> </body> </html> |