(Responsive style test)
mNo edit summary
Tag: 2017 source edit
 
(70 intermediate revisions by 6 users not shown)
Line 1: Line 1:
<html>
<html>
<style>
<style>
@media only screen and (max-width: 768px) {
#flexContainer >*:first-child {
.wi-card {
  display: none;
width: 100%;
}
}
#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;
  }
}
.mainpage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
</style>
</style>
<div style="padding: 5em; background: linear-gradient(94deg, #E2F5FA 0%, #F7FAFC 49%, #FFDABB 100%);">
 
   <div style="max-width: 589px; width: 100%; display: flex; flex-direction: column; gap: 10px; padding-right: 4em; box-sizing: border-box;">
<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="color: #182933; font-size: 2.25em;  font-weight: 700; text-transform: uppercase; word-wrap: break-word;">MDriven education</div>
   <div class="content" style="padding: 5em; max-width: 589px; width: 100%; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;">
     <div style="color: #182933; font-size: 1.25em; font-weight: 500; letter-spacing: 0.40px; word-wrap: break-word;">Learn. Model. Design</div>
     <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: 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 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="width: 100%; max-width: 392px; height: 2.25em; position: relative; display: flex; align-items: center; background: white; border-radius: 4px; border: 1px #E3E8EE solid;">
     <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 style="margin-left: 10px;">
     <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">
             <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"/>
                 <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>
             </svg>
         </div>
         </div>
         <input type="search" placeholder="Search MDriven Education" style="flex-grow: 1; border: none; outline: none; padding-left: 10px;">
    <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>
</div>
</div>


<div style="display: grid; padding: 4em; grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-rows: minmax(100px, auto);">


    <!-- Card 1 -->
    <div  class="wi-card" 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 -->
<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; margin-top:10px;">
    .grid-container {
            <div style="color: #44546F; font-size: 14px;  font-weight: 400; word-wrap: break-word">Documentation</div>
        grid-template-columns: 1fr !important;
            <div style="color: #112B3C; font-size: 20px;  font-weight: 700; word-wrap: break-word">Find technical documentation</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;">Read documentation</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>
 
    <!-- Card 3 -->
    <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="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">Q&A</div>
            <div style="color: #112B3C; font-size: 20px; font-weight: 700; word-wrap: break-word">Ask questions and get help</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;">Explore Q&A</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 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 -->
    <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">Best practices</div>
            <div style="color: #112B3C; font-size: 20px;  font-weight: 700; word-wrap: break-word">Explore effective solutions</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;">See best practices</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>


<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}}

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.
Image
Icon
Documentation
Find technical documentation
Gain understanding through in-depth explanations of the concepts behind the MDriven tools.
Icon
Training
Learn by doing
Practical training and tutorials on MDriven designed to educate and inspire you to model your ideas.
Icon
Q&A
Ask questions and get help
Write to us your MDriven-related questions and receive quality answers and feedback.
Icon
Model Examples
Try model samples
Use our unique, pre-built models to build your ideas and achieve your goals.
Icon
Best Practices
Explore effective solutions
Our suggestions on how you can maximize the benefits of the MDriven tools to realize business solutions.


Retrieved from "https://wiki.mdriven.net/index.php?title=Main_Page&oldid=17782"

© MDRIVEN . All Rights Reserved

Glossary API Docs
MDriven World | Portal | Blog | YouTube | StackOverflow | Facebook

© MDRIVEN . All Rights Reserved