jason/Jnf.me
jason/Jnf.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling Flo's content and creating a copy of the page for Lucy

Browse Source
This commit is contained in:
Jason Williams 2022-11-19 20:14:20 -07:00
parent 15b9b0a4a1
commit 48845160a2
3 changed files with 121 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
www/css/main.css
View File

@ -94,6 +94,9 @@ textarea {
--jason-hover-bg-color: #913A50;
--jason-hover-fg-color: #FFFFFF;
--flo-bg-color: #601F22;
--flo-accent-color: #FFE4E1;
--flo-hover-bg-color: #00C4FF;
--flo-hover-fg-color: #FFFFFF;
}
body {
@ -192,6 +195,27 @@ div {
.splash.flo, .main.flo {
background-color: var(--flo-bg-color);
font-family: 'Quicksand', sans-serif;
}
.flo h1 {
font-family: 'Marck Script', cursive;
font-weight: 400;
}
.flo h1 a {
text-decoration: none;
color: var(--flo-accent-color);
}
.links.flo li a {
background-color: var(--flo-accent-color);
color: var(--flo-bg-color);
}
.links.flo li a:hover {
background-color: var(--flo-hover-bg-color);
color: var(--flo-hover-fg-color);
}
@media (orientation: landscape) {

20
www/index.html
View File

@ -12,11 +12,11 @@
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Raleway&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Marck+Script&family=Quicksand&family=Raleway&display=swap" rel="stylesheet">
<meta name="theme-color" content="#fafafa">
</head>
@ -52,13 +52,13 @@
<div id="main-flo" class="main flo notjason">
<div class="col-container">
<div id="banner-flo" class="banner flo notjason" data-person="flo">
<a href="/flo" class="openlink">Flo Banner</a>
<h1><a href="/flo" class="openlink">Flo de Guzman</a></h1>
</div>
<div id="links-flo" class="links flo notjason">
<ul>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i>Facebook</a></li>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i> Facebook</a></li>
</ul>
</div>
</div>
@ -72,9 +72,9 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="/js/vendor/modernizr-3.11.2.min.js"></script>
<script src="/js/plugins.js"></script>
<script src="/js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>

87
www/lucy.html Normal file
View File

@ -0,0 +1,87 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Welcome to JnF.me</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Marck+Script&family=Quicksand&family=Raleway&display=swap" rel="stylesheet">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<div id="container">
<div id="splash-jason" class="splash jason notflo">
<div class="col-container">
<img src="/img/splash-jason.jpg">
</div>
</div>
<div id="main-jason" class="main jason notflo">
<div class="col-container">
<div id="banner-jason" class="banner jason notflo" data-person="jason">
<a href="/jason" class="openlink" data-person="jason" data-pos="0vw"><img src="/img/profile-jason.png"></a>
<h1><a href="/jason" class="openlink">Jason Williams</a></h1>
</div>
<div id="links-jason" class="links jason notflo">
<ul>
<li><a href="https://ja.son-williams.ca"><i class="fa-solid fa-user"></i> Website</a></li>
<li><a href="https://ja.son-williams.ca/resume"><i class="fa-solid fa-file"></i> Résumé</a></li>
<li><a href="https://www.linkedin.com/in/jaywll/"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
<li><a href="https://twitter.com/jaywll"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
<li><a href="https://mstdn.ca/@jaywll"><i class="fa-brands fa-mastodon"></i> Mastodon</a></li>
<li><a href="https://www.instagram.com/jaywll/"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
<li><a href="https://jaywll.wordpress.com/category/blog/"><i class="fa-brands fa-wordpress"></i> Blog</a></li>
<li><a href="https://code.jaywll.co/explore/repos"><i class="fa-solid fa-code-branch"></i> Code</a></li>
<li><a href="https://ja.son-williams.ca/contact"><i class="fa-solid fa-envelope"></i> Contact Me</a></li>
</ul>
</div>
</div>
</div>
<div id="main-flo" class="main flo notjason">
<div class="col-container">
<div id="banner-flo" class="banner flo notjason" data-person="flo">
<h1><a href="/flo" class="openlink">Flo de Guzman</a></h1>
</div>
<div id="links-flo" class="links flo notjason">
<ul>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i> Facebook</a></li>
</ul>
</div>
</div>
</div>
<div id="splash-flo" class="splash flo notjason">
<div class="col-container">
Flo Splash
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/js/vendor/modernizr-3.11.2.min.js"></script>
<script src="/js/plugins.js"></script>
<script src="/js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>