Add files via upload

bayan-almasri10 · Dec 1, 2023 · 3c16a83 · 3c16a83
commit 3c16a83
Show file tree

Hide file tree

Showing 38 changed files with 2,237 additions and 0 deletions.
diff --git a/Fonts/NirmalaB.ttf b/Fonts/NirmalaB.ttf
diff --git a/Fonts/futura-light-bt.ttf b/Fonts/futura-light-bt.ttf
diff --git a/Fonts/futura-medium-condensed-bt.ttf b/Fonts/futura-medium-condensed-bt.ttf
diff --git a/contact-qr.html b/contact-qr.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./css/normalize.css">
+    <link rel="stylesheet" href="./css/contact-qr.css">
+    <link rel="icon" href="./imgs/SZ-07.png">
+    <!-- font Awesome -->
+    <link rel="stylesheet" href="./css/all.min.css">
+    <!-- google font poppins -->
+    <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=Cairo:wght@200;300;400;500;700&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,300&family=Playfair+Display:wght@400;500;600;700;900&family=Poppins:wght@200;300;400;500;600;700;800;900&family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <title>contact-qr</title>
+</head>
+<body>
+    <div class="page">
+        <div class="logo">
+            <img src="./imgs/SZ-05.png" alt="">
+        </div>
+        <div class="container">
+            <div class="cont insta">
+                <a href="https://www.instagram.com/slice.z/?fbclid=IwAR0HUhjabW974hzEfc86_pwAp8ZssJE-bTjNbyCcyc3NGv-gcDShl_lQKfU"><img class="social" src="./imgs/SZ-19.png" alt="insta"></a>
+                <h2>Our Instagram</h2>
+            </div>
+            <div class="cont facebook">
+                <a href="https://www.facebook.com/slicezdesign/"><img class="social" src="./imgs/SZ-24.png" alt="facebook"></a>
+                <h2>Our Facebook</h2>
+            </div>
+            <div class="cont behance">
+                <a href="https://www.behance.net/slicezgd09"><img class="social" src="./imgs/SZ-25.png" alt="behance"></a>
+                <h2>Our Behance</h2>
+            </div>
+            <div class="cont location">
+                <a href=""><img class="social" src="./imgs/SZ-23.png" alt="location"></a>
+                <h2>Our Location</h2>
+            </div>
+        </div>
+        <div class="contact">
+            <a href="mailto:[email protected]"><i class="fa-regular fa-envelope"></i></a>
+            <a href=""><i class="fa-brands fa-whatsapp"></i></a>
+            <a href=""><i class="fa-solid fa-paper-plane"></i></a>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/css/all.min.css b/css/all.min.css
diff --git a/css/contact-qr.css b/css/contact-qr.css
@@ -0,0 +1,159 @@
+*{
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+:root{
+    --main-color:#EA5167;
+    --main-color-alt:#EA5167;
+    --text-color:#b0a6a6;
+    --main-transition:0.3s;
+    --main-padding-top:100px;
+    --main-padding-bottom:100px;
+    --section-background:#232450;
+}
+html{
+    scroll-behavior: smooth;
+}
+body{
+    font-family: "poppins", sans-serif;
+}
+a{
+    text-decoration: none;
+}
+.container{
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-left: auto;
+    margin-right: auto;
+}
+/*small*/
+@media (min-width:768px){
+    .container{
+        width: 750px;
+    }
+}
+/* medium */
+@media (min-width:992px){
+    .container{
+        width: 970px;
+    }
+}
+/* large */
+@media (min-width:1200px){
+    .container{
+        width: 1170px;
+    }
+}
+/* end global rules */
+
+.page{
+    background-color: var(--section-background);
+    padding-bottom: var(--main-padding-bottom);
+    padding-top: var(--main-padding-top);
+    /* display: flex; */
+}
+/*logo*/
+.logo{
+    display: flex;
+    justify-content: center; 
+}
+.logo img{
+    width: 40%;
+}
+@media (max-width:767px){
+    .logo img{
+        width: 250px;
+    }
+}
+.container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding-bottom: var(--main-padding-bottom);
+    padding-top: var(--main-padding-top);
+}
+.cont{
+    width: 70%;
+    background-color: rgb(61, 60, 60);
+    margin-bottom: 30px;
+    border-radius: 40px;
+}
+@media (max-width:376px){
+    .cont{
+        width: 90%;
+        }
+}
+.container .insta{
+    display: flex;
+}
+.container .insta a ,
+.container .facebook a,
+.container .behance a,
+.container .location a{
+    width: 40%;
+    height: 30%;
+    padding: 10px;
+}
+.container .insta a .social,
+.container .facebook a .social,
+.container .behance a .social,
+.container .location a .social
+{
+    display: flex;
+    width: 20%;
+}
+@media (max-width:767px){
+    .container .insta a .social,
+    .container .facebook a .social,
+    .container .behance a .social,
+    .container .location a .social
+    {
+        width: 40px;
+    }
+}
+.container .insta h2,
+.container .facebook h2,
+.container .behance h2,
+.container .location h2{
+    color: var(--text-color);
+    font-size: 30px;
+    display: flex;
+    align-items: center;
+}
+@media (max-width:767px){
+    .container .insta h2,
+    .container .facebook h2,
+    .container .behance h2,
+    .container .location h2{
+        font-size: 20px;
+    }
+}
+.container .facebook{
+    display: flex;
+}
+.container .behance{
+    display: flex;
+}
+.container .location{
+    display: flex;
+}
+.contact{
+    display: flex;
+    justify-content: center;
+}
+.contact a i{
+    color: white;
+    font-size: 50px;
+    padding: 30px;
+}
+@media (max-width:767px){
+    .contact a i{
+        font-size: 30px;
+        padding: 30px;
+    }
+}