ChemShopProject/index.html at main · simsid124/ChemShopProject · 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
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang='en' class=''>
  <head>


    <meta charset='UTF-8'>
    <title>Search Bar Demo</title>
    <style>

        body {
        background-image: url(bje.jpg);
        margin: 200px 30%;
      }

      form {
        background-color: #f0f2f8;
        width: 500px;
        height: 44px;
        border-radius: 25px;
        display:flex;
        flex-direction:row;
        align-items:center;
      }

      input {
        all: unset;
        font: 16px system-ui;
        color: rgb(10, 8, 8);
        height: 100%;
        width: 100%;
        padding: 6px 10px;
      }

      ::placeholder {
        color: rgb(14, 13, 13);
        opacity: 0.7;
      }

      svg {
        color: rgb(10, 9, 9);
        fill: currentColor;
        width: 24px;
        height: 24px;
        padding: 10px;
      }

      button {
        all: unset;
        cursor: pointer;
        width: 44px;
        height: 44px;
      }
      img {
  border-radius: 50%;
  margin-left: 25%;
  margin-right: 40%;

}
.buttons{
  margin-top: -180px;
  margin-left: 580px;
  position:absolute;
}
.login:hover{
  background-color: rgb(182, 182, 193);
  cursor: pointer;
  transition: all 0.7s;
  color: white;
}
.register:hover{
  background-color: rgb(182, 182, 193);
  cursor: pointer;
  transition: all 0.7s;
  color: white;
}
.login,.register{
  /* margin-top: 10px; */
  /* position: absolute; */
  background-color: white;
  width: 120px;
  padding: 5px;
  text-align: center;
  height: 25px;
  border-radius: 5px;
}
    </style>


  </head>


  <body>

<body>
  <div class="buttons">

    <button class="login" >
      <a href='form.html'>
        login</button>
    <button class="register">
    <a href='registration.html'>
          Register
      </button>
  </a>
  </div>
<div class="logo">
  <img src="logo-removebg-preview.png" alt="logo" height="200px" width="200px">
</div>
    <form role="search" id="form">
      <input type="search" id="query" name="q" placeholder="Search..." aria-label="Search through site content">
      <button>
        <svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
      </button>
    </form>
    <script>
      const f = document.getElementById('form');
      const q = document.getElementById('query');
      const google = 'https://www.google.com/search?q=site%3A+';


      function submitted(event) {
        event.preventDefault();
        const url = google + site + '+' + q.value;
        const win = window.open(url, '_blank');
        win.focus();
      }

      f.addEventListener('submit', submitted);
    </script>
  </body>
</html>