mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-05 13:47:25 +02:00
Code Issues Releases Wiki Activity

Merge pull request #67 from phuoc-ng/subscribe-form

Browse Source 
Add subscribe form
This commit is contained in:
phuoc-ng
2019-12-01 14:09:08 +07:00
committed by GitHub
parent bfeb1820c0 f305dd9ac1
commit a37a070ddb
7 changed files with 139 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/RelatedPatterns.tsx
View File

@@ -13,7 +13,7 @@ const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
<section>
<Heading title="Related patterns" />
<div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
<div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '24px' }}>
{
patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
}

23
client/layouts/Footer.tsx
View File

@@ -1,24 +1,23 @@
import React from 'react';
import SubscribeForm from './SubscribeForm';
const Footer: React.FC<{}> = () => {
return (
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
// borderBottomLeftRadius: '8px',
// borderBottomRightRadius: '8px',
display: 'flex',
}}
>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.2)',
display: 'flex',
flex: 1,
fontSize: '16px',
lineHeight: 1.5,
padding: '32px',
padding: '24px',
}}
>
<ul
@@ -43,7 +42,7 @@ const Footer: React.FC<{}> = () => {
</h3>
&#123;
</li>
<ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
<ul style={{ listStyleType: 'none', margin: 0, padding: '0 24px' }}>
<li>
css-layout,
<span style={{ color: 'rgba(0, 0, 0, 0.3)', marginLeft: '16px' }}>
@@ -86,12 +85,10 @@ const Footer: React.FC<{}> = () => {
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
flex: 1,
fontSize: '16px',
lineHeight: 1.5,
padding: '32px',
padding: '24px',
}}
>
<ul
@@ -99,7 +96,7 @@ const Footer: React.FC<{}> = () => {
fontWeight: 500,
lineHeight: 1.5,
listStyleType: 'none',
margin: 0,
margin: '0 0 16px 0',
padding: 0,
width: '100%',
}}
@@ -117,7 +114,7 @@ const Footer: React.FC<{}> = () => {
</h3>
&#123;
</li>
<ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
<ul style={{ listStyleType: 'none', margin: 0, padding: '0 24px' }}>
<li style={{ alignItems: 'center', display: 'flex' }}>
<div>twitter:</div>
<a
@@ -154,6 +151,12 @@ const Footer: React.FC<{}> = () => {
</ul>
<li>&#125;</li>
</ul>
<div>
<div style={{ lineHeight: 1.5, marginBottom: '12px' }}>
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!
</div>
<SubscribeForm />
</div>
</div>
</div>
);

65
client/layouts/Layout.tsx
View File

@@ -1,6 +1,5 @@
import React, { useEffect } from 'react';
import SampleCode from '../components/SampleCode';
import Footer from './Footer';
const Layout: React.FC<{}> = ({ children }) => {
@@ -12,70 +11,6 @@ const Layout: React.FC<{}> = ({ children }) => {
<div style={{ margin: '0 auto 64px auto', maxWidth: '1024px' }}>
{children}
<Footer />
<div
style={{
backgroundColor: '#282828',
display: 'flex',
}}
>
<div
style={{
alignItems: 'flex-end',
color: '#FFF',
display: 'flex',
flexDirection: 'column',
fontWeight: 700,
justifyContent: 'center',
padding: '32px',
textTransform: 'uppercase',
}}
>
<div style={{ fontSize: '48px' }}>How</div>
<div style={{ fontSize: '70px' }}>it's</div>
<div style={{ fontSize: '42px' }}>made</div>
</div>
<div style={{ flex: 1, padding: '32px' }}>
<SampleCode
lang='javascript'
code={`
this
.madeWith([react,typescript])
.then((r) => lint(r)) /* tslint */
.then((r) => lazyLoad(r)) /* @loadable/component */
.then((r) => optimizeAndBundle(r)) /* webpack */
.then((r) => exportHtml(r)) /* react-snap */
.then((r) => deploy(r)) /* Netlify */
.then((r) => {
expect(r).is(scalableCode);
expect(r).is(superFastWebsite);
expect(r).is(seoFriendly);
})
`}
/>
<div
className="hljs"
style={{
lineHeight: 1.5,
listStyleType: 'none',
marginTop: '-16px',
paddingLeft: '40px',
}}
>
.finally(
<span className="hljs-function"><span className="hljs-params">()</span> => </span>
&#123;
<span className="hljs-comment">
<a
href="https://github.com/phuoc-ng/csslayout"
style={{ color: 'currentColor', textDecoration: 'none' }}
>
&#47;* Give me 1 Github star here */
</a>
</span>
}) 🎉
</div>
</div>
</div>
</div>
);
};

49
client/layouts/SubscribeForm.tsx Normal file
View File

@@ -0,0 +1,49 @@
import React from 'react';
const SubscribeForm: React.FC<{}> = () => {
return (
<form
action="https://csslayout.us4.list-manage.com/subscribe/post?u=77d0bf6497a2cdbb36f08587c&amp;id=e8a912009a"
method="post"
name="mc-embedded-subscribe-form"
target="_blank"
noValidate={true}
style={{
margin: 0,
}}
>
<input
type="email"
name="EMAIL"
placeholder="Email address"
required={true}
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderBottomLeftRadius: '4px',
borderTopLeftRadius: '4px',
padding: '8px',
width: '200px',
}}
/>
<div style={{ left: '-5000px', position: 'absolute' }} aria-hidden="true">
<input type="text" name="b_77d0bf6497a2cdbb36f08587c_e8a912009a" tabIndex={-1} />
</div>
<button
type="submit"
name="subscribe"
style={{
backgroundColor: '#00449E',
borderBottomRightRadius: '4px',
borderColor: 'transparent',
borderTopRightRadius: '4px',
color: '#FFF',
padding: '8px 16px',
}}
>
Subscribe
</button>
</form>
);
};
export default SubscribeForm;

7
client/pages/HomePage.tsx
View File

@@ -7,6 +7,7 @@ import CoverCard from '../components/CoverCard';
import Pattern from '../constants/Pattern';
import useDocumentTitle from '../hooks/useDocumentTitle';
import Layout from '../layouts/Layout';
import MadeOf from './MadeOf';
const HomePage = () => {
useDocumentTitle('CSS Layout');
@@ -16,7 +17,7 @@ const HomePage = () => {
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent',
borderBottom: 'none',
marginTop: '64px',
}}
>
@@ -142,7 +143,7 @@ const HomePage = () => {
</div>
</div>
<section style={{ height: '900px', overflow: 'hidden', paddingBottom: '32px', position: 'relative' }}>
<section style={{ height: '1000px', overflow: 'hidden', position: 'relative' }}>
<div
style={{
alignItems: 'center',
@@ -240,6 +241,8 @@ const HomePage = () => {
<CoverCard pattern={Pattern.Wizard} />
</div>
</section>
<MadeOf />
</div>
</Layout>
);

69
client/pages/MadeOf.tsx Normal file
View File

@@ -0,0 +1,69 @@
import React from 'react';
import SampleCode from '../components/SampleCode';
const MadeOf: React.FC<{}> = () => {
return (
<div
style={{
backgroundColor: '#282828',
padding: '24px',
}}
>
<div
style={{
color: '#FFF',
fontSize: '48px',
fontWeight: 600,
textAlign: 'center',
textTransform: 'uppercase',
}}
>
How it's made
</div>
<div>
<SampleCode
lang='javascript'
code={`
this
.madeWith([react,typescript])
.then((r) => lint(r)) /* tslint */
.then((r) => lazyLoad(r)) /* @loadable/component */
.then((r) => optimizeAndBundle(r)) /* webpack */
.then((r) => exportHtml(r)) /* react-snap */
.then((r) => deploy(r)) /* Netlify */
.then((r) => {
expect(r).is(scalableCode);
expect(r).is(superFastWebsite);
expect(r).is(seoFriendly);
})
`}
/>
<div
className="hljs"
style={{
lineHeight: 1.5,
listStyleType: 'none',
marginTop: '-16px',
paddingLeft: '40px',
}}
>
.finally(
<span className="hljs-function"><span className="hljs-params">()</span> => </span>
&#123;
<span className="hljs-comment">
<a
href="https://github.com/phuoc-ng/csslayout"
style={{ color: 'currentColor', textDecoration: 'none' }}
>
&#47;* Give me 1 Github star here */
</a>
</span>
}) 🎉
</div>
</div>
</div>
);
};
export default MadeOf;

4
client/pages/home.css
View File

@@ -1,5 +1,5 @@
.home-cards {
animation: slide 60s linear infinite;
animation: slide 40s linear infinite;
}
@keyframes slide{
@@ -7,6 +7,6 @@
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -600px, 0);
transform: translate3d(0, -500px, 0);
}
}