├── README.md
├── css
    ├── m.png
    └── style.css
├── ico
    ├── android-chrome-192x192.png
    ├── android-chrome-512x512.png
    ├── apple-touch-icon.png
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    └── favicon.ico
├── images
    ├── 1.PNG
    ├── 2.PNG
    ├── 3.PNG
    ├── 4.PNG
    ├── bg.gif
    ├── p1.png
    └── p2.jpg
└── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | # Portofolio-Website-v2
 2 | A Simple Html & Css Portfolio page
 3 | <br>
 4 | <br>
 5 | <img src="/images/1.PNG">
 6 | <br>
 7 | <br>
 8 | <br>
 9 | <br>
10 | <img src="/images/2.PNG">
11 | <br>
12 | <br>
13 | <br>
14 | <br><img src="/images/3.PNG">
15 | <br>
16 | <br>
17 | <br>
18 | <br><img src="/images/4.PNG">
19 | 


--------------------------------------------------------------------------------
/css/m.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coder2Mo/Portofolio-Website-v2/ac1b2b300eb5fcd4b5e37bc8fe8e4ddf8a11aa6e/css/m.png


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,800&display=swap');
  2 | 
  3 | * {
  4 |     padding: 0;
  5 |     margin: 0;
  6 |     box-sizing: border-box;
  7 |     scroll-behavior: smooth;
  8 |     font-family: Poppins, sans-serif;
  9 | }
 10 | 
 11 | header {
 12 |     background-color: #f0f0f0;
 13 |     position: fixed;
 14 |     display: flex;
 15 |     justify-content: space-between;
 16 |     align-items: center;
 17 |     z-index: 1000;
 18 |     width: 100%;
 19 |     padding: 10px 150px;
 20 | }
 21 | 
 22 | .logo {
 23 |     text-decoration: none;
 24 |     color: #3a6cf4;
 25 |     font-size: 1.8em;
 26 |     font-weight: 800;
 27 |     text-transform: uppercase;
 28 | }
 29 | 
 30 | .navigation a {
 31 |     text-decoration: none;
 32 |     color: #3a6cf4;
 33 |     font-size: 1.1em;
 34 |     font-weight: 300;
 35 |     padding-left: 30px;
 36 | }
 37 | 
 38 | .navigation a:hover {
 39 |     color: purple;
 40 | }
 41 | 
 42 | .fb,
 43 | .tw,
 44 | .ig,
 45 | .gh {
 46 |     font-size: 1.7em;
 47 |     padding-right: 30px;
 48 |     color: #fff;
 49 | }
 50 | 
 51 | .fb:hover {
 52 |     color: #0041f5;
 53 | }
 54 | 
 55 | .tw:hover {
 56 |     color: #2495b1;
 57 | }
 58 | 
 59 | .ig:hover {
 60 |     color: #db2d7b;
 61 | }
 62 | 
 63 | .gh:hover {
 64 |     color: #b37708;
 65 | }
 66 | 
 67 | section {
 68 |     padding: 100px 200px;
 69 | }
 70 | 
 71 | .main {
 72 |     width: 100%;
 73 |     min-height: 100vh;
 74 |     display: flex;
 75 |     align-items: center;
 76 |     background-image:url("../images/bg.gif");
 77 |     background-repeat: no-repeat;
 78 |     background-size: cover;
 79 |     background-attachment: fixed;
 80 | }
 81 | 
 82 | .main h2 {
 83 |     color: #fff;
 84 |     font-weight: 500;
 85 |     font-size: 1.4em;
 86 | }
 87 | 
 88 | .main h2 span {
 89 |     color: #4e9eff;
 90 |     font-size: 2em;
 91 |     font-weight: 600;
 92 |     display: inline-block;
 93 |     margin-top: 10px;
 94 |     position: relative;
 95 | }
 96 | 
 97 | .main h3 {
 98 |     color: #fff;
 99 |     font-size: 2em;
100 |     font-weight: 700;
101 |     letter-spacing: 1px;
102 |     margin-top: 10px;
103 |     margin-bottom: 30px;
104 | }
105 | 
106 | .main-btn {
107 |     text-decoration: none;
108 |     color: #fff;
109 |     background-color: #3a6cf4;
110 |     font-size: 1.2em;
111 |     font-weight: 600;
112 |     display: inline-block;
113 |     padding: 0.9375em 2.1875em;
114 |     letter-spacing: 1px;
115 |     border-radius: 15px;
116 |     margin-bottom: 40px;
117 |     transition: 0.7s ease;
118 | }
119 | 
120 | .main-btn:hover {
121 |     background-color: #0a49f6;
122 |     transform: scale(1.1);
123 | }
124 | 
125 | .title {
126 |     display: flex;
127 |     justify-content: center;
128 |     color: #3a6cf4;
129 |     font-size: 2.2em;
130 |     font-weight: 800;
131 |     margin-bottom: 30px;
132 | }
133 | 
134 | .content {
135 |     display: flex;
136 |     justify-content: center;
137 |     flex-direction: row;
138 |     flex-wrap: nowrap;
139 | }
140 | 
141 | .card {
142 |     background-color: #fff;
143 |     width: 21.25em;
144 |     box-shadow: 0 5px 25px rgba(1 1 1 /50%);
145 |     border-radius: 10px;
146 |     padding: 25px;
147 |     margin: 15px;
148 |     transition: 0.7s ease;
149 | }
150 | 
151 | .card:hover {
152 |     transform: scale(1.1);
153 | }
154 | 
155 | .icon {
156 |     color: #3a6cf4e8;
157 |     font-size: 8em;
158 |     text-align: center;
159 | }
160 | 
161 | .info h3 {
162 |     color: #3a6cf4;
163 |     font-size: 1.2em;
164 |     font-weight: 700;
165 |     margin: 10px;
166 | }
167 | 
168 | .info {
169 |     text-align: center;
170 | }
171 | 
172 | .info a {
173 |     text-decoration: none;
174 |     color: #3a6cf4;
175 | }
176 | 
177 | .info a:hover {
178 |     color: #0a49f6;
179 | }
180 | 
181 | .projects {
182 |     background-color: #000016;
183 | }
184 | 
185 | .project .content {
186 |     margin-top: 30px;
187 | }
188 | 
189 | .project-card {
190 |     background-color: #fff;
191 |     border: 1px solid #fff;
192 |     min-height: 14em;
193 |     width: 23em;
194 |     overflow: hidden;
195 |     border-radius: 10px;
196 |     margin: 20px;
197 |     transition: 0.7s ease;
198 | }
199 | 
200 | .project-image img {
201 |     width: 100%;
202 | }
203 | 
204 | .project-card:hover {
205 |     transform: scale(1.1);
206 | }
207 | 
208 | .project-card:hover .project-image {
209 |     opacity: 0.8;
210 | }
211 | 
212 | .project-info {
213 |     padding: 1em;
214 | }
215 | 
216 | .project-catogrey {
217 |     font-size: 0.8em;
218 |     color: rgb(1 1 1 /50%);
219 | }
220 | 
221 | .project-title {
222 |     display: flex;
223 |     justify-content: space-between;
224 |     text-transform: uppercase;
225 |     margin-top: 10px;
226 | }
227 | 
228 | .more-details {
229 |     text-decoration: none;
230 |     color: #3a6cf4;
231 | }
232 | 
233 | .more-details:hover {
234 |     color: purple;
235 | }
236 | 
237 | .up {
238 |     text-align: center;
239 |     font-size: 2.30em;
240 | }
241 | 
242 | .up .btn-up {
243 |     text-decoration: none;
244 |     color: #3a6cf4;
245 |     font-weight: 600;
246 |     display: flex;
247 |     transition: 0.7s ease;
248 |     position: fixed;
249 |     right: 10px;
250 |     bottom: 5px;
251 |     cursor: pointer;
252 | }
253 | 
254 | .btn-up:hover {
255 |     color: #0a49f6;
256 |     transform: scale(1.1);
257 | }
258 | 
259 | .footer {
260 |     background-color: #000016;
261 |     color: #fff;
262 |     padding: 2em;
263 |     display: flex;
264 |     justify-content: space-between;
265 | }
266 | 
267 | .footer-title {
268 |     font-size: 1.3em;
269 |     font-weight: 600;
270 | }
271 | 
272 | .footer-title span {
273 |     color: #3a6cf4;
274 | }
275 | 
276 | .footer-title span:hover {
277 |     color: #0a49f6;
278 | }
279 | 
280 | .footer .social-icons a {
281 |     font-size: 1.3em;
282 |     padding: 0 12px 0 0;
283 | }
284 | 
285 | @media(max-width:1023px) {
286 |     header {
287 |         padding: 12px 20px;
288 |     }
289 | 
290 |     .navigation a {
291 |         padding-left: 10px;
292 |     }
293 | 
294 |     .title {
295 |         font-size: 1.8em;
296 |     }
297 | 
298 |     section {
299 |         padding: 80px 20px;
300 |     }
301 | 
302 |     .main h2 {
303 |         font-size: 1em;
304 |     }
305 | 
306 |     .main h3 {
307 |         font-size: 1.6em;
308 |     }
309 | 
310 |     .content {
311 |         flex-direction: column;
312 |         align-items: center;
313 |     }
314 | }
315 | 
316 | @media(max-width:641px) {
317 |     body {
318 |         font-size: 12px;
319 |     }
320 | 
321 |     .main h2 {
322 |         font-size: 0.8em;
323 |     }
324 | 
325 |     .main h3 {
326 |         font-size: 1.4em;
327 |     }
328 | }
329 | 
330 | @media(max-width:300px) {
331 |     body {
332 |         font-size: 12px;
333 |     }
334 | }


--------------------------------------------------------------------------------
/ico/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coder2Mo/Portofolio-Website-v2/ac1b2b300eb5fcd4b5e37bc8fe8e4ddf8a11aa6e/ico/android-chrome-192x192.png


--------------------------------------------------------------------------------
/ico/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coder2Mo/Portofolio-Website-v2/ac1b2b300eb5fcd4b5e37bc8fe8e4ddf8a11aa6e/ico/android-chrome-512x512.png


--------------------------------------------------------------------------------
/ico/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coder2Mo/Portofolio-Website-v2/ac1b2b300eb5fcd4b5e37bc8fe8e4ddf8a11aa6e/ico/apple-touch-icon.png


--------------------------------------------------------------------------------
/ico/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coder2Mo/Portofolio-Website-v2/ac1b2b300eb5fcd4b5e37bc8fe8e4ddf8a11aa6e/ico/favicon-16x16.png


--------------------------------------------------------------------------------
/ico/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coder2Mo/Portofolio-Website-v2/ac1b2b300eb5fcd4b5e37bc8fe8e4ddf8a11aa6e/ico/favicon-32x32.png


--------------------------------------------------------------------------------
/ico/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coder2Mo/Portofolio-Website-v2/ac1b2b300eb5fcd4b5e37bc8fe8e4ddf8a11aa6e/ico/favicon.ico


--------------------------------------------------------------------------------
/images/1.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coder2Mo/Portofolio-Website-v2/ac1b2b300eb5fcd4b5e37bc8fe8e4ddf8a11aa6e/images/1.PNG


--------------------------------------------------------------------------------
/images/2.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coder2Mo/Portofolio-Website-v2/ac1b2b300eb5fcd4b5e37bc8fe8e4ddf8a11aa6e/images/2.PNG


--------------------------------------------------------------------------------
/images/3.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coder2Mo/Portofolio-Website-v2/ac1b2b300eb5fcd4b5e37bc8fe8e4ddf8a11aa6e/images/3.PNG


--------------------------------------------------------------------------------
/images/4.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coder2Mo/Portofolio-Website-v2/ac1b2b300eb5fcd4b5e37bc8fe8e4ddf8a11aa6e/images/4.PNG


--------------------------------------------------------------------------------
/images/bg.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coder2Mo/Portofolio-Website-v2/ac1b2b300eb5fcd4b5e37bc8fe8e4ddf8a11aa6e/images/bg.gif


--------------------------------------------------------------------------------
/images/p1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coder2Mo/Portofolio-Website-v2/ac1b2b300eb5fcd4b5e37bc8fe8e4ddf8a11aa6e/images/p1.png


--------------------------------------------------------------------------------
/images/p2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coder2Mo/Portofolio-Website-v2/ac1b2b300eb5fcd4b5e37bc8fe8e4ddf8a11aa6e/images/p2.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <link rel="stylesheet" href="css/style.css">
  8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  9 |     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 10 |     <link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png">
 11 |     <link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png">
 12 |     <link rel="manifest" href="ico/site.webmanifest">    <title>Mosh3eb</title>
 13 | </head>
 14 | <body>
 15 |     <header>
 16 |         <a class="logo" href="#">CoderMo</a>
 17 |         <nav class="navigation">
 18 |             <a href="#services">Services</a>
 19 |             <a href="#projects">Projects</a>
 20 |             <a href="#contact">Contact</a>
 21 |         </nav>
 22 |     </header>
 23 |     <section class="main" id="home">
 24 |         <div class="up">
 25 |             <a href="#home" class="btn-up"><i class="fas fa-arrow-alt-circle-up"></i></a> 
 26 |         </div>
 27 |         <div class="text">
 28 |             <h2>Hello I'm Mohamed<br><span>A Front-End Web Developer</span></h2>
 29 |             <h3>I Build Content that's Maybe Changes The World</h3>
 30 |             <a href="#projects" class="main-btn">View MyWork</a>
 31 |         <div class="social-icons">
 32 |             <a href="https://facebook.com/mosh3eb" class="fb" target="_blank"><i class="fab fa-facebook"></i></a>
 33 |             <a href="https://twitter.com/Mo_Coder" class="tw" target="_blank"><i class="fab fa-twitter"></i></a>
 34 |             <a href="https://instagram.com/coder_mo" class="ig" target="_blank"><i class="fab fa-instagram"></i></a>
 35 |             <a href="https://github.com/coder2mo" class="gh" target="_blank"><i class="fab fa-github" ></i></a>
 36 |         </div>    
 37 |         </div>
 38 |     </section>
 39 |     <section class="cards" id="services">
 40 |         <h1 class="title">Services</h1>
 41 |         <div class="content">
 42 |             <div class="card">
 43 |                 <div class="icon">
 44 |                      <i class="fas fa-terminal"></i>
 45 |                 </div>
 46 |                 <div class="info">
 47 |                     <h3>Script writing</h3>
 48 |                     <p>I Write & Explain Scripts For Any Topic Either As a File Or Video Tutorial</p>
 49 |                 </div>
 50 |             </div>
 51 |             <div class="card">
 52 |                 <div class="icon">
 53 |                      <i class="fas fa-database"></i>
 54 |                 </div>
 55 |                 <div class="info">
 56 |                     <h3>Full web Development</h3>
 57 |                     <p>I Takes Your Website From Skratch Directly To The Domain</p>
 58 |                 </div>
 59 |             </div>
 60 |             <div class="card">
 61 |                 <div class="icon">
 62 |                      <i class="fas fa-pen-nib"></i>
 63 |                 </div>
 64 |                 <div class="info">
 65 |                     <h3>Graphic Design</h3>
 66 |                     <p>I Design Any Kind Of Graphics For Your Website Or Editing Any Content That's Need To</p>
 67 |                 </div>
 68 |             </div>
 69 |         </div>
 70 |     </section>
 71 |     <section class="projects" id="projects">
 72 |         <h2 class="title">Projects</h2>
 73 |         <div class="content">
 74 |             <div class="project-card">
 75 |                 <div class="project-image">
 76 |                     <img src="images/p1.png" alt="Mountain-image">
 77 |                 </div>
 78 |             <div class="project-info">
 79 |                 <p class="project-catogrey">Script Writing & Portfolio</p>
 80 |                 <strong class="project-title">
 81 |                     <span>Portfolio #2</span>
 82 |                     <a class="more-details" href="#" target="_blank">More Details</a>
 83 |                 </strong>
 84 |             </div>
 85 |             </div>
 86 |             <div class="project-card">
 87 |                 <div class="project-image">
 88 |                     <img src="images/p2.jpg" alt="Mountain-image">
 89 |                 </div>
 90 |             <div class="project-info">
 91 |                 <p class="project-catogrey">Script Writing</p>
 92 |                 <strong class="project-title">
 93 |                     <span>Password Generator</span>
 94 |                     <a class="more-details" href="#" target="_blank">More Details</a>
 95 |                 </strong>
 96 |             </div>
 97 |             </div>
 98 |         </div>
 99 |     </section>
100 |     <section class="contact" id="contact">
101 |         <h2 class="title">Get In Touch With Me</h2>
102 |         <div class="content">
103 |             <div class="card">
104 |                 <div class="icon">
105 |                     <i class="fas fa-phone"></i>
106 |                 </div>
107 |                 <div class="info">
108 |                     <h3>Phone</h3>
109 |                     <p><a href="tel:+201030191239" target="_blank">+201030191239</a></p>
110 |                 </div>
111 |             </div>
112 |             <div class="card">
113 |                 <div class="icon">
114 |                     <i class="fas fa-envelope"></i>
115 |                 </div>
116 |                 <div class="info">
117 |                     <h3>Email</h3>
118 |                     <p><a href="mailto:Mosh3eb@vk.com" target="_blank">Mosh3eb@vk.com</a></p>
119 |                 </div>
120 |             </div>
121 |         </div>
122 |     </section>
123 |     <footer class="footer">
124 |         <p class="footer-title">Copyrights @ <span>Mosh3eb</span></p>
125 |         <div class="social-icons">
126 |             <a href="https://facebook.com/mosh3eb" class="fb" target="_blank"><i class="fab fa-facebook"></i></a>
127 |             <a href="https://twitter.com/Mo_Coder" class="tw" target="_blank"><i class="fab fa-twitter"></i></a>
128 |             <a href="https://instagram.com/coder_mo" class="ig" target="_blank"><i class="fab fa-instagram"></i></a>
129 |             <a href="https://github.com/coder2mo" class="gh" target="_blank"><i class="fab fa-github" ></i></a>
130 |         </div>    
131 |     </footer>
132 | </body>
133 | </html>
134 | 


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