Skip to Content

Columns

With all Columns/Panels, you need to begin with a panel div tag <div class="panels">, as this will divide your content up


Careers & Jobs

Courses

<div class="panels">

    <div class="link-list">

        <h2>Careers &amp; Jobs</h2>

        <ul>

            <li><a href="#">Business Entrepreneurship &amp; Management</a></li>

            <li><a href="#">Design and Film &amp; TV </a></li>

            <li><a href="#">Engineering and Technology</a></li>

            <li><a href="#">Health &amp; Community Services</a></li>

            <li><a href="#">Horticulture &amp; Sustainability</a></li>

        </ul>

    </div>

</div>

<div class="panels">

    <div class="link-list">

        <h2>Courses</h2>

        <ul>

            <li><a href="#">Bachelor of Business</a></li>

            <li><a href="#">Bachelor of Marketing </a></li>

            <li><a href="#">Bachelor of Information Technology</a></li>

            <li><a href="#">Bachelor of Civil Engineering</a></li>

            <li><a href="#">Bachelor of Design</a></li>

        </ul>

    </div>

</div>


<div class="clear"></div>

Icons Lists

Student Experience

  • Student Experience 1

    Lorem Ipsum

    Diploma of Conservation and Land Management / Diploma of Sustainability

    Watch the video

  • Student Experience 2

    Lorem Ipsum

    Advanced Diploma of Accounting

    Watch the video

  • Student Experience 3

    Lorem Ipsum

    Diploma of Conservation and Land Management

    Watch the video

More Student Experiences

Industry

  • Phasellus vestibulum risus quis nisl. Donec faucibus mi et ante. Fusce massa. Aliquam erat volutpat. Praesent nec nisi. Aliquam erat volutpat.

  • Phasellus vestibulum risus quis nisl. Donec faucibus mi et ante. Fusce massa. Aliquam erat volutpat. Praesent nec nisi. Aliquam erat volutpat.

<div class="panels">

    <div class="icon-list">

         <h2>Student Experience</h2>

         <ul>

             <li><a href="#">

             <img src="/images/icons/panel-image-01.jpg" class="border" alt="Student Experience 1" /></a>

             <div>

                 <p><strong>Lorem Ipsum</strong></p>

                 <p>Diploma of Conservation and Land Management / Diploma of Sustainability</p>

                 <p><a href="#">Watch the video</a></p>

             </div>

         </li>

         <li><a href="#">

         <img src="/images/icons/panel-image-02.jpg" class="border" alt="Student Experience 2"/></a>

             <div>

                 <p><strong><strong>Lorem Ipsum</strong></strong></p>

                 <p>Advanced Diploma of Accounting</p>

                 <p><a href="#">Watch the video</a></p>

             </div>

         </li>

         <li><a href="#">

         <img src="/images/icons/panel-image-03.jpg" class="border" alt="Student Experience 3"/></a>

             <div>

                 <p><strong>Lorem Ipsum</strong></p>

                 <p>Diploma of Conservation and Land Management</p>

                 <p><a href="#">Watch the video</a></p>

            </div>

          </li>

      </ul>

      <div class="all"><a href="#">More Student Experiences</a></div>

   </div>

</div>



<div class="panels">

    <div class="icon-list">

        <h2>Industry</h2>

        <ul>

           <li><img src="http://www.swinburne.edu.au/images/icons/panel-image-04.jpg" alt="" />

           <div><p>Phasellus vestibulum risus quis nisl. Donec faucibus mi et ante. Fusce  massa. 

           Aliquam erat volutpat. Praesent nec nisi. Aliquam erat volutpat.</p></div></li>

           <li><img src="http://www.swinburne.edu.au/images/icons/panel-image-05.jpg" alt="" />

           <div><p>Phasellus vestibulum risus quis nisl. Donec faucibus mi et ante. Fusce  massa. 

           Aliquam erat volutpat. Praesent nec nisi. Aliquam erat volutpat.</p></div></li>

        </ul>

    </div>

</div>

<div class="clear"></div>

Add class="border" to the image tag to add a border


Description List

News and Events

Research

  • Lorem ipsum dolor sit amet consectetuer.

    Pellentesque habitant morbi tristique. Nunc eleifend egestas nisi. Pellentesque habitant morbi tristique.

    consectetuer.

  • Lorem ipsum dolor sit amet consectetuer.

    Pellentesque habitant morbi tristique. Nunc eleifend egestas nisi. Pellentesque habitant morbi tristique.

    consectetuer.

<div class="panels">

    <div class="desc-list">

        <h2>News and Events </h2>

        <ul>

            <li>

                <p><a href="#">Lorem ipsum dolor sit amet consectetuer.</a></p>

                <p>Nunc eleifend  egestas nisi. Pellentesque habitant morbi tristique.</p>

            </li>
            <li>

                <p><a href="#">Lorem ipsum dolor sit amet consectetuer.</a></p>

                <p>Nunc eleifend  egestas nisi. Pellentesque habitant morbi tristique.</p>

            </li>
        </ul>

    </div>

</div>

<div class="panels">

    <div class="desc-list">

        <h2>Research</h2>

        <ul>

            <li>

                <p><strong>Lorem ipsum dolor sit amet consectetuer.</strong></p>

                <p>Pellentesque habitant morbi tristique. Nunc eleifend  egestas nisi. 

                Pellentesque habitant morbi tristique.</p>

                <p><a href="#">consectetuer.</a></p>

            </li>

            <li>

                <p><strong>Lorem ipsum dolor sit amet consectetuer.</strong></p>

                <p>Pellentesque habitant morbi tristique. Nunc eleifend  egestas nisi. 

                Pellentesque habitant morbi tristique.</p>

                <p><a href="#">consectetuer.</a></p>

            </li>
        </ul>

    </div>

</div>


<div class="clear"></div>