Friday, November 19, 2021

November 19, 2021 0

When we download our Laravel code from GitHub or GitLab then we need to do some changes in our code and install some codes also as follows :

link: https://www.codegrepper.com/code-examples/php/how+to+run+laravel+project+on+live+server

Saturday, July 10, 2021

Helps in Angular Code

July 10, 2021 0

Angular

On this page, I will write some important code and tips for angular and related stuff.

1. What is Angular?

=> Angular is the Front-End Framework in JavaScript. With the help of Angular, we can make lightweight projects with Single page UI without reloading the projects.

2. Difference Between Angular and Angular.js?

Saturday, May 15, 2021

Some Demo Designs(Animated Videoes) By Aryan Pariyar

graphics May 15, 2021 0

Some Demo Designs(Animated Videos') By Aryan Pariyar

Some Demo Designs(Social Media Banners) By Aryan Pariyar

graphics May 15, 2021 0

Some Demo Designs(Social Media Banners) By Aryan Pariyar



	name

Sunday, December 20, 2020

Best OUR teams responsive cards

websites December 20, 2020 0

Best OUR teams responsive cards

HTML code of this responsive our teams card :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Out-teams-designs</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
   


</head>

<body>
    <section>
        <div class="container slider">
            <div class="card">
                <div class="content">
                    <div class="imgBx"><img src="Images/tmemb1.jpg" alt=""></div>
                    <div class="contentBx">
                        <h3>Someone Famous <br> <span>creative designer</span></h3>
                    </div>
                </div>
                <ul class="sci">
                    <li style="--i:1">
                        <a href="#"><i class="fa fa-facebook"></i></a>
                    </li>
                    <li style="--i:2">
                        <a href="#"><i class="fa fa-instagram"></i></a>
                    </li>
                    <li style="--i:3">
                        <a href="#"><i class="fa fa-twitter"></i></a>
                    </li>
                </ul>
            </div>
            <div class="card">
                <div class="content">
                    <div class="imgBx"><img src="Images/tmemb2.jpg" alt=""></div>
                    <div class="contentBx">
                        <h3>Someone Famous <br> <span>creative designer</span></h3>
                    </div>
                </div>
                <ul class="sci">
                    <li style="--i:1">
                        <a href="#"><i class="fa fa-facebook"></i></a>
                    </li>
                    <li style="--i:2">
                        <a href="#"><i class="fa fa-instagram"></i></a>
                    </li>
                    <li style="--i:3">
                        <a href="#"><i class="fa fa-twitter"></i></a>
                    </li>
                </ul>
            </div>
            <div class="card">
                <div class="content">
                    <div class="imgBx"><img src="Images/tmemb3.jpg" alt=""></div>
                    <div class="contentBx">
                        <h3>Someone Famous <br> <span>creative designer</span></h3>
                    </div>
                </div>
                <ul class="sci">
                    <li style="--i:1">
                        <a href="#"><i class="fa fa-facebook"></i></a>
                    </li>
                    <li style="--i:2">
                        <a href="#"><i class="fa fa-instagram"></i></a>
                    </li>
                    <li style="--i:3">
                        <a href="#"><i class="fa fa-twitter"></i></a>
                    </li>
                </ul>
            </div>

        </div>
    </section>


</body>

</html>

CSS for this file :

* {
    margin: 0px;
    padding: 0px;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: #161623;
    min-height: 100vh;
}

section {
    position: relative;
}

section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#f00, #f0f);
    clip-path: circle(30% at right 90%);
}

section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#2196f3, #e91e63);
    clip-path: circle(20% at 5% 5%);
}

.container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 40px 0px;
}

.container .card {
    position: relative;
    width: 300px;
    height: 400px;
    background: rgba(255, 255, 255, 0.05);
    margin: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
}

.container .card .content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0.5;
    transition: 0.5;
}

.container .card:hover .content {
    opacity: 1;
    transform: translateY(-20px);
}

.container .card .content .imgBx {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 10px solid rgba(0, 0, 0, 0.25);
}

.container .card .content .imgBx img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* object-fit: contain; */
}

.container .card .content .contentBx h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 1000;
    font-size: 20px;
    text-align: center;
    margin: 20px 0 10px;
    line-height: 1.1rem;
}

.container .card .content .contentBx h3 span {
    font-size: 14px;
    font-weight: 500px;
    text-transform: capitalize;
}

.container .card .sci {
    position: absolute;
    bottom: 50px;
    display: flex;
}

.container .card .sci li {
    list-style: none;
    margin-left: 10px;
    transform: translateY(40px);
    transition: 0.5s;
    opacity: 0;
    transition-delay: calc(0.1s * var(--i));
}

.container .card:hover .sci li {
    transform: translateY(0px);
    opacity: 1;
}

.container .card .sci li a {
    color: #fff;
    font-size: 24px;
}