├── assets
    ├── my-photo.jpg
    ├── blog-img-1.jpg
    ├── blog-img-2.jpg
    ├── blog-img-3.jpg
    ├── blog-img-4.jpg
    ├── blog-img-5.jpg
    ├── blog-img-6.jpg
    ├── project-img-1.jpg
    ├── project-img-2.jpg
    ├── project-img-3.jpg
    ├── project-img-4.jpg
    ├── project-img-5.jpg
    └── project-img-6.jpg
├── js
    └── script.js
├── css
    ├── utility.css
    └── style.css
├── index.html
├── services.html
├── about.html
├── projects.html
├── contact.html
├── skills.html
├── resume.html
└── blog.html


/assets/my-photo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/portfolio-website-series/HEAD/assets/my-photo.jpg


--------------------------------------------------------------------------------
/assets/blog-img-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/portfolio-website-series/HEAD/assets/blog-img-1.jpg


--------------------------------------------------------------------------------
/assets/blog-img-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/portfolio-website-series/HEAD/assets/blog-img-2.jpg


--------------------------------------------------------------------------------
/assets/blog-img-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/portfolio-website-series/HEAD/assets/blog-img-3.jpg


--------------------------------------------------------------------------------
/assets/blog-img-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/portfolio-website-series/HEAD/assets/blog-img-4.jpg


--------------------------------------------------------------------------------
/assets/blog-img-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/portfolio-website-series/HEAD/assets/blog-img-5.jpg


--------------------------------------------------------------------------------
/assets/blog-img-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/portfolio-website-series/HEAD/assets/blog-img-6.jpg


--------------------------------------------------------------------------------
/assets/project-img-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/portfolio-website-series/HEAD/assets/project-img-1.jpg


--------------------------------------------------------------------------------
/assets/project-img-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/portfolio-website-series/HEAD/assets/project-img-2.jpg


--------------------------------------------------------------------------------
/assets/project-img-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/portfolio-website-series/HEAD/assets/project-img-3.jpg


--------------------------------------------------------------------------------
/assets/project-img-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/portfolio-website-series/HEAD/assets/project-img-4.jpg


--------------------------------------------------------------------------------
/assets/project-img-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/portfolio-website-series/HEAD/assets/project-img-5.jpg


--------------------------------------------------------------------------------
/assets/project-img-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/portfolio-website-series/HEAD/assets/project-img-6.jpg


--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const navBtn = document.querySelector('#navbar-toggler');
 3 | const navDiv = document.querySelector('.navbar-collapse');
 4 | 
 5 | navBtn.addEventListener('click', () => {
 6 |     navDiv.classList.toggle('showNav');
 7 | });
 8 | 
 9 | // stopping animation and transition during window resizing
10 | let resizeTimer;
11 | window.addEventListener('resize', () => {
12 |     document.body.classList.add('resize-animation-stopper');
13 |     clearTimeout(resizeTimer);
14 |     resizeTimer = setTimeout(() => {
15 |         document.body.classList.remove('resize-animation-stopper');
16 |     }, 400);
17 | });


--------------------------------------------------------------------------------
/css/utility.css:
--------------------------------------------------------------------------------
  1 | /* setup and common stylings */
  2 | :root{
  3 |     --poppins: 'Poppins', sans-serif;
  4 |     --sans: 'Open Sans', sans-serif;
  5 |     --green: #72b626;
  6 |     --black: #111;
  7 |     --nero: #252525;
  8 |     --transition: all 0.4s ease;
  9 | }
 10 | *{
 11 |     box-sizing: border-box;
 12 |     padding: 0;
 13 |     margin: 0;
 14 |     font-family: var(--sans);
 15 | }
 16 | body{
 17 |     color: #fff;
 18 |     line-height: 1.5;
 19 |     background: var(--black);
 20 |     overflow-x: hidden;
 21 | }
 22 | a{
 23 |     color: #fff;
 24 |     text-decoration: none;
 25 | }
 26 | img{
 27 |     width: 100%;
 28 |     display: block;
 29 | }
 30 | ul li{
 31 |     list-style-type: none;
 32 | }
 33 | h1, h2, h3, h4, h5, h6, p{
 34 |     padding: 0.6rem 0;
 35 | }
 36 | 
 37 | /* button */
 38 | .btn{
 39 |     border: none;
 40 |     margin: 1rem 0;
 41 |     border-radius: 35px;
 42 |     background: var(--green);
 43 |     font-size: 0.9rem;
 44 |     text-transform: uppercase;
 45 |     padding: 1rem 1.5rem;
 46 |     font-weight: 700;
 47 |     letter-spacing: 2px;
 48 |     display: inline-block;
 49 |     cursor: pointer;
 50 |     transition: var(--transition);
 51 | }
 52 | .btn:hover{
 53 |     opacity: 0.7;
 54 | }
 55 | 
 56 | .text{
 57 |     font-size: 1.05rem;
 58 |     color: #d0d0d0;
 59 |     line-height: 1.7;
 60 | }
 61 | 
 62 | /* title */
 63 | .title{
 64 |     position: relative;
 65 | }
 66 | .title > h2{
 67 |     font-size: 3rem;
 68 |     font-family: var(--poppins);
 69 |     text-align: center;
 70 |     text-transform: capitalize;
 71 |     font-weight: 900;
 72 |     color: var(--nero);
 73 | }
 74 | .title div{
 75 |     position: absolute;
 76 |     top: 50%;
 77 |     left: 50%;
 78 |     text-align: center;
 79 |     width: 100%;
 80 |     transform: translate(-50%, -50%);
 81 | }
 82 | .title div h2{
 83 |     text-transform: capitalize;
 84 |     font-size: 2rem;
 85 |     font-family: var(--poppins);
 86 |     font-weight: 800;
 87 | }
 88 | .container{
 89 |     width: 90vw;
 90 |     margin: 0 auto;
 91 | }
 92 | 
 93 | @media screen and (min-width: 500px){
 94 |     .title > h2{
 95 |         font-size: 6rem;
 96 |     }
 97 |     .title div h2{
 98 |         font-size: 3rem;
 99 |     }
100 | }
101 | 
102 | @media screen and (min-width: 992px){
103 |     .container{
104 |         width: 88vw;
105 |     }
106 | }
107 | @media screen and (min-width: 1200px){
108 |     .container{
109 |         width: 85vw;
110 |     }
111 | }
112 | 
113 | /* animation and transition stopper styling */
114 | .resize-animation-stopper *{
115 |     animation: none !important;
116 |     transition: none !important;
117 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <title>Home</title>
  7 |     <meta name="description" content="">
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  9 |     <!-- utility css file -->
 10 |     <link rel="stylesheet" href="css/utility.css">
 11 |     <!-- style css file -->
 12 |     <link rel = "stylesheet" href = "css/style.css">
 13 |     <!-- fontawesome cdn -->
 14 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
 15 |     <!-- google fonts -->
 16 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 17 |   </head>
 18 |   <body>
 19 |     
 20 |     <!-- navbar section -->
 21 |     <nav class = "navbar">
 22 |       <div class = "container">
 23 |         <div class = "brand-and-toggler">
 24 |           <a href = "index.html" class = "navbar-brand">steve</a>
 25 |           <button type = "button" class = "navbar-toggler" id = "navbar-toggler">
 26 |             <span>
 27 |               <i class = "fas fa-bars"></i>
 28 |             </span>
 29 |           </button>
 30 |         </div>
 31 | 
 32 |         <div class = "navbar-collapse">
 33 |           <ul class = "navbar-nav">
 34 |             <li class = "nav-item nav-active">
 35 |               <a href = "index.html" class = "nav-link">home</a>
 36 |             </li>
 37 |             <li class = "nav-item">
 38 |               <a href = "about.html" class = "nav-link">about</a>
 39 |             </li>
 40 |             <li class = "nav-item">
 41 |               <a href = "resume.html" class = "nav-link">resume</a>
 42 |             </li>
 43 |             <li class = "nav-item">
 44 |               <a href = "services.html" class = "nav-link">services</a>
 45 |             </li>
 46 |             <li class = "nav-item">
 47 |               <a href = "skills.html" class = "nav-link">skills</a>
 48 |             </li>
 49 |             <li class = "nav-item">
 50 |               <a href = "projects.html" class = "nav-link">projects</a>
 51 |             </li>
 52 |             <li class = "nav-item">
 53 |               <a href = "blog.html" class = "nav-link">blog</a>
 54 |             </li>
 55 |             <li class = "nav-item">
 56 |               <a href = "contact.html" class = "nav-link">contact</a>
 57 |             </li>
 58 |           </ul>
 59 |         </div>
 60 |       </div>
 61 |     </nav>
 62 |     <!-- end of navbar section -->
 63 | 
 64 | 
 65 | 
 66 |     <!-- home page -->
 67 |     <section class = "home container">
 68 |       <div class = "row">
 69 |         <div class = "row-left">
 70 |           <h3>hello!</h3>
 71 |           <h1>i'm <span>steve williams</span></h1>
 72 |           <h2>a freelance web designer</h2>
 73 |           <div class = "home-pg-btn">
 74 |             <button type = "button" class = "btn">hire me</button>
 75 |             <button type = "button" class = "btn">my works</button>
 76 |           </div>
 77 |         </div>
 78 | 
 79 |         <div class = "row-right">
 80 |           <div class = "img-border">
 81 |             <div class = "img-container">
 82 |               <img src = "assets/my-photo.jpg" alt = "my photo">
 83 |             </div>
 84 |           </div>
 85 |         </div>
 86 |       </div>
 87 |     </section>
 88 |     <!-- end of home page -->
 89 |     
 90 | 
 91 |     <!-- footer -->
 92 |     <footer class = "footer container">
 93 |       <div class = "row">
 94 |         <div class = "col">
 95 |           <h3 class = "footer-title">about</h3>
 96 |           <p class = "text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium quia, magnam et deleniti similique voluptates nulla iusto temporibus veritatis asperiores consectetur quidem doloremque id possimus!</p>
 97 |           <div class = "social-links">
 98 |             <a href = "#"><i class = "fab fa-twitter"></i></a>
 99 |             <a href = "#"><i class = "fab fa-facebook"></i></a>
100 |             <a href = "#"><i class = "fab fa-instagram"></i></a>
101 |           </div>
102 |         </div>
103 | 
104 |         <div class = "col">
105 |           <h3 class = "footer-title">links</h3>
106 |           <div class = "footer-links">
107 |             <a href = "#" class = "text">
108 |               <i class = "fas fa-long-arrow-alt-right"></i>
109 |               home
110 |             </a>
111 |             <a href = "#" class = "text">
112 |               <i class = "fas fa-long-arrow-alt-right"></i>
113 |               about
114 |             </a>
115 |             <a href = "#" class = "text">
116 |               <i class = "fas fa-long-arrow-alt-right"></i>
117 |               services
118 |             </a>
119 |             <a href = "#" class = "text">
120 |               <i class = "fas fa-long-arrow-alt-right"></i>
121 |               contact
122 |             </a>
123 |           </div>
124 |         </div>
125 | 
126 |         <div class = "col">
127 |           <h3 class = "footer-title">more</h3>
128 |           <div class = "footer-links">
129 |             <a href = "#" class = "text">
130 |               <i class = "fas fa-long-arrow-alt-right"></i>
131 |               web design
132 |             </a>
133 |             <a href = "#" class = "text">
134 |               <i class = "fas fa-long-arrow-alt-right"></i>
135 |               web development
136 |             </a>
137 |             <a href = "#" class = "text">
138 |               <i class = "fas fa-long-arrow-alt-right"></i>
139 |               business strategy
140 |             </a>
141 |             <a href = "#" class = "text">
142 |               <i class = "fas fa-long-arrow-alt-right"></i>
143 |               graphics design
144 |             </a>
145 |           </div>
146 |         </div>
147 | 
148 |         <div class = "col">
149 |           <h3 class = "footer-title">have a question?</h3>
150 |           <div>
151 |             <span>
152 |               <i class = "fas fa-map-marker-alt"></i>
153 |             </span>
154 |             <span class = "text">110 Baker Street St. Mountain View, New York, USA</span>
155 |           </div>
156 | 
157 |           <div>
158 |             <span>
159 |               <i class = "fas fa-phone"></i>
160 |             </span>
161 |             <span class = "text">+ 8232 883 0000</span>
162 |           </div>
163 | 
164 |           <div>
165 |             <span>
166 |               <i class = "fas fa-envelope"></i>
167 |             </span>
168 |             <span class = "text">info@domain.com</span>
169 |           </div>
170 |         </div>
171 |       </div>
172 | 
173 |       <div class = "footer-text">
174 |         <p class = "text">Copyright &copy; 2022 All rights reserved | Awesome Template Design</p>
175 |       </div>
176 |     </footer>
177 |     <!-- end of footer -->
178 | 
179 | 
180 |     <!-- custom js file -->
181 |     <script src="js/script.js"></script>
182 |   </body>
183 | </html>


--------------------------------------------------------------------------------
/services.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <title>Services</title>
  7 |     <meta name="description" content="">
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  9 |     <!-- utility css file -->
 10 |     <link rel="stylesheet" href="css/utility.css">
 11 |     <!-- style css file -->
 12 |     <link rel = "stylesheet" href = "css/style.css">
 13 |     <!-- fontawesome cdn -->
 14 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
 15 |     <!-- google fonts -->
 16 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 17 |   </head>
 18 |   <body>
 19 |     
 20 |     <!-- navbar section -->
 21 |     <nav class = "navbar">
 22 |       <div class = "container">
 23 |         <div class = "brand-and-toggler">
 24 |           <a href = "index.html" class = "navbar-brand">steve</a>
 25 |           <button type = "button" class = "navbar-toggler" id = "navbar-toggler">
 26 |             <span>
 27 |               <i class = "fas fa-bars"></i>
 28 |             </span>
 29 |           </button>
 30 |         </div>
 31 | 
 32 |         <div class = "navbar-collapse">
 33 |           <ul class = "navbar-nav">
 34 |             <li class = "nav-item">
 35 |               <a href = "index.html" class = "nav-link">home</a>
 36 |             </li>
 37 |             <li class = "nav-item">
 38 |               <a href = "about.html" class = "nav-link">about</a>
 39 |             </li>
 40 |             <li class = "nav-item">
 41 |               <a href = "resume.html" class = "nav-link">resume</a>
 42 |             </li>
 43 |             <li class = "nav-item nav-active">
 44 |               <a href = "services.html" class = "nav-link">services</a>
 45 |             </li>
 46 |             <li class = "nav-item">
 47 |               <a href = "skills.html" class = "nav-link">skills</a>
 48 |             </li>
 49 |             <li class = "nav-item">
 50 |               <a href = "projects.html" class = "nav-link">projects</a>
 51 |             </li>
 52 |             <li class = "nav-item">
 53 |               <a href = "blog.html" class = "nav-link">blog</a>
 54 |             </li>
 55 |             <li class = "nav-item">
 56 |               <a href = "contact.html" class = "nav-link">contact</a>
 57 |             </li>
 58 |           </ul>
 59 |         </div>
 60 |       </div>
 61 |     </nav>
 62 |     <!-- end of navbar section -->
 63 | 
 64 |     <!-- services page -->
 65 |     <section class = "services container">
 66 |       <div class = "title">
 67 |         <h2>services</h2>
 68 |         <div>
 69 |           <h2>services</h2>
 70 |         </div>
 71 |       </div>
 72 | 
 73 |       <p class = "text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim voluptatum cumque quaerat consequatur, laboriosam, nemo deleniti perferendis veniam amet labore nobis fugit voluptate sint omnis.</p>
 74 | 
 75 |       <div class = "row">
 76 |         <div class = "item">
 77 |           <span><i class = "fab fa-sketch"></i></span>
 78 |           <h2>web design</h2>
 79 |         </div>
 80 | 
 81 |         <div class = "item">
 82 |           <span><i class = "fas fa-camera-retro"></i></span>
 83 |           <h2>photography</h2>
 84 |         </div>
 85 | 
 86 |         <div class = "item">
 87 |           <span><i class = "fas fa-code"></i></span>
 88 |           <h2>web developer</h2>
 89 |         </div>
 90 | 
 91 |         <div class = "item">
 92 |           <span><i class = "fas fa-flask"></i></span>
 93 |           <h2>branding</h2>
 94 |         </div>
 95 | 
 96 |         <div class = "item">
 97 |           <span><i class = "fab fa-app-store"></i></span>
 98 |           <h2>app developing</h2>
 99 |         </div>
100 | 
101 |         <div class = "item">
102 |           <span><i class = "fas fa-box-open"></i></span>
103 |           <h2>product strategy</h2>
104 |         </div>
105 |       </div>
106 | 
107 |       <button type = "button" class = "btn">view more</button>
108 |     </section>
109 |     <!-- end of services page -->
110 | 
111 |     <!-- footer -->
112 |     <footer class = "footer container">
113 |       <div class = "row">
114 |         <div class = "col">
115 |           <h3 class = "footer-title">about</h3>
116 |           <p class = "text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium quia, magnam et deleniti similique voluptates nulla iusto temporibus veritatis asperiores consectetur quidem doloremque id possimus!</p>
117 |           <div class = "social-links">
118 |             <a href = "#"><i class = "fab fa-twitter"></i></a>
119 |             <a href = "#"><i class = "fab fa-facebook"></i></a>
120 |             <a href = "#"><i class = "fab fa-instagram"></i></a>
121 |           </div>
122 |         </div>
123 | 
124 |         <div class = "col">
125 |           <h3 class = "footer-title">links</h3>
126 |           <div class = "footer-links">
127 |             <a href = "#" class = "text">
128 |               <i class = "fas fa-long-arrow-alt-right"></i>
129 |               home
130 |             </a>
131 |             <a href = "#" class = "text">
132 |               <i class = "fas fa-long-arrow-alt-right"></i>
133 |               about
134 |             </a>
135 |             <a href = "#" class = "text">
136 |               <i class = "fas fa-long-arrow-alt-right"></i>
137 |               services
138 |             </a>
139 |             <a href = "#" class = "text">
140 |               <i class = "fas fa-long-arrow-alt-right"></i>
141 |               contact
142 |             </a>
143 |           </div>
144 |         </div>
145 | 
146 |         <div class = "col">
147 |           <h3 class = "footer-title">more</h3>
148 |           <div class = "footer-links">
149 |             <a href = "#" class = "text">
150 |               <i class = "fas fa-long-arrow-alt-right"></i>
151 |               web design
152 |             </a>
153 |             <a href = "#" class = "text">
154 |               <i class = "fas fa-long-arrow-alt-right"></i>
155 |               web development
156 |             </a>
157 |             <a href = "#" class = "text">
158 |               <i class = "fas fa-long-arrow-alt-right"></i>
159 |               business strategy
160 |             </a>
161 |             <a href = "#" class = "text">
162 |               <i class = "fas fa-long-arrow-alt-right"></i>
163 |               graphics design
164 |             </a>
165 |           </div>
166 |         </div>
167 | 
168 |         <div class = "col">
169 |           <h3 class = "footer-title">have a question?</h3>
170 |           <div>
171 |             <span>
172 |               <i class = "fas fa-map-marker-alt"></i>
173 |             </span>
174 |             <span class = "text">110 Baker Street St. Mountain View, New York, USA</span>
175 |           </div>
176 | 
177 |           <div>
178 |             <span>
179 |               <i class = "fas fa-phone"></i>
180 |             </span>
181 |             <span class = "text">+ 8232 883 0000</span>
182 |           </div>
183 | 
184 |           <div>
185 |             <span>
186 |               <i class = "fas fa-envelope"></i>
187 |             </span>
188 |             <span class = "text">info@domain.com</span>
189 |           </div>
190 |         </div>
191 |       </div>
192 | 
193 |       <div class = "footer-text">
194 |         <p class = "text">Copyright &copy; 2022 All rights reserved | Awesome Template Design</p>
195 |       </div>
196 |     </footer>
197 |     <!-- end of footer -->
198 | 
199 | 
200 |     <!-- custom js file -->
201 |     <script src="js/script.js"></script>
202 |   </body>
203 | </html>


--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <title>About</title>
  7 |     <meta name="description" content="">
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  9 |     <!-- utility css file -->
 10 |     <link rel="stylesheet" href="css/utility.css">
 11 |     <!-- style css file -->
 12 |     <link rel = "stylesheet" href = "css/style.css">
 13 |     <!-- fontawesome cdn -->
 14 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
 15 |     <!-- google fonts -->
 16 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 17 |   </head>
 18 |   <body>
 19 |     
 20 |     <!-- navbar section -->
 21 |     <nav class = "navbar">
 22 |       <div class = "container">
 23 |         <div class = "brand-and-toggler">
 24 |           <a href = "index.html" class = "navbar-brand">steve</a>
 25 |           <button type = "button" class = "navbar-toggler" id = "navbar-toggler">
 26 |             <span>
 27 |               <i class = "fas fa-bars"></i>
 28 |             </span>
 29 |           </button>
 30 |         </div>
 31 | 
 32 |         <div class = "navbar-collapse">
 33 |           <ul class = "navbar-nav">
 34 |             <li class = "nav-item">
 35 |               <a href = "index.html" class = "nav-link">home</a>
 36 |             </li>
 37 |             <li class = "nav-item nav-active">
 38 |               <a href = "about.html" class = "nav-link">about</a>
 39 |             </li>
 40 |             <li class = "nav-item">
 41 |               <a href = "resume.html" class = "nav-link">resume</a>
 42 |             </li>
 43 |             <li class = "nav-item">
 44 |               <a href = "services.html" class = "nav-link">services</a>
 45 |             </li>
 46 |             <li class = "nav-item">
 47 |               <a href = "skills.html" class = "nav-link">skills</a>
 48 |             </li>
 49 |             <li class = "nav-item">
 50 |               <a href = "projects.html" class = "nav-link">projects</a>
 51 |             </li>
 52 |             <li class = "nav-item">
 53 |               <a href = "blog.html" class = "nav-link">blog</a>
 54 |             </li>
 55 |             <li class = "nav-item">
 56 |               <a href = "contact.html" class = "nav-link">contact</a>
 57 |             </li>
 58 |           </ul>
 59 |         </div>
 60 |       </div>
 61 |     </nav>
 62 |     <!-- end of navbar section -->
 63 | 
 64 |     <!-- about page -->
 65 |     <section class = "about container">
 66 |       <div class = "title">
 67 |         <h2>about</h2>
 68 |         <div>
 69 |           <h2>about me</h2>
 70 |         </div>
 71 |       </div>
 72 | 
 73 |       <div class = "row">
 74 |         <div class = "row-left">
 75 |           <img src = "assets/my-photo.jpg" alt = "about photo">
 76 |         </div>
 77 | 
 78 |         <div class = "row-right">
 79 |           <p class = "text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio praesentium numquam alias soluta incidunt? Similique assumenda, voluptatibus saepe quae iusto ratione dicta consectetur nesciunt perspiciatis!</p>
 80 |           <div class = "about-content">
 81 |             <ul>
 82 |               <li class = "text">
 83 |                 <span>Name: </span>
 84 |                 <span>Steve Williams</span>
 85 |               </li>
 86 |               <li class = "text">
 87 |                 <span>Date of Birth: </span>
 88 |                 <span>January 01, 1980</span>
 89 |               </li>
 90 |               <li class = "text">
 91 |                 <span>Address: </span>
 92 |                 <span>New York CA 829 USA</span>
 93 |               </li>
 94 |               <li class = "text">
 95 |                 <span>Email: </span>
 96 |                 <span>stevewill@gmail.com</span>
 97 |               </li>
 98 |               <li class = "text">
 99 |                 <span>Zip code: </span>
100 |                 <span>758844</span>
101 |               </li>
102 |               <li class = "text">
103 |                 <span>Phone: </span>
104 |                 <span>+4854 384 0000</span>
105 |               </li>
106 |             </ul>
107 |           </div>
108 | 
109 |           <h3>120 <span>Project complete</span></h3>
110 |           <button type = "button" class = "btn">download cv</button>
111 |         </div>
112 |       </div>
113 |     </section>
114 |     <!-- end of about page -->
115 | 
116 |     
117 |     
118 | 
119 |     <!-- footer -->
120 |     <footer class = "footer container">
121 |       <div class = "row">
122 |         <div class = "col">
123 |           <h3 class = "footer-title">about</h3>
124 |           <p class = "text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium quia, magnam et deleniti similique voluptates nulla iusto temporibus veritatis asperiores consectetur quidem doloremque id possimus!</p>
125 |           <div class = "social-links">
126 |             <a href = "#"><i class = "fab fa-twitter"></i></a>
127 |             <a href = "#"><i class = "fab fa-facebook"></i></a>
128 |             <a href = "#"><i class = "fab fa-instagram"></i></a>
129 |           </div>
130 |         </div>
131 | 
132 |         <div class = "col">
133 |           <h3 class = "footer-title">links</h3>
134 |           <div class = "footer-links">
135 |             <a href = "#" class = "text">
136 |               <i class = "fas fa-long-arrow-alt-right"></i>
137 |               home
138 |             </a>
139 |             <a href = "#" class = "text">
140 |               <i class = "fas fa-long-arrow-alt-right"></i>
141 |               about
142 |             </a>
143 |             <a href = "#" class = "text">
144 |               <i class = "fas fa-long-arrow-alt-right"></i>
145 |               services
146 |             </a>
147 |             <a href = "#" class = "text">
148 |               <i class = "fas fa-long-arrow-alt-right"></i>
149 |               contact
150 |             </a>
151 |           </div>
152 |         </div>
153 | 
154 |         <div class = "col">
155 |           <h3 class = "footer-title">more</h3>
156 |           <div class = "footer-links">
157 |             <a href = "#" class = "text">
158 |               <i class = "fas fa-long-arrow-alt-right"></i>
159 |               web design
160 |             </a>
161 |             <a href = "#" class = "text">
162 |               <i class = "fas fa-long-arrow-alt-right"></i>
163 |               web development
164 |             </a>
165 |             <a href = "#" class = "text">
166 |               <i class = "fas fa-long-arrow-alt-right"></i>
167 |               business strategy
168 |             </a>
169 |             <a href = "#" class = "text">
170 |               <i class = "fas fa-long-arrow-alt-right"></i>
171 |               graphics design
172 |             </a>
173 |           </div>
174 |         </div>
175 | 
176 |         <div class = "col">
177 |           <h3 class = "footer-title">have a question?</h3>
178 |           <div>
179 |             <span>
180 |               <i class = "fas fa-map-marker-alt"></i>
181 |             </span>
182 |             <span class = "text">110 Baker Street St. Mountain View, New York, USA</span>
183 |           </div>
184 | 
185 |           <div>
186 |             <span>
187 |               <i class = "fas fa-phone"></i>
188 |             </span>
189 |             <span class = "text">+ 8232 883 0000</span>
190 |           </div>
191 | 
192 |           <div>
193 |             <span>
194 |               <i class = "fas fa-envelope"></i>
195 |             </span>
196 |             <span class = "text">info@domain.com</span>
197 |           </div>
198 |         </div>
199 |       </div>
200 | 
201 |       <div class = "footer-text">
202 |         <p class = "text">Copyright &copy; 2022 All rights reserved | Awesome Template Design</p>
203 |       </div>
204 |     </footer>
205 |     <!-- end of footer -->
206 | 
207 | 
208 |     <!-- custom js file -->
209 |     <script src="js/script.js"></script>
210 |   </body>
211 | </html>


--------------------------------------------------------------------------------
/projects.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <title>Projects</title>
  7 |     <meta name="description" content="">
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  9 |     <!-- utility css file -->
 10 |     <link rel="stylesheet" href="css/utility.css">
 11 |     <!-- style css file -->
 12 |     <link rel = "stylesheet" href = "css/style.css">
 13 |     <!-- fontawesome cdn -->
 14 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
 15 |     <!-- google fonts -->
 16 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 17 |   </head>
 18 |   <body>
 19 |     
 20 |     <!-- navbar section -->
 21 |     <nav class = "navbar">
 22 |       <div class = "container">
 23 |         <div class = "brand-and-toggler">
 24 |           <a href = "index.html" class = "navbar-brand">steve</a>
 25 |           <button type = "button" class = "navbar-toggler" id = "navbar-toggler">
 26 |             <span>
 27 |               <i class = "fas fa-bars"></i>
 28 |             </span>
 29 |           </button>
 30 |         </div>
 31 | 
 32 |         <div class = "navbar-collapse">
 33 |           <ul class = "navbar-nav">
 34 |             <li class = "nav-item">
 35 |               <a href = "index.html" class = "nav-link">home</a>
 36 |             </li>
 37 |             <li class = "nav-item">
 38 |               <a href = "about.html" class = "nav-link">about</a>
 39 |             </li>
 40 |             <li class = "nav-item">
 41 |               <a href = "resume.html" class = "nav-link">resume</a>
 42 |             </li>
 43 |             <li class = "nav-item">
 44 |               <a href = "services.html" class = "nav-link">services</a>
 45 |             </li>
 46 |             <li class = "nav-item">
 47 |               <a href = "skills.html" class = "nav-link">skills</a>
 48 |             </li>
 49 |             <li class = "nav-item nav-active">
 50 |               <a href = "projects.html" class = "nav-link">projects</a>
 51 |             </li>
 52 |             <li class = "nav-item">
 53 |               <a href = "blog.html" class = "nav-link">blog</a>
 54 |             </li>
 55 |             <li class = "nav-item">
 56 |               <a href = "contact.html" class = "nav-link">contact</a>
 57 |             </li>
 58 |           </ul>
 59 |         </div>
 60 |       </div>
 61 |     </nav>
 62 |     <!-- end of navbar section -->
 63 | 
 64 | 
 65 |     <!-- projects page -->
 66 |     <section class = "projects container">
 67 |       <div class = "title">
 68 |         <h2>projects</h2>
 69 |         <div>
 70 |           <h2>our projects</h2>
 71 |         </div>
 72 |       </div>
 73 | 
 74 |       <p class = "text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum perspiciatis accusantium eligendi aliquam excepturi dolores obcaecati eveniet inventore aut? Voluptas assumenda obcaecati dignissimos animi incidunt?</p>
 75 | 
 76 |       <div class = "row">
 77 |         <div class = "item">
 78 |           <div class = "item-overlay">
 79 |             <a href = "#">branding & illustration design</a>
 80 |             <h3>web design</h3>
 81 |           </div>
 82 |         </div>
 83 | 
 84 |         <div class = "item">
 85 |           <div class = "item-overlay">
 86 |             <a href = "#">branding & illustration design</a>
 87 |             <h3>web design</h3>
 88 |           </div>
 89 |         </div>
 90 | 
 91 |         <div class = "item">
 92 |           <div class = "item-overlay">
 93 |             <a href = "#">branding & illustration design</a>
 94 |             <h3>web design</h3>
 95 |           </div>
 96 |         </div>
 97 | 
 98 |         <div class = "item">
 99 |           <div class = "item-overlay">
100 |             <a href = "#">branding & illustration design</a>
101 |             <h3>web design</h3>
102 |           </div>
103 |         </div>
104 | 
105 |         <div class = "item">
106 |           <div class = "item-overlay">
107 |             <a href = "#">branding & illustration design</a>
108 |             <h3>web design</h3>
109 |           </div>
110 |         </div>
111 | 
112 |         <div class = "item">
113 |           <div class = "item-overlay">
114 |             <a href = "#">branding & illustration design</a>
115 |             <h3>web design</h3>
116 |           </div>
117 |         </div>
118 |       </div>
119 |     </section>
120 |     <!-- end of projects page -->
121 | 
122 |     
123 |     
124 | 
125 |     <!-- footer -->
126 |     <footer class = "footer container">
127 |       <div class = "row">
128 |         <div class = "col">
129 |           <h3 class = "footer-title">about</h3>
130 |           <p class = "text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium quia, magnam et deleniti similique voluptates nulla iusto temporibus veritatis asperiores consectetur quidem doloremque id possimus!</p>
131 |           <div class = "social-links">
132 |             <a href = "#"><i class = "fab fa-twitter"></i></a>
133 |             <a href = "#"><i class = "fab fa-facebook"></i></a>
134 |             <a href = "#"><i class = "fab fa-instagram"></i></a>
135 |           </div>
136 |         </div>
137 | 
138 |         <div class = "col">
139 |           <h3 class = "footer-title">links</h3>
140 |           <div class = "footer-links">
141 |             <a href = "#" class = "text">
142 |               <i class = "fas fa-long-arrow-alt-right"></i>
143 |               home
144 |             </a>
145 |             <a href = "#" class = "text">
146 |               <i class = "fas fa-long-arrow-alt-right"></i>
147 |               about
148 |             </a>
149 |             <a href = "#" class = "text">
150 |               <i class = "fas fa-long-arrow-alt-right"></i>
151 |               services
152 |             </a>
153 |             <a href = "#" class = "text">
154 |               <i class = "fas fa-long-arrow-alt-right"></i>
155 |               contact
156 |             </a>
157 |           </div>
158 |         </div>
159 | 
160 |         <div class = "col">
161 |           <h3 class = "footer-title">more</h3>
162 |           <div class = "footer-links">
163 |             <a href = "#" class = "text">
164 |               <i class = "fas fa-long-arrow-alt-right"></i>
165 |               web design
166 |             </a>
167 |             <a href = "#" class = "text">
168 |               <i class = "fas fa-long-arrow-alt-right"></i>
169 |               web development
170 |             </a>
171 |             <a href = "#" class = "text">
172 |               <i class = "fas fa-long-arrow-alt-right"></i>
173 |               business strategy
174 |             </a>
175 |             <a href = "#" class = "text">
176 |               <i class = "fas fa-long-arrow-alt-right"></i>
177 |               graphics design
178 |             </a>
179 |           </div>
180 |         </div>
181 | 
182 |         <div class = "col">
183 |           <h3 class = "footer-title">have a question?</h3>
184 |           <div>
185 |             <span>
186 |               <i class = "fas fa-map-marker-alt"></i>
187 |             </span>
188 |             <span class = "text">110 Baker Street St. Mountain View, New York, USA</span>
189 |           </div>
190 | 
191 |           <div>
192 |             <span>
193 |               <i class = "fas fa-phone"></i>
194 |             </span>
195 |             <span class = "text">+ 8232 883 0000</span>
196 |           </div>
197 | 
198 |           <div>
199 |             <span>
200 |               <i class = "fas fa-envelope"></i>
201 |             </span>
202 |             <span class = "text">info@domain.com</span>
203 |           </div>
204 |         </div>
205 |       </div>
206 | 
207 |       <div class = "footer-text">
208 |         <p class = "text">Copyright &copy; 2022 All rights reserved | Awesome Template Design</p>
209 |       </div>
210 |     </footer>
211 |     <!-- end of footer -->
212 | 
213 | 
214 |     <!-- custom js file -->
215 |     <script src="js/script.js"></script>
216 |   </body>
217 | </html>


--------------------------------------------------------------------------------
/contact.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <title>Contact</title>
  7 |     <meta name="description" content="">
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  9 |     <!-- utility css file -->
 10 |     <link rel="stylesheet" href="css/utility.css">
 11 |     <!-- style css file -->
 12 |     <link rel = "stylesheet" href = "css/style.css">
 13 |     <!-- fontawesome cdn -->
 14 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
 15 |     <!-- google fonts -->
 16 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 17 |   </head>
 18 |   <body>
 19 |     
 20 |     <!-- navbar section -->
 21 |     <nav class = "navbar">
 22 |       <div class = "container">
 23 |         <div class = "brand-and-toggler">
 24 |           <a href = "index.html" class = "navbar-brand">steve</a>
 25 |           <button type = "button" class = "navbar-toggler" id = "navbar-toggler">
 26 |             <span>
 27 |               <i class = "fas fa-bars"></i>
 28 |             </span>
 29 |           </button>
 30 |         </div>
 31 | 
 32 |         <div class = "navbar-collapse">
 33 |           <ul class = "navbar-nav">
 34 |             <li class = "nav-item">
 35 |               <a href = "index.html" class = "nav-link">home</a>
 36 |             </li>
 37 |             <li class = "nav-item">
 38 |               <a href = "about.html" class = "nav-link">about</a>
 39 |             </li>
 40 |             <li class = "nav-item">
 41 |               <a href = "resume.html" class = "nav-link">resume</a>
 42 |             </li>
 43 |             <li class = "nav-item">
 44 |               <a href = "services.html" class = "nav-link">services</a>
 45 |             </li>
 46 |             <li class = "nav-item">
 47 |               <a href = "skills.html" class = "nav-link">skills</a>
 48 |             </li>
 49 |             <li class = "nav-item">
 50 |               <a href = "projects.html" class = "nav-link">projects</a>
 51 |             </li>
 52 |             <li class = "nav-item">
 53 |               <a href = "blog.html" class = "nav-link">blog</a>
 54 |             </li>
 55 |             <li class = "nav-item nav-active">
 56 |               <a href = "contact.html" class = "nav-link">contact</a>
 57 |             </li>
 58 |           </ul>
 59 |         </div>
 60 |       </div>
 61 |     </nav>
 62 |     <!-- end of navbar section -->
 63 | 
 64 |     <!-- contact page -->
 65 |     <section class = "contact container">
 66 |       <div class = "title">
 67 |         <h2>contact</h2>
 68 |         <div>
 69 |           <h2>get in touch</h2>
 70 |         </div>
 71 |       </div>
 72 | 
 73 |       <p class = "text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam tempore, et dolores eum voluptas iusto voluptate, dicta iure mollitia atque, exercitationem deserunt laborum libero natus!</p>
 74 | 
 75 |       <div class = "row">
 76 |         <div class = "col-left">
 77 |           <h2>feel free to ask us!</h2>
 78 |           <p class = "text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui soluta mollitia suscipit maxime sunt dolore deleniti quam nihil repellendus perferendis.</p>
 79 | 
 80 |           <div class = "contact-info">
 81 |             <span><i class = "fas fa-envelope-open"></i></span>
 82 |             <h3>
 83 |               <span class = "text">mail me</span> <br>
 84 |               steve@gmail.com
 85 |             </h3>
 86 |           </div>
 87 | 
 88 |           <div class = "contact-info">
 89 |             <span><i class = "fas fa-phone-square-alt"></i></span>
 90 |             <h3>
 91 |               <span class = "text">call me</span> <br>
 92 |               + 2382 383 0002
 93 |             </h3>
 94 |           </div>
 95 | 
 96 |           <div class = "contact-social-links">
 97 |             <a href = "#">
 98 |               <i class = "fab fa-facebook-f"></i>
 99 |             </a>
100 |             <a href = "#">
101 |               <i class = "fab fa-twitter"></i>
102 |             </a>
103 |             <a href = "#">
104 |               <i class = "fab fa-youtube"></i>
105 |             </a>
106 |             <a href = "#">
107 |               <i class = "fab fa-github"></i>
108 |             </a>
109 |           </div>
110 |         </div>
111 | 
112 |         <div class = "col-right">
113 |           <form class = "contact-form">
114 |             <div class = "form-group">
115 |               <input type = "text" placeholder="your name">
116 |               <input type = "email" placeholder="your email">
117 |               <input type = "text" placeholder="your subject">
118 |             </div>
119 |             <textarea rows = "5"></textarea>
120 |             <button type = "submit" class = "btn">send message</button>
121 |           </form>
122 |         </div>
123 |       </div>
124 |     </section>
125 |     <!-- end of contact page -->
126 |     
127 |     
128 | 
129 |     <!-- footer -->
130 |     <footer class = "footer container">
131 |       <div class = "row">
132 |         <div class = "col">
133 |           <h3 class = "footer-title">about</h3>
134 |           <p class = "text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium quia, magnam et deleniti similique voluptates nulla iusto temporibus veritatis asperiores consectetur quidem doloremque id possimus!</p>
135 |           <div class = "social-links">
136 |             <a href = "#"><i class = "fab fa-twitter"></i></a>
137 |             <a href = "#"><i class = "fab fa-facebook"></i></a>
138 |             <a href = "#"><i class = "fab fa-instagram"></i></a>
139 |           </div>
140 |         </div>
141 | 
142 |         <div class = "col">
143 |           <h3 class = "footer-title">links</h3>
144 |           <div class = "footer-links">
145 |             <a href = "#" class = "text">
146 |               <i class = "fas fa-long-arrow-alt-right"></i>
147 |               home
148 |             </a>
149 |             <a href = "#" class = "text">
150 |               <i class = "fas fa-long-arrow-alt-right"></i>
151 |               about
152 |             </a>
153 |             <a href = "#" class = "text">
154 |               <i class = "fas fa-long-arrow-alt-right"></i>
155 |               services
156 |             </a>
157 |             <a href = "#" class = "text">
158 |               <i class = "fas fa-long-arrow-alt-right"></i>
159 |               contact
160 |             </a>
161 |           </div>
162 |         </div>
163 | 
164 |         <div class = "col">
165 |           <h3 class = "footer-title">more</h3>
166 |           <div class = "footer-links">
167 |             <a href = "#" class = "text">
168 |               <i class = "fas fa-long-arrow-alt-right"></i>
169 |               web design
170 |             </a>
171 |             <a href = "#" class = "text">
172 |               <i class = "fas fa-long-arrow-alt-right"></i>
173 |               web development
174 |             </a>
175 |             <a href = "#" class = "text">
176 |               <i class = "fas fa-long-arrow-alt-right"></i>
177 |               business strategy
178 |             </a>
179 |             <a href = "#" class = "text">
180 |               <i class = "fas fa-long-arrow-alt-right"></i>
181 |               graphics design
182 |             </a>
183 |           </div>
184 |         </div>
185 | 
186 |         <div class = "col">
187 |           <h3 class = "footer-title">have a question?</h3>
188 |           <div>
189 |             <span>
190 |               <i class = "fas fa-map-marker-alt"></i>
191 |             </span>
192 |             <span class = "text">110 Baker Street St. Mountain View, New York, USA</span>
193 |           </div>
194 | 
195 |           <div>
196 |             <span>
197 |               <i class = "fas fa-phone"></i>
198 |             </span>
199 |             <span class = "text">+ 8232 883 0000</span>
200 |           </div>
201 | 
202 |           <div>
203 |             <span>
204 |               <i class = "fas fa-envelope"></i>
205 |             </span>
206 |             <span class = "text">info@domain.com</span>
207 |           </div>
208 |         </div>
209 |       </div>
210 | 
211 |       <div class = "footer-text">
212 |         <p class = "text">Copyright &copy; 2022 All rights reserved | Awesome Template Design</p>
213 |       </div>
214 |     </footer>
215 |     <!-- end of footer -->
216 | 
217 | 
218 |     <!-- custom js file -->
219 |     <script src="js/script.js"></script>
220 |   </body>
221 | </html>


--------------------------------------------------------------------------------
/skills.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <title>Skills</title>
  7 |     <meta name="description" content="">
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  9 |     <!-- utility css file -->
 10 |     <link rel="stylesheet" href="css/utility.css">
 11 |     <!-- style css file -->
 12 |     <link rel = "stylesheet" href = "css/style.css">
 13 |     <!-- fontawesome cdn -->
 14 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
 15 |     <!-- google fonts -->
 16 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 17 |   </head>
 18 |   <body>
 19 |     
 20 |     <!-- navbar section -->
 21 |     <nav class = "navbar">
 22 |       <div class = "container">
 23 |         <div class = "brand-and-toggler">
 24 |           <a href = "index.html" class = "navbar-brand">steve</a>
 25 |           <button type = "button" class = "navbar-toggler" id = "navbar-toggler">
 26 |             <span>
 27 |               <i class = "fas fa-bars"></i>
 28 |             </span>
 29 |           </button>
 30 |         </div>
 31 | 
 32 |         <div class = "navbar-collapse">
 33 |           <ul class = "navbar-nav">
 34 |             <li class = "nav-item">
 35 |               <a href = "index.html" class = "nav-link">home</a>
 36 |             </li>
 37 |             <li class = "nav-item">
 38 |               <a href = "about.html" class = "nav-link">about</a>
 39 |             </li>
 40 |             <li class = "nav-item">
 41 |               <a href = "resume.html" class = "nav-link">resume</a>
 42 |             </li>
 43 |             <li class = "nav-item">
 44 |               <a href = "services.html" class = "nav-link">services</a>
 45 |             </li>
 46 |             <li class = "nav-item nav-active">
 47 |               <a href = "skills.html" class = "nav-link">skills</a>
 48 |             </li>
 49 |             <li class = "nav-item">
 50 |               <a href = "projects.html" class = "nav-link">projects</a>
 51 |             </li>
 52 |             <li class = "nav-item">
 53 |               <a href = "blog.html" class = "nav-link">blog</a>
 54 |             </li>
 55 |             <li class = "nav-item">
 56 |               <a href = "contact.html" class = "nav-link">contact</a>
 57 |             </li>
 58 |           </ul>
 59 |         </div>
 60 |       </div>
 61 |     </nav>
 62 |     <!-- end of navbar section -->
 63 | 
 64 | 
 65 | 
 66 |     <!-- skills page -->
 67 |     <section class = "skills container">
 68 |       <div class = "title">
 69 |         <h2>skills</h2>
 70 |         <div>
 71 |           <h2>my skills</h2>
 72 |         </div>
 73 |       </div>
 74 | 
 75 |       <p class = "text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod ab laudantium possimus molestias sapiente, saepe facilis dolore autem repellat, quo iure tempore nisi perspiciatis. Quasi?</p>
 76 | 
 77 |       <div class = "row">
 78 |         <div class = "item">
 79 |           <div class = "item-text">
 80 |             <span>Photoshop</span>
 81 |             <span class = "w-90">90%</span>
 82 |           </div>
 83 |           <div class = "progress">
 84 |             <div class = "progress-bar w-90"></div>
 85 |           </div>
 86 |         </div>
 87 | 
 88 |         <div class = "item">
 89 |           <div class = "item-text">
 90 |             <span>jQuery</span>
 91 |             <span class = "w-75">75%</span>
 92 |           </div>
 93 |           <div class = "progress">
 94 |             <div class = "progress-bar w-75"></div>
 95 |           </div>
 96 |         </div>
 97 | 
 98 |         <div class = "item">
 99 |           <div class = "item-text">
100 |             <span>HTML5</span>
101 |             <span class = "w-85">85%</span>
102 |           </div>
103 |           <div class = "progress">
104 |             <div class = "progress-bar w-85"></div>
105 |           </div>
106 |         </div>
107 | 
108 |         <div class = "item">
109 |           <div class = "item-text">
110 |             <span>CSS3</span>
111 |             <span class = "w-80">80%</span>
112 |           </div>
113 |           <div class = "progress">
114 |             <div class = "progress-bar w-80"></div>
115 |           </div>
116 |         </div>
117 | 
118 |         <div class = "item">
119 |           <div class = "item-text">
120 |             <span>Wordpress</span>
121 |             <span class = "w-60">60%</span>
122 |           </div>
123 |           <div class = "progress">
124 |             <div class = "progress-bar w-60"></div>
125 |           </div>
126 |         </div>
127 | 
128 |         <div class = "item">
129 |           <div class = "item-text">
130 |             <span>PHP</span>
131 |             <span class = "w-68">68%</span>
132 |           </div>
133 |           <div class = "progress">
134 |             <div class = "progress-bar w-68"></div>
135 |           </div>
136 |         </div>
137 |       </div>
138 |     </section>
139 |     <!-- end of skills page -->
140 | 
141 |     
142 | 
143 |     <!-- footer -->
144 |     <footer class = "footer container">
145 |       <div class = "row">
146 |         <div class = "col">
147 |           <h3 class = "footer-title">about</h3>
148 |           <p class = "text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium quia, magnam et deleniti similique voluptates nulla iusto temporibus veritatis asperiores consectetur quidem doloremque id possimus!</p>
149 |           <div class = "social-links">
150 |             <a href = "#"><i class = "fab fa-twitter"></i></a>
151 |             <a href = "#"><i class = "fab fa-facebook"></i></a>
152 |             <a href = "#"><i class = "fab fa-instagram"></i></a>
153 |           </div>
154 |         </div>
155 | 
156 |         <div class = "col">
157 |           <h3 class = "footer-title">links</h3>
158 |           <div class = "footer-links">
159 |             <a href = "#" class = "text">
160 |               <i class = "fas fa-long-arrow-alt-right"></i>
161 |               home
162 |             </a>
163 |             <a href = "#" class = "text">
164 |               <i class = "fas fa-long-arrow-alt-right"></i>
165 |               about
166 |             </a>
167 |             <a href = "#" class = "text">
168 |               <i class = "fas fa-long-arrow-alt-right"></i>
169 |               services
170 |             </a>
171 |             <a href = "#" class = "text">
172 |               <i class = "fas fa-long-arrow-alt-right"></i>
173 |               contact
174 |             </a>
175 |           </div>
176 |         </div>
177 | 
178 |         <div class = "col">
179 |           <h3 class = "footer-title">more</h3>
180 |           <div class = "footer-links">
181 |             <a href = "#" class = "text">
182 |               <i class = "fas fa-long-arrow-alt-right"></i>
183 |               web design
184 |             </a>
185 |             <a href = "#" class = "text">
186 |               <i class = "fas fa-long-arrow-alt-right"></i>
187 |               web development
188 |             </a>
189 |             <a href = "#" class = "text">
190 |               <i class = "fas fa-long-arrow-alt-right"></i>
191 |               business strategy
192 |             </a>
193 |             <a href = "#" class = "text">
194 |               <i class = "fas fa-long-arrow-alt-right"></i>
195 |               graphics design
196 |             </a>
197 |           </div>
198 |         </div>
199 | 
200 |         <div class = "col">
201 |           <h3 class = "footer-title">have a question?</h3>
202 |           <div>
203 |             <span>
204 |               <i class = "fas fa-map-marker-alt"></i>
205 |             </span>
206 |             <span class = "text">110 Baker Street St. Mountain View, New York, USA</span>
207 |           </div>
208 | 
209 |           <div>
210 |             <span>
211 |               <i class = "fas fa-phone"></i>
212 |             </span>
213 |             <span class = "text">+ 8232 883 0000</span>
214 |           </div>
215 | 
216 |           <div>
217 |             <span>
218 |               <i class = "fas fa-envelope"></i>
219 |             </span>
220 |             <span class = "text">info@domain.com</span>
221 |           </div>
222 |         </div>
223 |       </div>
224 | 
225 |       <div class = "footer-text">
226 |         <p class = "text">Copyright &copy; 2022 All rights reserved | Awesome Template Design</p>
227 |       </div>
228 |     </footer>
229 |     <!-- end of footer -->
230 | 
231 | 
232 |     <!-- custom js file -->
233 |     <script src="js/script.js"></script>
234 |   </body>
235 | </html>


--------------------------------------------------------------------------------
/resume.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <title>Resume</title>
  7 |     <meta name="description" content="">
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  9 |     <!-- utility css file -->
 10 |     <link rel="stylesheet" href="css/utility.css">
 11 |     <!-- style css file -->
 12 |     <link rel = "stylesheet" href = "css/style.css">
 13 |     <!-- fontawesome cdn -->
 14 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
 15 |     <!-- google fonts -->
 16 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 17 |   </head>
 18 |   <body>
 19 |     
 20 |     <!-- navbar section -->
 21 |     <nav class = "navbar">
 22 |       <div class = "container">
 23 |         <div class = "brand-and-toggler">
 24 |           <a href = "index.html" class = "navbar-brand">steve</a>
 25 |           <button type = "button" class = "navbar-toggler" id = "navbar-toggler">
 26 |             <span>
 27 |               <i class = "fas fa-bars"></i>
 28 |             </span>
 29 |           </button>
 30 |         </div>
 31 | 
 32 |         <div class = "navbar-collapse">
 33 |           <ul class = "navbar-nav">
 34 |             <li class = "nav-item">
 35 |               <a href = "index.html" class = "nav-link">home</a>
 36 |             </li>
 37 |             <li class = "nav-item">
 38 |               <a href = "about.html" class = "nav-link">about</a>
 39 |             </li>
 40 |             <li class = "nav-item nav-active">
 41 |               <a href = "resume.html" class = "nav-link">resume</a>
 42 |             </li>
 43 |             <li class = "nav-item">
 44 |               <a href = "services.html" class = "nav-link">services</a>
 45 |             </li>
 46 |             <li class = "nav-item">
 47 |               <a href = "skills.html" class = "nav-link">skills</a>
 48 |             </li>
 49 |             <li class = "nav-item">
 50 |               <a href = "projects.html" class = "nav-link">projects</a>
 51 |             </li>
 52 |             <li class = "nav-item">
 53 |               <a href = "blog.html" class = "nav-link">blog</a>
 54 |             </li>
 55 |             <li class = "nav-item">
 56 |               <a href = "contact.html" class = "nav-link">contact</a>
 57 |             </li>
 58 |           </ul>
 59 |         </div>
 60 |       </div>
 61 |     </nav>
 62 |     <!-- end of navbar section -->
 63 | 
 64 |     <!-- resume page -->
 65 |     <section class = "resume container">
 66 |       <div class = "title">
 67 |         <h2>resume</h2>
 68 |         <div>
 69 |           <h2>resume</h2>
 70 |         </div>
 71 |       </div>
 72 | 
 73 |       <p class = "text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat consequatur ipsum dolores? Et consequuntur error, atque aliquid molestias, possimus sunt praesentium dolore, nam tenetur dicta!</p>
 74 | 
 75 |       <div class = "row">
 76 |         <div class = "item">
 77 |           <div class = "icon">
 78 |             <i class = "fas fa-briefcase"></i>
 79 |           </div>
 80 |           <span>2018 - present</span>
 81 |           <h2>web developer - <span>envato</span></h2>
 82 |           <p class = "text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit non porro nisi, vitae accusamus sapiente!</p>
 83 |         </div>
 84 | 
 85 |         <div class = "item">
 86 |           <div class = "icon">
 87 |             <i class = "fas fa-graduation-cap"></i>
 88 |           </div>
 89 |           <span>2015</span>
 90 |           <h2>computer engineering - <span>MIT</span></h2>
 91 |           <p class = "text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit non porro nisi, vitae accusamus sapiente!</p>
 92 |         </div>
 93 | 
 94 |         <div class = "item">
 95 |           <div class = "icon">
 96 |             <i class = "fas fa-briefcase"></i>
 97 |           </div>
 98 |           <span>2013 - 2018</span>
 99 |           <h2>ui/ux designer - <span>codeburst</span></h2>
100 |           <p class = "text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit non porro nisi, vitae accusamus sapiente!</p>
101 |         </div>
102 | 
103 |         <div class = "item">
104 |           <div class = "icon">
105 |             <i class = "fas fa-graduation-cap"></i>
106 |           </div>
107 |           <span>2012</span>
108 |           <h2>masters in IT - <span>mit</span></h2>
109 |           <p class = "text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit non porro nisi, vitae accusamus sapiente!</p>
110 |         </div>
111 | 
112 |         <div class = "item">
113 |           <div class = "icon">
114 |             <i class = "fas fa-briefcase"></i>
115 |           </div>
116 |           <span>2005 - 2013</span>
117 |           <h2>consultant - <span>videohive</span></h2>
118 |           <p class = "text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit non porro nisi, vitae accusamus sapiente!</p>
119 |         </div>
120 | 
121 |         <div class = "item">
122 |           <div class = "icon">
123 |             <i class = "fas fa-graduation-cap"></i>
124 |           </div>
125 |           <span>2009</span>
126 |           <h2>high school - <span>tunis high school</span></h2>
127 |           <p class = "text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit non porro nisi, vitae accusamus sapiente!</p>
128 |         </div>
129 |       </div>
130 |     </section>
131 |     <!-- end of resume page -->
132 |     
133 |     
134 | 
135 |     <!-- footer -->
136 |     <footer class = "footer container">
137 |       <div class = "row">
138 |         <div class = "col">
139 |           <h3 class = "footer-title">about</h3>
140 |           <p class = "text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium quia, magnam et deleniti similique voluptates nulla iusto temporibus veritatis asperiores consectetur quidem doloremque id possimus!</p>
141 |           <div class = "social-links">
142 |             <a href = "#"><i class = "fab fa-twitter"></i></a>
143 |             <a href = "#"><i class = "fab fa-facebook"></i></a>
144 |             <a href = "#"><i class = "fab fa-instagram"></i></a>
145 |           </div>
146 |         </div>
147 | 
148 |         <div class = "col">
149 |           <h3 class = "footer-title">links</h3>
150 |           <div class = "footer-links">
151 |             <a href = "#" class = "text">
152 |               <i class = "fas fa-long-arrow-alt-right"></i>
153 |               home
154 |             </a>
155 |             <a href = "#" class = "text">
156 |               <i class = "fas fa-long-arrow-alt-right"></i>
157 |               about
158 |             </a>
159 |             <a href = "#" class = "text">
160 |               <i class = "fas fa-long-arrow-alt-right"></i>
161 |               services
162 |             </a>
163 |             <a href = "#" class = "text">
164 |               <i class = "fas fa-long-arrow-alt-right"></i>
165 |               contact
166 |             </a>
167 |           </div>
168 |         </div>
169 | 
170 |         <div class = "col">
171 |           <h3 class = "footer-title">more</h3>
172 |           <div class = "footer-links">
173 |             <a href = "#" class = "text">
174 |               <i class = "fas fa-long-arrow-alt-right"></i>
175 |               web design
176 |             </a>
177 |             <a href = "#" class = "text">
178 |               <i class = "fas fa-long-arrow-alt-right"></i>
179 |               web development
180 |             </a>
181 |             <a href = "#" class = "text">
182 |               <i class = "fas fa-long-arrow-alt-right"></i>
183 |               business strategy
184 |             </a>
185 |             <a href = "#" class = "text">
186 |               <i class = "fas fa-long-arrow-alt-right"></i>
187 |               graphics design
188 |             </a>
189 |           </div>
190 |         </div>
191 | 
192 |         <div class = "col">
193 |           <h3 class = "footer-title">have a question?</h3>
194 |           <div>
195 |             <span>
196 |               <i class = "fas fa-map-marker-alt"></i>
197 |             </span>
198 |             <span class = "text">110 Baker Street St. Mountain View, New York, USA</span>
199 |           </div>
200 | 
201 |           <div>
202 |             <span>
203 |               <i class = "fas fa-phone"></i>
204 |             </span>
205 |             <span class = "text">+ 8232 883 0000</span>
206 |           </div>
207 | 
208 |           <div>
209 |             <span>
210 |               <i class = "fas fa-envelope"></i>
211 |             </span>
212 |             <span class = "text">info@domain.com</span>
213 |           </div>
214 |         </div>
215 |       </div>
216 | 
217 |       <div class = "footer-text">
218 |         <p class = "text">Copyright &copy; 2022 All rights reserved | Awesome Template Design</p>
219 |       </div>
220 |     </footer>
221 |     <!-- end of footer -->
222 | 
223 | 
224 |     <!-- custom js file -->
225 |     <script src="js/script.js"></script>
226 |   </body>
227 | </html>


--------------------------------------------------------------------------------
/blog.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <title>Blog</title>
  7 |     <meta name="description" content="">
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  9 |     <!-- utility css file -->
 10 |     <link rel="stylesheet" href="css/utility.css">
 11 |     <!-- style css file -->
 12 |     <link rel = "stylesheet" href = "css/style.css">
 13 |     <!-- fontawesome cdn -->
 14 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
 15 |     <!-- google fonts -->
 16 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 17 |   </head>
 18 |   <body>
 19 |     
 20 |     <!-- navbar section -->
 21 |     <nav class = "navbar">
 22 |       <div class = "container">
 23 |         <div class = "brand-and-toggler">
 24 |           <a href = "index.html" class = "navbar-brand">steve</a>
 25 |           <button type = "button" class = "navbar-toggler" id = "navbar-toggler">
 26 |             <span>
 27 |               <i class = "fas fa-bars"></i>
 28 |             </span>
 29 |           </button>
 30 |         </div>
 31 | 
 32 |         <div class = "navbar-collapse">
 33 |           <ul class = "navbar-nav">
 34 |             <li class = "nav-item">
 35 |               <a href = "index.html" class = "nav-link">home</a>
 36 |             </li>
 37 |             <li class = "nav-item">
 38 |               <a href = "about.html" class = "nav-link">about</a>
 39 |             </li>
 40 |             <li class = "nav-item">
 41 |               <a href = "resume.html" class = "nav-link">resume</a>
 42 |             </li>
 43 |             <li class = "nav-item">
 44 |               <a href = "services.html" class = "nav-link">services</a>
 45 |             </li>
 46 |             <li class = "nav-item">
 47 |               <a href = "skills.html" class = "nav-link">skills</a>
 48 |             </li>
 49 |             <li class = "nav-item">
 50 |               <a href = "projects.html" class = "nav-link">projects</a>
 51 |             </li>
 52 |             <li class = "nav-item nav-active">
 53 |               <a href = "blog.html" class = "nav-link">blog</a>
 54 |             </li>
 55 |             <li class = "nav-item">
 56 |               <a href = "contact.html" class = "nav-link">contact</a>
 57 |             </li>
 58 |           </ul>
 59 |         </div>
 60 |       </div>
 61 |     </nav>
 62 |     <!-- end of navbar section -->
 63 | 
 64 | 
 65 | 
 66 |     <!-- blog page -->
 67 |     <section class = "blog container">
 68 |       <div class = "title">
 69 |         <h2>posts</h2>
 70 |         <div>
 71 |           <h2>my blog</h2>
 72 |         </div>
 73 |       </div>
 74 | 
 75 |       <p class = "text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus architecto fugit veniam ad consectetur, perferendis, voluptatum, commodi cum facere accusantium error alias ex exercitationem. Explicabo?</p>
 76 | 
 77 |       <div class = "row">
 78 |         <div class = "item">
 79 |           <div class = "item-img">
 80 |             <img src = "assets/blog-img-1.jpg" alt = "blog image">
 81 |           </div>
 82 |           <div class = "item-content">
 83 |             <span>june 22, 2022 &nbsp; admin
 84 |               <i class = "fas fa-comment-alt"></i> 3
 85 |             </span>
 86 |             <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aliquam</h2>
 87 |             <p class = "text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, voluptas sint architecto, repellendus quae facilis eaque aperiam fugiat vel, similique necessitatibus tenetur saepe commodi repudiandae perferendis error eligendi omnis iste?</p>
 88 |             <button type = "button" class = "btn">read more</button>
 89 |           </div>
 90 |         </div>
 91 | 
 92 |         <div class = "item">
 93 |           <div class = "item-img">
 94 |             <img src = "assets/blog-img-2.jpg" alt = "blog image">
 95 |           </div>
 96 |           <div class = "item-content">
 97 |             <span>june 22, 2022 &nbsp; admin
 98 |               <i class = "fas fa-comment-alt"></i> 3
 99 |             </span>
100 |             <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aliquam</h2>
101 |             <p class = "text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, voluptas sint architecto, repellendus quae facilis eaque aperiam fugiat vel, similique necessitatibus tenetur saepe commodi repudiandae perferendis error eligendi omnis iste?</p>
102 |             <button type = "button" class = "btn">read more</button>
103 |           </div>
104 |         </div>
105 | 
106 |         <div class = "item">
107 |           <div class = "item-img">
108 |             <img src = "assets/blog-img-3.jpg" alt = "blog image">
109 |           </div>
110 |           <div class = "item-content">
111 |             <span>june 22, 2022 &nbsp; admin
112 |               <i class = "fas fa-comment-alt"></i> 3
113 |             </span>
114 |             <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aliquam</h2>
115 |             <p class = "text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, voluptas sint architecto, repellendus quae facilis eaque aperiam fugiat vel, similique necessitatibus tenetur saepe commodi repudiandae perferendis error eligendi omnis iste?</p>
116 |             <button type = "button" class = "btn">read more</button>
117 |           </div>
118 |         </div>
119 | 
120 |         <div class = "item">
121 |           <div class = "item-img">
122 |             <img src = "assets/blog-img-4.jpg" alt = "blog image">
123 |           </div>
124 |           <div class = "item-content">
125 |             <span>june 22, 2022 &nbsp; admin
126 |               <i class = "fas fa-comment-alt"></i> 3
127 |             </span>
128 |             <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aliquam</h2>
129 |             <p class = "text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, voluptas sint architecto, repellendus quae facilis eaque aperiam fugiat vel, similique necessitatibus tenetur saepe commodi repudiandae perferendis error eligendi omnis iste?</p>
130 |             <button type = "button" class = "btn">read more</button>
131 |           </div>
132 |         </div>
133 | 
134 |         <div class = "item">
135 |           <div class = "item-img">
136 |             <img src = "assets/blog-img-5.jpg" alt = "blog image">
137 |           </div>
138 |           <div class = "item-content">
139 |             <span>june 22, 2022 &nbsp; admin
140 |               <i class = "fas fa-comment-alt"></i> 3
141 |             </span>
142 |             <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aliquam</h2>
143 |             <p class = "text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, voluptas sint architecto, repellendus quae facilis eaque aperiam fugiat vel, similique necessitatibus tenetur saepe commodi repudiandae perferendis error eligendi omnis iste?</p>
144 |             <button type = "button" class = "btn">read more</button>
145 |           </div>
146 |         </div>
147 | 
148 |         <div class = "item">
149 |           <div class = "item-img">
150 |             <img src = "assets/blog-img-6.jpg" alt = "blog image">
151 |           </div>
152 |           <div class = "item-content">
153 |             <span>june 22, 2022 &nbsp; admin
154 |               <i class = "fas fa-comment-alt"></i> 3
155 |             </span>
156 |             <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aliquam</h2>
157 |             <p class = "text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, voluptas sint architecto, repellendus quae facilis eaque aperiam fugiat vel, similique necessitatibus tenetur saepe commodi repudiandae perferendis error eligendi omnis iste?</p>
158 |             <button type = "button" class = "btn">read more</button>
159 |           </div>
160 |         </div>
161 |       </div>
162 | 
163 |       <div class = "pagination">
164 |         <a href = "#" class = "page-link">1</a>
165 |         <a href = "#" class = "page-link">2</a>
166 |         <a href = "#" class = "page-link">3</a>
167 |         <a href = "#" class = "page-link">4</a>
168 |       </div>
169 |     </section>
170 |     <!-- end of blog page -->
171 |     
172 |     
173 | 
174 |     <!-- footer -->
175 |     <footer class = "footer container">
176 |       <div class = "row">
177 |         <div class = "col">
178 |           <h3 class = "footer-title">about</h3>
179 |           <p class = "text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium quia, magnam et deleniti similique voluptates nulla iusto temporibus veritatis asperiores consectetur quidem doloremque id possimus!</p>
180 |           <div class = "social-links">
181 |             <a href = "#"><i class = "fab fa-twitter"></i></a>
182 |             <a href = "#"><i class = "fab fa-facebook"></i></a>
183 |             <a href = "#"><i class = "fab fa-instagram"></i></a>
184 |           </div>
185 |         </div>
186 | 
187 |         <div class = "col">
188 |           <h3 class = "footer-title">links</h3>
189 |           <div class = "footer-links">
190 |             <a href = "#" class = "text">
191 |               <i class = "fas fa-long-arrow-alt-right"></i>
192 |               home
193 |             </a>
194 |             <a href = "#" class = "text">
195 |               <i class = "fas fa-long-arrow-alt-right"></i>
196 |               about
197 |             </a>
198 |             <a href = "#" class = "text">
199 |               <i class = "fas fa-long-arrow-alt-right"></i>
200 |               services
201 |             </a>
202 |             <a href = "#" class = "text">
203 |               <i class = "fas fa-long-arrow-alt-right"></i>
204 |               contact
205 |             </a>
206 |           </div>
207 |         </div>
208 | 
209 |         <div class = "col">
210 |           <h3 class = "footer-title">more</h3>
211 |           <div class = "footer-links">
212 |             <a href = "#" class = "text">
213 |               <i class = "fas fa-long-arrow-alt-right"></i>
214 |               web design
215 |             </a>
216 |             <a href = "#" class = "text">
217 |               <i class = "fas fa-long-arrow-alt-right"></i>
218 |               web development
219 |             </a>
220 |             <a href = "#" class = "text">
221 |               <i class = "fas fa-long-arrow-alt-right"></i>
222 |               business strategy
223 |             </a>
224 |             <a href = "#" class = "text">
225 |               <i class = "fas fa-long-arrow-alt-right"></i>
226 |               graphics design
227 |             </a>
228 |           </div>
229 |         </div>
230 | 
231 |         <div class = "col">
232 |           <h3 class = "footer-title">have a question?</h3>
233 |           <div>
234 |             <span>
235 |               <i class = "fas fa-map-marker-alt"></i>
236 |             </span>
237 |             <span class = "text">110 Baker Street St. Mountain View, New York, USA</span>
238 |           </div>
239 | 
240 |           <div>
241 |             <span>
242 |               <i class = "fas fa-phone"></i>
243 |             </span>
244 |             <span class = "text">+ 8232 883 0000</span>
245 |           </div>
246 | 
247 |           <div>
248 |             <span>
249 |               <i class = "fas fa-envelope"></i>
250 |             </span>
251 |             <span class = "text">info@domain.com</span>
252 |           </div>
253 |         </div>
254 |       </div>
255 | 
256 |       <div class = "footer-text">
257 |         <p class = "text">Copyright &copy; 2022 All rights reserved | Awesome Template Design</p>
258 |       </div>
259 |     </footer>
260 |     <!-- end of footer -->
261 | 
262 | 
263 |     <!-- custom js file -->
264 |     <script src="js/script.js"></script>
265 |   </body>
266 | </html>


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | /* #### navbar #### */
  2 | .navbar{
  3 |     position: fixed;
  4 |     z-index: 999;
  5 |     top: 0;
  6 |     left: 0;
  7 |     background: var(--nero);
  8 |     width: 100%;
  9 | }
 10 | .brand-and-toggler{
 11 |     display: flex;
 12 |     justify-content: space-between;
 13 |     padding: 1rem 0;
 14 | }
 15 | .navbar-brand{
 16 |     text-transform: uppercase;
 17 |     font-family: var(--poppins);
 18 |     font-size: 1.7rem;
 19 |     font-weight: 800;
 20 | }
 21 | .navbar-toggler{
 22 |     border: none;
 23 |     font-size: 1.7rem;
 24 |     background: none;
 25 |     color: #fff;
 26 |     cursor: pointer;
 27 |     outline: none;
 28 |     transition: var(--transition);
 29 | }
 30 | .navbar-toggler:hover{
 31 |     opacity: 0.8;
 32 | }
 33 | .navbar-collapse{
 34 |     height: 0;
 35 |     overflow: hidden;
 36 |     transition: var(--transition);
 37 | }
 38 | .nav-item{
 39 |     text-align: center;
 40 |     padding: 0.6rem;
 41 |     position: relative;
 42 | }
 43 | .nav-item::after{
 44 |     content: "";
 45 |     position: absolute;
 46 |     bottom: 4px;
 47 |     left: 50%;
 48 |     transform: translateX(-50%);
 49 |     border-radius: 5px;
 50 |     width: 0;
 51 |     height: 2px;
 52 |     background: var(--green);
 53 |     transition: var(--transition);
 54 | }
 55 | .nav-item:hover::after{
 56 |     width: 100px;
 57 | }
 58 | .nav-link{
 59 |     text-transform: uppercase;
 60 |     font-size: 1.2rem;
 61 |     transition: var(--transition);
 62 | }
 63 | .nav-link:hover{
 64 |     color: var(--green);
 65 | }
 66 | .nav-active .nav-link{
 67 |     color: var(--green);
 68 | }
 69 | 
 70 | /*** show nav class ***/
 71 | .showNav{
 72 |     height: 385px;
 73 | }
 74 | 
 75 | /* #### HOME PAGE #### */
 76 | .home{
 77 |     padding: 5rem 0 2.5rem 0;
 78 | }
 79 | .home .row > div{
 80 |     height: 60vh;
 81 |     display: flex;
 82 |     flex-direction: column;
 83 |     justify-content: center;
 84 |     align-items: center;
 85 |     border: 2px solid var(--nero);
 86 |     border-radius: 10px;
 87 |     margin: 2rem 0;
 88 | }
 89 | .home .row-left{
 90 |     text-align: center;
 91 | }
 92 | .home .row-left h3{
 93 |     color: var(--green);
 94 |     font-weight: 400;
 95 |     text-transform: uppercase;
 96 | }
 97 | .home .row-left h1{
 98 |     font-size: 2rem;
 99 |     font-family: var(--poppins);
100 |     text-transform: capitalize;
101 |     line-height: 1.2;
102 |     font-weight: 900;
103 | }
104 | .home .row-left h1 span{
105 |     color: var(--green);
106 | }
107 | .home .row-left h2{
108 |     text-transform: uppercase;
109 |     font-family: var(--poppins);
110 |     font-size: 1rem;
111 | }
112 | .home-pg-btn{
113 |     display: flex;
114 |     margin: 1rem 0;
115 | }
116 | .home-pg-btn button{
117 |     padding: 0.8rem;
118 |     margin-right: 0.6rem;
119 |     border: 1px solid #f7f7f7;
120 | }
121 | .home-pg-btn button:first-child{
122 |     border-color: var(--green);
123 | }
124 | .home-pg-btn button:last-child{
125 |     background: transparent;
126 |     color: #fff;
127 | }
128 | .home .img-container{
129 |     position: relative;
130 |     width: 240px;
131 |     height: 240px;
132 |     border-radius: 50%;
133 |     overflow: hidden;
134 | }
135 | .home .img-border{
136 |     background: var(--nero);
137 |     width: 245px;
138 |     height: 245px;
139 |     border-radius: 50%;
140 |     display: flex;
141 |     justify-content: center;
142 |     align-items: center;
143 | }
144 | 
145 | /* #### ABOUT PAGE #### */
146 | .about{
147 |     padding: 5rem 0 2.5rem 0;
148 | }
149 | .about .row-right{
150 |     padding: 3rem 0;
151 | }
152 | .about .row-right p{
153 |     margin: 1rem 0;
154 | }
155 | .about-content{
156 |     margin: 1.5rem 0;
157 | }
158 | .about-content li{
159 |     display: flex;
160 |     margin: 0.6rem 0;
161 | }
162 | .about-content li span{
163 |     flex: 1;
164 | }
165 | .about-content li span:first-child{
166 |     color: #fff;
167 |     font-weight: 600;
168 | }
169 | .about .row-right h3{
170 |     color: var(--green);
171 |     font-size: 1.5rem;
172 | }
173 | .about .row-right h3 span{
174 |     color: #fff;
175 |     font-weight: 400;
176 | }
177 | 
178 | /* #### RESUME PAGE #### */
179 | .resume{
180 |     padding: 5rem 0 2.5rem 0;
181 | }
182 | .resume > .text{
183 |     width: 70%;
184 |     margin: 1.5rem auto;
185 |     text-align: center;
186 | }
187 | .resume .item{
188 |     padding: 0 2.5rem;
189 |     margin: 2rem;
190 |     border-left: 1px solid var(--nero);
191 |     position: relative;
192 | }
193 | .resume .item > span{
194 |     background: var(--nero);
195 |     border-radius: 15px;
196 |     padding: 0.25rem 0.7rem;
197 |     text-transform: uppercase;
198 |     font-size: 0.8rem;
199 |     font-weight: 600;
200 | }
201 | .resume .item h2{
202 |     text-transform: uppercase;
203 |     font-weight: 600;
204 |     font-size: 1.2rem;
205 | }
206 | .resume .item h2 span{
207 |     font-size: 1rem;
208 |     color: #d0d0d0;
209 | }
210 | .resume .item .text{
211 |     font-size: 1rem;
212 |     padding-bottom: 0;
213 | }
214 | .resume .icon{
215 |     position: absolute;
216 |     top: 0;
217 |     width: 50px;
218 |     height: 50px;
219 |     background: var(--green);
220 |     border-radius: 50%;
221 |     display: flex;
222 |     justify-content: center;
223 |     align-items: center;
224 |     left: -25px;
225 | }
226 | 
227 | /* #### SERVICES PAGE #### */
228 | .services{
229 |     padding: 5rem 0 2.5rem 0;
230 | }
231 | .services > .text{
232 |     width: 70%;
233 |     margin: 1.5rem auto;
234 |     text-align: center;
235 | }
236 | .services .item{
237 |     text-align: center;
238 |     padding: 1.5rem 0 4rem 0;
239 |     background: var(--nero);
240 |     margin: 1.5rem 0;
241 |     cursor: pointer;
242 |     transition: var(--transition);
243 | }
244 | .services .item span{
245 |     font-size: 5rem;
246 |     color: var(--green);
247 | }
248 | .services .item h2{
249 |     text-transform: uppercase;
250 |     font-size: 1rem;
251 |     font-weight: 600;
252 |     letter-spacing: 3px;
253 |     position: relative;
254 | }
255 | .services .item h2::after{
256 |     content: "";
257 |     position: absolute;
258 |     bottom: 0;
259 |     background: var(--green);
260 |     width: 50px;
261 |     height: 0.5px;
262 |     left: 50%;
263 |     transform: translateX(-50%);
264 | }
265 | .services .item:hover{
266 |     background: var(--green);
267 | }
268 | .services .item:hover span{
269 |     color: #fff;
270 | }
271 | .services .item:hover h2{
272 |     color: var(--black);
273 | }
274 | .services .item:hover h2::after{
275 |     background: var(--black);
276 | }
277 | .services .btn{
278 |     margin: 2.5rem auto 1rem auto;
279 |     display: block;
280 | }
281 | 
282 | 
283 | /* #### SKILLS PAGE #### */
284 | .skills{
285 |     padding: 5rem 0 2.5rem 0;
286 | }
287 | .skills > .text{
288 |     width: 70%;
289 |     margin: 1.5rem auto;
290 |     text-align: center;
291 | }
292 | .skills .row{
293 |     margin: 1rem 0;
294 | }
295 | .skills .item{
296 |     padding: 0.5rem 0;
297 |     margin: 0.3rem 0;
298 | }
299 | .skills .item-text{
300 |     display: flex;
301 |     justify-content: flex-start;
302 |     font-weight: 600;
303 |     font-size: 1.3rem;
304 |     position: relative;
305 | }
306 | .skills .item-text span:last-child{
307 |     position: absolute;
308 | }
309 | .skills .item-text .w-90{
310 |     margin-left: 85%;
311 | }
312 | .skills .item-text .w-75{
313 |     margin-left: 70%;
314 | }
315 | .skills .item-text .w-85{
316 |     margin-left: 80%;
317 | }
318 | .skills .item-text .w-80{
319 |     margin-left: 75%;
320 | }
321 | .skills .item-text .w-60{
322 |     margin-left: 55%;
323 | }
324 | .skills .item-text .w-68{
325 |     margin-left: 63%;
326 | }
327 | .progress{
328 |     margin: 0.8rem 0;
329 |     border-radius: 10px;
330 |     height: 16px;
331 |     width: 100%;
332 |     background-color: var(--nero);
333 |     overflow: hidden;
334 | }
335 | .progress-bar{
336 |     background: var(--green);
337 |     height: 100%;
338 |     border-top-right-radius: 2px;
339 |     border-bottom-right-radius: 2px;
340 | }
341 | .progress-bar.w-90{
342 |     width: 90%;
343 | }
344 | .progress-bar.w-75{
345 |     width: 75%;
346 | }
347 | .progress-bar.w-85{
348 |     width: 85%;
349 | }
350 | .progress-bar.w-80{
351 |     width: 80%;
352 | }
353 | .progress-bar.w-60{
354 |     width: 60%;
355 | }
356 | .progress-bar.w-68{
357 |     width: 68%;
358 | }
359 | 
360 | /* #### PROJECTS PAGE #### */
361 | .projects{
362 |     padding: 5rem 0 2.5rem 0;
363 | }
364 | .projects > .text{
365 |     width: 70%;
366 |     margin: 1.5rem auto;
367 |     text-align: center;
368 | }
369 | .projects .item{
370 |     margin: 2rem 0;
371 |     height: 320px;
372 |     width: 100%;
373 |     position: relative;
374 | }
375 | .projects .row .item:nth-child(1){
376 |     background: url(../assets/project-img-1.jpg) center/cover no-repeat;
377 | }
378 | .projects .row .item:nth-child(2){
379 |     background: url(../assets/project-img-2.jpg) center/cover no-repeat;
380 | }
381 | .projects .row .item:nth-child(3){
382 |     background: url(../assets/project-img-3.jpg) center/cover no-repeat;
383 | }
384 | .projects .row .item:nth-child(4){
385 |     background: url(../assets/project-img-4.jpg) center/cover no-repeat;
386 | }
387 | .projects .row .item:nth-child(5){
388 |     background: url(../assets/project-img-5.jpg) center/cover no-repeat;
389 | }
390 | .projects .row .item:nth-child(6){
391 |     background: url(../assets/project-img-6.jpg) center/cover no-repeat;
392 | }
393 | .projects .item .item-overlay{
394 |     position: absolute;
395 |     top: 0;
396 |     left: 0;
397 |     width: 100%;
398 |     height: 100%;
399 |     background: var(--green);
400 |     text-align: center;
401 |     display: flex;
402 |     flex-direction: column;
403 |     justify-content: center;
404 |     padding: 1.5rem;
405 |     opacity: 0;
406 |     transition: var(--transition);
407 | }
408 | .projects .item .item-overlay a{
409 |     text-transform: capitalize;
410 |     font-size: 1.25rem;
411 |     font-weight: 400;
412 |     font-family: var(--poppins);
413 | }
414 | .projects .item .item-overlay h3{
415 |     text-transform: uppercase;
416 |     font-size: 1rem;
417 |     letter-spacing: 3px;
418 | }
419 | .projects .item:hover .item-overlay{
420 |     opacity: 0.9;
421 | }
422 | 
423 | /* #### BLOG PAGE #### */
424 | .blog{
425 |     padding: 5rem 0 2.5rem 0;
426 | }
427 | .blog > .text{
428 |     width: 70%;
429 |     margin: 1.5rem auto;
430 |     text-align: center;
431 | }
432 | .blog .item{
433 |     margin: 1rem 0;
434 |     background: var(--nero);
435 |     border-radius: 5px;;
436 |     overflow: hidden;
437 | }
438 | .blog .item .item-img{
439 |     border-bottom: 8px solid var(--green);
440 |     overflow: hidden;
441 | }
442 | .blog .item .item-img img{
443 |     transition: var(--transition);
444 | }
445 | .blog .item .item-img:hover img{
446 |     transform: scale(1.2);
447 | }
448 | .blog .item .item-content{
449 |     padding: 1.5rem;
450 | }
451 | .blog .item .item-content span{
452 |     color: var(--green);
453 |     text-transform: uppercase;
454 | }
455 | .blog .item .item-content span .fas{
456 |     font-size: 0.85rem;
457 | }
458 | .blog .item .item-content h2{
459 |     font-family: var(--poppins);
460 |     font-weight: 400;
461 |     font-size: 1.4rem;
462 | }
463 | .blog .pagination{
464 |     margin: 3rem 0 0.5rem 0;
465 |     display: flex;
466 |     align-items: center;
467 |     justify-content: center;
468 | }
469 | .blog .page-link{
470 |     background: var(--nero);
471 |     display: block;
472 |     width: 50px;
473 |     height: 50px;
474 |     margin: 0 0.6rem;
475 |     display: flex;
476 |     justify-content: center;
477 |     align-items: center;
478 |     border-radius: 50%;
479 |     font-weight: 700;
480 |     transition: var(--transition);
481 | }
482 | 
483 | .blog .page-link:nth-child(2){
484 |     background: var(--green);
485 | }
486 | .blog .page-link:hover{
487 |     background: var(--green);
488 | }
489 | 
490 | /* #### CONTACT PAGE #### */
491 | .contact{
492 |     padding: 5rem 0 2.5rem 0;
493 | }
494 | .contact > .text{
495 |     width: 70%;
496 |     margin: 1.5rem auto;
497 |     text-align: center;
498 | }
499 | .contact .row{
500 |     margin: 1rem 0;
501 | }
502 | .contact .row > div{
503 |     margin: 2.5rem 0;
504 |     padding: 2rem 0;
505 | }
506 | .contact .col-left h2{
507 |     text-transform: uppercase;
508 | }
509 | .contact .contact-info{
510 |     margin: 1rem 0;
511 |     padding: 0.5rem 0;
512 |     display: flex;
513 |     align-items: center;
514 | }
515 | .contact .contact-info > span{
516 |     color: var(--green);
517 |     font-size: 2.6rem;
518 |     margin-right: 1.2rem;
519 | }
520 | .contact .contact-info h3{
521 |     font-size: 1rem;
522 |     font-weight: 400;
523 | }
524 | .contact .contact-info h3 span{
525 |     text-transform: uppercase;
526 |     font-size: 1.05rem;
527 | }
528 | .contact .contact-social-links{
529 |     display: flex;
530 | }
531 | .contact .contact-social-links a{
532 |     display: block;
533 |     width: 50px;
534 |     height: 50px;
535 |     background: var(--nero);
536 |     margin: 0 0.6rem;
537 |     display: flex;
538 |     justify-content: center;
539 |     align-items: center;
540 |     border-radius: 50%;
541 |     transition: var(--transition);
542 | }
543 | .contact .contact-social-links a:first-child{
544 |     margin-left: 0;
545 | }
546 | .contact .contact-social-links a:hover{
547 |     background: var(--green);
548 | }
549 | .contact-form input, .contact-form textarea{
550 |     width: 100%;
551 |     margin: 1rem 0;
552 |     background: var(--nero);
553 |     border: 2px solid transparent;
554 |     font-size: 1rem;
555 |     padding: 0.8rem 1rem;
556 |     border-radius: 25px;
557 |     outline: 0;
558 |     caret-color: #fff;
559 | }
560 | .contact-form input:focus, .contact-form textarea:focus{
561 |     border-color: var(--green);
562 | }
563 | .contact-form input::placeholder,
564 | .contact-form textarea::placeholder{
565 |     text-transform: uppercase;
566 | }
567 | 
568 | 
569 | 
570 | 
571 | /* #### footer #### */
572 | .footer{
573 |     padding: 2.5rem 0;
574 |     border-top: 1.5px solid #252525;
575 | }
576 | .footer-title{
577 |     text-transform: capitalize;
578 |     font-size: 1.3rem;
579 |     font-family: var(--poppins);
580 |     font-weight: 700;
581 | }
582 | .footer .col{
583 |     text-align: center;
584 |     padding: 1rem 0;
585 | }
586 | .footer .col:first-child .text{
587 |     width: 80%;
588 |     margin: 0 auto;
589 | }
590 | .social-links{
591 |     display: flex;
592 |     justify-content: center;
593 | }
594 | .social-links a{
595 |     background: var(--nero);
596 |     width: 50px;
597 |     height: 50px;
598 |     font-size: 1.5rem;
599 |     display: flex;
600 |     justify-content: center;
601 |     align-items: center;
602 |     border-radius: 50%;
603 |     margin: 1.5rem 0.5rem;
604 |     transition: var(--transition);
605 | }
606 | .social-links a:hover{
607 |     background: var(--green);
608 | }
609 | .footer-links a{
610 |     display: block;
611 |     text-transform: capitalize;
612 |     padding: 0.2rem 0;
613 |     transition: var(--transition);
614 | }
615 | .footer-links a .fas{
616 |     display: none;
617 | }
618 | .footer-links a:hover{
619 |     color: #fff;
620 | }
621 | .footer .col:last-child div{
622 |     padding: 0.2rem 0;
623 | }
624 | .footer .col:last-child .fas{
625 |     padding-right: 0.5rem;
626 | }
627 | .footer-text .text{
628 |     text-align: center;
629 | }
630 | 
631 | 
632 | 
633 | 
634 | 
635 | 
636 | /* #### Media Queries #### */
637 | @media screen and (min-width: 500px){
638 |     /* home page */
639 |     .home .row-left h1{
640 |         font-size: 4rem;
641 |     }
642 |     .home .row-left h2{
643 |         font-size: 1.4rem;
644 |     }
645 |     .home-pg-btn button{
646 |         padding: 1rem 1.5rem;
647 |     }
648 |     .home .img-container{
649 |         width: 320px;
650 |         height: 320px;
651 |     }
652 |     .home .img-border{
653 |         width: 325px;
654 |         height: 325px;
655 |     }
656 | }
657 | 
658 | @media screen and (min-width: 768px){
659 |     /* footer */
660 |     .footer .row{
661 |         display: grid;
662 |         grid-template-columns: repeat(2, 1fr);
663 |     }
664 |     /* about page */
665 |     .about .row-left{
666 |         width: 400px;
667 |         height: 400px;
668 |         margin: 1rem auto;
669 |         overflow: hidden;
670 |         border-radius: 50%;
671 |         position: relative;
672 |     }
673 |     /* resume page */
674 |     .resume .row{
675 |         display: grid;
676 |         grid-template-columns: repeat(2, 1fr);
677 |     }
678 |     /* services page */
679 |     .services .row{
680 |         display: flex;
681 |         flex-wrap: wrap;
682 |     }
683 |     .services .item{
684 |         flex: 0 0 calc(50% - 2rem);
685 |         margin: 1rem;
686 |     }
687 |     /* skills page */
688 |     .skills .row{
689 |         display: grid;
690 |         grid-template-columns: repeat(2, 1fr);
691 |         grid-gap: 2rem;
692 |     }
693 |     /* projects page */
694 |     .projects .row{
695 |         display: grid;
696 |         grid-template-columns: repeat(3, 1fr);
697 |         grid-gap: 2rem;
698 |     }
699 |     .projects .row .item{
700 |         margin: 0;
701 |     }
702 |     .projects .row .item:nth-child(2){
703 |         grid-column: 2/4;
704 |     }
705 |     .projects .row .item:nth-child(3){
706 |         grid-column: 1/3;
707 |     }
708 |     .projects .row .item:nth-child(6){
709 |         grid-column: 2/4;
710 |     }
711 | 
712 |     /* blog page */
713 |     .blog .row{
714 |         display: grid;
715 |         grid-template-columns: repeat(2, 1fr);
716 |         grid-gap: 2rem;
717 |     }
718 |     /* contact page */
719 |     .contact-form .form-group{
720 |         display: grid;
721 |         grid-template-columns: repeat(3, 1fr);
722 |         grid-gap: 1rem;
723 |     }
724 |     .contact .row > div{
725 |         margin: 0;
726 |     }
727 | }
728 | 
729 | @media screen and (min-width: 992px){
730 |     /* navbar section */
731 |     .navbar-toggler{
732 |         display: none;
733 |     }
734 |     .navbar .container{
735 |         display: flex;
736 |         flex-wrap: wrap;
737 |         justify-content: space-between;
738 |         align-items: center;
739 |     }
740 |     .navbar-nav{
741 |         display: flex;
742 |         justify-content: flex-end;
743 |     }
744 |     .navbar-collapse{
745 |         height: 100%;
746 |         flex: 1 0 auto;
747 |     }
748 |     .brand-and-toggler{
749 |         flex: 0 0 100px;
750 |     }
751 |     .nav-item{
752 |         margin: 0 0.5rem;
753 |     }
754 |     .nav-link{
755 |         font-size: 1rem;
756 |     }
757 | 
758 |     /* home page */
759 |     .home .row{
760 |         display: grid;
761 |         grid-template-columns: repeat(2, 1fr);
762 |         grid-gap: 2rem;
763 |     }
764 |     .home .row > div{
765 |         height: calc(100vh - 73px);
766 |         border: none;
767 |         margin: 0;
768 |         align-items: flex-start;
769 |     }
770 |     .home .row-left{
771 |         text-align: left;
772 |     }
773 |     .home .img-container{
774 |         width: 100%;
775 |         height: 100%;
776 |         border-radius: unset;
777 |     }
778 |     .home .img-border{
779 |         height: 90%;
780 |         width: 100%;
781 |         transition: var(--transition);
782 |         border-radius: unset;
783 |         background: transparent;
784 |     }
785 |     .home .img-border:hover{
786 |         transform: translateY(-14px);
787 |     }
788 | 
789 |     /* about page */
790 |     .about .row{
791 |         display: grid;
792 |         grid-template-columns: repeat(2, 1fr);
793 |         align-items: center;
794 |         grid-gap: 2rem;
795 |     }
796 |     /* services page */
797 |     .services .item{
798 |         flex: 0 0 calc(33.33% - 2rem);
799 |     }
800 |     /* contact page */
801 |     .contact .row{
802 |         display: grid;
803 |         grid-template-columns: repeat(2, 1fr);
804 |         grid-gap: 2rem;
805 |     }
806 | }
807 | 
808 | @media screen and (min-width: 1200px){
809 |     /* footer */
810 |     .footer .row{
811 |         grid-template-columns: repeat(4, 1fr);
812 |     }
813 |     .footer .row .col{
814 |         text-align: left;
815 |     }
816 |     .footer .col:first-child .text{
817 |         margin: 0;
818 |     }
819 |     .social-links{
820 |         justify-content: flex-start;
821 |     }
822 |     .footer-links a .fas{
823 |         display: inline-block;
824 |     }
825 | 
826 |     /* blog page */
827 |     .blog .row{
828 |         grid-template-columns: repeat(3, 1fr);
829 |     }
830 | }


--------------------------------------------------------------------------------