Commit 3b662815 authored by David Rhoderick's avatar David Rhoderick
Browse files

Updating newsletter and social media styles.

parent 6ba98449
import React from "react";
import { connect, styled } from "frontity";
import Container from '../global/container'
import Facebook from "../../img/facebook.png";
import Instagram from "../../img/instagram.png";
import Twitter from "../../img/twitter.png";
import NewsletterPic from "../../img/newsletter.png";
import Image from "@frontity/components/image";
import Link from "@frontity/components/link";
const Newsletter = ({ state }) => {
const NewsletterSocialMedia = ({ state }) => {
const options = state.source.get('acf-options-page')
console.log(options)
return (
<NewsletterContainer>
<NewsletterForm>
<NewsletterSocialMediaContainer>
<NewsletterForm theme={state.theme}>
<h2>Sign up for our newsletter</h2>
<form>
<FormDiv>
<StyledForm>
<Container>
<input placeholder="enter your email" />
<button type="submit">
<Image
src={NewsletterPic}
style={{ height: "10px", width: "10px" }}
></Image>
<Image src={NewsletterPic} />
</button>
</FormDiv>
</form>
</Container>
</StyledForm>
</NewsletterForm>
<NewsletterContactDetails>
<SocialMedia>
<h3>STAY IN TOUCH</h3>
<SocialIconsContainer>
<Link>
<Image src={Facebook}></Image>
</Link>
<Link>
<Image src={Instagram}></Image>
</Link>
<Link>
<Image src={Twitter}></Image>
</Link>
<a target="_blank">
<Image src={Facebook} />
</a>
<a target="_blank">
<Image src={Instagram} />
</a>
<a target="_blank">
<Image src={Twitter} />
</a>
</SocialIconsContainer>
</NewsletterContactDetails>
</NewsletterContainer>
</SocialMedia>
</NewsletterSocialMediaContainer>
);
};
export default connect(Newsletter);
export default connect(NewsletterSocialMedia);
const NewsletterContainer = styled.div`
const NewsletterSocialMediaContainer = styled.div`
width: 100%;
height: 40vh;
display: grid;
grid-template-rows: repeat(3, 1fr);
${'' /* grid-template-rows: repeat(3, 1fr); */}
position: relative;
z-index: 100;
background: white;
`;
const NewsletterForm = styled.div`
grid-row: 1/2;
background: purple;
background: ${props => props.theme.colors.purple};
display: flex;
justify-content: space-around;
justify-content: center;
align-items: center;
padding: 1rem 0;
h2 {
font-size: 20px;
color: white;
text-transform: capitalize;
}
form {
width: 25%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-right: 0.5rem;
}
`;
const FormDiv = styled.div`
height: 100%;
width: 100%;
const StyledForm = styled.form`
position: relative;
width: 25%;
height: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
text-align: left;
margin-left: 0.5rem;
input {
width: 100%;
height: 100%;
padding-left: 3rem;
height: 2rem;
padding-left: 1rem;
}
button {
position: absolute;
top: 0;
bottom: 0;
heigth: 30px;
width: 30px;
right: 3rem;
right: .75rem;
heigth: 1.25rem;
width: 1.25rem;
cursor: pointer;
background: none;
}
`;
const NewsletterContactDetails = styled.div`
grid-row: 2/4;
const SocialMedia = styled.div`
display: flex;
flex-direction: column;
justify-content: space-around;
justify-content: center;
align-items: center;
padding: 2rem 0;
`;
const SocialIconsContainer = styled.div`
display: flex;
justify-content: space-between;
width: 5rem;
height: 20%;
padding: 1rem 0;
a {
display: inline-block;
width: 1.75rem;
margin: .67rem;
}
`;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment