Interactive Elements

Navigation Link

CSS Selector

nav

Sample Code


          <a href="projects.html">PROJECTS</a> 

          <a href="about.html">ABOUT</a> 

          <a href="contact.html">CONTACT</a>

Rendered Elements

Forms & Buttons

CSS Selector

contact-form

Sample Code


          <div class="form-container">

            <h2>Contact</h2>

            <form class="contact-form">

              <div class="form-text">

                <label for="name">Your
          Name</label>

                <input type="text"
          id="contact-name" placeholder="John Doe" />

              </div>

          

              <div class="form-text">

                <label for="email">Your
          Email</label>

                <input type="email"
          id="contact-email" placeholder="johndoe@abc.com" />

              </div>

          

              <div class="form-text">

                <label for="message">Your
          Message</label>

                <textarea id="message"
          placeholder="What you want to say..."></textarea>

              </div>

          

              <div class="form-action">

                <button type="submit"
          class="btn">Submit</button>

                <button type="reset"
          class="btn">Reset</button>

              </div>

            </form>

          </div>

Rendered Elements

Contact

Image as a Link

CSS Selector

image-container

Sample Code


            <div class="image-container">

                  <img

                    src="assets/SSFB.png"

                    alt="Strange Sounds From Beyond Art Direction and Interaction Design"

                  />

                

                  <a href="index.html">

                        <div class="image-overlay">

                              <p class="image-description">

                                    Strange Sounds From Beyond Art Direction and Interaction Design.

                              </p>

                        </div>

                  </a>

            </div>

Rendered Elements

Strange Sounds From Beyond Art Direction and Interaction Design.

Text Styling

Headings

Header 1

Header 2

Header 3

Header 4

Paragraph Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis leo euismod, faucibus justo at, consectetur tortor. Nulla facilisi. Integer ultrices dolor et varius volutpat. Nulla facilisi. Mauris vitae mattis orci. Aliquam eu quam mauris. Nunc viverra, velit et gravida rutrum, velit dolor aliquam justo, vitae cursus metus ex at nisi. Vestibulum auctor turpis id orci eleifend, nec vulputate quam viverra. Integer eleifend lacus ut semper molestie. Donec sagittis, felis sit amet gravida rhoncus, odio nunc congue urna, vel hendrerit lectus metus id arcu. Vivamus eu dui quis lorem scelerisque fermentum. Integer accumsan, justo sit amet laoreet varius, tortor tortor sollicitudin ex, ut varius ante velit vitae libero. In hac habitasse platea dictumst. Sed vitae nisi eget magna varius viverra. Sed pharetra, eros sit amet molestie commodo, est urna viverra mauris, sit amet commodo elit justo a erat.

Sed non bibendum ipsum. Morbi bibendum erat quis mauris vehicula laoreet. Morbi efficitur elit vitae aliquet fermentum. Sed non fermentum elit, id gravida ligula. Aliquam ultricies ligula vitae eros posuere, nec bibendum velit vehicula. Fusce eget rutrum libero. Mauris et erat velit. Suspendisse in quam non velit feugiat venenatis. Suspendisse id felis vel odio vestibulum ullamcorper. Integer nec pretium nulla. Quisque ullamcorper interdum nulla, at volutpat orci ultrices et. Suspendisse potenti.