satya
3 years ago
parent
3f05452f1a
commit
171d8b261d
@ -0,0 +1,181 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Montserrat:wght@100&family=Poppins:wght@300&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c2e6f467;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.App,
|
||||
.techCard {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.App {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 16px 32px;
|
||||
gap: 3em;
|
||||
}
|
||||
|
||||
.techCard {
|
||||
background-color: #fff;
|
||||
width: 80%;
|
||||
border-radius: 15px;
|
||||
padding: 32px;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.tech,
|
||||
.techCard {
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.sub h2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card,
|
||||
.sub {
|
||||
display: flex;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.sub {
|
||||
background-color: #c2e6f4;
|
||||
height: 80vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 32px;
|
||||
border-radius: .7em;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sub button,
|
||||
.sub input {
|
||||
height: 2.2rem;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.sub input {
|
||||
width: 15rem;
|
||||
margin: 2em .3em;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.sub button {
|
||||
background-color: #f37575;
|
||||
color: #fff;
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.sub p {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex-direction: column;
|
||||
justify-content: left;
|
||||
align-items: flex-start center;
|
||||
text-align: left;
|
||||
padding: 32px 16px 10px;
|
||||
margin: 10px auto;
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.card .person {
|
||||
width: 150px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.card .icon {
|
||||
width: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.details h2,
|
||||
.skills h2,
|
||||
.sub h2 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.skills h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.details h2 {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.details {
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .3rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
text-transform: capitalize;
|
||||
font-size: 12px;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
.skills h2 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.card .skill {
|
||||
background-color: #2acece;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
padding: 4px 8px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.colorGen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.color{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
width: 80%;
|
||||
color: #fff;
|
||||
}
|
||||
.colorGen button {
|
||||
background-color: #f37575;
|
||||
color: #fff;
|
||||
width: 10rem;
|
||||
padding: 8px 32px;
|
||||
outline: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
border-radius: 10px;
|
||||
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
import './App.css';
|
||||
import ImgComp from './components/imgComp';
|
||||
import SubComp from './components/subComp';
|
||||
import UserCard from './components/userCardComp';
|
||||
import ColorGen from './components/colorGenComp';
|
||||
import person from './images/person.jpg';
|
||||
import pichtml from './images/htmlpng.png';
|
||||
import piccss from './images/csspng.png';
|
||||
import picjs from './images/jspng.png';
|
||||
import picreact from './images/reactpng.png';
|
||||
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<ColorGen numColor={5}/>
|
||||
<ImgComp
|
||||
pichtml={pichtml}
|
||||
piccss={piccss}
|
||||
picjs={picjs}
|
||||
picreact={picreact}
|
||||
/>
|
||||
<SubComp />
|
||||
<UserCard person={ person } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@ -0,0 +1,8 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
@ -0,0 +1 @@
|
||||
// I DO NOT KNOW WHAT I AM DONING WRONG IN MY CODE. BUT ICAN'T SEE THE CHANGE OF BACKGROUND COLOR AFTER GIVING THE HEIGHT AND WIDTH TO THE COLOR CONTAINER
|
||||
@ -0,0 +1,27 @@
|
||||
import React from "react";
|
||||
|
||||
export default function ColorGen(props) {
|
||||
// let numColor = prompt('Enter the number of colors you want:', 0);
|
||||
let arr = Array(props.numColor).fill(0);
|
||||
|
||||
let hexcolor = () => {
|
||||
let color = '';
|
||||
let str = '0123456789abcdef';
|
||||
for (let i = 0; i < 6; i++) {
|
||||
let hex = Math.floor(Math.random() * str.length );
|
||||
color += str[hex];
|
||||
}
|
||||
return '#' + color;
|
||||
}
|
||||
|
||||
let sixColor = arr.map((i) => <div className="color" style={{ backgroundColor: `${hexcolor()}` }}>
|
||||
<h1>{ hexcolor()}</h1>
|
||||
</div>);
|
||||
// console.log(hexcolor());
|
||||
|
||||
return (
|
||||
<section className="colorGen">
|
||||
{sixColor}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
let head = <h2>front end technologies</h2>
|
||||
|
||||
|
||||
export default function ImgComp(props){
|
||||
return (
|
||||
<section className="techCard">
|
||||
{head}
|
||||
<section className='tech'>
|
||||
<img src={props.pichtml} alt='html' />
|
||||
<img src={props.piccss} alt='css'/>
|
||||
<img src={props.picjs} alt='js'/>
|
||||
<img src={props.picreact} alt='react'/>
|
||||
</section>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
|
||||
export default function SubComp() {
|
||||
return (
|
||||
<section className='sub'>
|
||||
<div>
|
||||
<h2>subscribe</h2>
|
||||
<p>Sign up with your eamil address to receive news and updates</p>
|
||||
<form action="*">
|
||||
<input type="text" placeholder='First name'/>
|
||||
<input type="text" placeholder='Last name'/>
|
||||
<input type="text" placeholder='Email' />
|
||||
</form>
|
||||
<button>Subscribe</button>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
import React from "react";
|
||||
|
||||
let skillset = ['HTML', 'CSS', 'Sass', 'JS', 'React', 'Node', 'MongoDB', 'Python', 'Flask', 'Django', 'NumPy', 'Pandas', 'Data Analysis', 'MYSQL', 'GraphQL', 'D3.js', 'Gatsby', 'Docker', 'Heroku', 'Git'];
|
||||
let skills = skillset.map((skill) => <button className='skill'>{skill}</button>)
|
||||
|
||||
export default function UserCard(props) {
|
||||
return (
|
||||
<section className="card">
|
||||
<img src={props.person} alt="person" className='person' />
|
||||
<div className="details">
|
||||
<h2>asabeneh yeatayeh</h2>
|
||||
<img src="https://img.icons8.com/color/48/000000/ok--v1.png" className='icon' alt='icon'/>
|
||||
</div>
|
||||
<p>senior developer, finland</p>
|
||||
<div className="skills">
|
||||
<h2>skills</h2>
|
||||
{skills}
|
||||
</div>
|
||||
<p>joined on aug 30, 2020</p>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 55 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
@ -0,0 +1,13 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
// 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
|
||||
reportWebVitals();
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,13 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
@ -0,0 +1,5 @@
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
Loading…
Reference in new issue