Repository: codewithsadee/smith-portfolio
Branch: master
Commit: 794f4ee872e3
Files: 6
Total size: 44.9 KB

Directory structure:
gitextract_cshirj0o/

├── README.md
├── assets/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── script.js
├── index.html
├── index.txt
└── style-guide.md

================================================
FILE CONTENTS
================================================

================================================
FILE: README.md
================================================
<div align="center">
  
  ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/smith-portfolio)
  ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/smith-portfolio?style=social)
  ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/smith-portfolio?style=social)
[![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_)
  [![YouTube Video Views](https://img.shields.io/youtube/views/BbCLWdF3Bnc?style=social)](https://youtu.be/BbCLWdF3Bnc)

  <br />
  <br />

  <h2 align="center">Smith - Personal Portfolio Website</h2>

  Smith is a fully responsive personal portfolio website, <br />Responsive for all devices, build using HTML, CSS, and JavaScript.

  <a href="https://codewithsadee.github.io/smith-portfolio/"><strong>➥ Live Demo</strong></a>

</div>

<br />

### Demo Screeshots

![Smith-portfolio Desktop Demo](./readme-images/desktop.png "Desktop Demo")

### Prerequisites

Before you begin, ensure you have met the following requirements:

* [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system.

### Run Locally

To run **Smith-portfolio** locally, run this command on your git bash:

Linux and macOS:

```bash
sudo git clone https://github.com/codewithsadee/smith-portfolio.git
```

Windows:

```bash
git clone https://github.com/codewithsadee/smith-portfolio.git
```

### Contact

If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee).

### License

This project is **free to use** and does not contains any license.


================================================
FILE: assets/css/style.css
================================================
/*-----------------------------------*\
  #style.css
\*-----------------------------------*/

/**
 * copyright 2022 codewithsadee
 */





/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /** 
   * colors
   */

  --sonic-silver: hsl(0, 0%, 46%);
  --spanish-gray: hsl(0, 0%, 60%);
  --theme-color: hsl(10, 100%, 57%);
  --light-gray: hsl(0, 0%, 80%);
  --gray-x-11: hsl(0, 0%, 73%);
  --dim-gray: hsl(0, 0%, 44%);
  --cultured: hsl(0, 0%, 98%);
  --black_10: hsl(0, 0%, 0%, 0.1);
  --black_20: hsl(0, 0%, 0%, 0.2);
  --black_30: hsl(0, 0%, 0%, 0.3);
  --black_70: hsl(0, 0%, 0%, 0.7);
  --white_10: hsl(0, 0%, 100%, 0.1);
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);

  /**
   * typography
   */

  --ff-poppins: 'Poppins', sans-serif;
  --ff-mulish: 'Mulish', sans-serif;

  --fs-35: 3.5rem;
  --fs-30: 3rem;
  --fs-25: 2.5rem;
  --fs-18: 1.8rem;
  --fs-17: 1.7rem;
  --fs-13: 1.3rem;

  --fw-800: 800;
  --fw-700: 700;
  --fw-600: 600;
  --fw-500: 500;
  --fw-400: 400;

  /**
   * spacing
   */

  --section-padding: 80px;

  /**
   * shadow
   */

  --shadow: 0 0 20px hsla(0, 0%, 0%, 0.08);

  /**
   * radius
   */

  --radius-10: 10px;
  --radius-8: 8px;

  /**
   * transition
   */

  --transition: 0.25s ease;
  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);

}





/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li { list-style: none; }

a {
  text-decoration: none;
  color: inherit;
}

a,
img,
span,
input,
button,
textarea,
ion-icon { display: block; }

img { height: auto; }

input,
button,
textarea {
  background: none;
  border: none;
  font: inherit;
}

input,
textarea { width: 100%; }

button { cursor: pointer; }

ion-icon { pointer-events: none; }

address { font-style: normal; }

html {
  font-family: var(--ff-mulish);
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--white);
  color: var(--sonic-silver);
  font-size: 1.6rem;
  line-height: 1.75;
  letter-spacing: 0.2px;
}

:focus-visible { outline-offset: 4px; }

::placeholder { color: var(--dim-gray); }

::-webkit-scrollbar {
  width: 12px;
  height: 2px;
}

body::-webkit-scrollbar-track { background-color: var(--white); }

body::-webkit-scrollbar-thumb {
  background-color: var(--spanish-gray);
  border: 3px solid var(--white);
  border-radius: 50px;
}





/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.container { padding-inline: 30px; }

.section { padding-block: var(--section-padding); }

.img-holder {
  aspect-ratio: var(--width) / var(--height);
  background-color: var(--light-gray);
  overflow: hidden;
}

.has-before {
  position: relative;
  z-index: 1;
}

.has-before::before {
  position: absolute;
  content: "";
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-subtitle {
  color: var(--theme-color);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-500);
  margin-block-end: 6px;
}

.h1,
.h2,
.h3 {
  color: var(--black);
  font-family: var(--ff-poppins);
}

.h1 { font-size: var(--fs-30); }

.h1,
.h2 {
  font-weight: var(--fw-800);
  text-transform: uppercase;
}

.h2 {
  font-size: var(--fs-25);
  line-height: 1.2;
}

.h1,
.h3 { line-height: 1.4; }

.h3 { font-size: var(--fs-18); }

.section-title { margin-block-end: 40px; }

:is(.portfolio, .news) .section-title { margin-block-end: 60px; }

.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-10);
}

.card-content {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  background-color: var(--white);
  border-radius: var(--radius-8);
  padding: 20px 25px;
  display: grid;
  align-content: flex-end;
  opacity: 0;
  transition: var(--transition);
}

.card:is(:hover, :focus-within, :active) .card-content { opacity: 1; }

.card-content > ion-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--black);
  font-size: 40px;
  transform: rotate(-45deg);
}

.card-text { font-family: var(--ff-poppins); }

.has-scrollbar {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-block-end: 30px;
  margin-block-end: -15px;
  scroll-snap-type: inline mandatory;
}

.scrollbar-item {
  min-width: 100%;
  scroll-snap-align: start;
}

.has-scrollbar::-webkit-scrollbar-track { background-color: var(--black_20); }

.has-scrollbar::-webkit-scrollbar-thumb { background-color: var(--black_70); }

.has-scrollbar::-webkit-scrollbar-button { width: calc(25% - 25px); }




/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--white);
  padding-block: 15px;
  border-block-end: 1px solid var(--black_10);
  z-index: 4;
}

.header > .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}

.logo {
  color: var(--black);
  font-family: var(--ff-poppins);
  font-size: 3.2rem;
  line-height: 0.9;
  font-weight: var(--fw-700);
}

.nav-toggle-btn .line {
  width: 30px;
  height: 2px;
  background-color: var(--black);
  transition: var(--transition);
}

.nav-toggle-btn .line:not(:last-child) { margin-block-end: 8px; }

.nav-toggle-btn.active .line-1 { transform: translateY(10px) rotate(45deg); }

.nav-toggle-btn.active .line-2 {
  transform: translateX(-100%);
  opacity: 0;
}

.nav-toggle-btn.active .line-3 { transform: translateY(-10px) rotate(-45deg); }

.navbar {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  width: 100%;
  background-color: var(--white);
  padding-inline: 30px;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: 0.3s var(--cubic-out);
}

.navbar.active {
  max-height: 250px;
  visibility: visible;
  transition-duration: 0.5s;
}

.navbar-list { margin-block: 25px; }

.navbar-link {
  color: var(--black);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-500);
}





/*-----------------------------------*\
  #HERO
\*-----------------------------------*/

.slide-down-btn { display: none; }

.hero {
  background-color: var(--cultured);
  padding-block-start: calc(var(--section-padding) + 30px);
}

.hero-banner {
  margin-block-end: 60px;
  max-height: 500px;
  border-radius: var(--radius-10);
  margin-inline: auto;
}

.hero-title { margin-block: 10px 20px; }

.hero-list { margin-block-end: 25px; }

.hero-list .list-link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  color: var(--black);
  font-size: var(--fs-17);
  padding-block: 6px;
}

.hero-list .list-link:is(:hover, :focus) { color: var(--theme-color); }

.hero-list .list-link .span,
.hero-list .list-link ion-icon { transition: var(--transition); }

.hero-list .list-link:is(:hover, :focus) ion-icon { transform: rotate(-45deg); }

.exp-list .list-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  font-family: var(--ff-poppins);
  line-height: 1.4;
}

.exp-list .list-item:not(:last-child) { margin-block-end: 15px; }

.exp-list .strong {
  color: var(--black);
  font-size: var(--fs-35);
  font-weight: var(--fw-600);
}

.exp-list .span { font-size: var(--fs-13); }





/*-----------------------------------*\
  #SKILLS
\*-----------------------------------*/

.skills-banner { display: none; }

.skills { background-color: var(--black); }

.skills .section-title { color: var(--white); }

.skills .section-text {
  color: var(--gray-x-11);
  margin-block: 40px 45px;
}

.skills-item:not(:last-child) { margin-block-end: 25px; }

.skills-list .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--white);
  font-family: var(--ff-poppins);
  margin-block-end: 10px;
}

.skill-title {
  font-size: unset;
  font-weight: unset;
}

.skills .progress-box { background-color: var(--white_10); }

.skills .progress {
  background-color: var(--theme-color);
  height: 8px;
}





/*-----------------------------------*\
  #TIMELINE
\*-----------------------------------*/

.timeline-item {
  padding-block: 20px;
  font-size: var(--fs-18);
  display: grid;
  gap: 15px;
}

.timeline-item:not(:last-child) { border-block-end: 1px solid var(--black_10); }

.timeline-item .item-period { font: unset; }

.timeline-item .item-title { color: var(--black); }





/*-----------------------------------*\
  #PRICEING
\*-----------------------------------*/

.pricing { background-color: var(--cultured); }

.pricing .section-text { margin-block-end: 60px; }

.pricing-list {
  display: grid;
  gap: 30px;
}

.pricing-card {
  --color: var(--black);
  --icon-color: var(--theme-color);

  background-color: var(--white);
  border-radius: var(--radius-10);
  box-shadow: var(--shadow);
  line-height: 1.2;
  padding: 30px;
  transition: var(--transition);
}

.pricing-card ion-icon {
  color: var(--icon-color);
  flex-shrink: 0;
  font-size: 25px;
  transition: var(--transition);
}

.pricing-card .card-title {
  color: var(--color);
  font: unset;
  font-family: var(--ff-poppins);
  margin-block: 14px 10px;
  transition: var(--transition);
}

.pricing-card .card-price {
  color: var(--color);
  font-family: var(--ff-poppins);
  transition: var(--transition);
}

.pricing-card:is(:hover, :focus-within) {
  background-color: var(--theme-color);
  --color: var(--white);
  --icon-color: var(--white);
}





/*-----------------------------------*\
  #NEWS
\*-----------------------------------*/

.news-card .card-text { margin-block-end: 5px; }





/*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

.contact { background-color: var(--cultured); }

.contact-list { margin-block: 40px 50px; }

.contact-item:not(:last-child) { margin-block-end: 22px; }

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-item ion-icon {
  color: var(--theme-color);
  font-size: 22px;
  flex-shrink: 0;
  --ionicon-stroke-width: 25px;
}

.contact-link {
  color: var(--black);
  font-family: var(--ff-poppins);
}

.input-field {
  color: var(--black);
  font-family: var(--ff-poppins);
  font-size: var(--fs-13);
  letter-spacing: 1.4px;
  border: 1px solid var(--black_10);
  padding: 10px;
  margin-block-end: 30px;
  outline: none;
  transition: border var(--transition);
}

.input-field:focus { border-color: var(--black_30); }

textarea.input-field {
  resize: vertical;
  min-height: 45px;
  height: 45px;
  max-height: 100px;
}

.submit-btn {
  background-color: var(--theme-color);
  color: var(--white);
  width: 100%;
  font-size: var(--fs-17);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  transition: var(--transition);
}

.submit-btn:is(:hover, :focus) { background-color: var(--black); }

.submit-btn ion-icon { transition: var(--transition); }

.submit-btn:is(:hover, :focus) ion-icon { transform: rotate(-45deg); }





/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer {
  background-color: var(--black);
  color: var(--white);
  text-align: center;
  padding-block: 30px;
}

.copyright { margin-block-end: 10px; }

.copyright-link { display: inline-block; }

.copyright-link:is(:hover, :focus) { text-decoration: underline; }

.social-list {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-link { font-size: 17px; }





/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for larger than 576px screen
 */

@media (min-width: 576px) {

  /**
   * REUSED STYLE
   */

  .scrollbar-item { min-width: calc(50% - 20px); }



  /**
   * HERO
   */

  .exp-list {
    display: flex;
    justify-content: flex-start;
    gap: 50px;
  }

  .exp-list .list-item:not(:last-child) { margin-block-end: 0; }



  /**
   * PRICING
   */

  .pricing-card {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }

  .pricing-card .card-title {
    margin-block: 0;
    margin-inline-end: auto;
  }

}





/**
 * responsive for larger than 768px screen
 */

@media (min-width: 768px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * typography
     */

    --fs-30: 3.5rem;
    --fs-25: 3rem;

  }



  /**
   * REUSED STYLE
   */

  .h3 { --fs-18: 2rem; }

  .card-content { padding: 30px 35px; }

  .card-content > ion-icon {
    top: 30px;
    right: 30px;
  }



  /**
   * TIMELINE
   */

  .timeline-item {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }



  /**
   * PRICING, CONTACT
   */

  .pricing-card,
  .contact-link { font-size: var(--fs-18); }



  /**
   * FOOTER
   */

  .footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .copyright { margin-block-end: 0; }

}





/**
 * responsive for larger than 992px screen
 */

@media (min-width: 992px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * typography
     */

    --fs-35: 4.5rem;

    /**
     * spacing
     */

    --section-padding: 120px;

  }
  


  /**
   * REUSED STYLE
   */

  .container { padding-inline: 50px; }



  /**
   * HEADER
   */

  .header {
    background-color: transparent;
    border-block-end: none;
    padding-block: 25px;
    transition: var(--transition);
  }

  .header.active {
    background-color: var(--white);
    padding-block: 20px;
  }

  .navbar,
  .navbar.active {
    all: unset;
    margin-inline-start: auto;
    transition: var(--transition);
  }

  .navbar { visibility: hidden; }

  .navbar.active { visibility: visible; }

  .navbar-list {
    display: flex;
    gap: 20px;
    margin-block: 0;
  }

  .navbar-link {
    opacity: 0;
    transform: translateX(20px);
    font-weight: var(--fw-400);
    transition: var(--transition);
  }

  .navbar.active .navbar-link {
    opacity: 1;
    transform: translateX(0);
  }

  .navbar-link:is(:hover, :focus) { color: var(--theme-color); }



  /**
   * HERO
   */

  .hero {
    --section-padding: 70px;
    padding-block-start: calc(var(--section-padding) + 60px);
    min-height: 100vh;
    display: grid;
    align-items: center;
  }

  .hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 150px;
  }

  .hero-banner {
    order: 1;
    width: 250px;
    margin-inline: auto 80px;
    margin-block-end: 0;
    overflow: visible;
    transform: rotate(7deg);
  }

  .hero-banner .img-cover { border-radius: inherit; }

  .hero-banner::before {
    bottom: -40px;
    left: -95px;
    width: 90%;
    height: 100%;
    background-color: var(--theme-color);
    z-index: -1;
    transform: rotate(-15deg);
    border-radius: var(--radius-10);
  }

  .exp-list .span { --fs-13: 1.4rem; }

  .slide-down-btn {
    display: block;
    color: var(--black);
    font-size: 40px;
    max-width: max-content;
    margin-block-start: 40px;
    transition: var(--transition);
    animation: scrollDown 2s ease infinite;
  }

  .slide-down-btn:is(:hover, :focus) { color: var(--theme-color); }

  @keyframes scrollDown {
    0% { transform: translateY(0); }
    30% { transform: translateY(20px); }
  }



  /**
   * SKILLS
   */

  .skills .container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 150px;
  }

  .skills-banner {
    display: block;
    position: absolute;
    top: 0;
    right: 50px;
    width: 410px;
    height: 620px;
    background-image: url('../images/portfolio-2.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 105%;
    background-attachment: fixed;
    overflow: hidden;
  }



  /**
   * TIMELINE
   */

  .timeline-item { padding-block: 30px; }



  /**
   * PRICING
   */

  .pricing .container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    gap: 200px;
  }

  .pricing-content {
    position: sticky;
    top: 120px;
  }

  .pricing .section-text { margin-block-end: 0; }



  /**
   * CONTACT
   */

  .contact .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 200px;
  }

  .contact-list { margin-block-end: 0; }

}





/**
 * responsive for larger than 1200px screen
 */

@media (min-width: 1200px) {

  /**
   * REUSED STYLE
   */

  .container {
    max-width: 1170px;
    width: 100%;
    margin-inline: auto;
  }

  .has-scrollbar { gap: 40px; }

  .scrollbar-item { min-width: calc(33.33% - 26.66px); }

  :is(.portfolio, .news) .section-title { margin-block-end: 80px; }



  /**
   * HEADER
   */

  .header .container { max-width: unset; }

  

  /**
   * HERO
   */

  .hero-banner { width: 275px; }

}

================================================
FILE: assets/js/script.js
================================================
'use strict';



/**
 * add event on element
 */

const addEventOnElem = function (elem, type, callback) {
  if (elem.length > 1) {
    for (let i = 0; i < elem.length; i++) {
      elem[i].addEventListener(type, callback);
    }
  } else {
    elem.addEventListener(type, callback);
  }
}



/**
 * toggle navbar
 */

const navbar = document.querySelector("[data-navbar]");
const navLinks = document.querySelectorAll("[data-nav-link]");
const navToggler = document.querySelector("[data-nav-toggler]");

const toggleNavbar = function () {
  navbar.classList.toggle("active");
  navToggler.classList.toggle("active");
}

addEventOnElem(navToggler, "click", toggleNavbar);

const closeNavbar = function () {
  navbar.classList.remove("active");
  navToggler.classList.remove("active");
}

addEventOnElem(navLinks, "click", closeNavbar);



/**
 * header active
 */

const header = document.querySelector("[data-header]");

window.addEventListener("scroll", function () {
  if (window.scrollY > 100) {
    header.classList.add("active");
  } else {
    header.classList.remove("active");
  }
});

================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Smith - Creative Designer Based In UK</title>

  <!-- 
    - favicon
  -->
  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

  <!-- 
    - custom css link
  -->
  <link rel="stylesheet" href="./assets/css/style.css">

  <!-- 
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Mulish&family=Poppins:wght@400;500;600;700;800&display=swap"
    rel="stylesheet">

  <!-- 
    - preload images
  -->
  <link rel="preload" as="image" href="./assets/images/hero-banner.jpg">

</head>

<body>

  <!-- 
    - #HEADER
  -->

  <header class="header" data-header>
    <div class="container">

      <a href="#" class="logo">Smith</a>

      <nav class="navbar" data-navbar>
        <ul class="navbar-list">

          <li>
            <a href="#home" class="navbar-link" data-nav-link>Home</a>
          </li>

          <li>
            <a href="#portfolio" class="navbar-link" data-nav-link>Portfolio</a>
          </li>

          <li>
            <a href="#skills" class="navbar-link" data-nav-link>Skills</a>
          </li>

          <li>
            <a href="#timeline" class="navbar-link" data-nav-link>Timeline</a>
          </li>

          <li>
            <a href="#price" class="navbar-link" data-nav-link>Price</a>
          </li>

          <li>
            <a href="#news" class="navbar-link" data-nav-link>News</a>
          </li>

          <li>
            <a href="#contact" class="navbar-link" data-nav-link>Contact</a>
          </li>

        </ul>
      </nav>

      <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
        <span class="line line-1"></span>
        <span class="line line-2"></span>
        <span class="line line-3"></span>
      </button>

    </div>
  </header>





  <main>
    <article>

      <!-- 
        - #HERO
      -->

      <section class="section hero" id="home" aria-label="hero">
        <div class="container">

          <figure class="hero-banner img-holder has-before" style="--width: 640; --height: 840;">
            <img src="./assets/images/hero-banner.jpg" width="640" height="840" alt="Bernard Smith" class="img-cover">
          </figure>

          <div class="hero-content">

            <p class="section-subtitle">Bernard Smith</p>

            <h1 class="h1 hero-title">Creative Designer Based In UK</h1>

            <ul class="hero-list">

              <li>
                <a href="#" class="list-link">
                  <span class="span">Web Development</span>

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
                </a>
              </li>

              <li>
                <a href="#" class="list-link">
                  <span class="span">Digital Marketing</span>

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
                </a>
              </li>

              <li>
                <a href="#" class="list-link">
                  <span class="span">Graphic Design</span>

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
                </a>
              </li>

            </ul>

            <ul class="exp-list">

              <li class="list-item">
                <strong class="strong">10+</strong>

                <span class="span">
                  Years of<br>
                  Experience
                </span>
              </li>

              <li class="list-item">
                <strong class="strong">3K+</strong>

                <span class="span">
                  Happy<br>
                  Customers
                </span>
              </li>

            </ul>

            <a href="#portfolio" class="slide-down-btn" aria-label="scroll down">
              <ion-icon name="arrow-down" aria-hidden="true"></ion-icon>
            </a>

          </div>

        </div>
      </section>





      <!-- 
        - #PORTFOLIO
      -->

      <section class="section portfolio" id="portfolio" aria-label="portfolio">
        <div class="container">

          <p class="section-subtitle">Portfolio</p>

          <h2 class="h2 section-title">Selected Works</h2>

          <ul class="has-scrollbar">

            <li class="scrollbar-item">
              <div class="card">

                <figure class="card-banner img-holder" style="--width: 600; --height: 675;">
                  <img src="./assets/images/portfolio-1.jpg" width="600" height="675" loading="lazy" alt="Magic Art"
                    class="img-cover">
                </figure>

                <a href="#" class="card-content">

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>

                  <h3 class="h3 card-title">Magic Art</h3>

                  <p class="card-text">Vimeo</p>

                </a>

              </div>
            </li>

            <li class="scrollbar-item">
              <div class="card">

                <figure class="card-banner img-holder" style="--width: 600; --height: 675;">
                  <img src="./assets/images/portfolio-2.jpg" width="600" height="675" loading="lazy" alt="Bona Green"
                    class="img-cover">
                </figure>

                <a href="#" class="card-content">

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>

                  <h3 class="h3 card-title">Bona Green</h3>

                  <p class="card-text">Youtube</p>

                </a>

              </div>
            </li>

            <li class="scrollbar-item">
              <div class="card">

                <figure class="card-banner img-holder" style="--width: 600; --height: 675;">
                  <img src="./assets/images/portfolio-3.jpg" width="600" height="675" loading="lazy" alt="Leo Dandora"
                    class="img-cover">
                </figure>

                <a href="#" class="card-content">

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>

                  <h3 class="h3 card-title">Leo Dandora</h3>

                  <p class="card-text">Soundcloud</p>

                </a>

              </div>
            </li>

            <li class="scrollbar-item">
              <div class="card">

                <figure class="card-banner img-holder" style="--width: 600; --height: 675;">
                  <img src="./assets/images/portfolio-4.jpg" width="600" height="675" loading="lazy" alt="Folio Grasia"
                    class="img-cover">
                </figure>

                <a href="#" class="card-content">

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>

                  <h3 class="h3 card-title">Folio Grasia</h3>

                  <p class="card-text">Detail</p>

                </a>

              </div>
            </li>

            <li class="scrollbar-item">
              <div class="card">

                <figure class="card-banner img-holder" style="--width: 600; --height: 675;">
                  <img src="./assets/images/portfolio-5.jpg" width="600" height="675" loading="lazy" alt="Viva Mercury"
                    class="img-cover">
                </figure>

                <a href="#" class="card-content">

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>

                  <h3 class="h3 card-title">Viva Mercury</h3>

                  <p class="card-text">Image</p>

                </a>

              </div>
            </li>

            <li class="scrollbar-item">
              <div class="card">

                <figure class="card-banner img-holder" style="--width: 600; --height: 675;">
                  <img src="./assets/images/portfolio-6.jpg" width="600" height="675" loading="lazy" alt="Santa Onera"
                    class="img-cover">
                </figure>

                <a href="#" class="card-content">

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>

                  <h3 class="h3 card-title">Santa Onera</h3>

                  <p class="card-text">Image</p>

                </a>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #SKILLS
      -->

      <section class="section skills has-before" id="skills" aria-label="skills"
        style="background-image: url('./assets/images/skills-bg.png')">
        <div class="container">

          <div class="skills-content">

            <p class="section-subtitle">Skills</p>

            <h2 class="h2 section-title">Programming Skills</h2>

            <p class="section-text">
              For more than 20 years our experts have been accomplishing enough with modern Web Development, new
              generation web and
              app programming language.
            </p>

            <ul class="skills-list">

              <li class="skills-item">
                <div class="wrapper">
                  <h3 class="skill-title">HTML & CSS</h3>

                  <data class="skill-value" value="95%">95%</data>
                </div>

                <div class="progress-box">
                  <div class="progress" style="width: 95%"></div>
                </div>
              </li>

              <li class="skills-item">
                <div class="wrapper">
                  <h3 class="skill-title">JavaScript</h3>

                  <data class="skill-value" value="80%">80%</data>
                </div>

                <div class="progress-box">
                  <div class="progress" style="width: 80%"></div>
                </div>
              </li>

              <li class="skills-item">
                <div class="wrapper">
                  <h3 class="skill-title">WordPress</h3>

                  <data class="skill-value" value="90%">90%</data>
                </div>

                <div class="progress-box">
                  <div class="progress" style="width: 90%"></div>
                </div>
              </li>

            </ul>

          </div>

          <div class="skills-banner has-before"></div>

        </div>
      </section>





      <!-- 
        - #TIMELINE
      -->

      <section class="section timeline" id="timeline" aria-label="timeline">
        <div class="container">

          <p class="section-subtitle">Timeline</p>

          <h2 class="h2 section-title">Working Period</h2>

          <ul class="timeline-list">

            <li class="timeline-item">

              <h3 class="item-period">April, 2019 - Today</h3>

              <p class="item-title">Head Designer & Co-founder</p>

              <p class="item-address">Alan Klein Design, London</p>

            </li>

            <li class="timeline-item">

              <h3 class="item-period">September, 2018 - April, 2019</h3>

              <p class="item-title">Creative Director & Senior Designer</p>

              <p class="item-address">Raxuna Poc, New York</p>

            </li>

            <li class="timeline-item">

              <h3 class="item-period">October, 2015 - September, 2018</h3>

              <p class="item-title">Head Designer</p>

              <p class="item-address">Arimana Co. Ltd, Amsterdam</p>

            </li>

            <li class="timeline-item">

              <h3 class="item-period">July, 2012 - October, 2015</h3>

              <p class="item-title">Senior UX & UI Designer</p>

              <p class="item-address">Baxdoro Design, London</p>

            </li>

            <li class="timeline-item">

              <h3 class="item-period">March, 2010 - July, 2012</h3>

              <p class="item-title">Junior UX Designer</p>

              <p class="item-address">Simono Design Group, London</p>

            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #PRICING
      -->

      <section class="section pricing" id="price" aria-label="price">
        <div class="container">

          <div class="pricing-content">

            <p class="section-subtitle">Pricing</p>

            <h2 class="h2 section-title">Service Prices</h2>

            <p class="section-text">
              For more than 20 years our experts have been accomplishing enough with modern Web Development, new
              generation web and
              app programming language.
            </p>

          </div>

          <ul class="pricing-list">

            <li>
              <div class="pricing-card">
                <ion-icon name="logo-wordpress" aria-hidden="true"></ion-icon>

                <h3 class="card-title">WordPress Development</h3>

                <data class="card-price" value="500">$500</data>
              </div>
            </li>

            <li>
              <div class="pricing-card">
                <ion-icon name="logo-html5" aria-hidden="true"></ion-icon>

                <h3 class="card-title">HTML Development</h3>

                <data class="card-price" value="400">$400</data>
              </div>
            </li>

            <li>
              <div class="pricing-card">
                <ion-icon name="reader" aria-hidden="true"></ion-icon>

                <h3 class="card-title">Content Writing</h3>

                <data class="card-price" value="300">$300</data>
              </div>
            </li>

            <li>
              <div class="pricing-card">
                <ion-icon name="qr-code" aria-hidden="true"></ion-icon>

                <h3 class="card-title">Brand Identity</h3>

                <data class="card-price" value="200">$200</data>
              </div>
            </li>

            <li>
              <div class="pricing-card">
                <ion-icon name="image" aria-hidden="true"></ion-icon>

                <h3 class="card-title">PSD Design</h3>

                <data class="card-price" value="100">$100</data>
              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #NEWS
      -->

      <section class="section news" id="news" aria-label="news">
        <div class="container">

          <p class="section-subtitle">News</p>

          <h2 class="h2 section-title">Latest News</h2>

          <ul class="has-scrollbar">

            <li class="scrollbar-item">
              <div class="card news-card">

                <figure class="card-banner img-holder" style="--width: 600; --height: 675;">
                  <img src="./assets/images/blog-1.jpg" width="600" height="675" loading="lazy"
                    alt="VS Code Gets New JavaScript Debugger" class="img-cover">
                </figure>

                <a href="#" class="card-content">

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>

                  <time class="card-text" datetime="2022-09-02">September 02, 2022</time>

                  <h3 class="h3 card-title">VS Code Gets New JavaScript Debugger</h3>

                </a>

              </div>
            </li>

            <li class="scrollbar-item">
              <div class="card news-card">

                <figure class="card-banner img-holder" style="--width: 600; --height: 675;">
                  <img src="./assets/images/blog-2.jpg" width="600" height="675" loading="lazy"
                    alt="Javalin Framework for Kotlin and Java Updated" class="img-cover">
                </figure>

                <a href="#" class="card-content">

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>

                  <time class="card-text" datetime="2022-08-17">August 17, 2022</time>

                  <h3 class="h3 card-title">Javalin Framework for Kotlin and Java Updated</h3>

                </a>

              </div>
            </li>

            <li class="scrollbar-item">
              <div class="card news-card">

                <figure class="card-banner img-holder" style="--width: 600; --height: 675;">
                  <img src="./assets/images/blog-3.jpg" width="600" height="675" loading="lazy"
                    alt="JavaScript Dominated Open Source in 2022" class="img-cover">
                </figure>

                <a href="#" class="card-content">

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>

                  <time class="card-text" datetime="2022-07-05">July 05, 2022</time>

                  <h3 class="h3 card-title">JavaScript Dominated Open Source in 2022</h3>

                </a>

              </div>
            </li>

            <li class="scrollbar-item">
              <div class="card news-card">

                <figure class="card-banner img-holder" style="--width: 600; --height: 675;">
                  <img src="./assets/images/blog-4.jpg" width="600" height="675" loading="lazy"
                    alt="Perfecto Tests Progressive Web Apps" class="img-cover">
                </figure>

                <a href="#" class="card-content">

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>

                  <time class="card-text" datetime="2022-04-22">April 22, 2022</time>

                  <h3 class="h3 card-title">Perfecto Tests Progressive Web Apps</h3>

                </a>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #CONTACT
      -->

      <section class="section contact" id="contact" aria-label="contact">
        <div class="container">

          <div class="contact-content">

            <p class="section-subtitle">Contact</p>

            <h2 class="h2 section-title">Get In Touch</h2>

            <p class="section-text">
              Please fill out the form on this section to contact with me. Or call between 9:00 a.m. and 8:00 p.m. ET,
              Monday through
              Friday
            </p>

            <ul class="contact-list">

              <li class="contact-item">
                <ion-icon name="location-outline" aria-hidden="true"></ion-icon>

                <address class="contact-link">
                  27 City Walls Rd, Clydebank, UK
                </address>
              </li>

              <li class="contact-item">
                <ion-icon name="call-outline" aria-hidden="true"></ion-icon>

                <a href="tel:+07742691291" class="contact-link">+077 4269 1291</a>
              </li>

              <li class="contact-item">
                <ion-icon name="mail-outline" aria-hidden="true"></ion-icon>

                <a href="mailto:smith@gmail.com" class="contact-link">smith@gmail.com</a>
              </li>

              <li class="contact-item">
                <ion-icon name="globe-outline" aria-hidden="true"></ion-icon>

                <a href="www.domain.com" class="contact-link">www.domain.com</a>
              </li>

            </ul>

          </div>

          <form action="" class="contact-form">

            <input type="text" name="name" aria-label="name" placeholder="Name" required class="input-field">

            <input type="email" name="email_address" aria-label="email" placeholder="Email" required
              class="input-field">

            <textarea name="message" aria-label="message" placeholder="Message" required class="input-field"></textarea>

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

              <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
            </button>

          </form>

        </div>
      </section>

    </article>
  </main>





  <!-- 
    - #FOOTER
  -->

  <footer class="footer">
    <div class="container">

      <p class="copyright">
        &copy; 2022. All rights reserved by <a href="#" class="copyright-link">codewithsadee.</a>
      </p>

      <ul class="social-list">

        <li>
          <a href="#" class="social-link">
            <ion-icon name="logo-facebook"></ion-icon>
          </a>
        </li>

        <li>
          <a href="#" class="social-link">
            <ion-icon name="logo-twitter"></ion-icon>
          </a>
        </li>

        <li>
          <a href="#" class="social-link">
            <ion-icon name="logo-instagram"></ion-icon>
          </a>
        </li>

        <li>
          <a href="#" class="social-link">
            <ion-icon name="logo-dribbble"></ion-icon>
          </a>
        </li>

        <li>
          <a href="#" class="social-link">
            <ion-icon name="logo-tiktok"></ion-icon>
          </a>
        </li>

      </ul>

    </div>
  </footer>





  <!-- 
    - custom js link
  -->
  <script src="./assets/js/script.js" defer></script>

  <!-- 
    - ionicon link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>

================================================
FILE: index.txt
================================================
Smith - Creative Designer Based In UK



#---------- HEADER ----------#

Smith

Home
Portfolio
Skills
Timeline
Price
News
Contact

aria-label = toggle menu



#---------- HERO ----------#

alt = Bernard Smith

Bernard Smith

Creative Designer Based In UK

Web Development
<ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>

Digital Marketing
Graphic Design

10+
Years of
Experience
 
3K+
Happy
Customers

aria-label = scroll down

<ion-icon name="arrow-down" aria-hidden="true"></ion-icon>



#---------- PORTFOLIO ----------#

Portfolio

Selected Works

alt = Magic Art

<ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>

Magic Art
Vimeo

Bona Green
Youtube

Leo Dandora
Soundcloud

Folio Grasia
Detail

Viva Mercury
Image

Santa Onera
Image





#---------- SKILLS ----------#

Skills

Programming Skills

For more than 20 years our experts have been accomplishing enough with modern Web Development, new generation web and app programming language.

HTML & CSS
95%

JavaScript
80%

WordPress
90%



#---------- HEADER ----------#

Timeline

Working Period

April, 2019 - Today
Head Designer & Co-founder
Alan Klein Design, London

September, 2018 - April, 2019
Creative Director & Senior Designer
Raxuna Poc, New York

October, 2015 - September, 2018
Head Designer
Arimana Co. Ltd, Amsterdam

July, 2012 - October, 2015
Senior UX & UI Designer
Baxdoro Design, London

March, 2010 - July, 2012
Junior UX Designer
Simono Design Group, London



#---------- PRICING ----------#

Pricing

Service Prices

For more than 20 years our experts have been accomplishing enough with modern Web Development, new generation web and app programming language.

<ion-icon name="logo-wordpress" aria-hidden="true"></ion-icon>
WordPress Development
$500

<ion-icon name="logo-html5" aria-hidden="true"></ion-icon>
HTML Development
$400

<ion-icon name="reader" aria-hidden="true"></ion-icon>
Content Writing
$300

<ion-icon name="qr-code" aria-hidden="true"></ion-icon>
Brand Identity
$200

<ion-icon name="image" aria-hidden="true"></ion-icon>
PSD Design
$100



#---------- NEWS ----------#

News

Latest News

alt = VS Code Gets New JavaScript Debugger

September 02, 2022
VS Code Gets New JavaScript Debugger

alt = Javalin Framework for Kotlin and Java Updated

August 17, 2022
Javalin Framework for Kotlin and Java Updated

alt = JavaScript Dominated Open Source in 2022

July 05, 2022
JavaScript Dominated Open Source in 2022

atl = Perfecto Tests Progressive Web Apps

April 22, 2022
Perfecto Tests Progressive Web Apps



#---------- CONTACT ----------#

Contact

Get In Touch

Please fill out the form on this section to contact with me. Or call between 9:00 a.m. and 8:00 p.m. ET, Monday through Friday

<ion-icon name="location-outline" aria-hidden="true"></ion-icon>
27 City Walls Rd, Clydebank, UK

<ion-icon name="call-outline" aria-hidden="true"></ion-icon>
+077 4269 1291

<ion-icon name="mail-outline" aria-hidden="true"></ion-icon>
smith@gmail.com

<ion-icon name="globe-outline" aria-hidden="true"></ion-icon>
www.domain.com

placeholder = Name
placeholder = Email
placeholder = Message

Submit

<ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>



#---------- FOOTER ----------#

&copy; 2022. All rights reserved by codewithsadee.

<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-dribbble"></ion-icon>
<ion-icon name="logo-tiktok"></ion-icon>

================================================
FILE: style-guide.md
================================================
# Essential Stuff

## Html import links

Google font

``` html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish&family=Poppins:wght@400;500;600;700;800&display=swap"
  rel="stylesheet">
```

Ionicon

``` html
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
```

---

## Colors

``` css
--sonic-silver: hsl(0, 0%, 46%);
--spanish-gray: hsl(0, 0%, 60%);
--theme-color: hsl(10, 100%, 57%);
--light-gray: hsl(0, 0%, 80%);
--gray-x-11: hsl(0, 0%, 73%);
--dim-gray: hsl(0, 0%, 44%);
--cultured: hsl(0, 0%, 98%);
--black_10: hsl(0, 0%, 0%, 0.1);
--black_20: hsl(0, 0%, 0%, 0.2);
--black_30: hsl(0, 0%, 0%, 0.3);
--black_70: hsl(0, 0%, 0%, 0.7);
--white_10: hsl(0, 0%, 100%, 0.1);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);
```

## Typography

``` css
--ff-poppins: 'Poppins', sans-serif;
--ff-mulish: 'Mulish', sans-serif;

--fs-35: 3.5rem;
--fs-30: 3rem;
--fs-25: 2.5rem;
--fs-18: 1.8rem;
--fs-17: 1.7rem;
--fs-13: 1.3rem;

--fw-800: 800;
--fw-700: 700;
--fw-600: 600;
--fw-500: 500;
--fw-400: 400;
```

## Spacing

``` css
--section-padding: 80px;
```

## Shadow

``` css
--shadow: 0 0 20px hsla(0, 0%, 0%, 0.08);
```

## Border Radius

``` css
--radius-10: 10px;
--radius-8: 8px;
```

## Transition

``` css
--transition: 0.25s ease;
--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
```