UPDATE

- Fix bugs - Update archive foobar.ai In `archive/foobar.ai/product` - Remove <a> border-radius - Include valid CSS files in product.html In `css/main.css`: 1. Try using Open Sans for MicroSoft Windows because it looks ugly af.
4yman-0 · Oct 8, 2024 · c474cd4 · c474cd4
1 parent 176e429
commit c474cd4
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 30 deletions.
diff --git a/archive/foobar.ai/css/main.css b/archive/foobar.ai/css/main.css
@@ -1,15 +1,4 @@
-/* VARIABLES */
-
-:root {
-    --font: Tahoma, Arial, sans-serif;
-    --text: #DDF;
-    --text-grayed: #99B;
-    --bg: #050505;
-    --bg-2: #111;
-    --bg-3: #222;
-    --primary: #45F;
-    --secondary: #8ea;
-}
+
 
 /* CSS RESET */
 

diff --git a/archive/foobar.ai/index.css b/archive/foobar.ai/index.css
@@ -1,3 +1,19 @@
+/* VARIABLES */
+
+:root {
+    --bg-1: #050505;
+    --bg-2: #111;
+    --bg-3: #222;
+    --primary: #45F;
+    --secondary: #8ea;
+    --teritary: #8ae;
+}
+
+.color {
+	color: var(--secondary);
+	padding: 0;
+}
+
 .header {
     padding: 0 1.5rem;
 }
@@ -39,6 +55,7 @@
 }
 
 .cards {
+	display: flex;
     margin-top: 1rem;
 }
 
@@ -47,8 +64,7 @@
     flex: 0 0 auto;
     width: 40%;
     min-width: 300px;
-    height: 10rem;
-    padding: 2rem;
+    padding: 1.5rem;
     margin: 0 .2rem;
     background: var(--bg-3);
     border-radius: .5rem;
@@ -63,8 +79,12 @@
     color: var(--text-grayed);
 }
 
+.horiz-scroll {
+	overflow-x: scroll;
+}
+
 .solutions {
-    padding-top: 20vh;
+    padding-top: 15vh;
 }
 
 .solutions__title {

diff --git a/archive/foobar.ai/index.html b/archive/foobar.ai/index.html
@@ -11,8 +11,9 @@
 
     <title>foobar.ai</title>
 
-    <link rel="stylesheet" href="css/main.css">
-    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="../../css/fixes.css">
+    <link rel="stylesheet" href="../../css/main.css">
+    <link rel="stylesheet" href="../../css/page.css">
     <link rel="stylesheet" href="index.css">
 </head>
 <body>
@@ -47,7 +48,7 @@ <h2 class="hero__title">
         </div>
     </section>
     <section class="section why-foobar" id="why-foobar">
-        <h2 class="why-foobar__title">Why <span class="logo color">foobar</span>?</h2>
+        <h2 class="why-foobar__title">Why <span class="color">foobar</span>?</h2>
         <dl class="cards horiz-scroll">
             <div class="card">
                 <dt><h3 class="card__title">AI buzz</h3></dt>

diff --git a/archive/foobar.ai/product/index.html b/archive/foobar.ai/product/index.html
@@ -10,8 +10,8 @@
 
     <title>foobar.ai: Pro Max Platinum+</title>
 
-    <link rel="stylesheet" href="../css/main.css">
-    <link rel="stylesheet" href="../css/styles.css">
+    <link rel="stylesheet" href="../../../css/fixes.css">
+    <link rel="stylesheet" href="../../../css/main.css">
     <link rel="stylesheet" href="product.css">
 </head>
 <body>
@@ -41,7 +41,7 @@ <h1 class="header__title">foobar<span class="color">.ai</span>: Pro Max Platinum
                     disabled>
                 </div>
             </div>
-            <button class="button disabled buy__btn">Buy</button>
+            <a href="#" class="button disabled buy__btn">Buy</a>
         </div>
         <div class="product">
             <h2 class="product__title">

diff --git a/archive/foobar.ai/product/product.css b/archive/foobar.ai/product/product.css
@@ -28,8 +28,11 @@
 }
 
 .buy, .product {
-    min-height: 50vh;
-    padding: 5%;
+    min-height: 30vh;
+    padding: 3%;
+	margin: 2%;
+	background: var(--bg-3);
+	border-radius: 10px;
 }
 
 .buy {
@@ -64,8 +67,7 @@
 }
 
 .buy__btn:hover {
-    color: #B00;
-    border-color: #B00;
+    color: #C22;
 }
 
 .product__cost {

diff --git a/css/main.css b/css/main.css
@@ -9,7 +9,7 @@
     --primary: #787;
     --secondary: #446;
     --teritary: #886;
-    --font-1: "Noto Sans", sans-serif;
+    --font-1: "Noto Sans", "Open Sans", sans-serif€;
     --font-2: "Ubuntu Mono", "Courier New", monospace;
 }
 
@@ -51,7 +51,6 @@ body {
 a {
     color: var(--primary);
     padding: 0.2rem;
-    border-radius: 4px;
     text-decoration: none;
 }
 
@@ -67,6 +66,7 @@ a:active{
     padding: 0.4rem .8rem;
     text-align: center;
     cursor: pointer;
+    border-radius: 4px;
     background: var(--bg-3);
     font-weight: 700;
     transition: background 0.1s linear;

diff --git a/index.html b/index.html
@@ -65,7 +65,7 @@ <h2 class="things__txt">Things:</h2>
                     <a href="verbose-webpage">browser information collector</a>
                 </li>
                 <li class="link-grid-item">
-                    <a href="verbose-webpage">fake AI website</a>
+                    <a href="archive/foobar.ai">fake AI website</a>
                 </li>
                 <li class="link-grid-item">
                     <p>And nothing else important...</p>
@@ -78,14 +78,14 @@ <h2 class="contact__txt">Contact me:</h2>
                 <li class="link-flex">
                     <a class="button button--focus link-flex__btn"
 						href="https://www.github.com/4yman-0">
-                        <img class="link-flex__icon" src="img/gh.svg" alt="Github icon">
+                        <img class="link-flex__icon" src="img/gh.svg" alt="icon">
                         Github
                     </a>
                 </li>
                 <li class="link-flex">
                     <a class="button link-flex__btn"
 						href="https://web.facebook.com/profile.php?id=61559737784942">
-                        <img class="link-flex__icon" src="img/fb.svg" alt="FaceBook icon">
+                        <img class="link-flex__icon" src="img/fb.svg" alt="icon">
                         FaceBook
                     </a>
                 </li>