Lingjie Wan's Porfolio Style Guide

Text Elements

Headings

Sample code:

<h3>Heading one</h3> <h4>Heading two</h4> <h5>Heading three</h5> <h6>Heading four</h6>

Rendered element:

Heading one

Heading two

Heading three

Heading four

Paragraphs

Sample code:


          <p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.
        This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.
        This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.
        This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.
      This is a paragraph.This is a paragraph.</p>

Rendered element:

This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph. This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph. This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph. This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph. This is a paragraph.This is a paragraph.

Numbered Lists

CSS selector:

.list

Sample code:


          <ol>
         <li>Project 1</li>
         <li>Project 2</li>
         <li>Project 3</li>
         </ol>

Rendered element:

Project 1
Project 2
Project 3

Text Animation

CSS selector:

.bio

.journey

Sample code:


          <div class="bio">
         <h1> Lingjie Wan</h1>
       </div>
       <div class="journey">
         <h2> My Journey</h2>
       </div>

Rendered element:

Lingjie Wan

My Journey

Combined Elements

Main Navigation

Sample code:


           <nav>       
        
  <ul>
        <li><a href="work.html">Work</a ></li>
        <li><a href="index.html">About</a ></li>
    </ul>


       
      </nav>

Rendered element:

Footer

Sample code:


          <footer>

      <p>
      <a href="styleguide.html">Style Guide</a> || <a href="https://github.com/helenawan1998/P03-Profolio">Git</a> || <a href="citation.html">Citation</a>
    </p>
  

</footer>

Rendered element:

Image Library

CSS selector:

.row

.column

.prodimage

.prodcontainer

.prodoverlay

.prodotext

Sample code:


          <div class="row">
    <div class="column">
      <div class="prodcontainer">
        <img src="img/moodboard3.jpeg" alt="image about me" class="prodimage">
        <div class="prodoverlay">
         <div class="prodtext">
            <h2> I See The Light</h2>
            <p> Oil Painting || September 8, 2018 </p>
           
          </div>
        </div>
        
      </div>

      <div class="prodcontainer">
        <img src="img/moodboard2.jpeg" alt="image about me" class="prodimage">
        <div class="prodoverlay">
         <div class="prodtext">
            <h2> White Rock Beach</h2>
            <p> White Rock || August 30, 2020 </p>
           
          </div>
        </div>
        
      </div>
    </div>

    <div class="column">
      <div class="prodcontainer">
        <img src="img/moodboard6.jpeg" alt="image about me" class="prodimage">
        <div class="prodoverlay">
         <div class="prodtext">
            <h2> My Birthday</h2>
            <p> Vancouver || October 27, 2019 </p>
           
          </div>
        </div>
        
      </div>
      <div class="prodcontainer">
        <img src="img/moodboard5.jpeg" alt="image about me" class="prodimage">
        <div class="prodoverlay">
         <div class="prodtext">
            <h2> Ski Travel </h2>
            <p> Whistler || January 18, 2019 </p>
           
          </div>
        </div>
        
      </div>
    </div>

    <div class="column">
      <div class="prodcontainer">
        <img src="img/moodboard4.jpeg" alt="image about me" class="prodimage">
        <div class="prodoverlay">
         <div class="prodtext">
            <h2> Shy</h2>
            <p> Oil Painting || August 1, 2018 </p>
           
          </div>
        </div>
        
      </div>

      <div class="prodcontainer">
        <img src="img/moodboard1.jpeg" alt="image about me" class="prodimage">
        <div class="prodoverlay">
         <div class="prodtext">
            <h2> Sunset</h2>
            <p> White Rock || September 10, 2020 </p>
           
          </div>
        </div>
        
      </div>
    </div>
  </div>

Rendered element:

I See The Light

Oil Painting || September 8, 2018

White Rock Beach

White Rock || August 30, 2020

My Birthday

Vancouver || October 27, 2019

Ski Travel

Whistler || January 18, 2019

Shy

Oil Painting || August 1, 2018

Sunset

White Rock || September 10, 2020

Project Image Gallery

CSS selector:

.workcontainer

.gallery

.gallery-item

.gallery-image

Sample code:


          <div class="workcontainer">


  <div class="gallery">

    <div class="gallery-item">
      <img class="gallery-image" src="img/work2draw1.png" alt="sketches of the pavilion">
    </div>

    <div class="gallery-item">
      <img class="gallery-image" src="img/work2draw2.png" alt="sketches of the pavilion">
   </div>

<div class="gallery-item">
     <img class="gallery-image" src="img/work2draw3.png" alt="sketches of the pavilion">
 </div>

<div class="gallery-item">
     <img class="gallery-image" src="img/work2final3.png" alt="final prototype of the pavilion">
  </div>

    <div class="gallery-item">
      <img class="gallery-image" src="img/work2mood.png" alt="moodboard of the pavilion">
   </div>

   <div class="gallery-item">
      <img class="gallery-image" src="img/work2final2.png" alt="final prototype of the pavilion">
   </div>

 </div>

</div>

Rendered element:

Contact Me Form

CSS selector:

.ccolumn

Sample code:


          <div class="ccolumn">
          <label for="uname">Your Name*</label>
         <input type="text" id="uname" name="Yourname" placeholder="Please provide your first name and last name">

        <label for="pname">Company's Name*</label>
          <input type="text" id="pname" name="Lastname" placeholder="Please provide your company name">

          <label for="email">Email*</label>
         <input type="text" id="email" name="email" placeholder="Please provide your email">

          <label for="phone">Phone*</label>
          <input type="text" id="phone" name="add" placeholder="Please provide your phone">
        <label for="text">What service are you interested in?*</label>

         <select id="text" name="text">
           <option value="Review">Leave a Review</option>
           <option value="Design">Web Design</option>
            <option value="UX">User Experience Design</option>
           <option value="Drawing">Illustration Drawing</option>
             <option value="Other">Other</option>
         </select>




      <label for="subject">Please put your request/comment below</label>
      <textarea id="subject" name="subject" placeholder="" style="height:200px"></textarea>

     <div class="submitbutton"> <button type="submit" class="contactsubmit" value="Submit">Submit</button> </div>

Rendered element:

Your Name* Company's Name* Email* Phone* What service are you interested in?* Please put your request/comment below

Color Palettes

Interactive Elements

In-text link

Sample code:

Rendered element:

Default Button

CSS selector:

Sample code:

Rendered element:

Image/Logo as a link

CSS selector:

Sample code:

Rendered element:

Text Elements

Headings

Sample code:

Rendered element:

Heading one

Heading two

Heading three

Heading four

Paragraphs

Sample code:

Rendered element:

Numbered Lists

CSS selector:

Sample code:

Rendered element:

Text Animation

CSS selector:

Sample code:

Rendered element:

Combined Elements

Main Navigation

Sample code:

Rendered element:

Footer

Sample code:

Rendered element:

Image Library

CSS selector:

Sample code:

Rendered element:

I See The Light

White Rock Beach

My Birthday

Ski Travel

Shy

Sunset

Project Image Gallery

CSS selector:

Sample code:

Rendered element:

Contact Me Form

CSS selector:

Sample code:

Rendered element:

Design Elements

Fonts

Citation Webpage

Ciatations