From 8e34cb9a7e48a40c7652cb09934106b6d21d85b7 Mon Sep 17 00:00:00 2001
From: Vijay_7747 <98015814+HTTPSVIJAY@users.noreply.github.com>
Date: Fri, 12 Jul 2024 23:47:11 +0530
Subject: [PATCH] Add files via upload

---
 style.css | 518 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 518 insertions(+)
 create mode 100644 style.css

diff --git a/style.css b/style.css
new file mode 100644
index 0000000..84ce99c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,518 @@
+*
+{
+    margin: 0;
+    padding: 0;
+    font-family: 'poppins', sans-serif;
+    box-sizing: border-box;
+}
+
+html
+{
+    scroll-behavior: smooth;
+}
+
+body
+{
+    background-color: black;
+    color: #fff;
+}
+
+#header
+{
+    width: 100%;
+    height: 100vh;
+    background-image: url(images/pic1.jpg);
+    background-size: cover;
+    background-position: center;
+}
+
+.container
+{
+    padding: 10px 10%;
+}
+
+nav
+{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.logo
+{
+    width: 140px;
+}
+
+nav ul li
+{
+    display: inline-block;
+    list-style: none;
+    margin: 10px 20px;
+}
+
+nav ul li a
+{
+    color: black;
+    text-decoration: none;
+    font-size: 18px;
+    position: relative;
+}
+
+nav ul li a::after
+{
+    content: '';
+    width: 0%;
+    height: 3px;
+    background: #ff004f;
+    position: absolute;
+    left: 0;
+    bottom: -6px;
+    transition: 0.5s;
+}
+
+nav ul li a:hover::after
+{
+    width: 100%;
+}
+
+.header-text
+{
+    margin-top: 10%;
+    font-size: 30px;
+}
+
+.header-text h1
+{
+    font-size: 52px;
+    margin-top: 10px;
+}
+
+.header-text h1 span
+{
+    color: #ff004f;
+}
+
+
+/* about */
+#about
+{
+    padding: 80px 0;
+    color: #ababab;
+}
+
+.row
+{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.about-col-1
+{
+    flex-basis: 35%;
+}
+
+.about-col-1 img
+{
+    width: 100%;
+    border-radius: 15px;
+}
+
+.about-col-2
+{
+    flex-basis: 60%;
+}
+
+.sub-title
+{
+    font-size: 60px;
+    font-size: 600;
+    color: #fff;
+}
+
+.tab-titles
+{
+    display: flex;
+    margin: 20px 0 40px;
+}
+
+.tab-links
+{
+    margin-right: 50px;
+    font-size: 18px;
+    font-weight: 500;
+    cursor: pointer;
+    position: relative;
+}
+
+.tab-links::after
+{
+    content: '';
+    width: 0;
+    height: 3px;
+    background: #ff004f;
+    position: absolute;
+    left: 0;
+    bottom: -8px;
+    transition: 0.5s;
+}
+
+.tab-links.active-link::after
+{
+    width: 50%;
+}
+
+.tab-contents ul li
+{
+    list-style-type: none;
+    margin: 0px 0;
+}
+
+.tab-contents ul li span
+{
+    color: #b54769;
+    font-size: 14px;
+}
+
+.tab-contents
+{
+    display: none;
+}
+
+.tab-contents.active-tab
+{
+    display: block;
+}
+
+/* services */
+
+#services
+{
+    padding: 30px 0;
+}
+
+.services-list
+{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
+    grid-gap: 40px;
+    margin-top: 50px;
+}
+
+.services-list div
+{
+    background: #262626;
+    padding: 40px;
+    font-size: 13px;
+    font-weight: 300;
+    border-radius: 10px;
+    transition: background 0.5s, transform 0.5s;
+}
+
+.services-list div i
+{
+    font-size: 50px;
+    margin-bottom: 30px;
+}
+
+.services-list div h2
+{
+    font-size: 30px;
+    font-weight: 500;
+    margin-bottom: 15px;
+}
+
+.services-list div a
+{
+    text-decoration: none ;
+    color: #fff;
+    font-size: 12px;
+    margin-top: 20px;
+    display: inline-block;
+}
+
+.services-list div:hover
+{
+    background: #ff004f;
+    transform: translateY(-10px);
+}
+
+/* portfolio */
+#portfolio
+{
+    padding: 50px 0;
+}
+
+.work-list
+{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
+    grid-gap: 40px;
+    margin-top: 50px;
+}
+
+.work
+{
+    border-radius: 10px;
+    position: relative;
+    overflow: hidden;
+}
+
+.work img
+{
+    width: 100%;
+    border-radius: 10px;
+    display: block;
+    transition: transform 0.5s;
+}
+
+.layer
+{
+    width: 100%;
+    height: 0%;
+    background: linear-gradient(rgba(0,0,0,0.6), #ff004f);
+    border-radius: 10px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 0 40px;
+    text-align: center;
+    font-size: 14px;
+    transition: height 0.5s;
+}
+
+.layer h3
+{
+    font-weight: 500;
+    margin-bottom: 20px;
+}
+
+.layer a
+{
+    margin-top: 20px;
+    color: #ff004f;
+    text-decoration: none;
+    font-size: 18px;
+    line-height: 60px;
+    background: #fff;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    text-align: center;
+}
+
+.work:hover img
+{
+    transform: scale(1.1);
+}
+
+.work:hover .layer
+{
+    height: 100%;
+}
+
+.btn
+{
+    display: block;
+    margin: 50px auto;
+    width: fit-content;
+    border: 1px solid #ff004f;
+    padding: 14px 50px;
+    border-radius: 6px;
+    text-decoration: none;
+    color: #fff;
+    transition: background 0.5s;
+}
+
+.btn:hover
+{
+    background-color: #ff004f;
+}
+
+.container p span
+{
+    color: #ff004f;
+}
+/* contact */
+
+.contact-left
+{
+    flex-basis: 35%;
+}
+
+.contact-right
+{
+    flex-basis: 60%;
+}
+
+.contact-left p
+{
+    margin-top: 30px;
+}
+
+.contact-left p i 
+{
+    color: #ff004f;
+    margin-right: 15px;
+    font-size: 25px;
+}
+
+.social-icons
+{
+    margin-top: 30px;
+}
+
+.social-icons a
+{
+    text-decoration: none;
+    font-size: 30px;
+    margin-right: 15px;
+    color: #ababab;
+    display: inline-block;
+    transition: transform 0.5s;
+}
+
+.social-icons a:hover
+{
+    color: #ff004f;
+    transform: translateY(-5px);
+}
+
+.btn.btn2
+{
+    display: inline-block;
+    background: #ff004f;
+}
+
+.contact-right form
+{
+    width: 100%;
+}
+
+form input, form textarea
+{
+    width: 100%;
+    border: 0;
+    outline: none;
+    background: #262626;
+    padding: 15px;
+    margin: 15px 0;
+    color: #fff;
+    font-size: 18px;
+    border-radius: 6px;
+}
+
+form .btn2
+{
+    padding: 14px 60px;
+    font-size: 18px;
+    margin-top: 20px;
+    cursor: pointer;
+}
+
+.copyright
+{
+    width: 100%;
+    text-align: center;
+    padding: 25px 0;
+    background: #262626;
+    font-weight: 300;
+    margin-top: 20px;
+}
+
+/* small screen */
+
+nav .fas
+{
+    display: none;
+}
+
+
+@media only screen and (max-width: 600px)
+{
+    #header
+    {
+        background-image: url(images/phone-background.png);
+    }
+    .header-text
+    {
+        margin-top: 100%;
+        font-size: 16px;
+    }
+    .header-text h1
+    {
+        font-size: 30px;
+    }
+    nav .fas
+    {
+    display: block;
+    font-size: 25px;
+    }
+    nav ul
+    {
+        background: #ff004f;
+        position: fixed;
+        top: 0;
+        right: -200px;
+        width: 200px;
+        height: 100vh;
+        padding-top: 50px;
+        z-index: 2;
+        transition: right 0.5s;
+    }
+    nav ul li
+    {
+      display: block;
+      margin: 25px;      
+    }
+    nav ul .fas
+    {
+        position: absolute;
+        top: 25px;
+        left: 25px;
+        cursor: pointer;
+    }
+    .sub-title
+    {
+        font-size: 40px;
+    }
+    .about-col-1, .about-col-2
+    {
+        flex-basis: 100%;
+    }
+    .about-col-1
+    {
+        margin-bottom: 30px;
+    }
+    .about-col-2
+    {
+        font-size: 14px;
+    }
+    .tab-links
+    {
+        font-size: 16px;
+        margin-right: 20px;
+    }
+    .contact-left, .contact-right
+    {
+        flex-basis: 100%;
+    }
+    .copyright
+    {
+        font-size: 14px;
+    }
+    
+}
+
+#msg
+{
+    color: #616161;
+    margin-top: -40px;
+    display: block;
+}
\ No newline at end of file