mirror of
https://github.com/woodchen-ink/CoverView.git
synced 2025-07-18 14:01:56 +08:00
created a coverimg component
This commit is contained in:
parent
e40a8ddcc3
commit
fd6f64a17d
@ -10,6 +10,8 @@
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<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
|
||||
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.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>CoverView</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
@ -1,10 +1,17 @@
|
||||
import React from 'react';
|
||||
import CoverImage from './CoverImage';
|
||||
|
||||
|
||||
class App extends React.Component{
|
||||
|
||||
|
||||
render(){
|
||||
return <div>App</div>;
|
||||
return (
|
||||
|
||||
<CoverImage/>
|
||||
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
|
27
src/components/CoverImage.css
Normal file
27
src/components/CoverImage.css
Normal 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
19
src/components/CoverImage.js
Normal 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;
|
Loading…
x
Reference in New Issue
Block a user