freelencer web page

yavuzahmet1 · Oct 26, 2024 · d0e5866 · d0e5866
1 parent 4c43a29
commit d0e5866
Show file tree

Hide file tree

Showing 2 changed files with 195 additions and 1 deletion.
diff --git a/frontend/html-css/class-notes/hc-09-CSS-combinators/practice/index.html b/frontend/html-css/class-notes/hc-09-CSS-combinators/practice/index.html
@@ -4,12 +4,72 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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=DynaPuff:[email protected]&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="style.css">
     <title>Practice</title>
 </head>
 
 <body>
-    <h1>Practice</h1>
+    <header>
+        <a href=""><img src="../images/logo.png" alt=""></a>
+        <section class="sign-in"><a href="">Login</a>|
+            <a href="">Register</a>
+        </section>
+    </header>
+    <nav class="sticky">
+        <a href="#">Home</a>
+        <a href="#">Login</a>
+        <a href="#">Register</a>
+        <a href="#">Contact</a>
+    </nav>
+    <nav class="banner">
+        <img src="../images/banner.jpg" alt="">
+        <section class="hero">
+            <h2>Hi There!</h2>
+            <h3>Your Freelencer is there</h3>
+            <button>Get Detail</button>
+        </section>
+    </nav>
+    <main>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A consequatur, atque voluptas nulla corrupti est
+            incidunt magnam maiores in rerum aspernatur quod iure ipsa minus vero! Autem nam mollitia non quis ratione
+            sunt error ut tenetur cupiditate. Blanditiis suscipit exercitationem voluptates, ratione temporibus
+            repudiandae, aspernatur ea non ut repellat eum molestias labore. Sequi voluptas fuga blanditiis expedita
+            error autem veniam exercitationem similique et perferendis dolore sunt deserunt minima distinctio at
+            possimus iusto vel, dolorum explicabo.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A consequatur, atque voluptas nulla corrupti est
+            incidunt magnam maiores in rerum aspernatur quod iure ipsa minus vero! Autem nam mollitia non quis ratione
+            sunt error ut tenetur cupiditate. Blanditiis suscipit exercitationem voluptates, ratione temporibus
+            repudiandae, aspernatur ea non ut repellat eum molestias labore. Sequi voluptas fuga blanditiis expedita
+            error autem veniam exercitationem similique et perferendis dolore sunt deserunt minima distinctio at
+            possimus iusto vel, dolorum explicabo.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A consequatur, atque voluptas nulla corrupti est
+            incidunt magnam maiores in rerum aspernatur quod iure ipsa minus vero! Autem nam mollitia non quis ratione
+            sunt error ut tenetur cupiditate. Blanditiis suscipit exercitationem voluptates, ratione temporibus
+            repudiandae, aspernatur ea non ut repellat eum molestias labore. Sequi voluptas fuga blanditiis expedita
+            error autem veniam exercitationem similique et perferendis dolore sunt deserunt minima distinctio at
+            possimus iusto vel, dolorum explicabo.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A consequatur, atque voluptas nulla corrupti est
+            incidunt magnam maiores in rerum aspernatur quod iure ipsa minus vero! Autem nam mollitia non quis ratione
+            sunt error ut tenetur cupiditate. Blanditiis suscipit exercitationem voluptates, ratione temporibus
+            repudiandae, aspernatur ea non ut repellat eum molestias labore. Sequi voluptas fuga blanditiis expedita
+            error autem veniam exercitationem similique et perferendis dolore sunt deserunt minima distinctio at
+            possimus iusto vel, dolorum explicabo.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A consequatur, atque voluptas nulla corrupti est
+            incidunt magnam maiores in rerum aspernatur quod iure ipsa minus vero! Autem nam mollitia non quis ratione
+            sunt error ut tenetur cupiditate. Blanditiis suscipit exercitationem voluptates, ratione temporibus
+            repudiandae, aspernatur ea non ut repellat eum molestias labore. Sequi voluptas fuga blanditiis expedita
+            error autem veniam exercitationem similique et perferendis dolore sunt deserunt minima distinctio at
+            possimus iusto vel, dolorum explicabo.</p>
+    </main>
+    <section class="slack"><a href="#"><i class="fa-brands fa-slack"></i></a></section>
 </body>
 
 </html>
diff --git a/frontend/html-css/class-notes/hc-09-CSS-combinators/practice/style.css b/frontend/html-css/class-notes/hc-09-CSS-combinators/practice/style.css
@@ -0,0 +1,134 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    /* font-family: "DynaPuff", system-ui; */
+    font-family: "Open Sans", sans-serif;
+}
+
+/*! HEADER */
+header {
+    background-color: #8EC5FC;
+    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
+
+}
+
+header a img {
+
+    width: 60px;
+}
+
+header .sign-in {
+    float: right;
+    padding-top: 2rem;
+    padding-right: 0.5rem;
+}
+
+header .sign-in a {
+    color: #920101;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+header .sign-in a:hover {
+    border-bottom: 2px solid #920101;
+}
+
+/*! NAV STICKY */
+nav.sticky {
+    position: sticky;
+    top: 0;
+    background-color: #FBAB7E;
+    background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
+    padding: 2rem;
+    text-align: center;
+    z-index: 2;
+}
+
+nav.sticky a {
+    color: black;
+    text-decoration: none;
+    margin: 0.8rem;
+    font-family: "DynaPuff", system-ui;
+}
+
+nav.sticky a:hover {
+    color: #fff;
+}
+
+nav.banner {
+    position: relative;
+    line-height: 3rem;
+}
+
+nav.banner img {
+    width: 100%;
+    max-height: calc(100vh-202px)
+}
+
+nav.banner .hero {
+    position: absolute;
+    top: 40%;
+    left: 10%;
+    /* transform: translate(-50%, -50%); */
+}
+
+nav.banner .hero h2 {
+    color: #fff;
+    font-size: 3rem;
+    text-shadow: 0 3px 4px black;
+}
+
+nav.banner .hero h3 {
+    color: red;
+    font-size: 1rem;
+    text-shadow: 0 3px 4px black;
+}
+
+nav.banner .hero button {
+    padding: 0.7rem;
+    border: none;
+    outline: none;
+    border-radius: 10px;
+    font-weight: 700;
+    background-color: #c8969E;
+}
+
+/* //! MAIN */
+
+main {
+    padding: 2rem;
+    text-align: justify;
+}
+
+main p {
+    margin: 10px;
+}
+
+.slack {
+
+    background-color: burlywood;
+    width: 3rem;
+    height: 3rem;
+    position: fixed;
+    text-align: center;
+    bottom: 2rem;
+    right: 2rem;
+    font-size: 2rem;
+    border-radius: 50%;
+    color: #920101;
+    padding-top: 1px;
+}
+
+.slack:hover {
+    outline-offset: 3px;
+    outline: 2px solid black;
+}
+
+.slack a {
+    color: white;
+}
+
+.slack a:hover {
+    color: black;
+}