PORTFOLIO/port2.html at master · YASH162/PORTFOLIO · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css">
        </head>
        <style>

 .toplogo {

height : 30%;
width : 30%;
margin-top: 5px;
}
.card:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
body{
   margin: 0;
    padding: 0;
    font-family: "monteserrat";
     background-image:linear-gradient(125deg,red,yellow);
 }


        </style>
          <body>
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                <!-- Brand -->
                <a href="#" class="navbar-brand toplogo">Code
                  <img src="Yash.png" height="28" alt="CoolBrand">

              </a>

                <!-- Links -->
                <ul class="navbar-nav ml-auto">
                  <li class="nav-item">
                    <a class="nav-link" href="#"><b>Certificates</b></a>
                  </li>
                 </ul>
            </nav>
            <section class="pt-4">
                <div class="container">
                    <h2>Skills</h2>
                    <div class="card">
                      <div class="card-body">
                        <img src="java.png" width="100" height="100"/>

                    </div>
                    </div>
                    <br>
                    <div class="card bg-primary text-white">
                      <div class="card-body">
                        <img src="c++.png" width="100" height="100"/>
                      </div>
                    </div>
                    <br>
                    <div class="card bg-success text-white ">
                      <div class="card-body">
                        <img src="c.png" width="100" height="100"/>
                      </div>
                    </div>
                    <br>
                    <div class="card bg-info text-white">

                      <div class="card-body">

                        <img src="css.png" width="100" height="100"/>


                      </div>
                    </div>
                    <br>
                    <div class="card bg-warning text-white">
                      <div class="card-body">
                        <img src="html.png" width="100" height="100"/>
                      </div>
                    </div>


            </section>
            <section class="pt-5 px-5 py-5">
              <div class="container fluid">
                <div class="card">
                  <div class="card-header bg-white">
               <center><img class="rounded-circle img-responsive" src="profile.png" width="200" height="200"/></center>

                     <p class="text-dark p-3"font-family="arial" > Simplicity requires a two-step process. First, we must invest time and energy to discover what stirs us as human beings, what makes our hearts sing, and what brings us joy. Then, we must proceed to create the life that reflects the unique people we truly are. This is the heart and soul of simplicity. </p>
                   </div>
                </div>


              </div>
            </section>

              <!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </body>
</html>