JithuMorrison.github.io/hobby.html at main · JithuMorrison/JithuMorrison.github.io · 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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Jithu's web</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <link href="home.css" rel="stylesheet" type="text/css" />
  <link href="https://unpkg.com/swiper@7/swiper-bundle.min.css" rel="stylesheet"/>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    body {
      min-height: 100vh;
      background: url('https://www.pixelstalk.net/wp-content/uploads/2016/08/Free-Photos-Universe.jpg') no-repeat;
      background-size: cover;
      background-position: center;
    }
  </style>
</head>

<body>
  <header class="header">
    <a href="#" class="logo"> <i class="fa fa-shield"></i>Know my interests</a>
    <nav class="navbar">
      <a href="index.html"> Home </a>
      <a href="#Infoaboutme"> About me </a>
      <a href="#footer"> Contact us!! </a>
    </nav>
    <div class="icons">
      <div class="fa fa-bars" id="menu-btn"></div>
      <div class="fa fa-search" id="search-btn"></div>
      <a href="login.html">
      <div class="fa fa-user" id="login-btn"></div>
      </a>
    </div>
    <form class="search-form">
      <input type="search" id="search-box" placeholder="Search here...">
      <label for="search-box" class="fa fa-search"></label>
    </form>
  </header>
  <div class="header"></div>
  <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
  </label>
  <div id="sidebarMenu">
    <ul class="sidebarMenuInner">
      <li>Jithu <span>Web Developer</span></li>
      <li><a href="#" target="_blank">Web dev</a></li>
      <li><a href="#" target="_blank">App dev</a></li>
      <li><a href="#" target="_blank">Game developer</a></li>
      <li><a href="#" target="_blank">YouTuber</a></li>
      <li><a href="#" target="_blank">Student</a></li>
    </ul>
  </div>
  <section></section>
  <section class="Infoaboutme" id="Infoaboutme">
    <h1 class="heading" style="margin-top: 30px; margin-bottom: 70px;">My<span>Hobbys</span></h1>
    <div class="hobby-container">
        <div class="hobby-box">
            <i class="fa-solid fa-paw pushdown"></i>
            <h3>Animals</h3>
            <p>
                I’ve always had a soft spot for animals. Whether it’s playing with pets, learning about wildlife, animals are a big part of what brings me joy and peace.
            </p>
        </div>
        <div class="hobby-box">
            <i class="fa fa-code pushdown"></i>
            <h3>Coding</h3>
            <p>Coding is both my passion and creative outlet. I enjoy building web apps, automating tasks, and exploring new technologies that challenge me to think differently and solve real-world problems.</p>
        </div>
        <div class="hobby-box">
            <i class="fa fa-cubes pushdown"></i>
            <h3>Drawing</h3>
            <p>Art allows me to express what words can't. I love sketching characters, doodling concepts, and occasionally diving into digital illustration when inspiration strikes.</p>
        </div>
    </div>
    </section>
  <section></section>
  <section class="footer" id="footer">
    <div class="box-container">
      <div class="box">
        <h3>Follow us on<i class="fa fa-youtube-play"></i></h3>
        <p>for info on sentiment analysis</p>
        <div class="share">
          <a href="https://youtube.com/@jackorganisation?si=-1CPKt2egdeQ8oPh" class="fa fa-youtube-play btn"></a>
          <a href="https://github.com/JithuMorrison" class="fa fa-github btn"></a>
          <a href="https://www.instagram.com/jithumorrison/" class="fa fa-instagram btn"></a>
          <a href="https://www.linkedin.com/in/jithu-morrison-s/" class="fa fa-linkedin btn"></a>
        </div>
      </div>
      <div class="box">
        <h3>Concact Info</h3>
        <a href="#" class="links"><i class="fa fa-clock-o"></i>Available</a>
        <a href="#" class="links"><i class="fa fa-calendar"></i>Mon - Fri: 9 AM - 6 PM IST</a>
        <a href="#" class="links"><i class="fa fa-envelope"></i>jithus2004@gmail.com</a>
        <a href="#" class="links"><i class="fa fa-envelope"></i>jithumorrison2210564@ssn.edu.in</a>
        <a href="#" class="links"><i class="fa fa-map-marker"></i>TN, India</a>
      </div>
    </div>
  </section>
  <script src="script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
</body>

</html>