Inkscape 2 HTML

Možemo li dizajnirati stranicu u Inkscape (vektorskom editor-u) i onda
koristiti vektorski dizajn kao model za izradu HTML-a?

Pa izgleda da možemo…

Znači, “hero header” dizajn sam izradio u Inkscape vektorskom editoru. Pa sam ga nakon toga konvertirao (ručno😊) u html.

Inkscape (uslikani zaslon)

HTML

<section class="ds-header">
	
	<div class="ds-header-logo">
		<img class="ds-header-logo-img" src="logo.svg" />	
		<div class="ds-header-logo-text">IOOX</div>
	</div>
	
	<ul class="ds-header-menu">
	  <li>Why Ioox</li>
	  <li>Solutions</li>
	  <li>Features</li>
	  <li>Pricing</li>
	  <li>Company</li>
	  <li>GET STARTED</li>
	</ul>  	
				
	<div class="ds-header-text">		
		<div class="ds-header-sub">Embrace the future</div>

		<div class="ds-header-huge">Grow Your Business <br> Faster with the World's <br> Smartest Technology</div>
		
		<div class="ds-header-sub">Choose the enterprise-grade platform with <br> built-in features for customer success.</div>

		<ul class="ds-header-bolds">
		  <li><span>→</span> Deep Insights</li>
		  <li><span>→</span> Smart Automation</li>
		  <li><span>→</span> Artificial Intelligence</li>
		</ul>  
		
		<div class="ds-header-talk-button">LET'S TALK</div>
	</div>	

	<img class="ds-header-illustration" src="drawing-1.svg" />

</section>

.ds-header{
	margin:16px;
	background: pink;
	border-radius: 32px;
	background: rgb(172,147,147);
	background: linear-gradient(11deg, rgba(172,147,147,1) 0%, rgba(255,204,170,1) 100%);
	position: relative;
	width: calc(100% - 32px);
	height: 900px;
}

ul.ds-header-menu li{
	display:inline;
	font-size: 19px;
	margin: 0 16px;
}

ul.ds-header-menu li:last-child{
	border: 2px solid black;
	border-radius: 32px;
	padding: 6px 12px;
	font-size: 15px;
}

.ds-header-menu{
	position: absolute;
	right: 150px;
	top: 32px;
}

.ds-header-sub, .ds-header-logo-text{
	font-size:28px;
	line-height: 36px;
}

.ds-header-huge{
	font-size:57px;
	font-weight: 800;
	line-height: 60px;
	margin: 20px 0px;
}

ul.ds-header-bolds li{
	display:inline;
	font-size: 16px;
	font-weight: 600;
	margin: 0 38px 0 0;
}

.ds-header-bolds{
	padding-left: 0px;
	margin: 40px 0px;
}

.ds-header-bolds > li > span{
	background: #000080;
	color: white;
	border-radius: 32px;
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
    justify-content: center;
	margin: 0px;
	padding: 10px;
}

.ds-header-illustration{
	 position: absolute; 
	 top: 300px;
	 right: 10px;
}

.ds-header-text{
	 position: absolute; 
	 top: 250px;
	 left: 150px;
}

.ds-header-talk-button{
	display: inline;
	background: #000080;
	color: white;
	border-radius: 32px;
	padding: 10px 40px;
}

.ds-header-logo{
	position: absolute;
	display: flex;
	top:42px;
	left: 150px;
    align-items: center;
    justify-content: center;
}

.ds-header-logo-text{
	font-size: 28px;
	line-height: 42px;
	font-weight: 200;
}

.ds-header-logo-img{
	height:24px;
}