Convert Quote Maker UI Design into HTML:
In order to convert quote maker UI design into HTML CSS website first needs to save background image and flower image in the image folder so let me see how should your website structure for this website see the below image
- CSS folder has a "style.css" file
- img folder has images
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote Maker UI Design Adobe XD to HTML</title>
<!-- Style Sheet -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="logo">
<div class="back-logo"></div>
<a href="">Quote Maker</a>
</div>
<div class="form-box">
<form action="">
<div class="form-control">
<input type="text" placeholder="Name">
</div>
<div class="form-control">
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<div class="form-inline">
<div class="form-control">
<input type="text" placeholder="Background Color">
</div>
<div class="form-control">
<input type="text" placeholder="Text Color">
</div>
</div>
<div class="form-control">
<input type="file" id="upload">
</div>
<div class="form-control half">
<input type="text" placeholder="Text Color">
</div>
<br/>
<input type="submit" value="Create">
</form>
</div> <!-- Form Box -->
<div class="quote-box">
<div class="quote-content">
<img src="img/flower.png" alt="">
<q>Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Obcaecati ab quas, saepe delectus, fuga nihil?</q>
<p>John Doe</p>
<a href="">Download</a>
</div>
</div>
</div>
</body>
</html>
CSS Code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper{
width: 100vw;
height: 100vh;
background: url(../img/background.png) no-repeat;
}
.logo{
width: 340px;
height: 60px;
position: absolute;
top: 0;
right: 0;
}
.logo .back-logo{
width: 100%;
height: 100%;
background-color: #ffffff;
mix-blend-mode: soft-light;
border-radius: 15px 0 0 15px;
position: relative;
box-shadow: 1px 1px 20px #610d1c;
}
.logo a{
font-family: Trajan Pro;
font-size: 30px;
font-weight: bold;
text-decoration: none;
display: block;
color: #AF4A6B;
position: absolute;
top: 15px;
left: 25px;
}
.form-box{
width: 510px;
height: 520px;
position: absolute;
top: 80px;
right: 150px;
background-color: rgba(255,213,209,0.9);
border-radius: 15px;
padding: 50px;
box-shadow: 3px 3px 20px #610d1c;
}
.form-box .form-control{
margin-bottom: 15px;
box-shadow: 0 1px 20px #ffb2ac;
border-radius: 15px;
}
.form-inline{
display: flex;
justify-content: space-between;
align-items: center;
}
input,textarea{
width: 100%;
padding: 10px 15px;
border: none;
outline: none;
color: #640d1e;
background-color: #fee5e4;
border-radius: 15px;
position: relative;
}
input[type="file"]::file-selector-button{
display: none;
}
input[type="file"]::before{
content: "upload";
position: absolute;
top: 0;
right: 0;
background-color: #e98399;
color: #ffffff;
padding: 10px 15px;
cursor: pointer;
}
.form-control.half input{
width: 200px !important;
}
input[type="submit"]{
width: 136px;
height: 30px;
background: linear-gradient(to top, #e98399, #610d1c);
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1.5;
float: right;
cursor: pointer;
}
input[type="submit"]:hover{
background: linear-gradient(to bottom, #e98399, #610d1c);
}
.quote-content{
width: 500px;
height: 520px;
padding: 20px;
box-shadow: 1px 1px 20px #610d1c;
border-radius: 15px;
position: absolute;
top: 80px;
left: 150px;
transform: perspective(600px) rotateY(15deg);
}
.quote-content img{
width: 420px;
margin: 0 auto;
}
.quote-content q{
font-family: Trajan Pro;
font-size: 24px;
font-weight: bold;
text-decoration: none;
display: block;
color: #AF4A6B;
padding: 50px 20px;
border-radius: 15px;
position: relative;
top: -50px;
z-index: -1;
background-color: rgba(255,255,255,0.7);
}
.quote-content p{
font-family: Trajan Pro;
font-size: 24px;
font-weight: bold;
text-decoration: none;
display: block;
color: #AF4A6B;
position: absolute;
top: 350px;
right: 50px;
}
.quote-content a{
width: 136px;
height: 35px;
line-height: 35px;
background: linear-gradient(to top, #e98399, #610d1c);
color: #fff;
text-transform: uppercase;
text-align: center;
text-decoration: none;
letter-spacing: 1.5;
border-radius: 15px;
float: right;
transition: 0.5s;
}
.quote-content a:hover{
background: linear-gradient(to bottom, #e98399, #610d1c);
}
Quote Maker UI Design in Adobe XD
For background and image follow the below link
0 Comments