Dimeji Pamilerin
Coding the Frontend of Login Page using HTML/CSS

Everything started like a journey. The HNG Internship starts with a challenge tagged ‘task’. I belong to the Frontend/Backend/Design Task. I created a team with a friend I met at HNG. The journey has been Awesome and filled with so many things to learn...

Dimeji Pamilerin
Coding the Frontend of Login Page using HTML/CSS

Everything started like a journey. The HNG Internship starts with a challenge tagged ‘task’. I belong to the Frontend/Backend/Design Task. I created a team with a friend I met at HNG. The journey has been Awesome and filled with so many things to learn...

Dimeji Pamilerin
Technology, Website, UX UI, HTML, CSS, Frontend
Coding the Frontend of Login Page using HTML/CSS

Everything started like a journey. The HNG Internship starts with a challenge tagged ‘task’. I belong to the Frontend/Backend/Design Task. I created a team with a friend I met at HNG. The journey has been Awesome and filled with so many things to learn. Some of the task and how I achieved it, I will share some insight: **Designing the UI for the Login Page** This was done with Adobe XD and Figma. Team AWOLOWO; my team first collaborate on the UI, user interface for the login page, two member came up with two UI, the team voted for one and also recommend we integrate features in the two UI. This serves as a guide throughout the project. In fact, it made it all easy for everyone; frontend and the backend. ![](/storage/1224/images/img-m34ih2m2pn.png) **Coding the UI Design** The team divided the task to be done. I was to code the UI Design using HTML/CSS. While other frontend team member plan to use Vue.js and other framework. The backend deals with basic authentication of the Login Page **Using HTML/CSS to code the UI Design** So many things to learn and talk about. At this moment, I think I can call myself _CSS expert;_ because exploring articles, videos and putting it to test and also seeing the expected result. Its amazing..E.g **Using Google Font API** The UI stated Montserrat as the font to be used. I got one on googlefonts.com _How to use:_ Put this CDN in your head tag <link href  ="[https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap](https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap)" rel="stylesheet"> And put this in your CSS file, where you want it to be applied body {            font-family: 'Montserrat', sans-serif;            } **_How to use transparent linear gradient on background image_** header {            background-image: linear-gradient(to right, rgba(9, 209, 216, 0.52), rgba(16, 188, 114, 0.73)), url('images/bg.jpg');            background-size: cover;            background-repeat: no-repeat;            width: 100%;            height: 100%;            position: absolute;            }           **_Using Flex, Inline-flex, Block and Inline-block._** These are all display properties in cascading style sheet (CSS) Guide on how to use [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) .wrapper {          margin: 10px;          display: flex;          justify-content: center; } **_Styling a button_** This is a simple button styling I use during the project button {          width: 60%;          border-radius: 30px;          font-size: 18px;          background-color: #06C695;          color: #fff;          font-weight: bold;          outline: 0px;          border: 0px;          padding: 15px;          cursor: pointer; } **The End Result** ![](/storage/1224/images/img-6hv89g27m1.png) _The question is, does it look exactly like the UI, almost like the UI? For every phase of the challenge, I got to learn so many things and still learning_ Finally, I look forward to learning other programming language, framework or libraries used in achieving this same frontend task. Thanks to all mentors, HNG and all the other sponsors for the opportunity. TEAM AWOLOWO, we are definitely going to the final stage! Check out the Whole code project index.html <!DOCTYPE html> <!DOCTYPE html> <html> <head> <title>Login Page- Team Awolowo</title> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap" rel="stylesheet"> </head> <body>  <header>   <div class="logo">   <img src="./images/logo.png" alt="Team Awolowo">   </div>   <div class="wrapper"> <div class="form-container"> <div class="form-header"> <span id="signin">SIGN IN</span> <span id="signup">SIGN UP</span> </div> <div class="other-signin-option"> <span class="fb"> <img src="images/fbicon.png"> </span> <span class="gplus"> <img src="images/gicon.png"> </span> </div> <div class="signintext"> <span id="text">or you can use your email:</span> </div> <form class="loginform"> <div class="input-container"> <span><img src="images/email.png" width="20px"></span> <input type="email" name="email" placeholder="Email address" required="">   </div>   <div class="input-container"> <span><img src="images/pass.png" width="20px"></span> <input type="password" name="pass" placeholder="\*\*\*\*\*\*\*\*" required="Enter password!"> </div> <p>forgot password?</p> <p><button type="submit" value="SIGN IN">SIGN IN</button></p> </form> <div class="signin-footer"> <p>Don't have an account? <span>Sign Up</span></p> </div> </div> </div>  </header> </body> </html> style.css body { font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; } header { background-image: linear-gradient(to right, rgba(9, 209, 216, 0.52), rgba(16, 188, 114, 0.73)), url('images/bg.jpg'); background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; position: absolute; } .logo img { width: 150px; margin: 20px 20px 50px 20px; } .wrapper { margin: 10px; display: flex; justify-content: center; } .form-container { width: 500px; height: 480px; background-color: #fff; box-sizing: border-box; box-shadow: 5px 5px 50px #1e4c328c; border-radius: 37px; } .form-header { margin: 20px; text-align: center; } .form-header span { padding: 5px 35px;   color: #06C695;   font-size: 20px;   font-weight: bolder; } #signin { border-bottom: 2px solid #06C695; } .other-signin-option { text-align: center; padding: 30px 0 0 0; } .other-signin-option span { padding: 10px; } .signintext { text-align: center; color: #707070; margin: 20px; } form { text-align: center; } form .input-container { display: block; justify-content: center; display: flex;   width: 100%; } form p { font-size: 14px; } input { font-size: 16px; color: #707070; font-weight: bold; outline: none; margin: 0px 0px 10px 0px;   padding: 10px 0px 10px 15px; border: 0; border-bottom: 1px solid #06C695; transition: border 0.4s ease-in; } input::-webkit-input-placeholder { color: #C7C7C7; } input:focus { border-bottom: 4px solid #06C695; transition: border 0.36s ease-in; } button { width: 60%; border-radius: 30px; font-size: 18px; background-color: #06C695; color: #fff; font-weight: bold; outline: 0px; border: 0px; padding: 15px; cursor: pointer; } button:hover { transition: all 0.36s ease-in; opacity: 0.8; } .signin-footer { text-align: center; font-size: 14px; } .signin-footer p span { color: #06C695; font-weight: bold; } I am hoping you can make it better, or use for any for any of your personal project, not HNG task o

Dimeji Pamilerin
Technology, Website, UX UI, HTML, CSS, Frontend
Coding the Frontend of Login Page using HTML/CSS

Everything started like a journey. The HNG Internship starts with a challenge tagged ‘task’. I belong to the Frontend/Backend/Design Task. I created a team with a friend I met at HNG. The journey has been Awesome and filled with so many things to learn. Some of the task and how I achieved it, I will share some insight: **Designing the UI for the Login Page** This was done with Adobe XD and Figma. Team AWOLOWO; my team first collaborate on the UI, user interface for the login page, two member came up with two UI, the team voted for one and also recommend we integrate features in the two UI. This serves as a guide throughout the project. In fact, it made it all easy for everyone; frontend and the backend. ![](/storage/1224/images/img-m34ih2m2pn.png) **Coding the UI Design** The team divided the task to be done. I was to code the UI Design using HTML/CSS. While other frontend team member plan to use Vue.js and other framework. The backend deals with basic authentication of the Login Page **Using HTML/CSS to code the UI Design** So many things to learn and talk about. At this moment, I think I can call myself _CSS expert;_ because exploring articles, videos and putting it to test and also seeing the expected result. Its amazing..E.g **Using Google Font API** The UI stated Montserrat as the font to be used. I got one on googlefonts.com _How to use:_ Put this CDN in your head tag <link href  ="[https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap](https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap)" rel="stylesheet"> And put this in your CSS file, where you want it to be applied body {            font-family: 'Montserrat', sans-serif;            } **_How to use transparent linear gradient on background image_** header {            background-image: linear-gradient(to right, rgba(9, 209, 216, 0.52), rgba(16, 188, 114, 0.73)), url('images/bg.jpg');            background-size: cover;            background-repeat: no-repeat;            width: 100%;            height: 100%;            position: absolute;            }           **_Using Flex, Inline-flex, Block and Inline-block._** These are all display properties in cascading style sheet (CSS) Guide on how to use [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) .wrapper {          margin: 10px;          display: flex;          justify-content: center; } **_Styling a button_** This is a simple button styling I use during the project button {          width: 60%;          border-radius: 30px;          font-size: 18px;          background-color: #06C695;          color: #fff;          font-weight: bold;          outline: 0px;          border: 0px;          padding: 15px;          cursor: pointer; } **The End Result** ![](/storage/1224/images/img-6hv89g27m1.png) _The question is, does it look exactly like the UI, almost like the UI? For every phase of the challenge, I got to learn so many things and still learning_ Finally, I look forward to learning other programming language, framework or libraries used in achieving this same frontend task. Thanks to all mentors, HNG and all the other sponsors for the opportunity. TEAM AWOLOWO, we are definitely going to the final stage! Check out the Whole code project index.html <!DOCTYPE html> <!DOCTYPE html> <html> <head> <title>Login Page- Team Awolowo</title> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap" rel="stylesheet"> </head> <body>  <header>   <div class="logo">   <img src="./images/logo.png" alt="Team Awolowo">   </div>   <div class="wrapper"> <div class="form-container"> <div class="form-header"> <span id="signin">SIGN IN</span> <span id="signup">SIGN UP</span> </div> <div class="other-signin-option"> <span class="fb"> <img src="images/fbicon.png"> </span> <span class="gplus"> <img src="images/gicon.png"> </span> </div> <div class="signintext"> <span id="text">or you can use your email:</span> </div> <form class="loginform"> <div class="input-container"> <span><img src="images/email.png" width="20px"></span> <input type="email" name="email" placeholder="Email address" required="">   </div>   <div class="input-container"> <span><img src="images/pass.png" width="20px"></span> <input type="password" name="pass" placeholder="\*\*\*\*\*\*\*\*" required="Enter password!"> </div> <p>forgot password?</p> <p><button type="submit" value="SIGN IN">SIGN IN</button></p> </form> <div class="signin-footer"> <p>Don't have an account? <span>Sign Up</span></p> </div> </div> </div>  </header> </body> </html> style.css body { font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; } header { background-image: linear-gradient(to right, rgba(9, 209, 216, 0.52), rgba(16, 188, 114, 0.73)), url('images/bg.jpg'); background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; position: absolute; } .logo img { width: 150px; margin: 20px 20px 50px 20px; } .wrapper { margin: 10px; display: flex; justify-content: center; } .form-container { width: 500px; height: 480px; background-color: #fff; box-sizing: border-box; box-shadow: 5px 5px 50px #1e4c328c; border-radius: 37px; } .form-header { margin: 20px; text-align: center; } .form-header span { padding: 5px 35px;   color: #06C695;   font-size: 20px;   font-weight: bolder; } #signin { border-bottom: 2px solid #06C695; } .other-signin-option { text-align: center; padding: 30px 0 0 0; } .other-signin-option span { padding: 10px; } .signintext { text-align: center; color: #707070; margin: 20px; } form { text-align: center; } form .input-container { display: block; justify-content: center; display: flex;   width: 100%; } form p { font-size: 14px; } input { font-size: 16px; color: #707070; font-weight: bold; outline: none; margin: 0px 0px 10px 0px;   padding: 10px 0px 10px 15px; border: 0; border-bottom: 1px solid #06C695; transition: border 0.4s ease-in; } input::-webkit-input-placeholder { color: #C7C7C7; } input:focus { border-bottom: 4px solid #06C695; transition: border 0.36s ease-in; } button { width: 60%; border-radius: 30px; font-size: 18px; background-color: #06C695; color: #fff; font-weight: bold; outline: 0px; border: 0px; padding: 15px; cursor: pointer; } button:hover { transition: all 0.36s ease-in; opacity: 0.8; } .signin-footer { text-align: center; font-size: 14px; } .signin-footer p span { color: #06C695; font-weight: bold; } I am hoping you can make it better, or use for any for any of your personal project, not HNG task o

Dimeji Pamilerin
HTML is to the Web as Water is to Earth

Aint that true! Html is like the bedrock of every websites. Hypertext Markup Language for displaying document on the web. It is as old as the web itself. HTML is to web as Water is to earth From the class HTML elements tell the browser how to display the content HTML elements are represented by tags HTML tags label pieces of content such as &quot;heading&quot;, &quot;paragraph&quot;, &quot;table&quot;, &quot;article&quot;, &quot;aside&quot; e...