day 3 excersize completed, small little button

2 years ago · 0c335c5e67
parent 657670e78d
commit 0c335c5e67
2 changed files with 116 additions and 16 deletions
--- a/Solutions/Day-03/day3/public/index.html
+++ b/Solutions/Day-03/day3/public/index.html
@ -24,6 +24,73 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
+
+    <Style>
+      .rounded{
+      border-radius: 0.5vw;
+      }
+      .text{
+        margin: 1vw; 
+      }
+    
+      .outerbox{
+        margin: auto;
+      width: 50%;
+      text-align: center;
+      display: "flex";
+      justify-content:'center';
+      }
+      .input{
+        border:none;
+        outline:none;
+        display:inline-block;
+        height:34px;
+        vertical-align:middle;
+        position:relative;
+        bottom:14px;
+        right:9px;
+        border-radius:22px;
+        width:220px;
+        box-sizing:border-box;
+        padding:0 18px;
+        margin: 1.5vw 1vw 1vw 1vw; 
+      }
+      .button-9 {
+        appearance: button;
+        backface-visibility: hidden;
+        background-color: #bd7406;
+        border-radius: 6px;
+        border-width: 0;
+        box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
+        box-sizing: border-box;
+        color: #fff;
+        cursor: pointer;
+        font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
+        font-size: 100%;
+        height: 44px;
+        line-height: 1.15;
+        margin: 0 0 1vw 0;
+        outline: none;
+        overflow: hidden;
+        padding: 0 25px;
+        position: relative;
+        text-align: center;
+        text-transform: none;
+        transform: translateZ(0);
+        transition: all .2s,box-shadow .08s ease-in;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+      }
+
+      .button-9:disabled {
+        cursor: default;
+      }
+
+      .button-9:focus {
+        box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
+      }
+    </Style>
    <title>Day 0-3 React App</title>
  </head>
  <body>
--- a/Solutions/Day-03/day3/src/index.js
+++ b/Solutions/Day-03/day3/src/index.js
@ -1,26 +1,57 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import cute from './images/cute.png';

-const header = (
-  <header>
-    <h1>Welcome to 30 Days Of React</h1>
-    <h2>Getting Started React</h2>
-    <h3>JavaScript Library</h3>
-  </header>
-)
+// const header = (
+//   <header>
+//     <h1>Welcome to 30 Days Of React</h1>
+//     <h2>Getting Started React</h2>
+//     <h3>JavaScript Library</h3>
+//   </header>
+// )
+


 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
  <React.StrictMode>
-    <div style = {{display: "flex", justifyContent:'center', height: 'auto'}}> 
-      <header>
-        {header}
-    </header>
+    <div className = 'rounded outerbox' style = {{background: 'lightblue'}}>
+
+      <h1 className='text'>
+        Subscribe
+      </h1>
+
+      <p className='text'>  
+        Sign up with your email address to recieve news and updates 
+      </p>
+
+      <div>
+
+      <input 
+        className = 'rounded input' 
+        type = "text" 
+        id="firstname" 
+        name="firstname" 
+        placeholder='First Name'
+      />
+      <input 
+        className = 'rounded input' 
+        type = "text" 
+        id="lastname" 
+        name="lastname" 
+        placeholder='Last Name'
+      />
+      <input 
+        className = 'rounded input' 
+        type = "text" 
+        id="email" 
+        name="email" 
+        placeholder='Email'
+      />
      </div>
-  <div style = {{display: "flex", justifyContent:'center', height: 'auto'}}>
-  <img src={cute} alt='Cute Bunny!'></img>
+
+      <button className='button-9'>
+        Subscribe
+      </button>
    </div>    
  </React.StrictMode>
 );
@ -28,3 +59,5 @@ root.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+
+