Skip to content
Advertisements

CSS Profil Web Design


HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <title>page</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="web9.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
    
    <section class="team">
        <div class="container">
            <div class="row">
                <h1>Our Team</h1>
                <p>
                    HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the » W3C, the organisation charged with designing and maintaining the language.HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet.
                </p>
            </div>
            <div class="row mgt50px">
                <div class="column">
                    <div class="imgBox">
                        <img src="https://images.pexels.com/photos/301958/pexels-photo-301958.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
                    </div>
                    <div class="details">
                        <h3>Member Name<br><span>CEO and Founder</span></h3>
                        <ul>
                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                            <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="column">
                    <div class="imgBox">
                        <img src="https://images.pexels.com/photos/775358/pexels-photo-775358.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
                    </div>
                    <div class="details">
                        <h3>Member Name<br><span>CEO and Founder</span></h3>
                        <ul>
                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                            <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="column"><div class="imgBox">
                        <img src="https://images.pexels.com/photos/594610/pexels-photo-594610.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
                    </div>
                    <div class="details">
                        <h3>Member Name<br><span>CEO and Founder</span></h3>
                        <ul>
                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                            <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                        </ul>
                    </div></div>
                <div class="column"><div class="imgBox">
                        <img src="https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
                    </div>
                    <div class="details">
                        <h3>Member Name<br><span>CEO and Founder</span></h3>
                        <ul>
                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                            <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                        </ul>
                    </div>
                </div>
            <div style="clear:both;"></div>
            </div>
        </div>
    </section>

</body>
</html>

CSS CODE:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700,900');
body{
    padding: 0;
    margin:0;
    background-color: #262626;
    font-family: 'Roboto', sans-serif;
}
.team{
    padding: 50px 0;
    height: 100vh;
    box-sizing: border-box;
}
.container{
    width: 80%;
    margin: 50px auto;
}
.row{
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.row h1{
    color: #fff;
    text-align: center;
    padding: 0;
    margin: 0;
    font-weight: 700;
    font-size: 48px;
    text-transform: uppercase;
}
.row p{
    margin: 20px 0 0 ;
    color: #fff;
    padding-left: 20px;
    border-left: 5px solid #f00;
}
.mgt50px{
    margin-top: 50px;
}
.row .column{
    margin: 0 10px;
    position: relative;
    width: calc(25% - 20px);
    min-height: 250px;
    background: #fff;
    float: left;
    box-sizing: border-box;
    overflow: hidden;
}
.row .column:before{
    content: "";
    position: absolute;
    bottom:-100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,0,0,1);
    z-index: 1;
    transition: .5s;
    mix-blend-mode: soft-light;
}
.row .column:hover:before{
    bottom:0%;
}
.row .column .imgBox{
    position: relative;
}
.row .column .imgBox img{
    width: 100%;
    height: 100%;
    transition: 5s;
}
.row .column:hover .imgBox img{
    transform: scale(1.5);
}
.row .column .details{
    position: absolute;
    bottom:-80px;
    left: 0;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(0,0,0,.9);
    width: 100%;
    transition: .5s;
    z-index: 2;
}
.row .column:hover .details{
    bottom: 0;
}
.row .column .details h3{
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: 500; 
    text-align: right;
    text-transform: uppercase;
    cursor: pointer;
}
.row .column .details h3 span{
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #f00;
    font-weight: 900;
    position: relative;
    top: -6px;
}
.row .column .details ul{
    margin: 0;
    padding: 0;
    display: flex;
    float: right;
}
.row .column .details ul li{
    list-style: none;
}
.row .column .details ul li a{
    padding: 0 10px;
    color:#fff;
}
.row .column .details ul li a .fab{
    transition: .5s;
}
.row .column .details ul li a:hover .fab{
    transform: rotateY(360deg);
    color: #f00;
}
@media (max-width: 992px){
    .container{
        width: 90%;
        margin: 20px auto;
    }
    .row .column{
        width: calc(50% - 20px);
        margin-bottom: 20px;
    }
}
@media (max-width: 600px){
    .container{
        width: 95%;
        margin: 20px auto;
    }
    .row .column{
        width: calc(100% - 20px);
        margin-bottom: 20px;
    }
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: