Styling

alex090890 · Mar 7, 2024 · ca212cd · ca212cd
1 parent 9480a57
commit ca212cd
Show file tree

Hide file tree

Showing 9 changed files with 237 additions and 4 deletions.
diff --git a/public/index.html b/public/index.html
@@ -11,7 +11,9 @@
     -->
 	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 	<link rel="shortcut icon" type="image/jpg" href="AlexProf-logo-1.jpg">
-
+  <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=Ballet:[email protected]&display=swap" rel="stylesheet">
 	<!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,14 @@
 import MyTabs from "./components/MyTabs";
+import Header from "./components/Header";
 import "./styles.css";
 
 export default function App() {
   return (
     <div className="App">
-      <MyTabs />
+      <div className="maincontainer">
+        <Header />
+        <MyTabs />
+      </div>
     </div>
   );
 }
diff --git a/src/components/Address.jsx b/src/components/Address.jsx
@@ -0,0 +1,16 @@
+export default function Address() {
+  return (
+    <div>
+      <h2>Postal adress</h2>
+      <p>
+        Oleksandr Lazurenko
+        <br />
+        Holzhofallee 36
+        <br />
+        64295 Darmstadt
+        <br />
+        Deutschland
+      </p>
+    </div>
+  );
+}
diff --git a/src/components/AlexProf-logo-1.jpg b/src/components/AlexProf-logo-1.jpg
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,9 @@
+import Title from "./Title";
+
+export default function Header() {
+  return (
+    <div className="header">
+      <Title />
+    </div>
+  );
+}
diff --git a/src/components/MyTabs.jsx b/src/components/MyTabs.jsx
@@ -1,6 +1,8 @@
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
+import Address from "./Address";
 import Currentposition from "./Currentposition";
+import Social from "./Social";
 
 const MyTabs = () => {
   return (
@@ -16,10 +18,13 @@ const MyTabs = () => {
       <TabPanel>
         <h2>Welcome</h2>
       </TabPanel>
-      <TabPanel></TabPanel>
+      <TabPanel>
+        <Social />
+      </TabPanel>
       <TabPanel>
         <h2>Our Location</h2>
         <Currentposition />
+        <Address />
       </TabPanel>
       <TabPanel></TabPanel>
       <TabPanel></TabPanel>

diff --git a/src/components/Social.jsx b/src/components/Social.jsx
@@ -0,0 +1,64 @@
+export default function Social() {
+  return (
+    <div>
+      <img
+        className="social"
+        width="48"
+        height="48"
+        src="https://img.icons8.com/color/48/instagram-new--v2.png"
+        alt="instagram-new--v2"
+      />
+      <img
+        className="social"
+        width="48"
+        height="48"
+        src="https://img.icons8.com/pulsar-line/48/threads.png"
+        alt="threads"
+      />
+      <img
+        className="social"
+        width="48"
+        height="48"
+        src="https://img.icons8.com/color/48/twitterx--v1.png"
+        alt="twitterx--v1"
+      />
+      <img
+        className="social"
+        width="48"
+        height="48"
+        src="https://img.icons8.com/color/48/facebook-new.png"
+        alt="facebook-new"
+      />
+      <a href="https://discord.gg/2sUr3M6WPS" target="_blank">
+        <img
+          className="social"
+          width="48"
+          height="48"
+          src="https://img.icons8.com/color/48/discord-logo.png"
+          alt="discord-logo"
+        />
+      </a>
+      <img
+        className="social"
+        width="48"
+        height="48"
+        src="https://img.icons8.com/sf-regular-filled/48/medium-logo.png"
+        alt="medium-logo"
+      />
+      <img
+        className="social"
+        width="48"
+        height="48"
+        src="https://img.icons8.com/color/48/youtube-squared.png"
+        alt="youtube-squared"
+      />
+      <img
+        className="social"
+        width="48"
+        height="48"
+        src="https://img.icons8.com/color/48/tiktok--v1.png"
+        alt="tiktok--v1"
+      />
+    </div>
+  );
+}
diff --git a/src/components/Title.jsx b/src/components/Title.jsx
@@ -0,0 +1,70 @@
+export default function Title() {
+  return (
+    <div className="title">
+      <div>
+        <img src="AlexProf-logo-1.jpg" alt="AlexProf" className="logo" />
+        <h1 className="pagetitle">AlexProf services</h1>
+      </div>
+      <div>
+        <img
+          className="social"
+          width="48"
+          height="48"
+          src="https://img.icons8.com/color/48/instagram-new--v2.png"
+          alt="instagram-new--v2"
+        />
+        <img
+          className="social"
+          width="48"
+          height="48"
+          src="https://img.icons8.com/pulsar-line/48/threads.png"
+          alt="threads"
+        />
+        <img
+          className="social"
+          width="48"
+          height="48"
+          src="https://img.icons8.com/color/48/twitterx--v1.png"
+          alt="twitterx--v1"
+        />
+        <img
+          className="social"
+          width="48"
+          height="48"
+          src="https://img.icons8.com/color/48/facebook-new.png"
+          alt="facebook-new"
+        />
+        <a href="https://discord.gg/2sUr3M6WPS" target="_blank">
+          <img
+            className="social"
+            width="48"
+            height="48"
+            src="https://img.icons8.com/color/48/discord-logo.png"
+            alt="discord-logo"
+          />
+        </a>
+        <img
+          className="social"
+          width="48"
+          height="48"
+          src="https://img.icons8.com/sf-regular-filled/48/medium-logo.png"
+          alt="medium-logo"
+        />
+        <img
+          className="social"
+          width="48"
+          height="48"
+          src="https://img.icons8.com/color/48/youtube-squared.png"
+          alt="youtube-squared"
+        />
+        <img
+          className="social"
+          width="48"
+          height="48"
+          src="https://img.icons8.com/color/48/tiktok--v1.png"
+          alt="tiktok--v1"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/styles.css b/src/styles.css
@@ -1,8 +1,71 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body,
+html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
 .App {
   font-family: sans-serif;
+  background-image: url("https://images.pexels.com/photos/673648/pexels-photo-673648.jpeg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: fill;
+  height: 100%;
+  width: 100%;
+  color: black;
+  top: 0;
+  left: 0;
+  position: fixed;
+  overflow-y: scroll;
+}
+
+.maincontainer {
+  margin: 0 20px;
+}
+
+.social {
+  height: 30px;
+  width: 30px;
+}
+
+.logo {
+  height: 30px;
+  width: 30px;
+}
+
+.title {
   text-align: center;
+  padding-top: 20px;
+  display: inline-grid;
+  grid-template-columns: 1fr 1fr;
+  width: 100%;
+  justify-items: stretch;
+  align-items: center;
 }
 
-h1 {
+.title h1 {
+  display: inline;
+  margin-left: 10px;
+  margin-right: 10px;
+  font-family: "Ballet", cursive;
+  font-optical-sizing: auto;
+  font-weight: 900;
+  font-style: normal;
+  font-size: 50px;
+}
+
+.pagetitle {
   text-align: center;
 }
+
+@media screen and (max-width: 600px) {
+  .title {
+    grid-template-columns: 1fr;
+  }
+}