Get footer working
This commit is contained in:
Rachel Ruderman
parent
f7f295611c
commit
6fb24350ad
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<!-- We will put our React component inside this div. -->
|
||||
<div id="react-container"></div>
|
||||
<div id="footer"></div>
|
||||
<div id="react-footer"></div>
|
||||
<!-- Load React. -->
|
||||
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
|
||||
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
|
||||
|
|
|
|||
|
|
@ -78,60 +78,15 @@
|
|||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="site-footer center-content-mobile">
|
||||
<div class="container">
|
||||
<div class="site-footer-inner">
|
||||
<div class="footer-top space-between text-xxs">
|
||||
<div class="brand">
|
||||
<a href="/"
|
||||
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||
/></a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/ianramzy/decentralized-video-chat"
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="footer-bottom space-between text-xxs invert-order-desktop"
|
||||
>
|
||||
<nav class="footer-nav">
|
||||
<ul class="list-reset">
|
||||
<li>
|
||||
<a target="_blank" href="https://ianramzy.com"
|
||||
>Made with ❤️ by Ian Ramzy</a
|
||||
>
|
||||
</li>
|
||||
<!-- <li><a href="#">Contact</a></li>-->
|
||||
<!-- <li><a href="#">About us</a></li>-->
|
||||
<!-- <li><a href="#">FAQ's</a></li>-->
|
||||
<!-- <li><a href="#">Support</a></li>-->
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-copyright">
|
||||
© 2020 Zipcall, all rights reserved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div id='react-footer'></div>
|
||||
</div>
|
||||
<script src="js/landing.js"></script>
|
||||
<!-- Load React. -->
|
||||
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
|
||||
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
|
||||
|
||||
<!-- Load our React component. -->
|
||||
<script src="react/Footer/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,144 +1,148 @@
|
|||
var Footer = function Footer() {
|
||||
|
||||
var renderBrand = function renderBrand() {
|
||||
var GithubSvg = function GithubSvg() {
|
||||
return React.createElement(
|
||||
"div",
|
||||
{ className: "brand" },
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "/" },
|
||||
React.createElement("img", { src: "images/logo.svg", alt: "Neon", width: "32", height: "32" })
|
||||
)
|
||||
"svg",
|
||||
{
|
||||
width: "16",
|
||||
height: "16",
|
||||
viewBox: "0 0 16 16",
|
||||
xmlns: "http://www.w3.org/2000/svg"
|
||||
},
|
||||
React.createElement(
|
||||
"title",
|
||||
null,
|
||||
"GitHub"
|
||||
),
|
||||
React.createElement("path", {
|
||||
d: "M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
var renderCopyright = function renderCopyright() {
|
||||
var currentYear = new Date().getFullYear();
|
||||
return React.createElement(
|
||||
"div",
|
||||
{ "class": "footer-copyright" },
|
||||
"\xA9 ",
|
||||
currentYear,
|
||||
" Zipcall, all rights reserved"
|
||||
);
|
||||
};
|
||||
|
||||
var renderSocials = function renderSocials() {
|
||||
return React.createElement(
|
||||
"div",
|
||||
{ className: "footer-social" },
|
||||
React.createElement(
|
||||
"div",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{
|
||||
target: "_blank",
|
||||
href: "https://github.com/ianramzy/decentralized-video-chat"
|
||||
},
|
||||
React.createElement(
|
||||
"svg",
|
||||
{
|
||||
width: "16",
|
||||
height: "16",
|
||||
viewBox: "0 0 16 16",
|
||||
xmlns: "http://www.w3.org/2000/svg"
|
||||
},
|
||||
React.createElement(
|
||||
"title",
|
||||
null,
|
||||
"GitHub"
|
||||
),
|
||||
React.createElement("path", {
|
||||
d: "M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
var renderNav = function renderNav() {
|
||||
return React.createElement(
|
||||
"nav",
|
||||
{ className: "footer-nav" },
|
||||
React.createElement(
|
||||
"ul",
|
||||
{ className: "list-reset" },
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ target: "_blank", href: "https://ianramzy.com" },
|
||||
"Made with \u2764\uFE0F by Ian Ramzy"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#" },
|
||||
"Contact"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#" },
|
||||
"About us"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#" },
|
||||
"FAQ's"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#" },
|
||||
"Support"
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
return React.createElement(
|
||||
"footer",
|
||||
{ className: "site-footer center-content-mobile", id: "footer" },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "container" },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "site-footer-inner" },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "footer-top space-between text-xxs" },
|
||||
renderBrand(),
|
||||
renderSocials()
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "footer-bottom space-between text-xxs invert-order-desktop" },
|
||||
renderNav(),
|
||||
renderCopyright()
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
var domContainer = document.getElementById('footer');
|
||||
var Footer = function Footer() {
|
||||
|
||||
var renderBrand = function renderBrand() {
|
||||
return React.createElement(
|
||||
"div",
|
||||
{ className: "brand" },
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "/" },
|
||||
React.createElement("img", { src: "images/logo.svg", alt: "Neon", width: "32", height: "32" })
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
var renderCopyright = function renderCopyright() {
|
||||
var currentYear = new Date().getFullYear();
|
||||
return React.createElement(
|
||||
"div",
|
||||
{ className: "footer-copyright" },
|
||||
"\xA9 ",
|
||||
currentYear,
|
||||
" Zipcall, all rights reserved"
|
||||
);
|
||||
};
|
||||
|
||||
var renderSocials = function renderSocials() {
|
||||
return React.createElement(
|
||||
"div",
|
||||
{ className: "footer-social" },
|
||||
React.createElement(
|
||||
"div",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{
|
||||
target: "_blank",
|
||||
href: "https://github.com/ianramzy/decentralized-video-chat"
|
||||
},
|
||||
React.createElement(GithubSvg, null)
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
var renderNav = function renderNav() {
|
||||
return React.createElement(
|
||||
"nav",
|
||||
{ className: "footer-nav" },
|
||||
React.createElement(
|
||||
"ul",
|
||||
{ className: "list-reset" },
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ target: "_blank", href: "https://ianramzy.com" },
|
||||
"Made with \u2764\uFE0F by Ian Ramzy"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#" },
|
||||
"Contact"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#" },
|
||||
"About us"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#" },
|
||||
"FAQ's"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#" },
|
||||
"Support"
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
return React.createElement(
|
||||
"footer",
|
||||
{ className: "site-footer center-content-mobile" },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "container" },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "site-footer-inner" },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "footer-top space-between text-xxs" },
|
||||
renderBrand(),
|
||||
renderSocials()
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "footer-bottom space-between text-xxs invert-order-desktop" },
|
||||
renderNav(),
|
||||
renderCopyright()
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
var domContainer = document.getElementById('react-footer');
|
||||
ReactDOM.render(React.createElement(Footer, null), domContainer);
|
||||
|
|
@ -1,9 +1,23 @@
|
|||
const GithubSvg = () => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
const Footer = () => {
|
||||
|
||||
const renderBrand = () => (
|
||||
<div className="brand">
|
||||
<a href="/">
|
||||
<img src="images/logo.svg" alt="Neon" width="32" height="32"/>
|
||||
<img src="images/logo.svg" alt="Neon" width="32" height="32" />
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -11,7 +25,7 @@ const Footer = () => {
|
|||
const renderCopyright = () => {
|
||||
const currentYear = new Date().getFullYear();
|
||||
return (
|
||||
<div class="footer-copyright">
|
||||
<div className="footer-copyright">
|
||||
© {currentYear} Zipcall, all rights reserved
|
||||
</div>
|
||||
)
|
||||
|
|
@ -19,60 +33,50 @@ const Footer = () => {
|
|||
|
||||
const renderSocials = () => (
|
||||
<div className="footer-social">
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/ianramzy/decentralized-video-chat"
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/ianramzy/decentralized-video-chat"
|
||||
>
|
||||
<GithubSvg />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const renderNav = () => (
|
||||
<nav className="footer-nav">
|
||||
<ul className="list-reset">
|
||||
<li>
|
||||
<a target="_blank" href="https://ianramzy.com">
|
||||
Made with ❤️ by Ian Ramzy
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">FAQ's</a></li>
|
||||
<li><a href="#">Support</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<ul className="list-reset">
|
||||
<li>
|
||||
<a target="_blank" href="https://ianramzy.com">
|
||||
Made with ❤️ by Ian Ramzy
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">FAQ's</a></li>
|
||||
<li><a href="#">Support</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
)
|
||||
|
||||
return (
|
||||
<footer className="site-footer center-content-mobile" id='footer'>
|
||||
<div className="container">
|
||||
<div className="site-footer-inner">
|
||||
<div className="footer-top space-between text-xxs">
|
||||
{renderBrand()}
|
||||
{renderSocials()}
|
||||
return (
|
||||
<footer className="site-footer center-content-mobile">
|
||||
<div className="container">
|
||||
<div className="site-footer-inner">
|
||||
<div className="footer-top space-between text-xxs">
|
||||
{renderBrand()}
|
||||
{renderSocials()}
|
||||
</div>
|
||||
<div className="footer-bottom space-between text-xxs invert-order-desktop">
|
||||
{renderNav()}
|
||||
{renderCopyright()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom space-between text-xxs invert-order-desktop">
|
||||
{renderNav()}
|
||||
{renderCopyright()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
const domContainer = document.getElementById('footer');
|
||||
ReactDOM.render(<Footer/>, domContainer);
|
||||
const domContainer = document.getElementById('react-footer');
|
||||
ReactDOM.render(<Footer />, domContainer);
|
||||
Loading…
Reference in New Issue