# Tunemy CREATE FOLDER and sub folders : mkdir redux redux/actions redux/reducers getInitialPropsallows the page to wait for data before rendering starts. Using getInitialProps will make the page opt-in to on-demand server-side rendering. ### Button design Get Started Now on to adding classes to the class attribute. On mobile our button will be full-width otherwise, it will have some sane spacing defaults. The content is centered vertically as well as horizontally. #### flex sm:inline-flex justify-center items-center px-5 py-2 ### Previous style .css (required) body { background-color: #e9ebee; } .square { border-radius: 0px; } .jumbotron { background-image: linear-gradient(to right, #007bff, #000); color: white; height: 50vh; margin-top: 8vh; display: flex; align-items: center; justify-content: center; font-size: 4rem; } .help-img { position: absolute; right: 0; margin: auto; width: 120px; height: 120px; object-fit: cover; padding-right: 20px; padding: 5px; } @media screen and (max-width: 768px) { .help-img { visibility: hidden; transition: 0.5s; } } .signin-btn { display: flex; justify-content: center; align-items: center; background-color: #0073b1; padding: 10px; height: 46px; width: 100%; border-radius: 28px; border: none; box-shadow: encart 0 0 0 1px rgb(0 0 0 / 60%), inset 0 0 0 2px rgb(0 0 0 / 0%) inset 0 0 0 1px rgb(0 0 0 / 0); vertical-align: middle; z-index: 0; transition-duration: 167ms; font-size: 20px; color: #fff; } .signin-btn:hover { background-color: #1184c3; cursor: pointer; } .content { background-color: #fff; padding: 35px 30px; width: 100%; height: 500px; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); @media (max-width: 768px) { padding: 25px 30px; margin-left: 0; margin-bottom: 15px; border-radius: 25px; button { width: 100%; } } } .floating-form { position: relative; } .floating-form .form-control { background: transparent; position: relative; z-index: 50; } .floating-form .form-control:focus, .floating-form .form-control:active, .floating-form .form-control:valid { outline: none !important; box-shadow: none !important; } .floating-form .form-control:focus + label, .floating-form .form-control:active + label, .floating-form .form-control:valid + label { transform: translateY(-40%); top: -2px; z-index: 100; font-size: 12px; } .floating-form label { position: absolute; top: 50%; /_ bootstrap > input > padding size _/ left: 0.75rem; z-index: 1; font-size: 14px; transform: translateY(-50%); transition: all 0.3s; background: #fff; color: #afafaf; } .floating-form textarea + label { top: 1.275rem; } /_Title REgister form _/ .title { font-size: 35px; padding: 10px 0; display: flex; justify-content: center; align-items: center; @media (max-width: 768px) { width: 100%; top: 0; background-color:green; position: absolute; font-family: "Roboto Thin"; text-align: center; } } .title h3 { font-size: 30px; text-align: center; font-weight: 600; width: 100%; margin: auto; padding: 10px 12px; } .google-btn { margin-top: 2px; display: flex; justify-content: center; align-items: center; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.6); height: 46px; width: 100%; border-radius: 28px; box-shadow: encart 0 0 0 1px rgb(0 0 0 / 60%), inset 0 0 0 2px rgb(0 0 0 / 0%) inset 0 0 0 1px rgb(0 0 0 / 0); vertical-align: middle; z-index: 0; transition-duration: 167ms; font-size: 20px; color: rgba(0, 0, 0, 0.6); } .google-btn:hover { background-color: rgba(207, 207, 207, 0.25); color: rgba(0, 0, 0, 0.75); } .signin-link span { font-weight: 600; color: black; cursor: pointer; padding: 15px; font-size: 15px; text-align: center; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; } .signin-link span button { border: none; background: none; } /_.divider { border-bottom: 1px solid gray; display: flex; justify-content: center; align-items: center; } _/ .divider span { text-align: center; font-size: 25px; } .title-signin { display: flex; flex-direction: column; text-align: left; font-size: 12px; line-height: 1.333; } .separator { width: 100%; border-bottom: solid 1px; position: relative; margin: 30px 0px; } .separator::before { content: "OR"; position: absolute; left: 47%; top: -8px; background-color: #fff; padding: 0px 10px; } ### Previous home {/*

{/* */}{" "}

Become a member and start building the next big thing

Join the community

//NEW NAVBAR import Image from 'next/image' import React from 'react' import Button from '../../util/ui/widgets/Button' import Links from './NavItem' function Nav() { return (

• Home
• About
• Services
• Projects
• Pricing
• Blog
• Contact

{""}

{""}

{""}

{""}

{""}

{""}

{""}

{""}

{""}

{""}

{""}

Creative Multipurpose Tailwind CSS Template

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Get Started

) } export default Nav # Tunemy