mdbootstrap4-pro/html/tutorials/bootstrap/tutorial-1/2.html

MDBootstrap 4 PRO

<!--Section: Tutorial content-->
<section>

    <!--Section: Tutorial content-->
    <section>

        <p>In the first row, we are using <strong>2 columns</strong>. One of them is a perfect place for an outstanding image
            that will be an eye-catcher for our visitors. The second column will be useful for heading, short description
            and call to action button.
        </p>

        <p class="h5 mt-4">Step 1</p>

        <p>In the first column of the first row place an image. You can use any image you want, by providing a correct URL.
        </p>

        <pre class="code-toolbar"><code class="language-markup">
&lt;div class=&quot;col-md-7&quot;&gt;

    &lt;!--Featured image --&gt;
    &lt;img src=&quot;https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg&quot; class=&quot;img-fluid&quot;&gt;

&lt;/div&gt;
            </code></pre>

        <p>Pay attention to the special class <strong>"img-fluid"</strong>. It makes our image responsive, which means that
            it will always adjust to the screen size and it parents width. Thanks to that our visitors can enjoy watching
            it both on mobile and desktop.</p>

        <p class="h5 mt-4">Step 2</p>

        <p>We can easily enhance our image by adding a subtle shadow, hover effect and waves effect. To achieve that we need
            to place the image within a special wrapper.</p>

        <p><strong>Replace the code of our image with the code below.</strong> </p>

        <pre class="code-toolbar"><code class="language-markup">
  &lt;!--Featured image --&gt;
  &lt;div class=&quot;view overlay hm-white-light z-depth-1-half&quot;&gt;
      &lt;img src=&quot;https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg&quot; class=&quot;img-fluid &quot; alt=&quot;&quot;&gt;
      &lt;div class=&quot;mask&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
            </code></pre>

        <p>Save the file and refresh your browser. Now you can enjoy all the effects.</p>

        <p class="h5 mt-4">Step 3</p>

        <p>As we said before, in the second column we'll place heading, short description and call to action. That will help
            our visitor to quickly understand what our website is about (heading and description) and what action we expect
            from them (call to action button).</p>

        <pre class="code-toolbar"><code class="language-markup">
&lt;h2&gt;Some awesome heading&lt;/h2&gt;&#13;&#10;&lt;hr&gt;&#13;&#10;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis pariatur quod ipsum atque quam dolorem&#13;&#10;    voluptate officia sunt placeat consectetur alias fugit cum praesentium ratione sint mollitia, perferendis&#13;&#10;    natus quaerat!&lt;/p&gt;&#13;&#10;&lt;a href=&quot;https://mdbootstrap.com/&quot; class=&quot;btn btn-primary&quot;&gt;Get it now!&lt;/a&gt;
            </code></pre>

        <p>If you want to play with it, you can change a call to action button. MDB provides you a huge variety of buttons.</p>

        <p>Go to <a href="https://mdbootstrap.com/components/buttons/">BUTTONS DOCUMENTATION</a> section in our documentation
            and use the element you like the most. </p>

        <p>Save the file and open it in the browser.</p>

        <p>Thanks to MDB our project is growing fast, so let's keep going!</p>

        <p class="h5 mt-4">Step 4</p>

        <p>In the second row, we are going to add some detailed information about our website. Our <strong>cards</strong> will
            do the work.</p>

        <p>Cards are great to present content to the users. They are clear, easy to use and elegant. Facebook uses cards, Google
            uses cards, LinkedIn uses cards. You also should do that, especially that MDB provides you really outstanding
            cards.</p>

        <p>Go to the <a href="https://mdbootstrap.com/components/cards/#waves-effect">CARDS DOCUMENTATION</a> and grab the Card
            with Waves Effect. Then paste it to every column of the second row.</p>

        <p><strong>After all your second row should look like this:</strong></p>

        <pre class="code-toolbar"><code class="language-markup">
&lt;!--Grid row--&gt;&#13;&#10;&lt;div class=&quot;row&quot;&gt;&#13;&#10;&#13;&#10;    &lt;!--Grid column--&gt;&#13;&#10;    &lt;div class=&quot;col-lg-4 col-md-12&quot;&gt;&#13;&#10;&#13;&#10;        &lt;!--Card--&gt;&#13;&#10;        &lt;div class=&quot;card&quot;&gt;&#13;&#10;&#13;&#10;            &lt;!--Card image--&gt;&#13;&#10;            &lt;div class=&quot;view overlay hm-white-slight&quot;&gt;&#13;&#10;                &lt;img src=&quot;https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg&quot; class=&quot;img-fluid&quot; alt=&quot;&quot;&gt;&#13;&#10;                &lt;a href=&quot;#&quot;&gt;&#13;&#10;                    &lt;div class=&quot;mask&quot;&gt;&lt;/div&gt;&#13;&#10;                &lt;/a&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;&#13;&#10;            &lt;!--Card content--&gt;&#13;&#10;            &lt;div class=&quot;card-body&quot;&gt;&#13;&#10;                &lt;!--Title--&gt;&#13;&#10;                &lt;h4 class=&quot;card-title&quot;&gt;Card title&lt;/h4&gt;&#13;&#10;                &lt;!--Text--&gt;&#13;&#10;                &lt;p class=&quot;card-text&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card&apos;s content.&lt;/p&gt;&#13;&#10;                &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Button&lt;/a&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;!--/.Card--&gt;&#13;&#10;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;!--Grid column--&gt;&#13;&#10;&#13;&#10;    &lt;!--Grid column--&gt;&#13;&#10;    &lt;div class=&quot;col-lg-4 col-md-6&quot;&gt;&#13;&#10;&#13;&#10;        &lt;!--Card--&gt;&#13;&#10;        &lt;div class=&quot;card&quot;&gt;&#13;&#10;&#13;&#10;            &lt;!--Card image--&gt;&#13;&#10;            &lt;div class=&quot;view overlay hm-white-slight&quot;&gt;&#13;&#10;                &lt;img src=&quot;https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg&quot; class=&quot;img-fluid&quot; alt=&quot;&quot;&gt;&#13;&#10;                &lt;a href=&quot;#&quot;&gt;&#13;&#10;                    &lt;div class=&quot;mask&quot;&gt;&lt;/div&gt;&#13;&#10;                &lt;/a&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;&#13;&#10;            &lt;!--Card content--&gt;&#13;&#10;            &lt;div class=&quot;card-body&quot;&gt;&#13;&#10;                &lt;!--Title--&gt;&#13;&#10;                &lt;h4 class=&quot;card-title&quot;&gt;Card title&lt;/h4&gt;&#13;&#10;                &lt;!--Text--&gt;&#13;&#10;                &lt;p class=&quot;card-text&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card&apos;s content.&lt;/p&gt;&#13;&#10;                &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Button&lt;/a&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;!--/.Card--&gt;&#13;&#10;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;!--Grid column--&gt;&#13;&#10;&#13;&#10;    &lt;!--Grid column--&gt;&#13;&#10;    &lt;div class=&quot;col-lg-4 col-md-6&quot;&gt;&#13;&#10;&#13;&#10;        &lt;!--Card--&gt;&#13;&#10;        &lt;div class=&quot;card&quot;&gt;&#13;&#10;&#13;&#10;            &lt;!--Card image--&gt;&#13;&#10;            &lt;div class=&quot;view overlay hm-white-slight&quot;&gt;&#13;&#10;                &lt;img src=&quot;https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg&quot; class=&quot;img-fluid&quot; alt=&quot;&quot;&gt;&#13;&#10;                &lt;a href=&quot;#&quot;&gt;&#13;&#10;                    &lt;div class=&quot;mask&quot;&gt;&lt;/div&gt;&#13;&#10;                &lt;/a&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;&#13;&#10;            &lt;!--Card content--&gt;&#13;&#10;            &lt;div class=&quot;card-body&quot;&gt;&#13;&#10;                &lt;!--Title--&gt;&#13;&#10;                &lt;h4 class=&quot;card-title&quot;&gt;Card title&lt;/h4&gt;&#13;&#10;                &lt;!--Text--&gt;&#13;&#10;                &lt;p class=&quot;card-text&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card&apos;s content.&lt;/p&gt;&#13;&#10;                &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Button&lt;/a&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;!--/.Card--&gt;&#13;&#10;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;!--Grid column--&gt;&#13;&#10;&#13;&#10;&lt;/div&gt;&#13;&#10;&lt;!--Grid row--&gt;
              </code></pre>

        <p>Save the file and open it in the browser. Our layout still needs a few improvements, but we'll take care of it later.</p>

        <p class="h5 mt-4">Step 5</p>

        <p>Now it's time for the footer.</p>

        <p>Go to the <a href="https://mdbootstrap.com/components/footers/#basic">FOOTER DOCUMENTATION</a> and grab the code
            of Basic Footer. Then paste it to our project:</p>

        <pre class="code-toolbar"><code class="language-markup">
&lt;!--Footer--&gt;&#13;&#10;&lt;footer class=&quot;page-footer blue center-on-small-only&quot;&gt;&#13;&#10;&#13;&#10;    &lt;!--Footer Links--&gt;&#13;&#10;    &lt;div class=&quot;container-fluid&quot;&gt;&#13;&#10;        &lt;div class=&quot;row&quot;&gt;&#13;&#10;&#13;&#10;            &lt;!--First column--&gt;&#13;&#10;            &lt;div class=&quot;col-md-6&quot;&gt;&#13;&#10;                &lt;h5 class=&quot;title&quot;&gt;Footer Content&lt;/h5&gt;&#13;&#10;                &lt;p&gt;Here you can use rows and columns here to organize your footer content.&lt;/p&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;            &lt;!--/.First column--&gt;&#13;&#10;&#13;&#10;            &lt;!--Second column--&gt;&#13;&#10;            &lt;div class=&quot;col-md-6&quot;&gt;&#13;&#10;                &lt;h5 class=&quot;title&quot;&gt;Links&lt;/h5&gt;&#13;&#10;                &lt;ul&gt;&#13;&#10;                    &lt;li&gt;&lt;a href=&quot;#!&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;&#13;&#10;                    &lt;li&gt;&lt;a href=&quot;#!&quot;&gt;Link 2&lt;/a&gt;&lt;/li&gt;&#13;&#10;                    &lt;li&gt;&lt;a href=&quot;#!&quot;&gt;Link 3&lt;/a&gt;&lt;/li&gt;&#13;&#10;                    &lt;li&gt;&lt;a href=&quot;#!&quot;&gt;Link 4&lt;/a&gt;&lt;/li&gt;&#13;&#10;                &lt;/ul&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;            &lt;!--/.Second column--&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;!--/.Footer Links--&gt;&#13;&#10;&#13;&#10;    &lt;!--Copyright--&gt;&#13;&#10;    &lt;div class=&quot;footer-copyright&quot;&gt;&#13;&#10;        &lt;div class=&quot;container-fluid&quot;&gt;&#13;&#10;            &copy; 2015 Copyright: &lt;a href=&quot;https://www.MDBootstrap.com&quot;&gt; MDBootstrap.com &lt;/a&gt;&#13;&#10;&#13;&#10;        &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;!--/.Copyright--&gt;&#13;&#10;&#13;&#10;&lt;/footer&gt;&#13;&#10;&lt;!--/.Footer--&gt;
              </code></pre>

        <p>You can see that our footer already contains a color class "blue", which makes it blue. You can easily change it
            by using one of over <a href="https://mdbootstrap.com/css/colors/">300 defined color classes</a> provided by
            MDB</p>

        <p>In the next lesson, you will learn how to manipulate MDB colors.</p>

        <p>You can also notice class <code>.center-on-small-only</code> which center footers elements on small screens.</p>

        <p>Alright, the main layout of our website is done, but it's still a lot of details to improve.</p>

        <p>I.e. navbars and footesr colors are slightly different, and their links are stretched full-width, which doesn't look
            good. Also content in our rows of <code>&lt;main&gt;</code> section are too close to each other. And there are
            few more things which should be fixed.</p>

        <p>That website definitely requires more work to make it looks professional. We'll take care of it in the next lesson.
        </p>

    </section>
    <!--Section: Tutorial content-->