Click here to Skip to main content
15,076,130 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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="https://unpkg.com/aos@next/dist/aos.css" />
  8      <link rel="stylesheet" href="css/style.css">
  9      <link href="https://fonts.googleapis.com/css2?family=Doppio+One&display=swap" rel="stylesheet">
 10      <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
 11      <link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
 12      <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> -->
 13      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
 14  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
 15      <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
 16      <title>Portfolio</title>
 17  
 18      <style>
 19          *{
 20      margin: 0;
 21      padding: 0;
 22      box-sizing: border-box;
 23      font-family: 'Doppio One', sans-serif;
 24  }
 25  
 26  body{
 27    overflow-x: hidden;
 28  }
 29  
 30  
 31  html{
 32     font-size: 62.5%;
 33    scroll-behavior: smooth;
 34    
 35  }
 36  Html,body{
 37      Height:100%;
 38     }
 39    
 40  
 41  .clearfix::after {
 42      content: "";
 43      clear: both;
 44      display: table;
 45    }
 46  
 47  /* navigation starts */
 48  
 49  nav ul{
 50      display: flex;
 51      justify-content: space-around;
 52      background-color: #444349;
 53      padding: 3rem 0;
 54      border-bottom: 0.9rem solid  gray;
 55  }
 56  
 57  li{
 58      list-style: none;
 59      font-size: 2rem;
 60  
 61  }
 62  
 63  li a{
 64    transition: 0.5s;
 65  }
 66  
 67  
 68  li a:hover{
 69    color: #0dbae0;
 70    transition: 0.5s;
 71  }
 72  
 73  a{
 74      color: #fff;
 75      text-decoration: none;
 76      font-size:2.5rem;
 77  
 78  }
 79  
 80  
 81  /*navigation ends*/
 82  
 83  /*intro starts*/
 84  .intro{
 85      background-image: url("../images/baack1.png");
 86      width: 100%;
 87      height: 100%;
 88      background-size: cover;
 89      border-bottom: 0.9rem solid  gray;
 90  
 91  }
 92  
 93  
 94  .frame-image{
 95      width: 30%;
 96      border-radius: 50%;
 97      margin-left: 24%;
 98     border: 2px solid #FFF;
 99      
100  }
101  
102  .picture{
103      width: 80%;
104      margin: 0 auto;
105      padding: 7rem 0 6rem 0;
106      display: flex;
107  }
108  
109  .intro h2{
110  width: 35%;
111  padding: 0 1rem;
112  line-height: 4rem;
113  font-size: 3rem;
114  text-align: center;
115  font-family: 'Roboto Mono', monospace;
116  }
117  
118  /* intro ends */
119  
120  .inner{
121      max-width: 1200px;
122      margin: 8rem auto;
123      display: flex;
124      justify-content:space-between;
125  
126  }
127  
128  .main-point{
129     color: #409fbf;
130  }
131  
132  .about-me{
133    overflow-x: hidden;
134  }
135  .about-me p{
136      font-size: 1.8rem;
137      text-align: center;
138      line-height: 1.9rem;
139      color: #444349;
140      font-family: 'Kosugi Maru', sans-serif;
141      line-height: 3.2rem;
142  
143  }
144  
145  .about-me .int{
146      width: 40%;
147      border-top: .5rem solid #bcbcbc;
148      padding-top: 2rem;
149  }
150  
151  
152  .about-me .hobby{
153      width: 40%;
154      border-top: .5rem solid #bcbcbc;
155      padding-top: 2rem;
156      margin-left: 15vw;
157  }
158  
159  
160  
161  /*intro ends*/
162  
163  /*skills*/
164  
165  .skills{
166    width: 100%;
167    max-width: 600px;
168    padding: 0 20px;
169  }
170  
171  .skill-name{
172    font-size: 18px;
173    font-weight: 700;
174    text-transform: uppercase;
175    margin: 20px 0;
176  }
177  
178  .skill-bar{
179    height: 20px;
180    background: #cacaca;
181    border-radius: 8px;
182  }
183  
184  .skill-per{
185    height: 20px;
186    background-color: #0fbcf9;
187    border-radius: 8px;
188    width: 0;
189    transition: 1s linear;
190    position: relative;
191  }
192  
193  .skill-per::before{
194    content: attr(per);
195    position: absolute;
196    padding: 4px 6px;
197    background-color: #000;
198    color: #fff;
199    font-size: 12px;
200    border-radius: 4px;
201    top: -35px;
202    right: 0;
203    transform: translateX(50%);
204  }
205  
206  .skill-per::after{
207    content: '';
208    position: absolute;
209    width: 10px;
210    height: 10px;
211    background-color: #000;
212    top: -16px;
213    right: 0;
214    transform: translateX(50%) rotate(45deg);
215    border-radius: 2px;
216  }
217  
218  /*skill ends*/
219  
220  /*projects starts*/
221      .projects{
222          width: 100%;
223          background-color: #444349;
224          text-align: center;
225          border-top: 1rem solid #bcbcbc;
226          border-bottom: 1rem solid #bcbcbc;
227          padding-bottom: 8rem;
228          overflow-x: hidden;
229      }
230  
231      .projects h1{
232          color: #409fbf;
233          font-size:3.3rem;
234          padding: 3.5rem 0;
235      }
236  
237      .projectGrid{
238        display: grid;
239        grid-template-columns: repeat(2,minmax(0,1fr));
240        margin: 2% 6.5%;
241        grid-gap: 5rem;
242  
243  
244      }
245      .projectGrid div{
246        position: relative;
247      }
248  
249      .projects img{
250          /* float: left; */
251          /* width: 20%; */
252          /* height: 50%; */
253          width: 60%;
254          margin: auto;
255          border: 0.8rem solid #bcbcbc ;
256      }
257  
258      .hover{
259        position: absolute !important;
260        background: rgba(255,255,255,0.7);
261        width: 60%;
262        height : 100%;
263        top : 0;
264        left : 20%;
265        margin : auto;
266        z-index: 3;
267        opacity: 0;
268        transition: 0.5s;
269        display: flex;
270        flex-flow: column;
271        justify-content: center;
272        align-items: center;
273      }
274  
275      .hover:hover{
276        opacity: 1;
277      }
278  
279      .hover p{
280        margin-bottom: 1rem;
281        font-size: 2rem;
282        color : white;
283      }
284  
285      .hover p span{
286        color :  #409FBF;
287      }
288  
289      .hover-button{
290        background: #409FBF;
291        padding : 16px;
292        color : white;
293        border-radius : 8px;
294        font-size: 2rem;
295      }
296  
297  /*projects ends*/
298  
299  /*contact us starts*/
300  
301  .contact{
302      text-align: center;
303      width: 50%;
304      margin: 0 auto;
305      overflow: auto;
306  }
307  
308  .contact .form{
309    display: flex;
310  }
311  
312  form{
313      width: 75%;
314      background-color: #444349;
315      /* float: left; */
316      padding: 4rem 0;
317      border-radius: 3vh;
318      box-shadow: .5rem .5rem .2rem .3rem #444349;
319    
320  }
321  
322  .error{
323    color: red;
324    font-size: 1.5rem;
325    display: none;
326  }
327  label{
328      font-size: 2rem;
329      color: #bcbcbc;
330      display: block;
331      text-align: left;
332      margin-left: 4.5%;
333  }
334  
335  .inner-content{
336      padding-top: 5rem;
337  }
338  
339  
340  .inner-content h1{
341      color: #409fbf;
342      font-size:3.3rem;
343  }
344  
345  .inner-content h3{
346      color: #444349;
347      font-size: 2.8rem;
348      padding-top: 0.5rem;
349      padding-bottom: 8rem;
350  }
351  
352  input[type=text]{
353      width: 90%;
354      padding: 12px 20px;
355      margin: 8px 0;
356      border: 1px solid #ccc;
357      border-radius: 4px;
358    }
359  
360    input[type=submit]{
361        background-color: #409fbf;
362        padding: 1rem 5rem;
363        font-size: 2rem;
364        color: #fff;
365        text-align: left;
366        display: block;
367        margin-left: 4.5%;
368        border-radius: 8rem;
369        cursor: pointer;
370  
371    }
372  
373    textarea {
374      width: 90%;
375      padding: 12px 20px;
376      margin: 8px 0;
377      display: inline-block;
378      border: 1px solid #ccc;
379      border-radius: 4px;
380    }
381  
382    .social-media{
383        width: 20%;
384    }
385  
386    .social-media .fab , .fas{
387          font-size: 7rem;
388          margin-left: 50%;
389          border-radius: 100%;
390          color: #444349;
391          text-align: center;
392          margin-top: 2rem;
393  
394    }
395  
396    .fab:hover,.fas:hover{
397        opacity: .5;
398        cursor: pointer;
399        transform: rotate(20deg);
400      
401    }
402  
403  /* contact us ends */
404  
405  /*arrow link*/
406  
407  .arrow{
408      text-align: center;
409      margin-top: 4rem;
410  }
411  .arrow .fa {
412      font-size: 6rem;
413  }
414  
415  .arrow-one{
416      position: relative;
417      top: 6rem;
418      animation: mymove 3s;
419      animation-iteration-count: infinite;
420      animation-duration: 2s;
421  }
422  @keyframes mymove {
423    from {top: 0px;}
424    to {top: 100px;}
425  }
426  
427  
428  .arrow-two .fa{
429      color: #409fbf;
430      font-size: ;
431  }
432  
433  .arrow-three{
434      position: relative;
435      top: 4rem;
436  }
437  .arrow-three .fa{
438      color: #FFF;
439  }
440  .arrow-four .fa{
441      color: #409fbf;
442  }
443  .UP-SIGN {
444    text-align: left;
445    font-size: 3rem;
446    margin-left: 3rem;
447  }
448  
449  .UP-SIGN a{
450      color: #409fbf;
451  }
452  
453  /*arrow link ends*/
454  /*footer starts*/
455  footer{
456      width: 100%;
457      padding: 3rem 0;
458      background-color: #444349;
459      text-align: right;
460      margin-top: 3rem;
461  }
462  
463  footer h1{
464      margin-right: 4%;
465      font-size: 3.5rem;
466      color: #bcbcbc;
467  }
468  
469  
470  
471  
472  
473  
474  @media (max-width : 1000px) {
475  
476  
477    .intro{
478      background-position: center;
479     
480    }
481  
482    .projectGrid{
483        grid-template-columns: repeat(1,minmax(0,1fr));
484    }
485  
486    .inner{
487      flex-direction: column;
488    }
489  
490    .inner article{
491      margin : auto;
492    }
493    .about-me .hobby{
494      margin: auto;
495      margin-top: 15rem;
496    }
497  
498    .contact{
499      width : 60%
500    }
501  
502    form{
503      margin : auto;
504      
505    }
506  
507    .contact .form{
508      flex-direction: column;
509    }
510  
511    .social-media{
512      display: flex;
513      margin-left:2vw;
514    }
515  
516    .social-media .fab , .fas{
517      margin-left: 12vw;
518  }
519  }
520  
521  
522  
523  @media (max-width : 800px) {
524  
525    .picture{
526      width : 95%;
527      display: flex;
528      flex-direction: column;
529    }
530  
531    .frame-image{
532      width: 50%;
533      margin:0 auto;
534    }
535      .intro{
536    background: none;
537      }
538  
539    .intro h2{
540      font-size: 3rem;
541      margin:3rem auto;
542      width:80%;
543    }
544  
545    .contact{
546      width : 80%;
547      overflow: hidden;
548    }
549  
550   
551  
552  }
553  
554  
555  @media (max-width : 600px ) {
556  
557  
558    .picture{
559      width : 95%;
560      display: flex;
561      flex-direction: column;
562    }
563  
564    .frame-image{
565      width: 70%;
566      margin-left: 15%;
567    }
568  
569    
570  .intro{
571    background: none;
572  
573  }
574    .intro h2{
575      font-size: 2.5rem;
576      margin: 0 auto;
577      width: 100%;
578      margin-top: 6rem;
579    }
580  
581    .arrow-one{
582    display: none;
583  }
584  
585  
586  
587    .contact{
588      width : 100%;
589    }
590  
591    .projectGrid{
592      margin: 2% 0;
593    }
594  
595    .social-media{
596      margin-left:2vw;
597    }
598  
599    .social-media .fab , .fas{
600      font-size: 5.5rem;
601  }
602  }
603  
604  
605  @media (max-width:500px) {
606  
607  
608    .picture{
609      width : 100%;
610    }
611  
612  
613    .about-me .int{
614      width : 80%;
615    }
616  
617    .about-me .hobby{
618      width : 80%;
619    }
620    
621  
622    .intro{
623      background: none;
624    
625    }
626  
627  
628    .projects img{
629      width: 80%;
630    }
631  
632    .hover{
633      width : 80%;
634      left : 10%;
635    }
636  
637  
638  }
639  @media (max-width : 380px) {
640    form{
641      width : 90%;
642      border-radius: 16px;
643    }
644    .social-media .fab , .fas{
645      font-size: 3.5rem;
646  }
647  }
648  
649      </style>
650  </head>
651  <body>
652      <?php 
653      include_once("php/index.php")
654  ?>
655      <!-- navigation start -->
656      <nav>
657          <ul class="clearfix">
658              <li><a href="#content-d">About</a></li>
659              <li><a href="#project-d">Project</a></li>
660              <li><a href="#contact-d">Contact</a></li>
661              <li></li>
662          </ul>
663          <div class="start-up,animation"  >
664  
665          </div>
666      </nav>
667  
668  <!-- navigation ends -->
669  
670  <!-- intro starts -->
671  
672  <section class="intro" id="banner-u">
673          <div class="picture clearfix">
674      <img src="images/fraame.jpg" class="frame-image " alt="">
675      <h2 data-aos="fade-up">Hello!
676    
677          I'm a Front-End Web Developer.</h2>
678          </div>
679          <div class="arrow arrow-one"><a href="#content-d"></a></div>
680  </section>
681  
682  
683  <!-- intro ends -->
684  <!-- project starts -->
685  
686  <section class="projects clearfix" id="project-d">
687    <h1>PROJECTS</h1>
688    <div class="projectGrid">
689      <div class=""   data-aos="flip-down" >
690  
691        <img src="images/hielo.png" alt="#">
692        <div class="hover">
693          <p><span>Made using</span> Html5, Css3 , Bootstrap </p>
694          <a href="sendingFiles/heilo/index.html" class="hover-button">Click Here</a>
695        </div>
696      </div>
697      <div class=""  data-aos="flip-down"  >
698  
699        <img src="images/pillo.png" alt="#">
700        <div class="hover" >
701          <p><span>Made using</span> <br><br><br> Sass, Html5, Css3, media query, jquery</p>
702          <a href="sendingFiles/pullo/index.html" class="hover-button">Click Here</a>
703        </div>
704      </div>
705      <div class=""   data-aos="flip-down">
706  
707        <img src="images/pomato.png" alt="#">
708        <div class="hover">
709          <p><span>Made using</span>  Sass,Html5, Css3 , Media query</p>
710          <a href="sendingFiles/pomato/index.html" class="hover-button">Click Here</a>
711        </div>
712      </div>
713      <div class=""  data-aos="flip-down">
714  
715        <img src="images/prism.png" alt="#">
716        <div class="hover" >
717          <p><span>Made using</span> Html5, Css3 , Media query , Bootstrap</p>
718          <a href="sendingFiles/Prism/index.html" class="hover-button">Click Here</a>
719        </div>
720      </div>
721  
722  
723  
724  </div>
725    <div class="arrow arrow-three"><a href="#contact-d"></a><a href="#banner-u"><span class="fa fa-angle-double-up content-up"></a></div>
726  </section>
727  
728  <!-- project ends -->
729  <!-- about me -->
730  
731  <section class="about-me inner clearfix" id="content-d">
732      <article class="int" data-aos="fade-up">
733          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, expedita facilis! Aliquam maxime sapiente optio architecto, esse, commodi id dolor tempore omnis quae eaque? A eum cumque eius ratione harum.<br><br>
734  <br><br>
735            
736  
737          </p>
738  
739          
740  
741  
742      </article>
743      <article class="hobby" data-aos="flip-left">
744              <div class="skills">
745                  <div class="skill" >
746  
747                      <div class="skill-name">HTML</div>
748                      <div class="skill-bar">
749                          <div class="skill-per" per="95"></div>
750                      </div>
751                  </div>
752  
753                  <div class="skill" >
754                      <div class="skill-name">CSS</div>
755                      <div class="skill-bar">
756                          <div class="skill-per" per="95"></div>
757                      </div>
758                  </div>
759  
760                  <div class="skill" >
761                      <div class="skill-name">Javascript</div>
762                      <div class="skill-bar">
763                          <div class="skill-per" per="50"></div>
764                      </div>
765                  </div>
766  
767                  <div class="skill" >
768                      <div class="skill-name">Jquery</div>
769                      <div class="skill-bar">
770                          <div class="skill-per" per="80" ></div>
771                      </div>
772                  </div>
773  
774                  <div class="skill" >
775                      <div class="skill-name">Sass</div>
776                      <div class="skill-bar">
777                          <div class="skill-per" per="95"></div>
778                      </div>
779                  </div>
780  
781                  <div class="skill" >
782                      <div class="skill-name">Bootstrap</div>
783                      <div class="skill-bar">
784                          <div class="skill-per" per="90"></div>
785                      </div>
786                  </div>
787  
788                  <div class="skill" >
789                      <div class="skill-name">C</div>
790                      <div class="skill-bar">
791                          <div class="skill-per" per="60"></div>
792                      </div>
793                  </div>
794  
795                  <div class="skill" >
796                      <div class="skill-name">Java</div>
797                      <div class="skill-bar">
798                          <div class="skill-per" per="60"></div>
799                      </div>
800                  </div>
801  
802                  <div class="skill" >
803                      <div class="skill-name">PHP-Server side</div>
804                      <div class="skill-bar">
805                          <div class="skill-per" per="40"></div>
806                      </div>
807                  </div>
808  
809                  <div class="skill">
810                      <div class="skill-name">Adobe photoshop</div>
811                      <div class="skill-bar">
812                          <div class="skill-per" per="70"></div>
813                      </div>
814                  </div>
815              </div>
816  
817  
818          </article>
819  
820  
821  
822  
823  </section>
824  <div class="arrow arrow-two"><a href="#banner-u"></a></div>
825  
826  
827  <!-- contact form starts -->
828  <section class="contact" id="contact-d" data-aos="flip-down">
829      <div class="inner-content">
830          <h1>CONTACT ME</h1>
831          <h3>You can write me a message or find me on socialmedia.</h3>
832      </div>
833      <div class="form">
834  
835      <form onsubmit="return validateForm();">
836          <label for="name">Name</label>
837          <input type="text" id="fname" name="name" placeholder="Your name.."><br>
838          <p class="error" id="errorName">Please enter a name</p>
839          <label for="lname">Email</label>
840          <input type="text" id="lname" name="Email" placeholder="Email"><br>
841          <p class="error" id="errorEmail">Please enter a valid Mail</p>
842          <label for="name">Message</label>
843         <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea> <br>
844  
845         <input type="submit" value="Send">
846        </form>
847  
848        <section class="social-media clearfix">
849          <a href = "mailto: "> </a>
850          
851          <a href="https://" target="_blank"></a>
852           <a href="https://" target="_blank"></a>
853  
854        </section>
855      </div>
856      </section>
857      <div class="arrow  arrow-four"><a href="#project-d"></a></div>
858  
859  <!-- contact form ends -->
860  <!-- footer starts -->
861  
862  <footer>
863      <div class="UP-SIGN"><a href="#banner-u">UP</a></div>
864      <h1>@BHATT</h1>
865  </footer>
866  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
867  <script src="js/main.js" charset="utf-8"></script>
868  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
869  <script>
870    AOS.init(
871        {
872          offset: 300,
873          duration: 1000,
874        }
875    );
876  </script>
877  
878  <script>
879      function validateForm(){
880    let nameErr = document.getElementById('errorName');
881    let emailErr = document.getElementById('errorEmail');
882    let flag=0;
883    if(document.getElementById('fname').value.length == 0){
884      nameErr.style.display = 'block'
885      flag = 1
886    }
887    else{
888      nameErr.style.display = 'none'
889    }
890  
891    let email = document.getElementById('lname').value;
892    if(!validateEmail(email)){
893      emailErr.style.display="block";
894      flag =1;
895    }
896    else{
897      emailErr.style.display="none";
898    }
899    console.log(flag);
900    if(flag == 1 ){
901      return false;
902    }
903    else{
904      return true;
905    }
906  
907  }
908  
909  
910  
911  function validateEmail(email) {
912    const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
913    console.log(re.test(email));
914    return re.test(email);
915  }
916  
917  
918  $('.skill-per').each(function(){
919    var $this = $(this);
920    var per = $this.attr('per');
921    $this.css("width",per+'%');
922    $({animatedValue: 0}).animate({animatedValue: per},{
923      duration: 1000,
924      step: function(){
925        $this.attr('per', Math.floor(this.animatedValue) + '%');
926      },
927      complete: function(){
928        $this.attr('per', Math.floor(this.animatedValue) + '%');
929      }
930    });
931  });
932  
933  
934  
935  </script>
936    
937  </body>
938  </html>


What I have tried:

I have tried overflow-x:hidden but it's not working.
Posted
Updated 24-May-21 0:46am
v2
Comments
Richard Deeming 24-May-21 6:47am
   
"It's not working" tells us nothing. You need to use your browser's developer tools to inspect the elements on your page to see what the problem is.

Dumping 938 lines on code on us an expecting us to debug it for you will not end well.
NB 2021 24-May-21 7:10am
   
i have tried everything but i dont know where its coming from

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900