Pattern Library

Nav bar

Code

          
            <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">Services</a></li>

            <li><a href="#">Work</a></li>

            <li><a href="#">About</a></li>

            <li><a href="#">Contact</a></li>

            </ul>

Jumbotron

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac nulla arcu. In dictum metus eget nulla cursus faucibus.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas venenatis nibh a suscipit vestibulum. Sed luctus, sapien et semper malesuada, ex ligula malesuada dolor, sit amet tempus nibh ex at sem.

Code

            
              <div class="jumbotron">

                <h3>Welcome</h3>

                <p class="text1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac nulla arcu.      
In dictum metus eget nulla cursus faucibus. <br>Interdum et malesuada fames ac ante ipsum 
 primis in faucibus. Maecenas venenatis nibh a suscipit vestibulum. Sed luctus, sapien et semper malesuada,
 ex ligula malesuada dolor, sit amet tempus nibh ex at sem.</p>

                <p class="but">

                <button type="button" name="button" class="btn-md">Button</button>

              </p>

Header Carousel

1 / 3

2 / 3

3 / 3

❮ ❯

Code

        
          <div class="slideshow-container">

        <div class="mySlides fade">

          <div class="numbertext">1 / 3</div>

          <img src="img/img1.jpg" style="width:100%">

        </div>



        <div class="mySlides fade">

          <div class="numbertext">2 / 3</div>

          <img src="img/img2.jpg" style="width:100%">

        </div>



        <div class="mySlides fade">

          <div class="numbertext">3 / 3</div>

          <img src="img/img3.jpg" style="width:100%">

        </div>



        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

        <a class="next" onclick="plusSlides(1)">&#10095;</a>



        <div class="dots" style="text-align:center">

          <span class="dot" onclick="currentSlide(1)"></span>

          <span class="dot" onclick="currentSlide(2)"></span>

          <span class="dot" onclick="currentSlide(3)"></span>

        </div>

      </div>

Buttons

Code

        
          <button type="button" name="button" class="btn-sm">Button</button>

          <button type="button" name="button" class="btn-md">Button</button>

          <button type="button" name="button" class="btn-lg">Button</button><br>

          <button type="button" name="button" class="btn-sm-sec">Button</button>

          <button type="button" name="button" class="btn-md-sec">Button</button>

          <button type="button" name="button" class="btn-lg-sec">Button</button>

Form

Code

        
          <form class="contact-form" action="index.html" method="post">

            <input type="text" name="name" value="Name"><br>

            <input type="text" name="email" value="Email"><br>

            <textarea name="message" rows="8" cols="80"></textarea>

            <button type="button" name="button" class="btn-sm">Go!</button>

          </form>

Footer

Code

            
              <footer>

                <p>Facebook | Twitter | Instagram | Linkedin</p>

                  <p>&copy; Architectural Elite LTD 2017 | Designed by Joshua Howard</p>

              </footer>