wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

created a coverimg component

Browse Source
This commit is contained in:
rutik wankhade 2020-08-05 15:40:14 +05:30
parent e40a8ddcc3
commit fd6f64a17d
4 changed files with 57 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@ -10,6 +10,8 @@
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@ -24,7 +26,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>CoverView</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

9
src/components/App.js
View File

@ -1,10 +1,17 @@
import React from 'react'; import React from 'react';
import CoverImage from './CoverImage';
class App extends React.Component{ class App extends React.Component{
render(){ render(){
return <div>App</div>; return (
<CoverImage/>
);
} }
} }

27
src/components/CoverImage.css Normal file
View File

@ -0,0 +1,27 @@
.cover{
margin:auto;
width:auto;
height:auto;
background-color: #c5a8ff;
text-align: center;
}
.card{
height:150px;
min-width:400px;
border-radius: 10px;
margin:50px;
background-color: #ffffff;
display:inline-block;
box-shadow: 10px 10px #8c52ff;
text-align: center;
color:#676683;
border:none;
justify-content: center;
align-items: center;
vertical-align: middle;
padding:50px;
}
h1{height:auto;}

19
src/components/CoverImage.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import './CoverImage.css';
class CoverImage extends React.Component{
render(){
return (
<div className="cover img-fluid">
<div className="card">
<h2>5 Simple apps I built while learning JavaScript</h2>
</div>
</div>
);
}
}
export default CoverImage;