Hi dear welcome to Ascode Blog . In this post we are going to learn how to make a helping card design using html and css. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the file with your browser.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Helping Card design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="col-1">
<div class="title">HERE TO HELP</div>
<h1>Exceptional Support</h1>
<p>
Our engineers and architects are here to assist you. We’ve got your back 24/7, and you can count on enterprise-class quality support and help whenever you need us.
</p>
</div>
<div class="col-2"><img src="/support-img.svg" ></div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items:center ;
min-height: 100vh;
background: #111;
}
.container {
display: flex;
justify-content: space-between;
background: linear-gradient(286.81deg, #6BFFE8 -63.22%, #33A394 -42.05%, #41A7B8 9.52%, #358DB6 57.37%, #256A96 81.94%);
/* height: 400px; */
width: 100%;
}
.container .col-1 {
padding: 10px 20px;
margin-left:8%;
float: left;
width: 50%;
margin: 30px 20px;
}
.container .col-2 {
margin: 0 5%;
float: right;
width: 40%;
margin: 30px 20px;
}
.col-1 .title {
color: #fff;
text-transform: uppercase;
font-size: 1.5rem;
margin: 10px 0;
}
.col-1 h1 {
color: #fff;
margin: 5px 0;
}
.col-1 p {
color: #fff;
margin: 5px 0;
font-size: 1.5rem;
}
.col-2 img {
width: 400px;
}
@media (max-width:700px){
.container {
display: block;
}
.container .col-1 {
width: 90%;
margin: 10px auto;
}
.container .col-2{
width: 90%;
margin: 10px auto;
}
.container .col-2 img {
width: 100%;
margin-left: -20px;
}
}
0 Comments