shipping to get this out

isabellecharaf · Jul 20, 2024 · 8dd5fec · 8dd5fec
1 parent b9b0a1b
commit 8dd5fec
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 13 deletions.
diff --git a/src/Bagnard.otf b/src/Bagnard.otf
diff --git a/src/Favicon.png b/src/Favicon.png
diff --git a/src/css/main.css b/src/css/main.css
@@ -1,3 +1,136 @@
-html {
-    background: tomato;
+@font-face { font-family: Bagnard; src: url('Bagnard.otf'); }
+
+
+html, body {
+    height: 100vh;
+}
+
+body {
+    background: #E20006;
+
+}
+
+body, nav {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: start;
+    font-family: 'Bagnard', Fallback, sans-serif;
+    color: #111;
+    text-decoration: none;
+
+}
+
+a {
+  outline-color: transparent;
+}
+
+a:link {
+  color: #222;
+  text-decoration: none;
+}
+
+a:visited {
+  color: #222;
+  text-decoration: none;
+}
+
+a:focus {
+    color: #111;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: none;
+  color: #666;
+
+}
+
+a:active {
+text-decoration: none;
+  color: #222;
+}
+
+.content {
+    margin: 0 auto;
+    margin-top: -0.125em;
+    display: flex;
+    flex-direction: column;
+    max-width: 500px
+}
+
+.name {
+    text-transform: uppercase;
+    display: flex;
+    font-size: 2em; 
+}
+
+.name > span {
+    display: block;
+    margin: 0 .5em;
+}
+.name > span:nth-child(1){
+    margin-top: 3em;
+}
+.name > span:nth-child(2){
+    margin-top: 2em;
+}
+.name > span:nth-child(3){
+    margin-top: 1.5em;
+}
+.name > span:nth-child(4){
+    margin-top: .8em;
+}
+.name > span:nth-child(5){
+    margin-top: 1em;
+}
+.name > span:nth-child(6){
+    margin-top: 2.2em;
+}
+.name > span:nth-child(7){
+    margin-top: 3em;
+}
+.name > span:nth-child(8){
+    margin-top: 5em;
+}
+
+.tilted-copy {
+    align-self: end;
+    margin-top: 2em;
+    display: flex;
+    flex-direction: column;
+    transform: rotate(8deg);
+    font-size: 1em;
+}
+
+.tilted-copy > p{
+line-height: 0;
+margin-bottom: 0;
+
+}
+
+footer {
+    margin-top: 10em;
+}
+
+footer {
+  margin-top: 10em;
+}
+
+footer > nav {
+  margin: 0;
+}
+
+footer > nav > ul {
+  display: flex;
+  list-style: none;
+  padding-left: 1em;
+  justify-content: center;
+}
+
+footer > nav > ul > li {
+  margin: 0 1.25em;
+  font-size: 1.3em;
+  text-decoration: none;
+  text-transform: lowercase;
 }
diff --git a/src/index.html b/src/index.html
@@ -2,12 +2,15 @@
 
 <head>
     <link rel="stylesheet" href="css/main.css">
+    <script type="text/javascript" src="scripts/main.js"></script>
+    <title>Isabelle Charafeddine</title>
+  <link rel="icon" type="image/x-icon" href="Favicon.png">
     </link>
 </head>
 
 <body>
-    <main>
-        <h1>
+    <section class="content">
+        <h1 class="name">
             <span>I</span>
             <span>S</span>
             <span>A</span>
@@ -17,23 +20,22 @@ <h1>
             <span>L</span>
             <span>E</span>
         </h1>
-        <div>
+        <div class="tilted-copy">
             <p>Product designer based in San Francisco</p>
-            <p>Featured in Product Hunt’s top 10</p>
-            <p>Currently working on growth at Plaid</p>
-            <p>I like bikes and yarn</p>
+            <p>Featured in <a href="https://www.producthunt.com/products/plaid#plaid-wallet-onboard">Product Hunt’s top 10</a></p>
+            <p>Currently working on growth at <a href="https://plaid.com/">Plaid</a></p>
+            <p>I like <a href="https://www.strava.com/athletes/47473569">bikes</a> and <a href="https://www.ravelry.com/people/dirtyneedle">yarn</a></p>
         </div>
-    </main>
+
 
     <footer>
         <nav>
             <ul>
-                <li>Portfolio</li>
-                <li>Contact</li>
-                <li>CV</li>
+                <li><a href="mailto:[email protected]">Contact</a></li>
+
             </ul>
         </nav>
     </footer>
 </body>
-
+<section>
 </html>
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -0,0 +1,28 @@
+console.log("hello world");
+
+var skyBlue = "#5CA4D6";
+var huntyGreen = "#3F4A22";
+var bgColorIndex = 0;
+
+var funkyBgColors = [
+    skyBlue, 
+    huntyGreen,
+    'tomato'
+]
+
+window.onload = () => {
+    console.log("loaded");
+    document.body.onclick = () => {
+
+        console.log("clicked body");
+        var nextBgColor = funkyBgColors[bgColorIndex] 
+        document.getElementsByTagName("body")[0].style.background = nextBgColor;
+        console.log(nextBgColor);
+        bgColorIndex = bgColorIndex + 1;
+
+        if (bgColorIndex == 3) {
+         bgColorIndex = 0;
+        }
+    }
+
+}