├── README.md
├── css
    ├── about.css
    ├── contact.css
    ├── login.css
    ├── loyaut.css
    ├── portifolio.css
    ├── resume.css
    └── services.css
├── img
    ├── bg13.jpg
    ├── blacpic.jpg
    ├── fav.png
    ├── favicon.jpeg
    ├── index.PNG
    ├── me.jpeg
    └── meuh.jpeg
├── index.html
├── js
    ├── contact.js
    └── print.js
└── pages
    ├── about.html
    ├── contact.html
    ├── login.html
    ├── loyaut.html
    ├── resume.html
    └── service.html


/README.md:
--------------------------------------------------------------------------------
1 | # code-with-Edison
2 | my official personal portifolio website
3 | 


--------------------------------------------------------------------------------
/css/about.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');
  2 | 
  3 | *{
  4 |     padding: 0;
  5 |     margin: 0;
  6 |     box-sizing: border-box;
  7 | }
  8 | body{
  9 |     font-family: 'Poppins', sans-serif;
 10 | }
 11 | .about-wrapper{
 12 |     height: 100vh;
 13 | }
 14 | .about-left{
 15 |     background-color: #21D4FD;
 16 |     background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
 17 |     display: flex;
 18 |     flex-direction: column;
 19 |     align-items: center;
 20 |     justify-content: center;
 21 |     height: 100vh;
 22 |     color:#fff
 23 | }
 24 | .about-left-content > div{
 25 |     background: #12192c;
 26 |     padding: 4rem 4rem 2.5rem 5rem;
 27 |     text-align: center;
 28 |     
 29 |     border-radius: 12px 12px 0 0;
 30 | }
 31 | .about-left-content{
 32 |     box-shadow: 0px 0px 18px -1px rgba(0, 0, 0, 0.39);
 33 |     -webkit-box-shadow: 0px 0px 18px -1px rgba(0, 0, 0, 0.39);
 34 |     -moz-box-shadow: 0px 0px 18px -1px rgba(0, 0, 0, 0.39);
 35 |     border-radius: 12px;
 36 |     width:80%;
 37 | }
 38 | .about-img img{
 39 |     display: block;
 40 |     width: 100%; 
 41 | 	border-radius: 50%;
 42 | }
 43 | }
 44 | .about-img{
 45 |     width: 150px;
 46 |     height: 185px;
 47 |     overflow: hidden;
 48 |     border-radius: 50%;
 49 |     transition: all 0.5s ease-in-out;
 50 | }
 51 | .shadow{
 52 |     margin-left: auto;
 53 |     margin-right: auto;
 54 |     border-radius: 50%;
 55 |     width: 200px;
 56 |     height: 260px;
 57 | }
 58 | 
 59 | 
 60 | 
 61 | .about-left-content h2{
 62 |     font-size: 2rem;
 63 |     margin: 2.2rem 0 0.6rem 0;
 64 |     line-height: 1.2;
 65 |     padding-bottom: 1rem;
 66 |     border-bottom: 2px solid #B721FF;
 67 | }
 68 | .about-left-content h3{
 69 |     text-transform: uppercase;
 70 |     font-weight: 300;
 71 |     letter-spacing: 5px;
 72 |     margin-top: 1.2rem;
 73 | }
 74 | .icons{
 75 |     background: #12192c;
 76 |     display: flex;
 77 |     justify-content: center;
 78 |     padding: 0.8rem 0;
 79 |     border-radius: 0 0 12px 12px;
 80 | }
 81 | .icons li{
 82 |     list-style-type: none;
 83 |     background: #B721FF;
 84 |     color: #fff;
 85 |     width: 40px;
 86 |     height: 40px;
 87 |     margin: 0 0.5rem;
 88 |     border-radius: 50%;
 89 |     display: flex;
 90 |     justify-content: center;
 91 |     align-items: center;
 92 |     font-size: 1.2rem;
 93 |     cursor: pointer;
 94 |     transition: all 0.5s ease-in-out;
 95 | }
 96 | .icons li:hover{
 97 |     background: #edffec;
 98 |     color: #000;
 99 | }
100 | .about-right{
101 |     background: #12192c;
102 |     height: 100vh;
103 |     display: flex;
104 |     flex-direction: column;
105 |     align-items: center;
106 |     justify-content: center;
107 |     padding: 0 5rem;
108 |     text-align: center;
109 |     color:#fff
110 | }
111 | .about-right h1{
112 |     font-size: 5rem;
113 |     text-transform: uppercase;
114 | }
115 | .about-right h1 span{
116 |     color: #B721FF;
117 | }
118 | .about-right h2{
119 |     font-weight: 600;
120 | }
121 | .about-btns{
122 |     display: flex;
123 |     margin: 2rem 0;
124 | }
125 | .btn{
126 |     border: none;
127 |     font-size: 0.9rem;
128 |     text-transform: uppercase;
129 |     border: 2px solid #fff;
130 |     border-radius: 20px;
131 |     padding: 0.55rem 0;
132 |     width: 130px;
133 |     font-weight: 600;
134 |     background: transparent;
135 |     margin: 0 0.5rem;
136 |     cursor: pointer;
137 |     color:#fff
138 | }
139 | .btn.btn-pink{
140 |     background: #B721FF;
141 |     color: #fff;
142 |     border-color: #B721FF;
143 |     transition: all 0.5s ease-in-out;
144 | }
145 | .btn.btn-pink:hover{
146 |     background: transparent;
147 |     border-color: #fff;
148 |     color: #fff;
149 | }
150 | .btn.btn-white{
151 |     transition: all 0.5s ease-in-out;
152 | }
153 | .btn.btn-white:hover{
154 |     background: #B721FF;
155 |     border-color: #B721FF;
156 |     color: #fff;
157 | }
158 | .about-para p{
159 |     font-weight: 300;
160 |     padding: 0.5rem;
161 |     opacity: 0.8;
162 | }
163 | 
164 | @media screen and (min-width: 992px){
165 |     .about-wrapper{
166 |         display: grid;
167 |         grid-template-columns: repeat(2, 2fr);
168 |     }
169 | 
170 |     .about-left{
171 |         position: relative;
172 |     }
173 |     .about-left-content{
174 |         position: absolute;
175 |         width:80%
176 |     
177 |     }
178 | }
179 | .credit{
180 |     text-align: center;
181 |     color: #fff;
182 |     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
183 | }
184 | .credit a{
185 |     text-decoration: none;
186 |     color:#B721FF;
187 |     font-weight: bold;
188 | } 
189 |  .title {
190 |     color: #0a0a0a;
191 |     font-size: 15px;
192 |     text-transform: uppercase;
193 |     letter-spacing: 4px;
194 |     display: inline-block;
195 |     margin-bottom: 20px;
196 |     background: linear-gradient(
197 |       120deg,
198 |       #1c99fe 20.69%,
199 |       #7644ff 50.19%,
200 |       #fd4766 79.69%
201 |     );
202 |     -webkit-background-clip: text;
203 |     -webkit-text-fill-color: transparent;
204 |   }


--------------------------------------------------------------------------------
/css/contact.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600&display=swap');
  2 | 
  3 |             body {
  4 |                 background-image: linear-gradient(40deg,
  5 |                         hsl(240deg 56% 48%) 0%,
  6 |                         hsl(250deg 48% 49%) 10%,
  7 |                         hsl(260deg 40% 49%) 24%,
  8 |                         hsl(271deg 34% 50%) 42%,
  9 |                         hsl(285deg 28% 50%) 57%,
 10 |                         hsl(305deg 24% 50%) 68%,
 11 |                         hsl(325deg 29% 54%) 75%,
 12 |                         hsl(340deg 34% 58%) 81%,
 13 |                         hsl(354deg 40% 62%) 85%,
 14 |                         hsl(358deg 39% 63%) 89%,
 15 |                         hsl(353deg 31% 62%) 92%,
 16 |                         hsl(345deg 22% 61%) 94%,
 17 |                         hsl(330deg 14% 60%) 96%,
 18 |                         hsl(284deg 9% 60%) 97%,
 19 |                         hsl(232deg 12% 62%) 98%,
 20 |                         hsl(212deg 22% 61%) 99%,
 21 |                         hsl(204deg 32% 60%) 100%,
 22 |                         hsl(200deg 41% 58%) 100%);
 23 |                 background-repeat: no-repeat;
 24 |                 height: 99vh;
 25 |                 overflow-y: hidden;
 26 |                 display: flex;
 27 |                 justify-content: center;
 28 |                 align-items: center;
 29 |                 font-family: 'Quicksand', sans-serif;
 30 |             }
 31 | 
 32 |             .formBox {
 33 |                 padding: 15px;
 34 |                 text-align: center;
 35 |                 min-height: 50vh;
 36 |                 min-width: 50vw;
 37 |                 display: flex;
 38 |                 flex-direction: column;
 39 |                 background: #f8f8f885;
 40 |                 border-radius: 30px;
 41 |                 backdrop-filter: blur(10px);
 42 | 
 43 |             }
 44 | 
 45 |             h2 {
 46 |                 margin-bottom: -10px;
 47 |             }
 48 | 
 49 |             p {
 50 |                 font-weight: 500;
 51 |                 font-size: 1.1em;
 52 |             }
 53 | 
 54 |             form {
 55 |                 padding: 10px;
 56 |             }
 57 | 
 58 |             form>div {
 59 |                 padding: 10px;
 60 |                 position: relative;
 61 |                 font-size: 1.3em;
 62 |             }
 63 | 
 64 |             form>div i {
 65 |                 position: absolute;
 66 |                 top: 22px;
 67 |                 margin-left: 10px;
 68 |                 opacity: 0.6;
 69 |             }
 70 | 
 71 |             form>div input {
 72 |                 height: 2em;
 73 |                 width: 70vw;
 74 |                 padding-left: 40px;
 75 |                 font-size: 1em;
 76 |                 border-radius: 20px;
 77 |                 outline: none;
 78 |                 border: 1px solid #b5adad;
 79 |                 background-color: #f1f1f1;
 80 |             }
 81 | 
 82 |             div>input:focus {
 83 |                 border: 1px solid #6f6a6a;
 84 | 
 85 |             }
 86 | 
 87 |             form>div:hover>i {
 88 | 
 89 |                 opacity: 1;
 90 |                 transition: opacity 1s;
 91 |             }
 92 | 
 93 |             textarea {
 94 |                 border: none;
 95 |                 width: 70vw;
 96 |                 border-radius: 20px;
 97 |                 padding: 10px;
 98 |                 outline: none;
 99 |                 font-size: 1em;
100 |             }
101 | 
102 |             button {
103 |                 width: 50%;
104 |                 height: 5vh;
105 |                 color: #ffffff;
106 |                 background: #00d689;
107 |                 outline: none;
108 |                 border: none;
109 |                 border-radius: 10px;
110 |                 cursor: pointer;
111 |                 font-size: 0.8em;
112 |             }
113 | 
114 |             @media screen and (min-width:900px) {
115 |                 form>div input {
116 |                     width: 50vw;
117 |                 }
118 | 
119 |                 textarea {
120 |                     width: 50vw;
121 |                 }
122 | }


--------------------------------------------------------------------------------
/css/login.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
  2 | * {
  3 |     margin: 0;
  4 |     padding: 0;
  5 |     outline: none;
  6 |     box-sizing: border-box;
  7 |     font-family: "Poppins", sans-serif;
  8 | }
  9 | body {
 10 |     height: 100vh;
 11 |     width: 100%;
 12 |     background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
 13 | }
 14 | .show-btn {
 15 |     background: #fff;
 16 |     padding: 10px 20px;
 17 |     font-size: 20px;
 18 |     font-weight: 500;
 19 |     color: #3498db;
 20 |     cursor: pointer;
 21 |     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 22 | }
 23 | .show-btn,
 24 | .container {
 25 |     position: absolute;
 26 |     top: 50%;
 27 |     left: 50%;
 28 |     transform: translate(-50%, -50%);
 29 | }
 30 | input[type="checkbox"] {
 31 |     display: none;
 32 | }
 33 | .container {
 34 |     display: none;
 35 |     background: #fff;
 36 |     width: 410px;
 37 |     padding: 30px;
 38 |     box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
 39 | }
 40 | #show:checked ~ .container {
 41 |     display: block;
 42 | }
 43 | .container .close-btn {
 44 |     position: absolute;
 45 |     right: 20px;
 46 |     top: 15px;
 47 |     font-size: 18px;
 48 |     cursor: pointer;
 49 | }
 50 | .container .close-btn:hover {
 51 |     color: #3498db;
 52 | }
 53 | .container .text {
 54 |     font-size: 35px;
 55 |     font-weight: 600;
 56 |     text-align: center;
 57 | }
 58 | .container form {
 59 |     margin-top: -20px;
 60 | }
 61 | .container form .data {
 62 |     height: 45px;
 63 |     width: 100%;
 64 |     margin: 40px 0;
 65 | }
 66 | form .data label {
 67 |     font-size: 18px;
 68 | }
 69 | form .data input {
 70 |     height: 100%;
 71 |     width: 100%;
 72 |     padding-left: 10px;
 73 |     font-size: 17px;
 74 |     border: 1px solid silver;
 75 | }
 76 | form .data input:focus {
 77 |     border-color: #3498db;
 78 |     border-bottom-width: 2px;
 79 | }
 80 | form .forgot-pass {
 81 |     margin-top: -8px;
 82 | }
 83 | form .forgot-pass a {
 84 |     color: #3498db;
 85 |     text-decoration: none;
 86 | }
 87 | form .forgot-pass a:hover {
 88 |     text-decoration: underline;
 89 | }
 90 | form .btn {
 91 |     margin: 30px 0;
 92 |     height: 45px;
 93 |     width: 100%;
 94 |     position: relative;
 95 |     overflow: hidden;
 96 | }
 97 | form .btn .inner {
 98 |     height: 100%;
 99 |     width: 300%;
100 |     position: absolute;
101 |     left: -100%;
102 |     z-index: -1;
103 |     background: -webkit-linear-gradient(
104 |         right,
105 |         #56d8e4,
106 |         #9f01ea,
107 |         #56d8e4,
108 |         #9f01ea
109 |     );
110 |     transition: all 0.4s;
111 | }
112 | form .btn:hover .inner {
113 |     left: 0;
114 | }
115 | form .btn button {
116 |     height: 100%;
117 |     width: 100%;
118 |     background: none;
119 |     border: none;
120 |     color: #fff;
121 |     font-size: 18px;
122 |     font-weight: 500;
123 |     text-transform: uppercase;
124 |     letter-spacing: 1px;
125 |     cursor: pointer;
126 | }
127 | form .signup-link {
128 |     text-align: center;
129 | }
130 | form .signup-link a {
131 |     color: #3498db;
132 |     text-decoration: none;
133 | }
134 | form .signup-link a:hover {
135 |     text-decoration: underline;
136 | }


--------------------------------------------------------------------------------
/css/loyaut.css:
--------------------------------------------------------------------------------
 1 | .nav {
 2 |     height: ;
 3 |     display: inline-block;
 4 |     justify-content: left;
 5 |     padding: 10px 0px;
 6 |     margin-top: 0px;
 7 |     font-size: 20px;
 8 |   }
 9 |   
10 |   .nav ul li {
11 |     list-style: none;
12 |     display: inline-block;
13 |     padding: 10px 20px;
14 |   }
15 |   .nav ul li a {
16 |     text-decoration: none;
17 |     color: #1d1d24;
18 |     position: relative;
19 |     padding: 5px 0;
20 |   }
21 |   .nav ul li a:hover {
22 |     color: #fd4766;
23 |   }
24 |   .nav ul li a:after {
25 |     content: "";
26 |     position: absolute;
27 |     left: 0;
28 |     width: 0;
29 |     height: 3px;
30 |     background: #fd4766;
31 |     transition: 0.3s;
32 |     bottom: 0;
33 |   }
34 |   .nav ul li a:hover:after {
35 |     width: 100%;
36 |   }


--------------------------------------------------------------------------------
/css/portifolio.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 |   font-family: "Poppins", sans-serif;
  8 | }
  9 | a, button {
 10 |   text-decoration: none;
 11 | }
 12 | .hero {
 13 |   width: 100%;
 14 |   height: 100vh;
 15 |   background: url(bg13.jpg);
 16 |   background-size: cover;
 17 | }
 18 | nav {
 19 |   display: flex;
 20 |   align-items: center;
 21 |   justify-content: space-between;
 22 |   padding: 30px 100px;
 23 | }
 24 | .logo {
 25 |   max-height: 100px;
 26 |   border-radius: 50%;
 27 |   
 28 | }
 29 | nav ul li {
 30 |   list-style: none;
 31 |   display: inline-block;
 32 |   padding: 10px 20px;
 33 | }
 34 | nav ul li a, button {
 35 |   color: #1d1d24;
 36 |   position: relative;
 37 |   padding: 5px 0;
 38 | }
 39 | nav ul li a:hover {
 40 |   color: #fd4766;
 41 | }
 42 | nav ul li a:after {
 43 |   content: "";
 44 |   position: absolute;
 45 |   left: 0;
 46 |   width: 0;
 47 |   height: 3px;
 48 |   background: #fd4766;
 49 |   transition: 0.3s;
 50 |   bottom: 0;
 51 | }
 52 | nav ul li a:hover:after {
 53 |   width: 100%;
 54 | }
 55 | .btn {
 56 |   color: #fff;
 57 |   font-size: 16px;
 58 |   text-transform: uppercase;
 59 |   letter-spacing: 2px;
 60 |   padding: 16px 40px;
 61 |   border-radius: 500px;
 62 |   display: inline-block;
 63 |   font-weight: 500;
 64 |   transition: all 0.4s ease-in-out;
 65 |   background-size: 152% 100%;
 66 |   background: #fd4766;
 67 |   border: 2px solid #fd4766;
 68 | }
 69 | .btn:hover {
 70 |   background: transparent;
 71 |   border-color: #fd4766;
 72 |   color: #fd4766;
 73 | }
 74 | .content {
 75 |   position: absolute;
 76 |   top: 35%;
 77 |   left: 8%;
 78 | }
 79 | .content .title {
 80 |   color: #0a0a0a;
 81 |   font-size: 15px;
 82 |   text-transform: uppercase;
 83 |   letter-spacing: 4px;
 84 |   display: inline-block;
 85 |   margin-bottom: 20px;
 86 |   background: linear-gradient(
 87 |     120deg,
 88 |     #1c99fe 20.69%,
 89 |     #7644ff 50.19%,
 90 |     #fd4766 79.69%
 91 |   );
 92 |   -webkit-background-clip: text;
 93 |   -webkit-text-fill-color: transparent;
 94 | }
 95 | .content h1 {
 96 |   color: #1f1f25;
 97 |   font-size: 75px;
 98 |   font-weight: 900;
 99 |   line-height: 90px;
100 |   text-transform: inherit;
101 |   width: 70%;
102 | }
103 | .content h1 span {
104 |   color: #fd4766;
105 | }
106 | .content p {
107 |   width: 55%;
108 |   color: #202020;
109 |   margin-top: 25px;
110 |   margin-bottom: 30px;
111 | }


--------------------------------------------------------------------------------
/css/resume.css:
--------------------------------------------------------------------------------
  1 | :root{
  2 | 	--background: #c3c0ba;
  3 | 	--white: #fff;
  4 | 	--one: #c3266f;
  5 | 	--two: #743578;
  6 | 	--black: #54585d;
  7 | 	--process: #a5a5a5;
  8 | }
  9 | *{
 10 | 	margin:0px; 
 11 | 	padding:0px;
 12 | 	 box-sizing: border-box;
 13 | 	  font-family: system-ui;
 14 | 	}
 15 | body{
 16 | 	background: var(--background);
 17 | }
 18 | .col-div-3{
 19 | 	width: 25%; 
 20 | 	float: left;
 21 | }
 22 | .col-div-7{
 23 | 	width: 75%;
 24 | 	 float: left;
 25 | 	}
 26 | .col-div-4{
 27 | 	width: 35%; 
 28 | 	float: left;
 29 | }
 30 | .col-div-8{
 31 | 	width: 65%;
 32 | 	 float: left;
 33 | 	}
 34 | .col-div-6{
 35 | 	width: 50%; 
 36 | 	float: left; 
 37 | 	position: relative;
 38 | }
 39 | .clearfix{
 40 | 	clear: both;
 41 | }
 42 | .resume-main{
 43 | 	width: 800px; 
 44 | 	height: auto; 
 45 | 	background: linear-gradient(var(--one), var(--two));
 46 | 	margin: 50px auto;
 47 | 	box-shadow:5px 5px 5px 5px #54585d33;
 48 | }
 49 | .left-box{
 50 | 	width: 35%;
 51 | 	 float: left; 
 52 | 	 height: auto;}
 53 | .right-box{
 54 | 	width: 65%; 
 55 | 	float: left; 
 56 | 	background-color: var(--white);
 57 | 	 height: 800px;
 58 | 	margin: 50px 0px; 
 59 | 	border-radius: 50px 0px 0px 50px;
 60 | 	 padding:30px 50px;
 61 | 	box-shadow: -7px 2px 15px 2px #54585d52;
 62 | }
 63 | .profile{
 64 | 	width: 150px;
 65 | 	 height: 185px;
 66 | 	  border: 3px solid var(--white); 
 67 | 	padding: 1px; 
 68 | 	border-radius: 50%; margin: 20px auto;}
 69 | .profile img{
 70 | 	width: 100%; 
 71 | 	border-radius: 50%;}
 72 | .content-box{ 
 73 | 	   padding: 0px 40px 0px 45px;
 74 | 	}
 75 | .content-box h2{
 76 | 	text-transform: uppercase;
 77 | 	font-weight: 500;color: var(--white); 
 78 | 	letter-spacing: 1px; font-size: 20px;
 79 | }
 80 | .hr1{
 81 | 	border: none; 
 82 | 	height: 1px; background: var(--white);
 83 | 	 margin-top: 3px;}
 84 | .p1{
 85 | 	font-size: 11px;color: var(--white);
 86 | 	letter-spacing: 1px;padding-top: 12px;
 87 | }
 88 | #progress {
 89 | 	background: var(--process);
 90 | 	border-radius: 13px;
 91 | 	height: 8px;
 92 | 	width: 100%;}
 93 | #progress:after {
 94 |     content: '';
 95 |     display: block;
 96 |     background: var(--white);
 97 |     width: 80%;
 98 |     height: 100%;
 99 |     border-radius: 9px;
100 | }
101 | #progress1 {
102 | 	background: var(--process);
103 | 	border-radius: 13px;
104 | 	height: 8px;width: 100%;
105 | }
106 | #progress1:after {
107 |     content: '';
108 |     display: block;
109 |     background: var(--white);
110 |     width: 20%;
111 |     height: 100%;
112 |     border-radius: 9px;
113 | }
114 | #progress2 {
115 | 	background: var(--process);
116 | 	border-radius: 13px;
117 | 	height: 8px;width: 100%;
118 | }
119 | #progress2:after {
120 |     content: '';
121 |     display: block;
122 |     background: var(--white);
123 |     width: 99%;
124 |     height: 100%;
125 |     border-radius: 9px;
126 | }
127 | .content-box h3{
128 | 	font-size: 13px;
129 | 	text-transform: uppercase;
130 | 	letter-spacing: 1px;padding-top: 10px;
131 |     color: white;
132 | 	font-weight: 500;
133 | }
134 | .p2{
135 | 	font-size: 13px; 
136 | 	margin-bottom: 5px; margin-top: 5px;
137 | 	 color: var(--white);
138 | 	}
139 | .circle{
140 | 	color:var(--white);
141 | 	 font-size: 14px!important; 
142 | 	margin-top: 7px;}
143 | .circle1{
144 | 	color:var(--process); 
145 | 	font-size: 14px!important; 
146 | 	margin-top: 7px;}
147 | .in{
148 | 	background:var(--white);
149 | 	color: var(--one);padding: 8px;
150 | 	border-radius: 20px; 
151 | 	font-size: 14px!important;
152 | }
153 | .inp{
154 | 	color: var(--white); 
155 | 	font-size: 11px;}
156 | .col3{
157 | 	text-align: center;}
158 | h1{
159 | 	font-size: 50px;
160 | 	 text-transform: uppercase;
161 | 	  color: var(--black); line-height: 50px;}
162 | h1 span{
163 | 	color: var(--one);
164 | }
165 | .p3{
166 | 	
167 | 	letter-spacing: 4px;
168 | 	color: #54585d; 
169 | 	font-weight: 500;
170 | }
171 | .heading{
172 | 	text-transform: uppercase;
173 | 	font-weight: 500;color: var(--one); 
174 | 	letter-spacing: 1px;
175 | 	 font-size: 20px;
176 | }
177 | .hr2{
178 | 	border: none;
179 | 	 height: 1px; 
180 | 	 background: var(--black); 
181 | 	 margin-top: 3px;}
182 | .p5{
183 | 	font-weight: 700;
184 | 	color: var(--black);}
185 | .span1{
186 | 	font-size: 13px;
187 | 	color: var(--black);}


--------------------------------------------------------------------------------
/css/services.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 |     font-family: "Poppins", sans-serif;
 6 |   }
 7 |   section {
 8 |     height: 100vh;
 9 |     width: 100%;
10 |     display: grid;
11 |     place-items: center;
12 |   }
13 |   .row {
14 |     display: flex;
15 |     flex-wrap: wrap;
16 |   }
17 |   .column {
18 |     width: 100%;
19 |     padding: 0 1em 1em 1em;
20 |     text-align: center;
21 |   }
22 |   .card {
23 |     width: 100%;
24 |     height: 100%;
25 |     padding: 2em 1.5em;
26 |     background: linear-gradient(#ffffff 50%,  #fd4766 50%);
27 |     background-size: 100% 200%;
28 |     background-position: 0 2.5%;
29 |     border-radius: 5px;
30 |     box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
31 |     cursor: pointer;
32 |     transition: 0.5s;
33 |   }
34 |   h3 {
35 |     font-size: 20px;
36 |     font-weight: 600;
37 |     color: #1f194c;
38 |     margin: 1em 0;
39 |   }
40 |   p {
41 |     color: #575a7b;
42 |     font-size: 15px;
43 |     line-height: 1.6;
44 |     letter-spacing: 0.03em;
45 |   }
46 |   .icon-wrapper {
47 |     background-color:  #fd4766;
48 |     position: relative;
49 |     margin: auto;
50 |     font-size: 30px;
51 |     height: 2.5em;
52 |     width: 2.5em;
53 |     color: #ffffff;
54 |     border-radius: 50%;
55 |     display: grid;
56 |     place-items: center;
57 |     transition: 0.5s;
58 |   }
59 |   .card:hover {
60 |     background-position: 0 100%;
61 |   }
62 |   .card:hover .icon-wrapper {
63 |     background-color: #ffffff;
64 |     color: #12192c;
65 |   }
66 |   .card:hover h3 {
67 |     color: #ffffff;
68 |   }
69 |   .card:hover p {
70 |     color: #f0f0f0;
71 |   }
72 |   @media screen and (min-width: 768px) {
73 |     section {
74 |       padding: 0 2em;
75 |     }
76 |     .column {
77 |       flex: 0 50%;
78 |       max-width: 50%;
79 |     }
80 |   }
81 |   @media screen and (min-width: 992px) {
82 |     section {
83 |       padding: 1em 3em;
84 |     }
85 |     .column {
86 |       flex: 0 0 33.33%;
87 |       max-width: 33.33%;
88 |     }
89 |   }


--------------------------------------------------------------------------------
/img/bg13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeWithEdison/code-with-Edison/cd1f4b871b813f49b4a97362d68303048ebc2847/img/bg13.jpg


--------------------------------------------------------------------------------
/img/blacpic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeWithEdison/code-with-Edison/cd1f4b871b813f49b4a97362d68303048ebc2847/img/blacpic.jpg


--------------------------------------------------------------------------------
/img/fav.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeWithEdison/code-with-Edison/cd1f4b871b813f49b4a97362d68303048ebc2847/img/fav.png


--------------------------------------------------------------------------------
/img/favicon.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeWithEdison/code-with-Edison/cd1f4b871b813f49b4a97362d68303048ebc2847/img/favicon.jpeg


--------------------------------------------------------------------------------
/img/index.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeWithEdison/code-with-Edison/cd1f4b871b813f49b4a97362d68303048ebc2847/img/index.PNG


--------------------------------------------------------------------------------
/img/me.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeWithEdison/code-with-Edison/cd1f4b871b813f49b4a97362d68303048ebc2847/img/me.jpeg


--------------------------------------------------------------------------------
/img/meuh.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeWithEdison/code-with-Edison/cd1f4b871b813f49b4a97362d68303048ebc2847/img/meuh.jpeg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="img/fav.png" sizes="32x32" />
 6 |     <title>Code  with Edison</title>
 7 |     <!----CSS link----->
 8 |     <link rel="stylesheet" href="css/portifolio.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="hero">
12 |       <nav>
13 |         <img src="img/blacpic.jpg" class="logo" />
14 |         <ul>
15 |           <li><a href="#">Home</a></li>
16 |           <li><a href="pages/about.html">About Me</a></li>
17 |           <li><a href="pages/service.html">Service</a></li>
18 |           
19 |           <!-- <li><a href="join.html">join us..</a></li> -->
20 |           <li><a href="pages/contact.html">Contact</a></li>
21 |         </ul>
22 |         <a href="pages/resume.html" class="btn">Resume</a>
23 |       </nav>
24 | 
25 |       <div class="content">
26 |         <span class="title">code with Edison  </span>
27 |         <h1>Hello, I’m <span>Edison</span></h1>
28 |         <p>
29 |           I’m working on a professional, visually sophisticated and
30 |           technologically proficient, responsive and multi-functional Web
31 |           Components.
32 |         </p>
33 |         <a href="pages/resume.html" class="btn" onclick="print()">Download CV</a>
34 |       </div>
35 |     </div>
36 |   </body>
37 | </html>


--------------------------------------------------------------------------------
/js/contact.js:
--------------------------------------------------------------------------------
 1 | function contactMe(){
 2 |     var result = true;
 3 |     var name = document.getElementById("name").value;
 4 |     var email = document.getElementById("mail").value;
 5 |     var phone = document.getElementById("phone").value;
 6 |     var message = document.getElementById("query").value; 
 7 |     if(name = ""){
 8 |         alert("name missing!");
 9 |         result = false;
10 |     }
11 |  if(email = ""){
12 |     alert("email missing!!");
13 |     result = false;
14 |  }   
15 |  if(phone = ""){
16 |     alert("phone is missing!");
17 |     result = false;
18 |  }
19 |  var atpas;
20 |  if(email != "")
21 |  atpas = email.indexof("@");
22 |  else
23 |  atpas = -1;
24 |  if(atpas < 0){
25 |     alert("email adress is incorrect!");
26 |     result = false;
27 |  }
28 |  return result;
29 | 
30 | }


--------------------------------------------------------------------------------
/js/print.js:
--------------------------------------------------------------------------------
1 | window.jsPDF = window.jspdf.jsPDF;
2 | var docPDF = jspdf();
3 | function print(){
4 |     var elementHTML = 
5 |     document.querySelector("#printResume")
6 |     docPDF
7 | }


--------------------------------------------------------------------------------
/pages/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 |     <link rel="icon" href="../img/fav.png" sizes="32x32" />
 7 |     <title>About Me Profile card || codewithEdison</title>
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <link rel="stylesheet" href="../css/about.css">
10 |     <link rel="stylesheet" href="../css/loyaut.css">
11 |     <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" />
12 |   </head>
13 |   <body>
14 |    
15 |     <div class = "about-wrapper">
16 |       
17 |       <div class = "about-left">
18 |         
19 |         <div class = "about-left-content">
20 |           <div>
21 |             <div class = "shadow">
22 |               <div class = "about-img">
23 |                 <img src = "../img/blacpic.jpg" alt = "about image">
24 |               </div>
25 |             </div>
26 | 
27 |             <span class="title">code with Edison  </span>
28 |             <h3>COMPUTER SCIENCE STUDENT</h3>
29 |           </div>
30 | 
31 |           <ul class = "icons">
32 |             <li><i onclick="location.href='https://facebook.com/edisonuwihanganye';" class = "fab fa-facebook-f"></i></li>
33 |             <li><i onclick="location.href='https://twitter.com';" class = "fab fa-twitter"></i></li>
34 |             <li><i onclick="location.href='https://linkedin.com/edisonkvn';" class = "fab fa-linkedin"></i></li>
35 |             <li><i onclick="location.href='https://instagram.com/edisonklavan';" class = "fab fa-instagram"></i></li>
36 |             <li><i onclick="location.href='https://github.com/edskvn';" class = "fab fa-github"></i></li>
37 |             <li><i onclick="location.href='tel:+250788240303';" class = "fab fa-whatsapp"></i></li>
38 |             
39 |           </ul>
40 |         </div>
41 |       
42 |       </div>
43 | 
44 |       <div class = "about-right">
45 |         <h1>Hello<span>!</span></h1>
46 |         <h2> I am Edison & I am web developer</h2>
47 |         <div class = "about-btns">
48 |           <button onclick="location.href = 'resume.html'" type = "button" class = "btn btn-pink">resume / CV</button>
49 |           <button  onclick="location.href='https://github.com/edsnkvn';" type = "button" class = "btn btn-white">Git hub</button>
50 |         </div>
51 | 
52 |         <div class = "about-para">
53 |          <p>Hi, I’m Edison UWIHANGANYE! I'm a web developer. 
54 |           I study computer science in University of Rwanda. 
55 |           In a nutshell, I create system that help organizations
56 |            address business challenges and meet their needs. 
57 |            I manage everything from website navigation
58 |             and layout to a company's web hosting and
59 |              security architecture.
60 |               My expertise lies within front-end web apps,
61 |                and the main languages in my tech stack are JavaScript,
62 |                 React,PHP and of course HTML/CSS. 
63 |           I’m a lifelong learner and love to read and  swim </p> 
64 |         </div>
65 |         <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://github.com/edsnkvn">Edison</a></div>
66 |       </div>
67 |     </div>
68 |   </body>
69 | </html>


--------------------------------------------------------------------------------
/pages/contact.html:
--------------------------------------------------------------------------------
 1 | <!-- codewithedison -->
 2 | 
 3 | <!doctype html>
 4 | <html>
 5 |     <head>
 6 |         <meta charset="UTF-8">
 7 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 8 |         <link rel="icon" href="../img/fav.png" sizes="32x32" />
 9 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 |         <title>contact| codewithEdison</title>
11 |         <link rel="stylesheet" href="../css/contact.css">
12 | 
13 |     
14 |         </head>
15 |     <body>
16 |         <div class="formBox">
17 |             <h2>Contact Me</h2>
18 |             <p>You will hear from Me at the earliest!</p>
19 |             <form 
20 |             action="mailto:edsnkvn@gmail.com"
21 |             onsubmit="return contactme()"
22 |             name="contact"
23 |             method="post">
24 |                 <div class="nameInp">
25 |                     <i class="fa fa-user icon"></i>
26 |                     <input type="text" placeholder="Full Name" name="name" id="name">
27 |     
28 |                 </div>
29 |                 <div class="mailInp">
30 |                     <i class="fa fa-envelope"></i>
31 |                     <input type="email" name="mail" id="mail" placeholder="Email">
32 |                 </div>
33 |                 <div class="phoneInp">
34 |                     <i class="fa-solid fa-phone"></i>
35 |                     <input type="number" name="phone" id="phone" placeholder="Phone" min="100000" max="9999999999">
36 |                 </div>
37 |                 <div class="queryInp">
38 |                     <textarea name="query" id="query" cols="30" rows="5"
39 |                         placeholder="Any comment or your query"></textarea>
40 |                 </div>
41 |                 <div class="submitBtn">
42 |                     <button  onclick="contactme()">Send</button>
43 |                 </div>
44 |             </form>
45 |             <p class="extra">You can also contact Me at +250-788-240-303</p>
46 |         </div>
47 |         
48 |     </body>
49 | </html>


--------------------------------------------------------------------------------
/pages/login.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!-- CodewithEdison -->
 3 | <html lang="en" dir="ltr">
 4 |     <head>
 5 |         <meta charset="utf-8" />
 6 |         <title>Login form |codewithEdison</title>
 7 |         <link rel="icon" href="../img/fav.png" sizes="32x32" />
 8 |         <link rel="stylesheet" href="../css/login.css" />
 9 |         <script src="https://kit.fontawesome.com/a076d05399.js"></script>
10 |     </head>
11 |     <body>
12 |         <div class="center">
13 |             <input type="checkbox" id="show" />
14 |             <label for="show" class="show-btn">View Form</label>
15 |             <div class="container">
16 |                 <label
17 |                     for="show"
18 |                     class="close-btn fas fa-times"
19 |                     title="close"
20 |                 ></label>
21 |                 <div class="text">Login Form</div>
22 |                 <form action="#">
23 |                     <div class="data">
24 |                         <label>Email or Phone</label>
25 |                         <input type="text" required />
26 |                     </div>
27 |                     <div class="data">
28 |                         <label>Password</label>
29 |                         <input type="password" required />
30 |                     </div>
31 |                     <div class="forgot-pass">
32 |                         <a href="#">Forgot Password?</a>
33 |                     </div>
34 |                     <div class="btn">
35 |                         <div class="inner"></div>
36 |                         <button type="submit">login</button>
37 |                     </div>
38 |                     <div class="signup-link">
39 |                         Not a member? <a href="#">Signup now</a>
40 |                     </div>
41 |                 </form>
42 |             </div>
43 |         </div>
44 |     </body>
45 | </html>


--------------------------------------------------------------------------------
/pages/loyaut.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <link rel="stylesheet" href="../css/loyaut.css">
 5 |     </head>
 6 |     <body>
 7 |         <nav >
 8 |             
 9 |             <ul>
10 |               <li><a href="../index.html">Home</a></li>
11 |               <li><a href="../pages/about.html">About Me</a></li>
12 |               <li><a href="../pages/service.html">Service</a></li>
13 |               
14 |               <!-- <li><a href="join.html">join us..</a></li> -->
15 |               <li><a href="../pages/contact.html">Contact</a></li>
16 |             </ul>
17 |           </nav>
18 |     
19 |     </body>
20 | </html>


--------------------------------------------------------------------------------
/pages/resume.html:
--------------------------------------------------------------------------------
  1 | <!-- codewithEdison -->
  2 | <!DOCTYPE html>
  3 | <html>
  4 | <head>
  5 | 	<meta charset="utf-8">
  6 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 	<link rel="icon" href="../img/fav.png" sizes="32x32" />
  8 | 	<title>Resume |codewithEdison</title>
  9 | 	<link rel="stylesheet" type="text/css" href="../css/resume.css">
 10 | 	<!-- GOOGLE FONT AWESOME ICON -->
 11 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 12 | </head>
 13 | <body>
 14 | 
 15 | <div class="resume-main">
 16 | 	<div class="left-box">
 17 | 		<br><br>
 18 | 		<div class="profile">
 19 | 			<img src="../img/blacpic.jpg">
 20 | 		</div>
 21 | 		<div class="content-box">
 22 | 		<h2>Profile Info</h2>
 23 | 		<hr class="hr1">
 24 | 		<p class="p1">My name is Edison UWIHANGANYE and I am computer science student in UNIVERSITY OF RWANDA. </p>
 25 | 
 26 | 		<h3>Languages:</h3>
 27 | 		<p class="p2">English</p>
 28 | 		<div id="progress"></div>
 29 | 		<p class="p2">French</p>
 30 | 		<div id="progress1"></div>
 31 | 		<p class="p2">Swahili</p>
 32 | 		<div id="progress1"></div>
 33 |         <p class="p2">kinyarwanda</p>
 34 | 		<div id="progress2"></div>
 35 | 
 36 | 		<br><br>
 37 | 		<h2>My Skills</h2>
 38 | 		<hr class="hr1">
 39 | 		<br>
 40 | 		<div class="col-div-6"><p class="p2">HTML</p></div>
 41 | 		<div class="col-div-6">
 42 | 			<i class="fa fa-circle circle"></i>
 43 | 			<i class="fa fa-circle circle"></i>
 44 | 			<i class="fa fa-circle circle"></i>
 45 | 			<i class="fa fa-circle circle"></i>
 46 | 			<i class="fa fa-circle circle1"></i>
 47 | 		</div>
 48 | 			<div class="clearfix"></div>
 49 | 		<div class="col-div-6"><p class="p2">CSS</div>
 50 | 		<div class="col-div-6">
 51 | 			<i class="fa fa-circle circle"></i>
 52 | 			<i class="fa fa-circle circle"></i>
 53 | 			<i class="fa fa-circle circle"></i>
 54 | 			<i class="fa fa-circle circle1"></i>
 55 | 			<i class="fa fa-circle circle1"></i>
 56 | 		</div>
 57 | 			<div class="clearfix"></div>
 58 | 		<div class="col-div-6"><p class="p2">MYSQL</p></div>
 59 | 		<div class="col-div-6">
 60 | 			<i class="fa fa-circle circle"></i>
 61 | 			<i class="fa fa-circle circle"></i>
 62 | 			<i class="fa fa-circle circle"></i>
 63 | 			<i class="fa fa-circle circle"></i>
 64 | 			<i class="fa fa-circle circle1"></i>
 65 | 		</div>
 66 | 			<div class="clearfix"></div>
 67 | 		<div class="col-div-6"><p class="p2">JAVASCRIPT</p></div>
 68 | 		<div class="col-div-6">
 69 | 			<i class="fa fa-circle circle"></i>
 70 | 			<i class="fa fa-circle circle"></i>
 71 | 			<i class="fa fa-circle circle"></i>
 72 | 			<i class="fa fa-circle circle1"></i>
 73 | 			<i class="fa fa-circle circle1"></i>
 74 | 		</div>
 75 | 		<div class="clearfix"></div>
 76 | 		<div class="col-div-6"><p class="p2">REACT</p></div>
 77 | 		<div class="col-div-6">
 78 | 			<i class="fa fa-circle circle"></i>
 79 | 			<i class="fa fa-circle circle"></i>
 80 | 			<i class="fa fa-circle circle"></i>
 81 | 			<i class="fa fa-circle circle1"></i>
 82 | 			<i class="fa fa-circle circle1"></i>
 83 | 		</div>
 84 | 		<div class="clearfix"></div>
 85 | 		<div class="col-div-6"><p class="p2">PHP</p></div>
 86 | 		<div class="col-div-6">
 87 | 			<i class="fa fa-circle circle"></i>
 88 | 			<i class="fa fa-circle circle"></i>
 89 | 			<i class="fa fa-circle circle1"></i>
 90 | 			<i class="fa fa-circle circle1"></i>
 91 | 			<i class="fa fa-circle circle1"></i>
 92 | 		</div>
 93 | 			<div class="clearfix"></div>
 94 | 			<br>
 95 | 			<h2>interests</h2>
 96 | 			<hr class="hr1">
 97 | 			<br>
 98 | 			<div class="col-div-3 col3">
 99 | 				<i class=" fa fa-music in"></i>
100 | 				<span class="inp">music</span>
101 | 			</div>
102 | 			<div class="col-div-3 col3">
103 | 				<i class="fa fa-futbol-o in"></i>
104 | 				<span class="inp">sport</span>
105 | 			</div>
106 | 			<!-- <div class="col-div-3 col3">
107 | 				<i class="fa fa-futbol-o in"></i>
108 | 				<span class="inp">Basketball</span>
109 | 			</div> -->
110 | 			<div class="col-div-3 col3">
111 | 				<i class="fa fa-book in"></i>
112 | 				<span class="inp">Read</span>
113 | 			</div>
114 | 		</div>
115 | 	</div>
116 | 
117 | 	<div class="right-box">
118 | 		<h1>
119 | 			Edison<br>
120 | 			<span>UWIHANGANYE</span>
121 | 		</h1>
122 | 		<p class="p3">COMPUTER SCIENCE STUDENT</p>
123 | 
124 | 		<br>	
125 | 		<h2 class="heading">Work Experience</h2>
126 | 		<hr class="hr2">
127 | 		<br>
128 | 		<div class="col-div-4">
129 | 			<p class="p5">2019</p>
130 | 			<span class="span1">GS MARIE REINE DE CONGO-NIL</span>
131 | 		</div>
132 | 		<div class="col-div-8">
133 | 			<p class="p5">Student</p>
134 | 			<span class="span1">I create website of school that hold all imformation of students and workers .</span>
135 | 		</div>
136 | 		<div class="clearfix"></div>
137 | 		<br>
138 | 		<div class="col-div-4">
139 | 			<p class="p5">2022</p>
140 | 			<span class="span1">UNIVERSITY OF RWANDA</span>
141 | 		</div>
142 | 		<div class="col-div-8">
143 | 			<p class="p5">Student</p>
144 | 			<span class="span1">I created system that help organizations adress business challenges and 
145 |                 meet their needs.</span>
146 | 		</div>
147 | 		
148 | 		<div class="clearfix"></div>
149 | 		<br>
150 | 		<!-- <div class="col-div-4">
151 | 			<p class="p5">2023</p>
152 | 			<span class="span1">Company Name</span>
153 | 		</div>
154 | 		<div class="col-div-8">
155 | 			<p class="p5">Web Designer</p>
156 | 			<span class="span1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
157 | 		</div>
158 | 		<div class="clearfix"></div> -->
159 | 
160 | 		<br>	
161 | 		<h2 class="heading">My Education</h2>
162 | 		<hr class="hr2">
163 | 		<br>
164 | 		<div class="col-div-4">
165 | 			<p class="p5">2018-2021</p>
166 | 			<span class="span1">GS MARIE REINNE DE CONGO-NIL</span>
167 | 		</div>
168 | 		<div class="col-div-8">
169 | 			<p class="p5">Mathematics Economics and computer-science</p>
170 | 			<span class="span1">My web developer career started in secondary school in 2018 at GS Congo-nil.</span>
171 | 		</div>
172 | 		<div class="clearfix"></div>
173 | 		<br>
174 | 		<div class="col-div-4">
175 | 			<p class="p5">2022-2026</p>
176 | 			<span class="span1">UNIVERSITY OF RWANDA</span>
177 | 		</div>
178 | 		<div class="col-div-8">
179 | 			<p class="p5"> Computer-science</p>
180 | 			<span class="span1">I study bachlors of science witH honor of computer science in university of Rwanda .</span>
181 | 		</div>
182 | 		<div class="clearfix"></div>
183 | 	</div>
184 | 	<div class="clearfix"></div>
185 | 
186 | </div>
187 | 
188 | </body>
189 | </html>


--------------------------------------------------------------------------------
/pages/service.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5 |     <link rel="icon" href="../img/fav.png" sizes="32x32" />
  6 |     <title>Responsive Services Section</title>
  7 |     <!-- Font Awesome CDN-->
  8 |     <link
  9 |       rel="stylesheet"
 10 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
 11 |     />
 12 |     <!-- Google Font -->
 13 |     <link
 14 |       href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
 15 |       rel="stylesheet"
 16 |     />
 17 |     <!-- Stylesheet -->
 18 |     <link rel="stylesheet" href="../css/services.css" />
 19 |   </head>
 20 |   <body>
 21 |     <section>
 22 |       <div class="row">
 23 |         <h2 class="section-heading">Our Services</h2>
 24 |       </div>
 25 |       <div class="row">
 26 |         <div class="column">
 27 |           <div class="card">
 28 |             <div class="icon-wrapper">
 29 |               <i class="fas fa-code"></i>
 30 |             </div>
 31 |             <h3>Web developmet</h3>
 32 |             <p>
 33 |              We help personal and big company to develop their 
 34 |              reponsive and morden website ad we have experience in this field.
 35 |             </p>
 36 |           </div>
 37 |         </div>
 38 |         <div class="column">
 39 |           <div class="card">
 40 |             <div class="icon-wrapper">
 41 |               <i class="fas fa-laptop-code"></i>
 42 |             </div>
 43 |             <h3>app development</h3>
 44 |             <p>
 45 |               our passion in to centerlize all everything of our level. 
 46 |                we help to develop many applications of user choice.
 47 |             </p>
 48 |           </div>
 49 |         </div>
 50 |         <div class="column">
 51 |           <div class="card">
 52 |             <div class="icon-wrapper">
 53 |               <i class="fas fa-photo-video"></i>
 54 |             </div>
 55 |             <h3>logo design</h3>
 56 |             <p>
 57 |               personal and company need to have their logo. 
 58 |               we are expert in this field so hiring us if you need it. 
 59 |             </p>
 60 |           </div>
 61 |         </div>
 62 |         <div class="column">
 63 |           <div class="card">
 64 |             <div class="icon-wrapper">
 65 |               <i class="fas fa-pencil"></i>
 66 |             </div>
 67 |             <h3>content writting</h3>
 68 |             <p>
 69 |              we are here to help you to create and write 
 70 |              content of given certain thing.
 71 |             </p>
 72 |           </div>
 73 |         </div>
 74 |         <div class="column">
 75 |           <div class="card">
 76 |             <div class="icon-wrapper">
 77 |               <i class="fas fa-code-branch"></i>
 78 |             </div>
 79 |             <h3>software analyses</h3>
 80 |             <p>
 81 |                
 82 |             </p>we can help you analyse and make report of your 
 83 |             software that can be easy to present to your customer.
 84 |           </div>
 85 |         </div>
 86 |         <div class="column">
 87 |           <div class="card">
 88 |             <div class="icon-wrapper">
 89 |               <i class="fas fa-book-reader"></i>
 90 |             </div>
 91 |             <h3>Software documentation</h3>
 92 |             <p>
 93 |               we can help you to make documentation of 
 94 |               softaware to help user to get information about software.
 95 |             </p>
 96 |           </div>
 97 |         </div>
 98 |       </div>
 99 |     </section>
100 |   </body>
101 | </html>


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