DekodePortfolio

----------------------index.html file-------------------

<title>Divyansh Portfolio Website</title> <script src="https://kit.fontawesome.com/34f23c8a22.js" crossorigin="anonymous"></script>

Home
About
Services
Portfolio
Contact

UI.UX Designer

Hi,I'm Divyansh
Pratap Singh
From India

About Me

I am Divyansh Pratap Singh. I have experience of video editing for 1 year and have basic knowledge about sql and python.Currently i am learning front End Development.I am from CSE Department living in India.I have been a 5 star rating holder at TypeDozo with Certification.

            </p>
            <div class="tab-titles">
                <p class="tab-links active-link " onclick="opentab('skills')">Skills</p>
                <p class="tab-links"onclick="opentab('experience')">Experience</p>
                <p class="tab-links" onclick="opentab('education')">Education</p>
            </div>
            <div class="tab-contents active-tab" id="skills">
                <ul>
                    <li><span>UI/UX</span><br>Designing Web/App Interfaces</li>
                    <li><span>Web Development</span><br>Designing Web/App Interfaces</li>
                    <li><span>App Development</span><br>Building Android/Ios apps</li>
                </ul>
            </div>
            <div class="tab-contents" id="experience">
                <ul>
                    <li><span>2021 - Current</span><br>UI/UX Design Training at ET Institute</li>
                    <li><span>2019 - 2021</span><br>Team lead at StarApp Lic.</li>
                    <li><span>2017-2029</span><br>UI/ux Design Executive at Coin Digital  Ltd.</li>
                    <li><span>2016-2017</span><br>Internship at eart eCommerce.</li>

                </ul>
            </div>
            <div class="tab-contents" id="education">
                <ul>
                    <li><span>2016</span><br>UI/UX Design Training at ET Institute</li>
                    <li><span>2016</span><br>MBA from MIT Bangalore.</li>
                    <li><span>2014</span><br>BBA from ISM Bangalore.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

My Services

Web Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam dolor aliquam maxime, sed quaerat omnis totam cupiditate, magni exercitationem obcaecati voluptates doloribus iure.

learn more

UI/UX Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam dolor aliquam maxime, sed quaerat omnis totam cupiditate, magni exercitationem obcaecati voluptates doloribus iure.

learn more

App Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam dolor aliquam maxime, sed quaerat omnis totam cupiditate, magni exercitationem obcaecati voluptates doloribus iure.

learn more

</div>

My Work

Social Media App

The app connects you to the talented people around the world.Download it from Play Store

        </div>
        <div class="work">
            <img src="images/my image.jpg" alt="">
            <div class="layer">
                <h3>Doing Projects</h3>
                <p>Project Making</p>
                <a href="#"><i class="fa-solid fa-up-right-from-square"></i></i></a>
            </div>
        </div>
        <div class="work">
            <img src="images/work-3.png" alt="">
            <div class="layer">
                <h3>Online Shopping Apps</h3>
                <p>The app connect you to talented people</p>
                <a href="#"><i class="fa-solid fa-up-right-from-square"></i></a>
            </div>
        </div>
    </div>
    <a href="#" class="btn">See More</a>
</div>

Contact Me

contact@example.com

09373907387

                <a href=""><i class="fa-brands fa-youtube"></i></a>
              
                <a href="https://in.linkedin.com/in/divyansh-pratap-singh-5338a5272"><i class="fa-brands fa-linkedin"></i></a>
            
            </div>
            <a href="images/my cv 2.pdf" download class="btn btn2">Download CV</a>
        </div>
        <div class="contact-right">
            <form name="submit-to-google-sheet">
                <input type="text" name="Name" placeholder="Your Name" required>
                <input type="text" name="email" placeholder="Your Email" required>
                <textarea name="Message"  rows="6" placeholder="Your Message"></textarea>
                <button type="submit" class="btn btn2">Submit </button>
            </form>  
        </div>
    </div>
</div>
<div class="copyright">
    <p>Copyright <i class="fa-regular fa-copyright"></i> Dekod . Made with <i class="fa-solid fa-heart"></i> by Divyansh pratap Singh </p>
</div>

--------------------------cssfile ----------------------

*{ margin: 0; padding: 0; font-family:'Times New Roman', Times, serif; box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ background: #080808; color:#fff; } #header{ width: 100%; height: 100vh; background-image: url(images/main\ bg\ 51.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: #fff; text-decoration: none; font-size: 18px; position: relative;

} nav ul li a::after{ content: ''; width: 0; height: 3px; background: #fab005; position: absolute; left: 0; bottom: -6px; transition: 0.5s;

} nav ul li a:hover::after{ width: 100%; } .header-text{ margin-top: 20%; font-size: 30px;

} .header-texth1{ font-size: 60px; margin-top: 20px;

} .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-weight: 600; color: white;

} .tab-titles{ display: flex; margin: 20px 0 40px;

} .tab-links{ margin-right: 50px; font-size: 18px; font-weight: 900; 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: none; margin: 10px 0;

} .tab-contents ul li span{ color: #b54769; font-size: 14px; } .tab-contents{ display: none;

} .tab-contents.active-tab{ display: block; }

/* --------services------- */ .services-list{ display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); grid-gap: 40px; margin-top: 50px; } .services-list div{ background: #263636; padding: 40px; font-size: 13px; font-weight: 300; border-right: 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-color: #ff004f; transform: translateY(); } .work{ border-radius: 10px; position: relative; overflow: hidden; } .work img{ margin: 10px; display: flex; display: inline; width: 20%; border-radius: 10px; transition:transform 0.5s ;

} .layer{ width: 100%; height: 100%; 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; } .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: black; width: 60px; height: 60px; border-radius: 50%; text-align: center; } work:hover img{ transform: scale(1.1);

} .btn{ display: block; margin: 50px auto; width: fit fit-content; border: 1px solid #ff004f; padding: 14px 50px; border-radius: 6px; text-decoration: none; color: #fff; } .btn:hover{ background-color: #ff004f; } /* --------contact------------ */ .contact-left{ flex-basis:60%; } .contact-right{ flex-basis: 60%;

} .contact-left p{ margin-top: 30px;

} .contact-left p i{ color: #ff004f; margin: 15px; font-size: 25px; } .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: translate(-5px); } .btn.btn2{ display: inline-block; background: #ff004f; } .contact-right{ width: 100%;

} form input,form textarea{ width: 100; border: 0; outline: 0; background: #263636; 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; } .copyright i{ color: red; }

/* ------------vss for small screen------ */ nav .fas{ display: none; } @media only screen and (max-width:600px){ #header{ background-image: url(images/main\ bg52.jpg); } .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;
}

}

-------------------resources used--------------------- my-cv.pdf my cv 2.pdf