I am working on a project where I had received all the designs in Adobe Xd format. I usually work on the backend part and database and server deployment. But here I need to work on the design part too.
I used adobe Xd webexport plugin and converted the design into html format. But real problems arise on the responsive part for mobile and tablet.
What is the quick solution for me to responsive those html pages?
here is the code of the sample html that I received after converting using webexport in adobe Xd. Really appreciate some thoughts on this matter.
HTML
<!DOCTYPE html>
<html>
<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>1 Landing Page</title>
<style id="applicationStylesheet" type="text/css">
.mediaViewInfo {
--web-view-name: 1 Landing Page;
--web-view-id: ID1_Landing_Page;
--web-scale-to-fit: true;
--web-scale-to-fit-type: fit;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
:root {
--web-view-ids: ID1_Landing_Page;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
}
#ID1_Landing_Page {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(252,248,238,1);
overflow: hidden;
--web-view-name: 1 Landing Page;
--web-view-id: ID1_Landing_Page;
--web-scale-to-fit: true;
--web-scale-to-fit-type: fit;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#Screen_Shot_2020-10-26_at_3244 {
position: absolute;
width: 399px;
height: 155px;
left: 33px;
top: 37px;
overflow: visible;
}
#Home {
left: 620px;
top: 86px;
position: absolute;
overflow: visible;
width: 65px;
white-space: nowrap;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(115,147,97,1);
}
#Products {
left: 768px;
top: 86px;
position: absolute;
overflow: visible;
width: 94px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 16_Products_Drop_Down.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#Companies {
left: 947px;
top: 86px;
position: absolute;
overflow: visible;
width: 118px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 19_Companies_Drop_Down.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#LoginSignup {
left: 1457px;
top: 88px;
position: absolute;
overflow: visible;
width: 140px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 3_User_Log_In.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#About_us {
left: 1148px;
top: 88px;
position: absolute;
overflow: visible;
width: 96px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 32_About_Us.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#Blog {
left: 1326px;
top: 88px;
position: absolute;
overflow: visible;
width: 48px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 29_Blog.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#Ellipse_62 {
fill: rgba(115,147,97,1);
}
.Ellipse_62 {
position: absolute;
overflow: visible;
width: 13px;
height: 13px;
left: 646px;
top: 124px;
}
#Component_10__1 {
position: absolute;
width: 222px;
height: 33px;
left: 1664px;
top: 86px;
overflow: visible;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 31_Search_Page.html;
cursor: pointer;
}
#Rectangle_1 {
fill: rgba(255,255,255,1);
stroke: rgba(45,93,19,0.565);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Rectangle_1 {
position: absolute;
overflow: visible;
width: 222px;
height: 33px;
left: 0px;
top: 0px;
}
#loupe {
position: absolute;
width: 17px;
height: 17px;
left: 13px;
top: 8px;
overflow: visible;
}
#Group_24 {
position: absolute;
width: 14.973px;
height: 14.973px;
left: 0px;
top: 0px;
overflow: visible;
}
#Group_23 {
position: absolute;
width: 14.973px;
height: 14.973px;
left: 0px;
top: 0px;
overflow: visible;
}
#Path_87 {
fill: rgba(45,93,19,1);
}
.Path_87 {
overflow: visible;
position: absolute;
width: 14.973px;
height: 14.973px;
left: 0px;
top: 0px;
transform: matrix(1,0,0,1,0,0);
}
#Group_26 {
position: absolute;
width: 5.344px;
height: 5.344px;
left: 11.656px;
top: 11.656px;
overflow: visible;
}
#Group_25 {
position: absolute;
width: 5.344px;
height: 5.344px;
left: 0px;
top: 0px;
overflow: visible;
}
#Path_88 {
fill: rgba(45,93,19,1);
}
.Path_88 {
overflow: visible;
position: absolute;
width: 5.346px;
height: 5.344px;
left: -0.002px;
top: 0px;
transform: matrix(1,0,0,1,0,0);
}
#Search {
left: 40px;
top: 6px;
position: absolute;
overflow: visible;
width: 53px;
white-space: nowrap;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: lighter;
font-size: 18px;
color: rgba(112,112,112,1);
}
#Welcome__To_Captivist {
left: 128px;
top: 400px;
position: absolute;
overflow: visible;
width: 482px;
white-space: nowrap;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 90px;
color: rgba(81,141,27,1);
}
#Were_here_to_help_you_make_mor {
left: 128px;
top: 625px;
position: absolute;
overflow: visible;
width: 545px;
height: 121px;
line-height: 40px;
margin-top: -5px;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 30px;
color: rgba(45,93,19,1);
}
#E28094PngtreeE28094world20food {
position: absolute;
width: 957.689px;
height: 722.28px;
left: 863px;
top: 202px;
overflow: visible;
}
#Line_1 {
fill: transparent;
stroke: rgba(45,93,19,0.275);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Line_1 {
overflow: visible;
position: absolute;
width: 1293px;
height: 1px;
left: 593.5px;
top: 163.5px;
transform: matrix(1,0,0,1,0,0);
}
</style>
</head>
<body>
<div id="ID1_Landing_Page">
<img id="Screen_Shot_2020-10-26_at_3244" src="Screen_Shot_2020-10-26_at_3244.png" srcset="Screen_Shot_2020-10-26_at_3244.png 1x, Screen_Shot_2020-10-26_at_3244@2x.png 2x">
<div id="Home">
<span>Home</span>
</div>
<div onclick="application.goToTargetView(event)" id="Products">
<span>Products</span>
</div>
<div onclick="application.goToTargetView(event)" id="Companies">
<span>Companies</span>
</div>
<div onclick="application.goToTargetView(event)" id="LoginSignup">
<span>Login/Signup</span>
</div>
<div onclick="application.goToTargetView(event)" id="About_us">
<span>About us</span>
</div>
<div onclick="application.goToTargetView(event)" id="Blog">
<span>Blog</span>
</div>
<svg class="Ellipse_62">
<ellipse id="Ellipse_62" rx="6.5" ry="6.5" cx="6.5" cy="6.5">
</ellipse>
</svg>
<div onclick="application.goToTargetView(event)" id="Component_10__1" class="Component_10___1">
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="16.5" ry="16.5" x="0" y="0" width="222" height="33">
</rect>
</svg>
<div id="loupe">
<div id="Group_24">
<div id="Group_23">
<svg class="Path_87" viewBox="0 0 14.973 14.973">
<path id="Path_87" d="M 7.48643970489502 0 C 3.35852837562561 0 0 3.35852837562561 0 7.48643970489502 C 0 11.61458301544189 3.35852837562561 14.97287940979004 7.48643970489502 14.97287940979004 C 11.61458301544189 14.97287940979004 14.97287940979004 11.61458301544189 14.97287940979004 7.48643970489502 C 14.97287940979004 3.35852837562561 11.61458206176758 0 7.48643970489502 0 Z M 7.48643970489502 13.59079933166504 C 4.120539665222168 13.59079933166504 1.382112741470337 10.85237216949463 1.382112741470337 7.486472606658936 C 1.382112741470337 4.120572566986084 4.120539665222168 1.382112860679626 7.48643970489502 1.382112860679626 C 10.85233783721924 1.382112860679626 13.59076690673828 4.120539665222168 13.59076690673828 7.48643970489502 C 13.59076690673828 10.85233783721924 10.85233783721924 13.59079933166504 7.48643970489502 13.59079933166504 Z">
</path>
</svg>
</div>
</div>
<div id="Group_26">
<div id="Group_25">
<svg class="Path_88" viewBox="351.046 351.046 5.344 5.344">
<path id="Path_88" d="M 356.1875 355.2103271484375 L 352.2254333496094 351.2482604980469 C 351.9554748535156 350.9783020019531 351.5182495117188 350.9783020019531 351.2482604980469 351.2482604980469 C 350.9783020019531 351.5180053710938 350.9783020019531 351.9556884765625 351.2482604980469 352.2254333496094 L 355.2103271484375 356.1875 C 355.3453063964844 356.3224792480469 355.5220031738281 356.3899841308594 355.6989135742188 356.3899841308594 C 355.8755798339844 356.3899841308594 356.052490234375 356.3224792480469 356.1875 356.1875 C 356.4574890136719 355.9177551269531 356.4574890136719 355.4800720214844 356.1875 355.2103271484375 Z">
</path>
</svg>
</div>
</div>
</div>
<div id="Search">
<span>Search</span>
</div>
</div>
<div id="Welcome__To_Captivist">
<span>Welcome <br/>To Captivist</span>
</div>
<div id="Were_here_to_help_you_make_mor">
<span>We’re here to help you make more informed decisions about consumer decisions.</span>
</div>
<img id="E28094PngtreeE28094world20food" src="E28094PngtreeE28094world20food.png" srcset="E28094PngtreeE28094world20food.png 1x, E28094PngtreeE28094world20food@2x.png 2x">
<svg class="Line_1" viewBox="0 0 1293 1">
<path id="Line_1" d="M 1293 0 L 0 0">
</path>
</svg>
</div>
</body>
</html>
I will advice you learn some frontend technics like html, CSS and bootstrap because it will really help you.
you can work with this little work of mine and maybe later I'll update it
<script>
let menuToggle = document.getElementById("toggle-menu");
let x = document.getElementByClassName("navbar navbar-tab");
let y = document.getElementByClassName("searchForm");
function toggleBar(){
x.style.display = "block";
y.style.display = "block";
}
</script><style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgba(252, 248, 238, 1);
font-size: 14px;
font-family: " Lato", sans-serif;
}
#main-header {
width: 100%;
height: 80px;
}
.container-fluid {
max-width: 1300px;
margin: auto;
padding: 0 25px;
}
.navbar {
display: flex;
align-items: center;
padding: 20px;
margin-top: 35px;
}
.logo {
position: absolute;
left: 60px;
}
.logo .navbar-brand {
width: 150px;
max-height: 60px;
}
.img-fluid {
width: 100% !important;
}
.navbar .toggle-bar {
width: 60px;
height: 60px;
flex: 1;
text-align: right;
display: none;
margin-right: 30px;
}
.navbar .toggle-bar .fa-bars {
font-size: 20px;
color: rgba(81, 141, 27, 1);
}
.navbar-tab {
flex: 1;
text-align: right;
list-style-type: none;
}
.navbar-tab::before {
content: "";
position: absolute;
height: 1px;
background-color: rgba(46, 107, 13, 0.275);
width: 65%;
margin-top: 50px;
}
.navbar-tab .nav-item {
display: inline-block;
margin-right: 30px;
}
.navbar-tab .nav-item .nav-link {
text-decoration: none;
color: rgba(112, 112, 112, 1);
font-size: 18px;
font-style: normal;
font-weight: 500;
text-transform: capitalize;
}
.navbar-tab .nav-item.active .nav-link {
color: rgba(115, 147, 97, 1);
}
.active::before {
content: "";
border-radius: 50%;
padding: 4px;
position: absolute;
top: 87px;
background: rgba(115, 147, 97, 1);
margin-left: 24px;
}
.searchForm input {
border: 1px solid rgba(45, 93, 19, 0.565);
border-radius: 50px;
width: 222px;
height: 33px;
padding-left: 30px;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: lighter;
font-size: 18px;
color: rgba(112, 112, 112, 1);
}
.searchForm input:focus {
outline: none;
}
.searchForm .btn-search {
background: transparent;
border: none;
position: absolute;
top: 55px;
right: 20em;
width: 33px;
height: 33px;
}
.searchForm .btn-search .fa-search {
font-family: Lato;
font-size: 14px;
font-weight: normal;
font-style: normal;
color: rgba(45, 93, 19, 0.565);
}
.container {
max-width: 1080px;
margin: auto;
padding: 0px 25px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.col-2 {
flex-basis: 50%;
min-width: 300px;
}
.hero .hero-text {
position: relative;
top: 120px;
}
.hero .hero-text h2 {
font-style: normal;
font-weight: normal;
font-size: 90px;
color: rgba(81, 141, 27, 1);
margin-left: -20px;
}
.hero .hero-text p {
line-height: 40px;
font-style: normal;
font-weight: normal;
font-size: 30px;
color: rgba(45, 93, 19, 1);
}
@media only screen and (max-width: 1024px) {
.navbar .toggle-bar {
display: block;
}
.navbar .navbar-tab,
.searchForm {
position: absolute;
top: 120px;
right: 70px;
display: none;
}
.searchForm input {
margin-top: -10px;
}
.searchForm .btn-search {
background: transparent;
border: none;
position: absolute;
top: -9px;
right: 190px;
width: 33px;
height: 33px;
}
.navbar-tab::before {
width: 100%;
}
.active::before {
top: 25px;
}
.hero .hero-text {
left: 50px;
}
}
/* media query for less than 600 */
@media only screen and (max-width: 600px) {
.navbar {
margin-top: 20px;
}
.logo {
left: 20px;
top: 30px;
}
.navbar .toggle-bar {
margin-right: 0px;
color: rgba(81, 141, 27, 1);
}
.row {
text-align: center;
}
.col-2,
.col-3,
.col-4 {
flex-basis: 600px;
}
.hero .hero-text {
text-align: center;
left: 0;
top: 80px;
}
.hero .hero-text h2 {
font-weight: bold;
font-size: 40px;
color: rgba(81, 141, 27, 1);
text-align: center;
}
.hero .hero-text p {
line-height: 40px;
font-style: normal;
font-weight: normal;
font-size: 16px;
color: rgba(45, 93, 19, 1);
}
}
</style><!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>Landing page 1</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- <link rel="stylesheet" href="./css/style.css" /> -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
</head>
<body>
<header id="main-header">
<div class="container-fluid">
<nav class="navbar">
<div class="logo">
<a href="/index.html" class="navbar-brand"
><img src="./images/logo.png" alt="logo" class="img-fluid"
/></a>
</div>
<a href="" class="toggle-bar" onclick="toggleBar()" id="toggle-menu">
<i class="fa fa-bars"></i>
</a>
<ul class="navbar-tab" >
<li class="nav-item active">
<a href="./index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="./product.html" class="nav-link">products</a>
</li>
<li class="nav-item">
<a href="./companies.html" class="nav-link">companies</a>
</li>
<li class="nav-item">
<a href="./about.html" class="nav-link">about us</a>
</li>
<li class="nav-item">
<a href="./blog.html" class="nav-link">blog</a>
</li>
<li class="nav-item">
<a href="./about.html" class="nav-link">Login/Signup</a>
</li>
</ul>
<form action="" class="searchForm">
<input type="search" name="" id="" placeholder="Search" />
<button class="btn-search">
<span class="fa fa-search"></span>
</button>
</form>
</nav>
</div>
</header>
<section class="hero">
<div class="container">
<div class="row">
<div class="col-2">
<div class="hero-text">
<h2>Welcome <br>To Captivist</h2>
<p>We’re here to help you make more informed decisions about consumer decisions.</p>
</div>
</div>
<div class="col-2">
<img src="" class="img-fluid">
</div>
</div>
</div>
</section>
</body>
</html>