Main Page: Difference between revisions

Latest revision as of 15:47, 26 March 2024

MDriven Learn

Learn. Model. Build.

Visualize and design your ideas. Discover more with MDriven documentation, hands-on training, and ready-made models to get the most from MDriven's tools and services.

Documentation

Find technical documentation

Gain understanding through in-depth explanations of the concepts behind the MDriven tools.

Read Documentation

Training

Learn by doing

Practical training and tutorials on MDriven designed to educate and inspire you to model your ideas.

Take Training

Q&A

Ask questions and get help

Write to us your MDriven-related questions and receive quality answers and feedback.

Explore Q&A

Model Examples

Try model samples

Use our unique, pre-built models to build your ideas and achieve your goals.

Browse samples

Best Practices

Explore effective solutions

Our suggestions on how you can maximize the benefits of the MDriven tools to realize business solutions.

Try these Best Practices

@@ Line 1: / Line 1: @@
 <html>
 <style>
-Красивое выравнивание блоков по резиновой сетке
+#flexContainer >*:first-child {
-Максим Усачев 26.04.2012 62 Comments
+   display: none;
-CSS, СтатьиCSS
+}
-Сегодня, в мой день рождения (26 апреля), я хочу сделать подарок всем верстальщикам и представить вам абсолютно уникальное, новое и самое главное — полезное решение выравнивания блоков по резиновой сетке, которого так все долго ждали и которого ещё нет в сети.
-При верстке резиновых страниц часто возникает задача выстроить однотипные блоки (например, товары в каталоге или фотографии в галерее) по сетке, наподобие таблицы, но гибкой, с заранее неизвестным количеством столбцов. Когда-то единственным способом для этого был float, и блоки приходилось прижимать к левому краю. С помощью inline-block эту задачу можно решить проще и гибче, блоки могут иметь разную высоту, и разное вертикальное выравнивание. Но почему-то такие макеты в массе всё равно прижаты к левому краю. Казалось бы, что мешает отцентрировать эту сетку, а то и вовсе растянуть ее по ширине свободного места c помощью text-align: center или justify соответственно?
+#mainContent {
+  padding: 0px !important;
+  max-width: unset !important;
+}
-Проблема возникает в последней строке, на которой горизонтальный ритм сетки сбивается. Но оказалось, что эту проблему можно решить!
+.mw-parser-output > *:first-child {
+  display: none;
+}
-Проблема
+    @media (max-width: 767px) {
-Для начала предлагаю обсудить этот вопрос подробнее. Посмотреть примеры того, что именно за неприятность происходит с последней строкой в сетке, а так же определиться, какого результата мы ждём.
+        .content {
+            max-width: none;
+        }
+        .heading {
+            font-size: 1.5em;
+        }
+        .sub-heading {
+            font-size: 1em;
+        }
+        .description {
+            font-size: 0.875em;
+        }
+        .input-container {
+            max-width: none;
+            height: auto;
+        }
+        .search-icon {
+            margin-left: 1em;
+        }
+        .search-input {
+            padding-left: 1em;
+            padding-right: 1em;
+        }
+.image-container {
+            display: none;
+        }
+    }
+ @media screen and (max-width: 1100px) {
+  .image-container {
+      display: none;
+  }
+}
-Проблема очень похожа в обоих случаях, так что выберем любое свойство из двух, например, text-align: center. А так же воспользуемся маркированным списком.
+.mainpage-card:hover {
+    transform: translateY(-5px);
-<ul>
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        <li>Пункт 1</li>
+    cursor: pointer;
-        <li>Пункт 2</li>
-        <li>Пункт 3</li>
-        <li>Пункт 4</li>
-        <li>Пункт 5</li>
-        <li>Пункт 6</li>
-        <li>Пункт 7</li>
-        <li>Пункт 8</li>
-</ul>
-ul {
-        text-align: center;
 }
-        ul li {
-                display : inline-block;
-                width : 80px;
-                height: 80px;
-                margin-bottom: 10px;
-                background: #E76D13;
-                vertical-align: top;
-                text-align: center;
-                line-height: normal;
-        }
-</style>
-<ul>
-        <li>Knowledge base</li>
-        <li>Tutorials </li>
-        <li>Functionality Updates</li>
-        <li>Cases</li>
-</ul>
-</html>
+</style>
+<div style="background: linear-gradient(93deg, #E2F5FA 14.35%, #F7FAFC 56.13%, #FCFBFA 97.91%); display: flex; justify-content: space-between; align-items: center; position: relative;">
+  <div class="content" style="padding: 5em; max-width: 589px; width: 100%; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;">
+    <div class="heading" style="color: #182933; font-size: 2.25em;  font-weight: 700; text-transform: uppercase; word-wrap: break-word;">MDriven Learn</div>
+    <div class="sub-heading" style="color: #182933; font-size: 1.25em; font-weight: 500; letter-spacing: 0.40px; word-wrap: break-word;">Learn. Model. Build.</div>
+    <div class="description" style="color: black; font-size: 1em; font-weight: 400; word-wrap: break-word;">Visualize and design your ideas. Discover more with MDriven documentation, hands-on training, and ready-made models to get the most from MDriven's tools and services.</div>
+    <div class="input-container" style="width: 100%; height: 2.25em; position: relative; display: flex; align-items: center; background: white; border-radius: 4px; border: 1px #E3E8EE solid;">
+        <div class="search-icon" style="margin-left: 10px;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path d="M13 13L9 9L13 13ZM10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z" stroke="#999B9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        </div>
+     <form id="bs-extendedsearch-box" class="form-inline " action="/index.php" method="GET" role="search" style="width:100%;">
+        <input class="search-input" type="search" placeholder="Search MDriven Learn" style="flex-grow: 1; border: none; outline: none; padding-left: 10px;" name="raw_term" >
+    <div id="suggestion-container"></div>
+        <input type="hidden" name="title" value="Special:SearchCenter">
+            <input type="hidden" name="fulltext" value="1">
+        </form>
+    </div>
+  </div>
+ <div class="image-container" style="flex-shrink: 0; position: absolute; right: 0; top: 3%; z-index: 1;">
+    <img src="/images/mainpage.svg" alt="Image" style="max-width: 100%; height: 430px; padding-right: 8em;">
+  </div>
+  </div>
+</div>
-__NOTOC__ {{DISPLAYTITLE:MDriven Wiki}}
-== [[MDriven KnowledgeBase|Knowledge base]] ==
-Look to the [[MDriven KnowledgeBase|knowledge base]] for in-depth answers, installation instructions, settings and more.
-Also browse the [[Special:Categories]] to navigate to topics when you don't know the right keywords to successfully search.
+<style>
+    @media (max-width: 767px) {
+    .grid-container {
+        grid-template-columns: 1fr !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        justify-items: center; /* This centers the items in the grid */
+    }
+    .card {
+        margin: 0 auto !important; /* This centers the card and gives equal margins on both sides */
+    }
+}
+</style>
-== Background and architecture ==
+<div style="display: grid; padding: 5em; grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-rows: minmax(100px, auto);" class="grid-container">
-[[Getting to the bottom of the Line of Business Application]]
+</html>
+{{#widget:Card|heading=Documentation|display=block|imageIcon=/images/main2.svg|subheading=Find technical documentation|text=Gain understanding through in-depth explanations of the concepts behind the MDriven tools.|link=/index.php/Documentation:Documentation|linktext=Read Documentation}}
-[[Main concepts definition]]
+{{#widget:Card|heading=Training|display=block|imageIcon=/images/main1.svg|subheading=Learn by doing|text=Practical training and tutorials on MDriven designed to educate and inspire you to model your ideas.|link=/index.php/Training:Training|linktext=Take Training}}
+{{#widget:Card|heading=Q&A|display=block|imageIcon=/images/main1.svg|subheading=Ask questions and get help|text=Write to us your MDriven-related questions and receive quality answers and feedback.|link=/index.php/Documentation:Q_and_A|linktext=Explore Q&A}}
-[[ViewModel|The ViewModel]]
+{{#widget:Card|heading=Model Examples|display=block|imageIcon=/images/main3.svg|subheading=Try model samples|text=Use our unique, pre-built models to build your ideas and achieve your goals.|link=/index.php/Documentation:Model_Examples|linktext=Browse samples}}
+{{#widget:Card|heading=Best Practices|display=block|imageIcon=/images/main4.svg|subheading=Explore effective solutions|text=Our suggestions on how you can maximize the benefits of the MDriven tools to realize business solutions.|link=/index.php/BestPractices:Best_Practices|linktext=Try these Best Practices}}
-[[ViewModel for Business]]
+<html>
+</div>
-[[MDriven features and benefits]]
+</html>
+{{Edited|July|12|2024}}
-[[Information security]]
+{{Class|scroll}}
-[[Access control system in MDriven]]
-== Tutorials (mostly video material) ==
-=== [[Installing TurnKey as an Azure WebApp]] ===
-=== [[UML School]] ===
-=== [[ MDriven Designer Overview Sessions |MDriven Designer Overview]] ===
-=== [[MDriven Turnkey Sessions|MDriven Turnkey]]  ===
-=== '''[[Learn OCL|OCL]]''' ===
-== Example apps (models) ==
-* [[Store complaint handling]]
-* [[Turnkey sample Board Map Balls Gantt]]
-* [[Turnkey sample InstantPoll]]
-* [[Turnkey sample SoftConflict]]
-== Examples ==
-[[WPFMahappAndGantt|WPF MahappAndGantt]]
-[[A Trello like Board In MDrivenTurnkey]]
-[[Rest Services In MDriven]]
-[[MDriven In Xamarin]]
-[[Barcode - on Android - with Xamarin and MDriven]]
-== Functionality changes ==
-[[Actions Overhaul]]
-[[MDriven Framework|"CodeDress" in MDriven Framework]]
-[[The Concept application WhenAndWhereProject]]
-[[MDriven Wiki Main Page Upgraded|'''MDriven_Wiki_Main_Page_Upgraded''']]