Em

1 bundle
3 files4 months ago
4

project.html

Project.html


      <div class="project">
        <div class="project__container">
          <div class="project__title">
            <p class="project__title__feature">
              Featured Project
            </p>
            <h2 class="project__title__name">
              OctoProfile
            </h2>
          </div>
          <p class="project__content">
            A nicer look at your GitHub profile and repo stats. Includes data
            visualizations of your top languages, starred repositories, and sort
            through your top repos by number of stars, forks, and size.
          </p>
          <div class="project__technology">
            <ul class="project__technology__list">
              <li class="project__technology__list__item">
                <a class="project__technology__list__item__link" href="#!"
                  >Next.js</a
                >
              </li>
              <li class="project__technology__list__item">
                <a class="project__technology__list__item__link" href="#!"
                  >Chart.js</a
                >
              </li>
              <li class="project__technology__list__item">
                <a class="project__technology__list__item__link" href="#!"
                  >Github API</a
                >
              </li>
            </ul>
          </div>
          <div class="project__link">
            <ul class="project__link__list">
              <li class="project__link__item">
                <a class="project__link__item__link" href="#!">
                  <i class="fab fa-github"></i>
                </a>
              </li>
              <li class="project__link__item">
                <a class="project__link__item__link" href="#!">
                  <i class="fas fa-external-link-alt"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="project__image">
          <img
            class="project__image__src"
            src="http://picsum.photos/500"
            alt=""
          />
        </div>
      </div>
      <div class="project project--reverse">
        <div class="project__container">
          <div class="project__title">
            <p class="project__title__feature">
              Featured Project
            </p>
            <h2 class="project__title__name">
              OctoProfile
            </h2>
          </div>
          <p class="project__content">
            A nicer look at your GitHub profile and repo stats. Includes data
            visualizations of your top languages, starred repositories, and sort
            through your top repos by number of stars, forks, and size.
          </p>
          <div class="project__technology">
            <ul class="project__technology__list">
              <li class="project__technology__list__item">
                <a class="project__technology__list__item__link" href="#!"
                  >Next.js</a
                >
              </li>
              <li class="project__technology__list__item">
                <a class="project__technology__list__item__link" href="#!"
                  >Chart.js</a
                >
              </li>
              <li class="project__technology__list__item">
                <a class="project__technology__list__item__link" href="#!"
                  >Github API</a
                >
              </li>
            </ul>
          </div>
          <div class="project__link">
            <ul class="project__link__list">
              <li class="project__link__item">
                <a class="project__link__item__link" href="#!">
                  <i class="fab fa-github"></i>
                </a>
              </li>
              <li class="project__link__item">
                <a class="project__link__item__link" href="#!">
                  <i class="fas fa-external-link-alt"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="project__image">
          <img
            class="project__image__src"
            src="http://picsum.photos/500"
            alt=""
          />
        </div>
      </div>
      <div class="project">
        <div class="project__container">
          <div class="project__title">
            <p class="project__title__feature">
              Featured Project
            </p>
            <h2 class="project__title__name">
              OctoProfile
            </h2>
          </div>
          <p class="project__content">
            A nicer look at your GitHub profile and repo stats. Includes data
            visualizations of your top languages, starred repositories, and sort
            through your top repos by number of stars, forks, and size.
          </p>
          <div class="project__technology">
            <ul class="project__technology__list">
              <li class="project__technology__list__item">
                <a class="project__technology__list__item__link" href="#!"
                  >Next.js</a
                >
              </li>
              <li class="project__technology__list__item">
                <a class="project__technology__list__item__link" href="#!"
                  >Chart.js</a
                >
              </li>
              <li class="project__technology__list__item">
                <a class="project__technology__list__item__link" href="#!"
                  >Github API</a
                >
              </li>
            </ul>
          </div>
          <div class="project__link">
            <ul class="project__link__list">
              <li class="project__link__item">
                <a class="project__link__item__link" href="#!">
                  <i class="fab fa-github"></i>
                </a>
              </li>
              <li class="project__link__item">
                <a class="project__link__item__link" href="#!">
                  <i class="fas fa-external-link-alt"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="project__image">
          <img
            class="project__image__src"
            src="http://picsum.photos/500"
            alt=""
          />
        </div>
      </div>
      <div class="project project--reverse">
        <div class="project__container">
          <div class="project__title">
            <p class="project__title__feature">
              Featured Project
            </p>
            <h2 class="project__title__name">
              OctoProfile
            </h2>
          </div>
          <p class="project__content">
            A nicer look at your GitHub profile and repo stats. Includes data
            visualizations of your top languages, starred repositories, and sort
            through your top repos by number of stars, forks, and size.
          </p>
          <div class="project__technology">
            <ul class="project__technology__list">
              <li class="project__technology__list__item">
                <a class="project__technology__list__item__link" href="#!"
                  >Next.js</a
                >
              </li>
              <li class="project__technology__list__item">
                <a class="project__technology__list__item__link" href="#!"
                  >Chart.js</a
                >
              </li>
              <li class="project__technology__list__item">
                <a class="project__technology__list__item__link" href="#!"
                  >Github API</a
                >
              </li>
            </ul>
          </div>
          <div class="project__link">
            <ul class="project__link__list">
              <li class="project__link__item">
                <a class="project__link__item__link" href="#!">
                  <i class="fab fa-github"></i>
                </a>
              </li>
              <li class="project__link__item">
                <a class="project__link__item__link" href="#!">
                  <i class="fas fa-external-link-alt"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="project__image">
          <img
            class="project__image__src"
            src="http://picsum.photos/500"
            alt=""
          />
        </div>
      </div>
      <div class="other-project">
        <div class="other-project__title">
          <h1 class="other-project__title__content">
            Other Projects
          </h1>
          <p class="other-project__title_small">
            view the archive
          </p>
        </div>
        <div class="other-project__list">
          <div class="other-project__list__item">
            <div class="cart-project">
              <div class="cart-project__header">
                <a class="cart-project__icon" title="Folder" href="#!">
                  <i class="fas fa-folder"></i>
                </a>
                <div class="cart-project__link">
                  <a class="cart-project__link__item" title="Github" href="#!">
                    <i class="fab fa-github"></i>
                  </a>
                  <a class="cart-project__link__item" title="Link" href="#!">
                    <i class="fas fa-external-link-alt"></i>
                  </a>
                </div>
              </div>
              <div class="cart-project__body">
                <h3 class="cart-project__body__title">
                  Building a Headless Mobile App CMS From Scratch
                </h3>
                <p class="cart-project__body__content">
                  Find out how we built a custom headless CMS with Node,
                  Express, and Firebase for a client project at Upstatement
                </p>
              </div>
              <div class="cart-project__footer">
                <ul class="cart-project__footer__list">
                  <li class="cart-project__footer__list__item">
                    <a class="cart-project__footer__list__item__link" href="#!">
                      Next.js
                    </a>
                  </li>
                  <li class="cart-project__footer__list__item">
                    <a class="cart-project__footer__list__item__link" href="#!">
                      Express
                    </a>
                  </li>
                  <li class="cart-project__footer__list__item">
                    <a class="cart-project__footer__list__item__link" href="#!">
                      Firebase
                    </a>
                  </li>
                  <li class="cart-project__footer__list__item">
                    <a class="cart-project__footer__list__item__link" href="#!">
                      Vue
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="other-project__list__item">
            <div class="cart-project">
              <div class="cart-project__header">
                <a class="cart-project__icon" title="Folder" href="#!">
                  <i class="fas fa-folder"></i>
                </a>
                <div class="cart-project__link">
                  <a class="cart-project__link__item" title="Github" href="#!">
                    <i class="fab fa-github"></i>
                  </a>
                  <a class="cart-project__link__item" title="Link" href="#!">
                    <i class="fas fa-external-link-alt"></i>
                  </a>
                </div>
              </div>
              <div class="cart-project__body">
                <h3 class="cart-project__body__title">
                  Building a Headless Mobile App CMS From Scratch
                </h3>
                <p class="cart-project__body__content">
                  Find out how we built a custom headless CMS with Node,
                  Express, and Firebase for a client project at Upstatement
                </p>
              </div>
              <div class="cart-project__footer">
                <ul class="cart-project__footer__list">
                  <li class="cart-project__footer__list__item">
                    <a class="cart-project__footer__list__item__link" href="#!">
                      Next.js
                    </a>
                  </li>
                  <li class="cart-project__footer__list__item">
                    <a class="cart-project__footer__list__item__link" href="#!">
                      Express
                    </a>
                  </li>
                  <li class="cart-project__footer__list__item">
                    <a class="cart-project__footer__list__item__link" href="#!">
                      Firebase
                    </a>
                  </li>
                  <li class="cart-project__footer__list__item">
                    <a class="cart-project__footer__list__item__link" href="#!">
                      Vue
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

Project.css

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
.project { margin-bottom: 40px; display: flex; flex-direction: column; justify-content: center; position: relative; height: 400px; } .project__container { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; } .project__title__feature { color: #64ffda; font-size: 15px; font-family: "Fira Code Light", "Roboto", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important; } .project__title__name { color: #ccd6f6; font-size: 27px; text-align: right; } .project__content { width: 25%; margin: 0; color: #ccd6f6; padding: 20px; border: none; z-index: 2; background-color: #293d5a; border-radius: 7px; text-align: right; color: #ccd6f6; width: 45%; } .project__image { z-index: -1; position: absolute; display: flex; } .project__image__src { height: 400px; width: 600px; border-radius: 7px; } .project__technology__list, .project__link__list { list-style-type: none; padding-left: 0; display: flex; } .project__technology__list__item { margin-left: 10px; } .project__link__item { margin-left: 15px; } .project__technology__list__item__link, .project__link__item__link { color: #ccd6f6; text-decoration: none; } .project__link__item__link { font-size: 27px; } .project__technology__list__item__link:hover { text-decoration: underline; } .project--reverse .project__container { align-items: flex-start !important; } .project--reverse .project__content { text-align: left !important; } .project--reverse .project__image { right: 0 !important; }

anotherProject.css

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
.other-project__title { margin-top: 50px; display: flex; flex-direction: column; align-content: center; align-items: center; } .other-project__title__content { color: #ccd6f6; margin-bottom: 0; } .other-project__title_small { color: #64ffda; margin-top: 10px; } .other-project__list { display: flex; flex-wrap: wrap; } .other-project__list__item { width: 25%; margin: 10px; background-color: #293d5a; padding: 20px; border-radius: 7px; } .cart-project__header { display: flex; justify-content: space-between; } .cart-project__icon { color: #64ffda; font-size: 40px; } .cart-project__link__item { color: #ccd6f6; margin-left: 20px; text-decoration: none; font-size: 20px; } .cart-project__body__title { color: #ccd6f6; } .cart-project__body__content { margin-top: 0; color: #a8b2d1; } .cart-project__footer__list { list-style-type: none; display: flex; padding-left: 0; } .cart-project__footer__list__item { margin-right: 10px; } .cart-project__footer__list__item__link { text-decoration: none; color: #a8b2d1; font-family: "Fira Code Light", "Roboto", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 13px; } .cart-project__footer__list__item__link:hover { text-decoration: underline; }