├── images
    ├── hardy.png
    ├── developer.png
    ├── header_bg.png
    └── icons
    │   ├── js.png
    │   ├── insta.png
    │   ├── mongo.png
    │   ├── nodejs.png
    │   ├── react.png
    │   ├── facebook.png
    │   └── twitter.png
├── styles
    └── portfolio.css
└── index.html


/images/hardy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/HEAD/images/hardy.png


--------------------------------------------------------------------------------
/images/developer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/HEAD/images/developer.png


--------------------------------------------------------------------------------
/images/header_bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/HEAD/images/header_bg.png


--------------------------------------------------------------------------------
/images/icons/js.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/HEAD/images/icons/js.png


--------------------------------------------------------------------------------
/images/icons/insta.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/HEAD/images/icons/insta.png


--------------------------------------------------------------------------------
/images/icons/mongo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/HEAD/images/icons/mongo.png


--------------------------------------------------------------------------------
/images/icons/nodejs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/HEAD/images/icons/nodejs.png


--------------------------------------------------------------------------------
/images/icons/react.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/HEAD/images/icons/react.png


--------------------------------------------------------------------------------
/images/icons/facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/HEAD/images/icons/facebook.png


--------------------------------------------------------------------------------
/images/icons/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/HEAD/images/icons/twitter.png


--------------------------------------------------------------------------------
/styles/portfolio.css:
--------------------------------------------------------------------------------
  1 | /* common shared styles*/
  2 | body {
  3 |     font-family: 'Lato', sans-serif;
  4 |     font-family: 'Open Sans', sans-serif;
  5 | }
  6 | 
  7 | .text-primary {
  8 |     color: #FD6E0A;
  9 | }
 10 | 
 11 | .btn-primary {
 12 |     border-radius: 5px;
 13 |     background: #FD6E0A;
 14 |     border: 0;
 15 |     color: white;
 16 |     font-size: 20px;
 17 |     font-weight: 700;
 18 |     padding: 15px 35px;
 19 | }
 20 | 
 21 | .section-title {
 22 |     color: #181818;
 23 |     text-align: center;
 24 |     font-size: 35px;
 25 |     font-weight: 700;
 26 | }
 27 | 
 28 | .section-description {
 29 |     color: #757575;
 30 |     text-align: center;
 31 |     font-size: 18px;
 32 | }
 33 | 
 34 | /* nav related styles */
 35 | nav {
 36 |     display: flex;
 37 |     justify-content: space-between;
 38 |     align-items: center;
 39 |     margin: 0 200px;
 40 | }
 41 | 
 42 | .nav-title {
 43 |     color: #181818;
 44 |     font-size: 45px;
 45 |     font-weight: 800;
 46 | }
 47 | 
 48 | nav>ul {
 49 |     display: flex;
 50 |     align-items: center;
 51 | }
 52 | 
 53 | nav li {
 54 |     list-style: none;
 55 |     margin-right: 50px;
 56 | }
 57 | 
 58 | nav a {
 59 |     text-decoration: none;
 60 |     color: #474747;
 61 | }
 62 | 
 63 | /* header related styles */
 64 | .header {
 65 |     background-color: #FFF8F3;
 66 |     background-image: url('../images/header_bg.png'), url('../images/developer.png');
 67 |     background-repeat: no-repeat;
 68 |     background-position: bottom right, top left;
 69 | }
 70 | 
 71 | .banner {
 72 |     padding: 30px 30px 0px 150px;
 73 |     display: flex;
 74 |     align-items: center;
 75 |     justify-content: space-between;
 76 | }
 77 | 
 78 | .banner-content {
 79 |     max-width: 500px;
 80 | }
 81 | 
 82 | .banner .profile-pic {
 83 |     width: 500px;
 84 | }
 85 | 
 86 | .banner-greeting {
 87 |     font-size: 45px;
 88 |     color: #474747;
 89 |     margin-bottom: 0;
 90 | }
 91 | 
 92 | .banner-title {
 93 |     font-size: 85px;
 94 |     font-weight: 700;
 95 |     margin-top: 5px;
 96 |     margin-bottom: 20px;
 97 | }
 98 | 
 99 | /* main section styles */
100 | main {
101 |     max-width: 1140px;
102 |     margin: 0 auto;
103 | }
104 | 
105 | main section {
106 |     margin-top: 130px;
107 | }
108 | 
109 | /* about section styles */
110 | .about {
111 |     padding: 130px;
112 |     border-radius: 10px;
113 |     background: #FFF8F3;
114 |     margin: 130px 0;
115 | }
116 | 
117 | .about-info-container {
118 |     display: flex;
119 |     justify-content: space-around;
120 | }
121 | 
122 | .about-info {
123 |     text-align: center;
124 | }
125 | 
126 | /* skills related styles */
127 | 
128 | #what-i-do-description {
129 |     padding: 30px 150px;
130 | }
131 | 
132 | .skills-container {
133 |     display: flex;
134 |     gap: 24px;
135 | }
136 | 
137 | .skill {
138 |     padding: 30px;
139 | 
140 |     border-radius: 5px;
141 |     background: #FFF;
142 |     box-shadow: 0px 6px 50px 0px rgba(0, 0, 0, 0.06);
143 | }
144 | 
145 | .skill-description {
146 |     color: #757575;
147 | }
148 | 
149 | /* Resume Section styles */
150 | .resume-column-title {
151 |     color: #474747;
152 |     font-size: 30px;
153 |     font-weight: 700;
154 | }
155 | 
156 | .resume-container {
157 |     display: flex;
158 |     gap: 50px;
159 | }
160 | 
161 | .resume-item-title {
162 |     color: #474747;
163 |     font-size: 25px;
164 |     font-weight: 700;
165 |     margin-bottom: 10px;
166 | }
167 | 
168 | .resume-item-institute {
169 |     margin-bottom: 20px;
170 |     margin-top: 0px;
171 | }
172 | 
173 | .resume-item-institute,
174 | .resume-item-description {
175 |     color: #757575;
176 | }
177 | 
178 | .resume-container hr {
179 |     margin: 30px;
180 | }
181 | 
182 | .download-cv {
183 |     text-align: center;
184 |     margin-top: 50px;
185 | }
186 | 
187 | /* footer style */
188 | footer {
189 |     display: flex;
190 |     gap: 100px;
191 |     background: #FFF8F3;
192 |     margin-top: 100px;
193 |     padding: 130px 200px;
194 | }
195 | 
196 | .footer-column {
197 |     width: 50%;
198 | }
199 | 
200 | .social-links a {
201 |     margin-right: 25px;
202 | }
203 | 
204 | .contact input[type="text"],
205 | .contact input[type="email"],
206 | textarea {
207 |     display: block;
208 |     margin-bottom: 25px;
209 |     padding: 18px 35px;
210 |     color: #757575;
211 |     border-radius: 5px;
212 |     background: #FFF;
213 |     border: 0;
214 |     width: 100%;
215 | }
216 | 
217 | /* responsive styles */
218 | 
219 | /* mobile devices */
220 | .hide {
221 |     display: none;
222 | }
223 | 
224 | @media screen and (max-width:576px) {
225 |     .header{
226 |         background-image: none;
227 |     }
228 |     
229 |     nav,
230 |     nav > ul,
231 |     .banner,
232 |     .skills-container,
233 |     .resume-container,
234 |     .about-info-container,
235 |     footer {
236 |         flex-direction: column;
237 |     }
238 | 
239 |     nav > ul {
240 |         gap: 10px;
241 |     }
242 | 
243 |     .banner .profile-pic{
244 |         width: 100%;
245 |     }
246 | 
247 |     .banner,
248 |     #what-i-do-description {
249 |         padding: 20px;
250 |     }
251 | 
252 |     footer, .about {
253 |         padding: 10px;
254 |     }
255 | 
256 |     .btn-primary{
257 |         margin-bottom: 15px;
258 |     }
259 | 
260 |     .footer-column {
261 |         width: 100%;
262 |     }
263 | 
264 |     .contact input[type="text"],
265 |     .contact input[type="email"],
266 |     textarea {
267 |         width: 80%;
268 |     }
269 | }
270 | 
271 | @media screen and (min-width:576px) and (max-width:960px) {
272 |     footer {
273 |         padding: 30px;
274 |     }
275 |     .btn-primary{
276 |         margin-bottom: 15px;
277 |     }
278 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Web Developer Portfolio</title>
  8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
  9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 10 |     <link
 11 |         href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&family=Open+Sans:wght@400;700;800&display=swap"
 12 |         rel="stylesheet">
 13 | 
 14 |     <link rel="stylesheet" href="styles/portfolio.css">
 15 |     <script src="https://kit.fontawesome.com/f056a62cc9.js" crossorigin="anonymous"></script>
 16 | </head>
 17 | 
 18 | <body>
 19 |     <header class="header">
 20 |         <nav>
 21 |             <h3 class="nav-title">Ma<span class="text-primary">r</span>y</h3>
 22 |             <ul>
 23 |                 <li><a href="">Portfolio</a></li>
 24 |                 <li><a href="">Blog</a></li>
 25 |                 <li><button class="btn-primary">Hire Me</button></li>
 26 |             </ul>
 27 |         </nav>
 28 |         <div class="banner">
 29 |             <div class="banner-content">
 30 |                 <h3 class="banner-greeting">Hi, I am</h3>
 31 |                 <h1 class="banner-title">Mary Hardy</h1>
 32 |                 <p class="banner-description">Shot what able cold new see hold.Friendly as an betrayed formerly he.
 33 |                     Morning because as to society behaved moments.</p>
 34 |                 <button class="btn-primary"><i class="fa-solid fa-download"></i> Download CV</button>
 35 |                 <button class="btn-primary"><i class="fa-solid fa-phone"></i> Contact</button>
 36 |             </div>
 37 |             <img class="profile-pic" src="images/hardy.png" alt="">
 38 |         </div>
 39 |     </header>
 40 |     <main>
 41 |         <section class="about">
 42 |             <h3 class="section-title">About Me</h3>
 43 |             <p class="section-description">
 44 |                 I, m a designer & developer with a passion for web design. I enjoy developing simple, clean and slick
 45 |                 websites that provide real value to the end user. Thousands of clients have procured exceptional resulfs
 46 |                 while working with me. Delivering work within time and budget which meets clients requirements in our
 47 |                 mata.
 48 |             </p>
 49 |             <div class="about-info-container">
 50 |                 <!-- .about-info*4>h4.info-title+p.info-description -->
 51 |                 <div class="about-info">
 52 |                     <h4 class="info-title">Name:</h4>
 53 |                     <p class="info-description">Mary Hardy </p>
 54 |                 </div>
 55 |                 <div class="about-info">
 56 |                     <h4 class="info-title">Email:</h4>
 57 |                     <p class="info-description">info@gmail.com</p>
 58 |                 </div>
 59 |                 <div class="about-info">
 60 |                     <h4 class="info-title">Date of birth:</h4>
 61 |                     <p class="info-description">11 November 1987</p>
 62 |                 </div>
 63 |                 <div class="about-info">
 64 |                     <h4 class="info-title">From:</h4>
 65 |                     <p class="info-description">Los Angeles, USA</p>
 66 |                 </div>
 67 |             </div>
 68 |         </section>
 69 | 
 70 |         <!-- what i do section start -->
 71 |         <section>
 72 |             <h3 class="section-title">What I do</h3>
 73 |             <p id="what-i-do-description" class="section-description">
 74 |                 I have more than 10 years experience building software for clients all over the world. Below is a quick
 75 |                 overview of my main technical skill sets and technologies i use. Want to find out more about my
 76 |                 experience? Check out my online resume and project portfolio.
 77 |             </p>
 78 |             <div class="skills-container">
 79 |                 <!-- .skill*4>img+h3.skill-title+p.skill-description -->
 80 |                 <div class="skill">
 81 |                     <img src="images/icons/js.png" alt="">
 82 |                     <h3 class="skill-title">Vanilla JavaScript</h3>
 83 |                     <p class="skill-description">List skill/technologies here. You can change the icon above to any of
 84 |                         the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.</p>
 85 |                 </div>
 86 |                 <div class="skill">
 87 |                     <img src="images/icons/react.png" alt="">
 88 |                     <h3 class="skill-title">React</h3>
 89 |                     <p class="skill-description">List skill/technologies here. You can change the icon above to any of
 90 |                         the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.</p>
 91 |                 </div>
 92 |                 <div class="skill">
 93 |                     <img src="images/icons/nodejs.png" alt="">
 94 |                     <h3 class="skill-title">Node.js</h3>
 95 |                     <p class="skill-description">List skill/technologies here. You can change the icon above to any of
 96 |                         the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.</p>
 97 |                 </div>
 98 |                 <div class="skill">
 99 |                     <img src="images/icons/mongo.png" alt="">
100 |                     <h3 class="skill-title">MongoDB</h3>
101 |                     <p class="skill-description">List skill/technologies here. You can change the icon above to any of
102 |                         the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.</p>
103 |                 </div>
104 |             </div>
105 |         </section>
106 |         <!-- Resume Section -->
107 |         <section>
108 |             <h3 class="section-title">A summary of My Resume</h3>
109 | 
110 |             <div class="resume-container">
111 |                 <!-- .resume-column*2>h3.resume-column-title -->
112 |                 <div class="resume-column">
113 |                     <h3 class="resume-column-title">My Education</h3>
114 | 
115 |                     <div class="resume-item">
116 |                         <h2 class="resume-item-title">Master in Computer Engineering</h2>
117 |                         <h3 class="resume-item-institute">Harvard University / 2015 - 2017</h3>
118 |                         <p class="resume-item-description">List skill/technologies here. You can change the icon above
119 |                             to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.
120 |                         </p>
121 |                     </div>
122 |                     <hr>
123 |                     <div class="resume-item">
124 |                         <h2 class="resume-item-title">Master in Computer Engineering</h2>
125 |                         <h3 class="resume-item-institute">Harvard University / 2015 - 2017</h3>
126 |                         <p class="resume-item-description">List skill/technologies here. You can change the icon above
127 |                             to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.
128 |                         </p>
129 |                     </div>
130 |                     <hr>
131 |                     <div class="resume-item">
132 |                         <h2 class="resume-item-title">Master in Computer Engineering</h2>
133 |                         <h3 class="resume-item-institute">Harvard University / 2015 - 2017</h3>
134 |                         <p class="resume-item-description">List skill/technologies here. You can change the icon above
135 |                             to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.
136 |                         </p>
137 |                     </div>
138 |                     
139 | 
140 |                 </div>
141 |                 <div class="resume-column">
142 |                     <h3 class="resume-column-title">My Experience</h3>
143 |                     <div class="resume-item">
144 |                         <h2 class="resume-item-title">Master in Computer Engineering</h2>
145 |                         <h3 class="resume-item-institute">Harvard University / 2015 - 2017</h3>
146 |                         <p class="resume-item-description">List skill/technologies here. You can change the icon above
147 |                             to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.
148 |                         </p>
149 |                     </div>
150 |                     <hr>
151 |                     <div class="resume-item">
152 |                         <h2 class="resume-item-title">Master in Computer Engineering</h2>
153 |                         <h3 class="resume-item-institute">Harvard University / 2015 - 2017</h3>
154 |                         <p class="resume-item-description">List skill/technologies here. You can change the icon above
155 |                             to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.
156 |                         </p>
157 |                     </div>
158 |                     <hr>
159 |                     <div class="resume-item">
160 |                         <h2 class="resume-item-title">Master in Computer Engineering</h2>
161 |                         <h3 class="resume-item-institute">Harvard University / 2015 - 2017</h3>
162 |                         <p class="resume-item-description">List skill/technologies here. You can change the icon above
163 |                             to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.
164 |                         </p>
165 |                     </div>
166 |                 </div>
167 |             </div>
168 |             <div class="download-cv">
169 |                 <button class="btn-primary"><i class="fa-solid fa-download"></i> Download CV</button>
170 |             </div>
171 |         </section>
172 |     </main>
173 |     <!-- footer  -->
174 |     <footer>
175 |         <div class="footer-column">
176 |             <h3 class="section-title">Lets Connect</h3>
177 |             <p class="section-description">
178 |                 Please fill out the form on this section to contact with me or call between 9:00 A.M and 8.00 P.M ET, Monday through Friday.
179 |             </p>
180 |             <div class="social-links">
181 |                 <a href=""><img src="images/icons/facebook.png" alt=""></a>
182 |                 <a href=""><img src="images/icons/twitter.png" alt=""></a>
183 |                 <a href=""><img src="images/icons/insta.png" alt=""></a>
184 |             </div>
185 |         </div>
186 |         <div class="footer-column">
187 |             <h3 class="section-title">Let’s Message me. Right Now.</h3>
188 |             <form class="contact" action="">
189 |                 <input type="text" placeholder="Your Name">
190 |                 <input type="email" name="" placeholder="Your Email" id="">
191 |                 <textarea name="" placeholder="Message" id="" cols="30" rows="10"></textarea>
192 |                 <input class="btn-primary" type="submit" value="Submit">
193 |             </form>
194 |         </div>
195 |     </footer>
196 | </body>
197 | 
198 | </html>
199 | 
200 | 


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