Skip to content

Designed the HomePage #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Akku2016 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Designed the HomePage #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
228b13a
Designed the HomePage
Akku2016 Apr 8, 2022
30001dc
Merge branch 'main' into Homepage
Akku2016 Apr 8, 2022
03f062f
Designed the HomePage for Reactjs
Akku2016 Apr 10, 2022
bd609b5
Merge branch 'Homepage' of https://github.com/Akku2016/frontend-react…
Akku2016 Apr 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
},
"dependencies": {
"bootstrap": "^5.1.3",
"dezenix-react": "link:..",
"http-serve": "^1.0.1",
"react": "link:../node_modules/react",
Expand Down
7 changes: 1 addition & 6 deletions example/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,14 @@ import {
ProgressBar,
ComplexComponent,
PortfolioHome,
TeamMembers,
GroceryList



} from 'dezenix-react'
import Home from './components/Home'
import { HashRouter, Route, Routes } from 'react-router-dom'
import img1 from "./images/img01.png"
import user from "./images/user1.jpg"
import {members} from "./data/members.json"
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'



Expand Down Expand Up @@ -45,8 +42,6 @@ const App = () => {
/>
<Route path='/complex' element={<ComplexComponent />} />
<Route path='/portfoliohome' element={<PortfolioHome pic={img1} />} />
<Route path='/team' element={<TeamMembers img={user} members={members} />} />
<Route path='/GroceryList' element={<GroceryList />} />

</Routes>
</HashRouter>
Expand Down
154 changes: 104 additions & 50 deletions example/src/components/Home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,118 @@
.header {
background: #834ce6;
background-color: #3787f6;
background-image: linear-gradient(315deg, #733fed 0%, #3787f6 74%);
text-align: center;
padding: 15px;
color: white;
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.contri {
text-align: center;
.top{
background-color: #012970;
}
.contri_components {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
.topnav{
overflow: hidden;
display:flex;
color:#fff;
}
.component {
text-decoration: none;
background-color: blanchedalmond;
margin-bottom: 1rem;

width: fit-content;
height: fit-content;
box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%),
0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
.link{

display:flex;

letter-spacing: 1px;
justify-content: right;
justify-content: space-between;
background-color: #012970;
color:#fff;
}

border-radius: 5px;
padding: 15px;
.checklist{
display:flex;
font-size: 4px;
justify-content: space-between;
background-color: antiquewhite;
}
.header {
background: #834ce6;
background-color: #3787f6;
background-image: linear-gradient(315deg, #733fed 0%, #3787f6 74%);
.topnav Link{


color: #f2f2f2;
text-align: center;
padding: 15px;
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.contri {
text-align: center;
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
transition: all 0.5s;
z-index: 997;
padding: 20px 0;
line-height: 0;
}
header.header-scrolled {
background: #fff;
padding: 15px 0;
box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
}

header img {
max-height: 40px;
margin-right: 6px;
}

#hero {
width: 100%;
background: #012970;
}
#hero .container {
padding-top: 32px;
}

#hero .btn-get-started:hover {
background: #209dd8;
}
.contri_components {
margin-top: 30px;
#hero .btn-watch-video {
font-size: 16px;
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
transition: 0.5s;
margin: 10px 0 0 25px;
color: #fff;
line-height: 1;
}
.component {
text-decoration: none;
background-color: blanchedalmond;
margin-bottom: 1rem;
#hero .btn-watch-video i {
line-height: 0;
color: #fff;
font-size: 32px;
transition: 0.3s;
margin-right: 8px;
}
#hero .btn-watch-video:hover i {
color: #47b2e4;
}
#hero .animated {
animation: up-down 2s ease-in-out infinite alternate-reverse both;
height: 500px;
width: 650px;
}
.primetxt{
font-size: 40px;
}
@media(max-width:1000px)
{

width: fit-content;
height: fit-content;
box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%),
0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
#hero .animated{
height: 400px;
}
.primetxt{
font-size: xx-large;
}
}

border-radius: 5px;
padding: 15px;
.footer {
background: #012970;
padding: 0 0 30px 0;
font-size: 14px;
}

.footer .copyright {
text-align: center;
padding-top: 30px;
color: #f0f0f5;
}
58 changes: 11 additions & 47 deletions example/src/components/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,14 @@
import React from 'react'
import { Link } from 'react-router-dom'
import React from 'react'

import HomePage from './HomePage'




const Home = () => {
return (
<div className='Home'>
<div className='header'>
<h1>Frontend-reactjs</h1>
</div>

<div className='contri'>
<div className='contri_heading'>
<h3>Start Contributing</h3>
</div>
<hr />

<div className='contri_components'>
<Link to='/login' className='component'>
<h2>Login</h2>
</Link>
<Link to='/register' className='component'>
<h2>Register</h2>
</Link>
<Link to='/product_card' className='component'>
<h2>Product card</h2>
</Link>
{/* Add new Link Here for your new component */}
<Link to='/progress_bar' className='component'>
<h2>Progress Bar</h2>
</Link>
<Link to='/complex' className='component'>
<h2>Complex component example</h2>
</Link>
<Link to='/portfoliohome' className='component'>
<h2> Portfolio Home example</h2>
</Link>
<Link to='/team' className='component'>
<h2>Team members</h2>
</Link>
<Link to='/GroceryList' className='component'>
<h2>Grocery List Site</h2>
</Link>

</div>
</div>
</div>
)
}

return (<HomePage/> )}




export default Home
118 changes: 118 additions & 0 deletions example/src/components/HomePage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.top{
background-color: #012970;
}
.topnav{
overflow: hidden;
display:flex;
color:#fff;
}
.link{

display:flex;

letter-spacing: 1px;
justify-content: right;
justify-content: space-between;
background-color: #012970;
color:#fff;
}

.checklist{
display:flex;
font-size: 4px;
justify-content: space-between;
background-color: antiquewhite;
}
.topnav Link{


color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
transition: all 0.5s;
z-index: 997;
padding: 20px 0;
line-height: 0;
}
header.header-scrolled {
background: #fff;
padding: 15px 0;
box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
}

header img {
max-height: 40px;
margin-right: 6px;
}

#hero {
width: 100%;
background: #012970;
}
#hero .container {
padding-top: 32px;
}

#hero .btn-get-started:hover {
background: #209dd8;
}
#hero .btn-watch-video {
font-size: 16px;
display: flex;
align-items: center;
transition: 0.5s;
margin: 10px 0 0 25px;
color: #fff;
line-height: 1;
}
#hero .btn-watch-video i {
line-height: 0;
color: #fff;
font-size: 32px;
transition: 0.3s;
margin-right: 8px;
}
#hero .btn-watch-video:hover i {
color: #47b2e4;
}
#hero .animated {
animation: up-down 2s ease-in-out infinite alternate-reverse both;
height: 500px;
width: 650px;
}
.primetxt{
font-size: 40px;
}
@media(max-width:1000px)
{

#hero .animated{
height: 400px;
}
.primetxt{
font-size: xx-large;
}
}

.footer {
background: #012970;
padding: 0 0 30px 0;
font-size: 14px;
}

.footer .copyright {
text-align: center;
padding-top: 30px;
color: #f0f0f5;
}
Loading