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 <!--
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
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
82
83
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
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
162
163
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
219
220
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
251
252
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
298
299
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
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
404
405
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
454
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 <!--
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 <!--
669
670 <!--
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 <!--
684 <!--
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 <!--
729 <!--
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 <!--
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 <!--
860 <!--
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.
Submit an article or tip