Week 6 - Study Case
https://tugas6-pweb-one.vercel.app/
https://github.com/aldeen1/Tugas6-pweb
Tugas berupa landing page, diciptakan hanya dengan HTML dan CSS. Design diinspirasi oleh AlignUI di website landing folionya, saya mencoba mengerjakan sedekat mungkin dengan hanya menggunakan HTML dan CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #FAF7F2;
width: 100%;
box-sizing: border-box;
border: 1px solid rgb(220, 219, 219);
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
nav{
display:flex;
gap: 5px;
padding-top: 1.5em;
padding-bottom: 1.5em;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgb(220, 219, 219);
width: 100%;
}
nav a{
text-decoration: none;
color: gray;
float: left;
}
nav button{
margin-left: 5rem;
margin-right: 1em;
}
.title{
display:flex;
justify-content: center;
gap: 2em;
width: 100% - 1px;
border: 1px solid rgb(220, 219, 219)
}
.title .left{
align-items: end;
text-align: center;
font-size: 2rem;
}
.title .right{
display: flex;
flex-direction: column;
align-self: center;
}
.preview{
color: black;
background-color: white;
border: thin solid rgb(220, 219, 219);
border-radius: 5px;
font-weight: 600;
padding: 0.4em;
}
.preview a{
color:black;
}
.buy-btn{
color:white;
background-color: #F84B1B;
border: 1px solid black;
border-radius: 5px;
padding: 0.4em;
}
.buy-btn a{
color:white;
}
.inspires{
color: #F84B1B;
}
.widgets{
display:flex;
justify-content: center;
color: rgb(167, 166, 166);
padding:1em;
padding-top:0px;
padding-bottom: 0px;
}
.widgets div{
width: 100%;
display:flex;
border: 1px solid rgb(220, 219, 219);
align-items: center;
}
.widgets .widgets-text{
display:flex;
flex-direction: column;
border: 0px;
text-align: left;
}
.widgets
h3{
font-size: 1em;
}
.widgets .unq-widget:hover{
color: gray;
}
.widgets .lightning-fast:hover{
color: gray;
}
.widgets .extensive-asset:hover{
color:gray;
}
.logo{
border-radius:30%;
border-color:#d4cfc5;
}
main{
position: relative; /* Establishes a relative container for the half-gray and main content */
margin-top: 2em; /* Space between the hero section and the main content */
}
.main-content{
border: 1px solid rgb(220, 219, 219);
width: 100% - 1px;
height: 100vh;
margin-left: 15px;
margin-right: 15px;
position: relative;
background-color: white; /* Placeholder white background */
z-index: 1; /* Keeps it above the half-gray */
}
.half-gray{
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
background-color: #272727; /* Half gray color */
z-index: 0; /* Behind the main-content */
}
.apalah{
background-color: #272727;
width: 100%;
}
.top{
display:flex;
align-items: center;
gap: 1em;
color:white;
margin-left: 1em;
justify-content: center;
}
</style>
</head>
<body>
<nav class="navbar">
<svg viewBox="0 0 16 16" class="logo" id="svg1823941403" style = "width: 3%;height:4%;"><path d="M 1.6 0 L 1.6 3.2 L 11.4 3.2 L 1.371 10.177 C 0.511 10.774 0 11.754 0 12.803 C 0 14.569 1.431 16 3.197 16 L 12.8 16 L 12.8 12.8 L 3.206 12.8 L 12.8 6.123 L 12.8 12.8 L 16 12.8 L 16 0 Z" fill="var(--token-17959e51-3fe4-4e51-a805-f39a885045ff, rgb(39, 39, 39)) /* {"name":"Neutral [700]"} */"></path></svg>
<a href="">Components</a>
<a href="">FAQs</a>
<a href="">Pricing</a>
<a href="">About</a>
<a href="">Updates</a>
<a href="">Changelog</a>
<a href="">Blog</a>
<a href="">Contact</a>
<button class="preview"><img src="" alt=""><a href="">Preview</a></button>
</nav>
<section class="title">
<div class="left">
<h1>The design system <span class="inspires"><br>inspires & guides.</span></h1>
</div>
<div class="right">
<p>Explore 5900+ Components, unique widgets, <br> dashboards, and others with a lightning fast <br> experience on Figma.</p>
<div class="buttons">
<button class="preview"><a href="">Preview</a></button>
<button class="buy-btn"><a href="">Buy Now!</a></button>
</div>
</div>
</section>
<section class="widgets">
<div class="unq-widget">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" style="user-select: none; width: 10%; height: 50%; display: inline-block; fill: var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */; color: var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */; flex-shrink: 0;" focusable="false" color="var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */"><g color="var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */" weight="regular"><path d="M80,40a40,40,0,1,0,40,40A40,40,0,0,0,80,40Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,104Zm96,16a40,40,0,1,0-40-40A40,40,0,0,0,176,120Zm0-64a24,24,0,1,1-24,24A24,24,0,0,1,176,56ZM80,136a40,40,0,1,0,40,40A40,40,0,0,0,80,136Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,200Zm136-24a8,8,0,0,1-8,8H184v24a8,8,0,0,1-16,0V184H144a8,8,0,0,1,0-16h24V144a8,8,0,0,1,16,0v24h24A8,8,0,0,1,216,176Z"></path></g></svg>
<div class="widgets-text">
<h3>Unique Widgets & Dashboards</h3>
<p>Create dashboards with unique widgets</p>
</div>
</div>
<div class="lightning-fast">
<svg xmlns="http://www.w3.org/2000/svg" class = "logo" viewBox="0 0 256 256" style="user-select: none; width: 10%; height: 50%; display: inline-block; fill: var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */; color: var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */; flex-shrink: 0;" focusable="false" color="var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */"><g color="var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */" weight="regular"><path d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"></path></g></svg> <div class="widgets-text">
<h3>Lightning-fast & User-friendly</h3>
<p>Design anything with ease, within minutes</p>
</div>
</div>
<div class="extensive-asset">
<svg xmlns="http://www.w3.org/2000/svg" class="logo" viewBox="0 0 256 256" style="user-select: none; width: 10%; height: 50%; display: inline-block; fill: var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */; color: var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */; flex-shrink: 0;" focusable="false" color="var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */"><g color="var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */" weight="regular"><path d="M208,96a16,16,0,0,0,16-16V48a16,16,0,0,0-16-16H176a16,16,0,0,0-16,16v8H96V48A16,16,0,0,0,80,32H48A16,16,0,0,0,32,48V80A16,16,0,0,0,48,96h8v64H48a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16H80a16,16,0,0,0,16-16v-8h64v8a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16h-8V96ZM176,48h32V80H176ZM48,48H80V63.9a.51.51,0,0,0,0,.2V80H48ZM80,208H48V176H80v15.9a.51.51,0,0,0,0,.2V208Zm128,0H176V176h32Zm-24-48h-8a16,16,0,0,0-16,16v8H96v-8a16,16,0,0,0-16-16H72V96h8A16,16,0,0,0,96,80V72h64v8a16,16,0,0,0,16,16h8Z"></path></g></svg> <div class="widgets-text">
<h3>Extensive Asset Collection</h3>
<p>Access logos, and everything you need</p>
</div>
</div>
</section>
<main>
<div class="main-content">
</div>
<div class="half-gray">
</div>
</main>
<div class="apalah">
<div class="top">
<div class="top-left">
<h1>
"Realize how comprehensive<br>
AlignUI design system is"
</h1>
</div>
<div class="top-right">
<p>Here's a closer look at the numbers that define <br>
our design system </p>
</div>
</div>
<div class="bottom">
<section class="widgets">
<div class="unq-widget">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" style="user-select: none; width: 10%; height: 50%; display: inline-block; fill: var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */; color: var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */; flex-shrink: 0;" focusable="false" color="var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */"><g color="var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */" weight="regular"><path d="M80,40a40,40,0,1,0,40,40A40,40,0,0,0,80,40Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,104Zm96,16a40,40,0,1,0-40-40A40,40,0,0,0,176,120Zm0-64a24,24,0,1,1-24,24A24,24,0,0,1,176,56ZM80,136a40,40,0,1,0,40,40A40,40,0,0,0,80,136Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,200Zm136-24a8,8,0,0,1-8,8H184v24a8,8,0,0,1-16,0V184H144a8,8,0,0,1,0-16h24V144a8,8,0,0,1,16,0v24h24A8,8,0,0,1,216,176Z"></path></g></svg>
<div class="widgets-text">
<h3>Unique Widgets & Dashboards</h3>
<p>Create dashboards with unique widgets</p>
</div>
</div>
<div class="lightning-fast">
<svg xmlns="http://www.w3.org/2000/svg" class = "logo" viewBox="0 0 256 256" style="user-select: none; width: 10%; height: 50%; display: inline-block; fill: var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */; color: var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */; flex-shrink: 0;" focusable="false" color="var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */"><g color="var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */" weight="regular"><path d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"></path></g></svg> <div class="widgets-text">
<h3>Lightning-fast & User-friendly</h3>
<p>Design anything with ease, within minutes</p>
</div>
</div>
<div class="extensive-asset">
<svg xmlns="http://www.w3.org/2000/svg" class="logo" viewBox="0 0 256 256" style="user-select: none; width: 10%; height: 50%; display: inline-block; fill: var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */; color: var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */; flex-shrink: 0;" focusable="false" color="var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */"><g color="var(--token-68418025-7f62-4df3-9483-5047fb929bf2, rgb(143, 143, 143)) /* {"name":"Neutral [400]"} */" weight="regular"><path d="M208,96a16,16,0,0,0,16-16V48a16,16,0,0,0-16-16H176a16,16,0,0,0-16,16v8H96V48A16,16,0,0,0,80,32H48A16,16,0,0,0,32,48V80A16,16,0,0,0,48,96h8v64H48a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16H80a16,16,0,0,0,16-16v-8h64v8a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16h-8V96ZM176,48h32V80H176ZM48,48H80V63.9a.51.51,0,0,0,0,.2V80H48ZM80,208H48V176H80v15.9a.51.51,0,0,0,0,.2V208Zm128,0H176V176h32Zm-24-48h-8a16,16,0,0,0-16,16v8H96v-8a16,16,0,0,0-16-16H72V96h8A16,16,0,0,0,96,80V72h64v8a16,16,0,0,0,16,16h8Z"></path></g></svg> <div class="widgets-text">
<h3>Extensive Asset Collection</h3>
<p>Access logos, and everything you need</p>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
Comments
Post a Comment