|
|
(79 intermediate revisions by 5 users not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
| <div style="padding: 5em; background: linear-gradient(94deg, #E2F5FA 0%, #F7FAFC 49%, #FFDABB 100%);"> | | <style> |
| <div style="max-width: 589px; width: 100%; display: flex; flex-direction: column; gap: 10px; padding-right: 4em; box-sizing: border-box;">
| | #flexContainer >*:first-child { |
| <div style="color: #182933; font-size: 2.25em; font-weight: 700; text-transform: uppercase; word-wrap: break-word;">MDriven education</div>
| | display: none;ae |
| <div style="color: #182933; font-size: 1.25em; font-weight: 500; letter-spacing: 0.40px; word-wrap: break-word;">Learn. Model. Design</div>
| | }ehr |
| <div style="color: black; font-size: 1em; font-weight: 400; word-wrap: break-word;">Visualize and build your ideas. Discover more with MDriven documentation, hands-on training, and certifications to help you get the most from MDriven products.</div>
| | |
| <div style="width: 100%; max-width: 392px; height: 2.25em; position: relative; display: flex; align-items: center; background: white; border-radius: 4px; border: 1px #E3E8EE solid;">
| | #mainContent {vggfe |
| <div style="margin-left: 10px;">
| | padding: 0px !important;z gw45hue |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
| | max-width: unset !important;be |
| <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"/>
| | }fwfqghrh |
| </svg>
| | |
| </div>
| | fege |
| <input type="search" placeholder="Search MDriven Education" style="flex-grow: 1; border: none; outline: none; padding-left: 10px;">
| | |
| </div>
| | .mw-parser-output > *:first-child { |
| </div>
| | display: none; |
| </div>
| | } |
| | |
|
| |
|
| <style>
| |
| @media (max-width: 767px) { | | @media (max-width: 767px) { |
| .grid-container { | | .content { |
| grid-template-columns: 1fr !important; | | 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; vvyuv |
| } | | } |
| } | | } |
| </style>
| | @media screen and (max-width: 1100px) { |
| | .image-container { |
| | display: none; |
| | } |
| | } |
| | |
| | .mainpage-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| | cursor: pointer; |
| | } |
| | |
|
| |
|
| <div style="display: grid; padding: 4em; grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-rows: minmax(100px, auto);" class="grid-container">
| |
|
| |
|
| <!-- Card 1 -->
| |
| <div style="width: 361px; height: 183px; padding: 24px; background: #F3F6F9; border-radius: 6px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; display: inline-flex">
| |
| <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex; margin-top:10px;">
| |
| <div style="color: #44546F; font-size: 14px; font-weight: 400; word-wrap: break-word">Training</div>
| |
| <div style="color: #112B3C; font-size: 20px; font-weight: 700; word-wrap: break-word">Learn by doing</div>
| |
| </div>
| |
| <div style="width: 313px; height: 50px; color: black; font-size: 14px; font-weight: 300; word-wrap: break-word">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
| |
| <div style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 6px; display: inline-flex; margin-top:10px;">
| |
| <a href="#" style="display: inline-flex; align-items: center;"><div style="color: #1A50AD; font-size: 14px; font-weight: 600; word-wrap: break-word; margin-right: 10px;">Take training</div>
| |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
| |
| <path d="M1 5H13M13 5L9.57143 1.57143M13 5L9.57143 8.42857" stroke="#1A50AD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
| |
| </svg>
| |
| </div></a>
| |
| </div>
| |
|
| |
|
| <!-- Card 2 -->
| |
| <div style="width: 361px; height: 183px; padding: 24px; background: #F3F6F9; border-radius: 6px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; display: inline-flex">
| |
| <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex; margin-top:10px;">
| |
| <div style="color: #44546F; font-size: 14px; font-weight: 400; word-wrap: break-word">Documentation</div>
| |
| <div style="color: #112B3C; font-size: 20px; font-weight: 700; word-wrap: break-word">Find technical documentation</div>
| |
| </div>
| |
| <div style="width: 313px; height: 50px; color: black; font-size: 14px; font-weight: 300; word-wrap: break-word">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
| |
| <div style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 6px; display: inline-flex; margin-top:10px;">
| |
| <a href="#" style="display: inline-flex; align-items: center;"><div style="color: #1A50AD; font-size: 14px; font-weight: 600; word-wrap: break-word; margin-right: 10px;">Read documentation</div>
| |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
| |
| <path d="M1 5H13M13 5L9.57143 1.57143M13 5L9.57143 8.42857" stroke="#1A50AD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
| |
| </svg></a>
| |
| </div>
| |
| </div>
| |
|
| |
|
| <!-- Card 3 -->
| | </style> |
| <div style="width: 361px; height: 183px; padding: 24px; background: #F3F6F9; border-radius: 6px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; display: inline-flex">
| |
| <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex">
| |
| <div style="color: #44546F; font-size: 14px; font-weight: 400; word-wrap: break-word">Certification</div>
| |
| <div style="color: #112B3C; font-size: 20px; font-weight: 700; word-wrap: break-word">Showcase your skills</div>
| |
| </div>
| |
| <div style="width: 313px; height: 50px; color: black; font-size: 14px; font-weight: 300; word-wrap: break-word">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
| |
| <div style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 6px; display: inline-flex; margin-top:10px;">
| |
| <a href="#" style="display: inline-flex; align-items: center;"><div style="color: #1A50AD; font-size: 14px; font-weight: 600; word-wrap: break-word; margin-right: 10px;">Get certified</div>
| |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
| |
| <path d="M1 5H13M13 5L9.57143 1.57143M13 5L9.57143 8.42857" stroke="#1A50AD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
| |
| </svg> </a>
| |
| </div>
| |
| </div>
| |
|
| |
|
| <!-- Card 4 -->
| | <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 style="width: 361px; height: 183px; padding: 24px; background: #F3F6F9; border-radius: 6px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; display: inline-flex">
| | <div class="content" style="padding: 5em; max-width: 589px; width: 100%; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;"> |
| <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex">
| | <div class="heading" style="color: #182933; font-size: 2.25em; font-weight: 700; text-transform: uppercase; word-wrap: break-word;">MDriven Learn</div> |
| <div style="color: #44546F; font-size: 14px; font-weight: 400; word-wrap: break-word">Q&A</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 style="color: #112B3C; font-size: 20px; font-weight: 700; word-wrap: break-word">Ask questions and get help</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>
| | <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 style="width: 313px; height: 50px; color: black; font-size: 14px; font-weight: 300; word-wrap: break-word">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
| | <div class="search-icon" style="margin-left: 10px;"> |
| <div style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 6px; display: inline-flex; margin-top:10px;">
| | <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"> |
| <a href="#" style="display: inline-flex; align-items: center;"><div style="color: #1A50AD; font-size: 14px; font-weight: 600; word-wrap: break-word; margin-right: 10px;">Explore Q&A</div>
| | <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 xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none"> | |
| <path d="M1 5H13M13 5L9.57143 1.57143M13 5L9.57143 8.42857" stroke="#1A50AD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
| |
| </svg> | | </svg> |
| </div> </a>
| | </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> |
| | <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> |
| | |
|
| |
|
| <!-- Card 5 -->
| |
| <div style="width: 361px; height: 183px; padding: 24px; background: #F3F6F9; border-radius: 6px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; display: inline-flex">
| |
| <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex">
| |
| <div style="color: #44546F; font-size: 14px; font-weight: 400; word-wrap: break-word">Model examples</div>
| |
| <div style="color: #112B3C; font-size: 20px; font-weight: 700; word-wrap: break-word">Try model samples </div>
| |
| </div>
| |
| <div style="width: 313px; height: 50px; color: black; font-size: 14px; font-weight: 300; word-wrap: break-word">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
| |
| <div style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 6px; display: inline-flex; margin-top:10px;">
| |
| <a href="#" style="display: inline-flex; align-items: center;"><div style="color: #1A50AD; font-size: 14px; font-weight: 600; word-wrap: break-word; margin-right: 10px;">Browse samples</div>
| |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
| |
| <path d="M1 5H13M13 5L9.57143 1.57143M13 5L9.57143 8.42857" stroke="#1A50AD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
| |
| </svg> </a>
| |
| </div>
| |
| </div>
| |
|
| |
|
| <!-- Card 6 -->
| | <style> |
| <div style="width: 361px; height: 183px; padding: 24px; background: #F3F6F9; border-radius: 6px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; display: inline-flex"> | | @media (max-width: 767px) { |
| <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex"> | | .grid-container { |
| <div style="color: #44546F; font-size: 14px; font-weight: 400; word-wrap: break-word">Best practices</div>
| | grid-template-columns: 1fr !important; |
| <div style="color: #112B3C; font-size: 20px; font-weight: 700; word-wrap: break-word">Explore effective solutions</div>
| | padding-left: 0 !important; |
| </div>
| | padding-right: 0 !important; |
| <div style="width: 313px; height: 50px; color: black; font-size: 14px; font-weight: 300; word-wrap: break-word">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
| | justify-items: center; /* This centers the items in the grid */ |
| <div style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 6px; display: inline-flex; margin-top:10px;">
| | } |
| <a href="#" style="display: inline-flex; align-items: center;"><div style="color: #1A50AD; font-size: 14px; font-weight: 600; word-wrap: break-word; margin-right: 10px;">See best practices</div>
| | .card { |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
| | margin: 0 auto !important; /* This centers the card and gives equal margins on both sides */ |
| <path d="M1 5H13M13 5L9.57143 1.57143M13 5L9.57143 8.42857" stroke="#1A50AD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
| | } |
| </svg> </a>
| | } |
| </div>
| | </style> |
| </div>
| |
|
| |
|
| | <div style="display: grid; padding: 5em; grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-rows: minmax(100px, auto);" class="grid-container"> |
| | </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}} |
| | {{#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}} |
| | {{#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}} |
| | <html> |
| </div> | | </div> |
|
| |
|
| |
| </html> | | </html> |
| | {{Edited|July|12|2024}} |
| | {{Class|scroll}} |