<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>19.12. Responsive contact</title>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Raleway:300,400&amp;subset=latin-ext" rel="stylesheet"> 
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="main">
   <div class="section-content">
       <div class="content-wrapper">          
           <div class="box box-1">
                <div class="first">
                    <h2>Web development</h2>
                </div>
                <div class="second">
                  <p>lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
                   <p><a href="#">Find out more</a></p>           
                </div>
            </div>
              <div class="box box-2">
                <div class="first">
                   <h2>Data analysis</h2>
                </div>
               <div class="second">
                  <p>lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
                   <p><a href="#">Find out more</a></p>
               </div>
           </div>
       </div>
   </div>
  </div>
</body>
</html>
/* GENERAl */ 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    font-family: 'Raleway', sans-serif;
    font-size: 100%;
    font-weight: 300;
    color: #505050;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    background: linear-gradient(rgba(237, 215, 215, 0.24),rgba(0, 0, 0, 0.49)), url(https://static.pexels.com/photos/734004/pexels-photo-734004.jpeg) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 100vh;

}

/* REUSABLE COMPONENTS */

h2 {
    color: #fff;
    font-family: 'Playfair Display', Serif;
    font-size: 180%;
    font-weight: 300;
    
}

p {
    color: #fff;
    line-height: 120%;
    margin-bottom: 10px;
}

a {
    font-weight: 400;
    text-decoration: none;
    color: #fff;
    border-radius: 20px;
    font-size: 120%;
}

/* MAIN */

.main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.section-content {
    background: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
    width: 75%;
    max-width: 500px;
    margin: 5px auto;
    padding: 10px 10px;
}

.content-wrapper {
    display: inline-block;
    width: 100%;
    margin: ;
    text-align: center;
}


.box {
    width: 100%;
    margin: 10;
    padding: 10%;
    border: 1px hidden;
    position: relative;
}

.box-1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.2)),url(https://images.pexels.com/photos/545331/pexels-photo-545331.jpeg?w=940&h=650&auto=compress&cs=tinysrgb);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 10px 10px 0 0;
}

.box-2 {
    background: linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.2)),url(https://images.pexels.com/photos/669619/pexels-photo-669619.jpeg?w=940&h=650&auto=compress&cs=tinysrgb) no-repeat center;
    background-size: cover; 
    border-radius: 0 0 10px 10px
}

.first {
    display: block;
    position: relative;
    max-width: 100%;
}

.second {
    position: relative;
    padding: 20px;
    border: 1px solid #fff;
}

.box-1 .second {
    opacity: 0;
    backface-visibility: hidden;
}

.box-2 .second {
    opacity: 0;
    backface-visibility: hidden;
}

.box-1:hover {
    background-image: linear-gradient(rgba(134, 89, 89, 0.88),rgba(134, 89, 89, 0.74)),url(https://images.pexels.com/photos/545331/pexels-photo-545331.jpeg?w=940&h=650&auto=compress&cs=tinysrgb);
    transition: background-image 0.3s;

}
.box-1:hover .second {
    opacity: 1;
    transition: opacity 0.8s;
}

.box-1:hover .first {
    opacity: 0;
}


.box-2:hover {
    background: linear-gradient(rgba(134, 89, 89, 0.88),rgba(134, 89, 89, 0.74)), url(https://images.pexels.com/photos/669619/pexels-photo-669619.jpeg?w=940&h=650&auto=compress&cs=tinysrgb) no-repeat center; 
    transition: background 2s;
}

.box-2:hover .second {
    opacity: 1;
    transition: opacity 0.8s;
}

.box-2:hover .first {
    opacity: 0;
}


/* Media queries */ 


@media screen and (max-width: 500px) {
    body {
        height: auto;
    }
    p {
        font-size: 90%;
    }
}

@media screen and (max-height: 500px) {
  body {
    height: auto;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.