Saide webpage edit

instructions.md

Local copy

1. open git bash
2. cd <path>/saide-koolivand.github.io
3. git pull

Image and video files

1. cd saide-koolivand.github.io/assets/images/work/<project folder>/
2. insert images and video corresponing to the project

Display image/video on webpage

1. open cd saide-koolivand.github.io/_work/<project file>
2. Insert video path in the <project file>

<div class="section-padding bg-kaiser-permanente--alpha">
  <div class="grid">
    <div class="browser" data-aos="fade-in">
      <span class="browser__dots"></span>
      <video autoplay loop muted>
        <source type="video/mp4" src="/assets/videos/kaiser-permanente-home.mp4">
      </video>
    </div>
  </div>
</div>

3. Insert picture path in the <project file>

<div class="section-padding bg-lightgrey">
  <div class="grid">
    <div class="study__double">
      <div>
        <div class="browser" data-aos="fade-in">
          <span class="browser__dots"></span>
          <figure class="browser__img">
            <img src="/assets/images/work/ultrasonic-egg-beater/sketch.jpg" alt="Kaiser Permanente About Page"/>
          </figure>
        </div>
      </div>
      <div>
        <div class="browser" data-aos="fade-in" data-aos-delay="400">
          <span class="browser__dots"></span>
          <figure class="browser__img">
            <img src="/assets/images/work/ultrasonic-egg-beater/03.png" alt="Parts"/>
          </figure>
        </div>
      </div>
    </div>
  </div>
</div>

4. Insert text in the <project file>

<div class="study__intro section-padding--double bg-white">
  <div class="grid-small">
    <h2>
      <span data-aos="slice-up" data-aos-duration="400">“Super prime” real estate</span>
    </h2>
    <p data-aos="fade-in" data-aos-duration="400" data-aos-delay="100">S&P is an international real estate boutique specializing in the design, marketing, and sale of luxury and "super prime" real estate and the website needed to reflect the properties in their portfolio. The WordPress website does that through its reserved color palette, animations and interactions, and architectural imagery. The CMS uses drag and drop modules, so they can continue following these patterns with no guidance from designers or developers.</p>
    <p data-aos="fade-in" data-aos-duration="400" data-aos-delay="100">The S&P website was done at Urban Influence and has received recognition from <a href="https://www.awwwards.com/sites/s-p-real-estate-1" target="_blank">Awwwards</a> and <a href="https://www.cssdesignawards.com/sites/s-p-real-estate/31111/" target="_blank">CSS Design Awards</a>.</p>
  </div>
</div>

Updating website

1. get the path of new files git status
2. add these to git git add <file/floder name>
3. commit git commit -m "meaningful comment for changes added"
4. push git push