Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Clint Briley authored and Clint Briley committed Oct 27, 2021
1 parent 7032c06 commit d12b9f7
Show file tree
Hide file tree
Showing 15 changed files with 364 additions and 97 deletions.
15 changes: 15 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
Expand Down
38 changes: 0 additions & 38 deletions src/App.css
View file

This file was deleted.

25 changes: 7 additions & 18 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,13 @@
import logo from './logo.svg';
import './App.css';
import React from 'react'
import Navbar from './components/Navbar'
import Hero from './components/Hero'

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<>
<Navbar />
<Hero />
</>
);
}

Expand Down
8 changes: 0 additions & 8 deletions src/App.test.js
View file

This file was deleted.

165 changes: 165 additions & 0 deletions src/components/Hero.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
.hero {
width: 100%;
height: 100vh;
background: var(--darkgrey);
}

.container {
max-width: 1240px;
padding: 0 1rem;
margin: auto;
}

.hero .content {
display: grid;
grid-template-columns: repeat(2, 1fr);
}

.col-1 {
padding: 1rem 1rem 1rem 0;
height: 70vh;
display: flex;
flex-direction: column;
justify-content: center;
}

.col-1 h1 {
font-size: 3rem;
font-weight: 700;
color: var(--white);
}

.col-1 p {
font-size: 1rem;
color: var(--white);
line-height: 1.4;
margin-top: 1.2rem;
}

.col-1 .used-by p {
color: var(--lightgrey);
font-size: .7rem;
margin: 2rem 0 1rem 0;
}

.col-2 {
padding: 1rem;
height: 70vh;
display: flex;
flex-direction: column;
justify-content: center;
font-size: .8rem;
}

.col-2 p {
color: var(--grey);
}

.form-layout {
width: 400px;
margin: auto;
background-color: var(--white);
border-radius: 6px;
}

.form-container {
padding: 1.5rem 2rem;
}

.sign-in-txt {
margin-bottom: 10px;
}

.social-login span {
background: var(--white);
padding: 16px 45px 6px 45px;
border: 1px solid var(--lightgrey);
border-radius: 4px;
}

.col-2 .divider p {
width: 100%;
text-align: center;
border-bottom: 1px solid var(--lightgrey);
line-height: 0.1em;
margin: 2rem 0 2rem;
}
.col-2 .divider p span {
background: var(--white);
padding: 0 10px;
}


form input {
display: block;
width: 100%;
margin: 1.2rem 0;
padding: .5rem;
border: 1px solid var(--lightgrey);
background: var(--white);
border-radius: 4px;
}

.form-footer {
border-top: 1px solid var(--lightgrey);
background: var(--white);
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}

.form-footer p {
padding: 1.5rem 2rem;
}

.form-footer span {
font-weight: 500;
}

button {
width: 100%;
padding: 8px 0;
border-radius: 4px;
border: 1px solid var(--primary);
background-color: var(--primary);
color: var(--white);
cursor: pointer;
}

button:hover {
background-color: var(--secondary);
border: 1px solid var(--secondary);
}


@media screen and (max-width:940px) {
.hero {
height: auto;
width: 100%;
}

.hero .container {
padding: 0 1rem;
}

.hero .content {
grid-template-columns: 1fr;
}

.col-1 {
height: 90vh;
padding: .2rem;
max-width: 100%;
}

.hero h1 {
font-size: 2.5rem;
}

.hero .col-2 {
display: none;
}
}




60 changes: 60 additions & 0 deletions src/components/Hero.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import React from 'react'
import {FaDatabase, FaAsterisk, FaAccusoft, FaFacebook, FaTwitter, FaGithub} from 'react-icons/fa'
import './Hero.css'

const Hero = () => {
return (
<div className='hero'>
<div className='container'>
<div className='content'>
<div className='col-1'>
<h1>Data to enrich your</h1>
<h1><span className='primary-color'>online business</span></h1>
<p>Lorem ipsum dolor sit amet, consec tetur adipisicing elit.
Architecto iure fuga deleniti sit! Cum doloribus, nesciunt
laboriosam eos praesentium veritatis!</p>
<div className='used-by'>
<p>USED BY</p>
<div className='icons'>
<span><FaDatabase /> Staxx</span>
<span><FaAsterisk /> Star AI</span>
<span><FaAccusoft /> Accusoft</span>
</div>
</div>
</div>
<div className='col-2'>
<div className='form-layout'>
<div className='form-container'>
<p className='sign-in-txt'>Sign in with</p>
<div className='social-login'>
<span><FaFacebook size={20} /></span>
<span><FaTwitter size={20} /></span>
<span><FaGithub size={20} /></span>
</div>
<div className='divider'>
<p><span>Or</span></p>
</div>
<form action=''>
<input type='text' placeholder='Name' />
<input type='text' placeholder='Email' />
<input type='text' placeholder='Password' />
<button>Create Your Account</button>
</form>
</div>
<div className='form-footer'>
<p>
By signing up, you agree to our
<span className='primary-color'> Terms, Data Policy</span>
and <span className='primary-color'> Cookies Policy</span>.
</p>
</div>
</div>
</div>
</div>
</div>

</div>
)
}

export default Hero
Loading

0 comments on commit d12b9f7

Please sign in to comment.