|
|
@@ -2,8 +2,60 @@
|
|
|
|
|
|
</script>
|
|
|
|
|
|
+<form>
|
|
|
+ <input type="text" placeholder="Search Recipes">
|
|
|
|
|
|
+ <button>
|
|
|
+ <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000">
|
|
|
+ <path d="M17 17L21 21" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
|
+ <path d="M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+</form>
|
|
|
|
|
|
<style>
|
|
|
+ form{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 0.5rem;
|
|
|
+ width: min(480px, 90vw);
|
|
|
+ margin: 40vh auto 0;
|
|
|
+ padding: 0.5rem 0.5rem 0.5rem 1.25rem;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 999px;
|
|
|
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
|
|
|
+ }
|
|
|
|
|
|
+ input[type="text"]{
|
|
|
+ flex: 1;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ background: none;
|
|
|
+ font-size: 1rem;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ button{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 2.5rem;
|
|
|
+ height: 2.5rem;
|
|
|
+ background: #000000;
|
|
|
+ border: none;
|
|
|
+ border-radius: 50%;
|
|
|
+ cursor: pointer;
|
|
|
+ flex-shrink: 0;
|
|
|
+ transition: background 0.15s ease, transform 0.1s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ button:hover{
|
|
|
+ background: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ button:active{
|
|
|
+ background: #555555;
|
|
|
+ transform: scale(0.92);
|
|
|
+ }
|
|
|
</style>
|
