Introduction
Urbanee aims to sell creative furnitures, home decoration. We love to see your home with our amazing items that will make you enjoy going back home after a long day.
Basic Interactive Elements
In-text Link
This is a link within a sentence
HTML Code
<p>This is a <a href="#0">link</a> within a sentence</p>CSS Code
#in-text-link a {
color: #f54c2b;
text-decoration: none;
display: inline-block;
}
#in-text-link a:hover,
#in-text-link a:focus {
padding: 0;
transform: scale(1.05);
background-color: #fbe144;
}
Text Input Field and Label
HTML Code
<label for="full-name">Full Name</label>
<input type="text" placeholder="What is your name?" />
CSS Code
.input-field label {
display: block;
font-weight: bold;
}
.input-field input {
background-color: #e3e0d7;
width: 50%;
margin-top: 0.5rem;
padding: 0.75rem;
border: 2px solid #241f23;
transition: all 200ms ease;
}
.input-field input[type="text"]:hover {
border-color: #7ec1d4;
outline: none;
}
.input-field input[type="text"]:focus {
border-color: #f54c2b;
outline: none;
}
Color Palettes
Mandarin
#F54C2B
R: 245 G: 76 B: 43
Yellow
#FBE144
R: 251 G: 225 B: 68
Blue
#7ec1d4
R: 126 G: 193 B: 212
Grey
#E3E0D7
R: 227 G: 224 B: 215
Dark
#241F23
R: 36 G: 31 B: 35
Typography
<H1> This is Roboto Mono. Our brand typeface
<H2> This is Roboto Mono. Our brand typeface
<H3> This is Roboto Mono. Our brand typeface
<H4> This is Roboto Mono. Our brand typeface
Roboto Mono is the primary brand typeface for Urbanee. An elegant san serif infused with a quirky style, this headline face projects chic and stylish.
HTML Code
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<p>Paragraph</p>
CSS Code
h1,h2,h3,h4,p{
font-family: "Roboto Mono", monospace;
}
h1{
font-size: 4rem;
margin: 0;
}
h2{
font-size: 3rem;
}
h3{
font-size: 2rem;
margin: 0;
}
h4{
font-size: 1.75rem;
}
p{
font-size: 1rem;
font-weight: normal;
}
Bullet List
- Furniture 1
- Furniture 2
- Furniture 3
HTML Code
<ul>
<li>Furniture 1<li>
<li>Furniture 2<li>
<li>Furniture 3<li>
</ul>
CSS Code
###Number List
- Furniture 1
- Furniture 2
- Furniture 3
HTML Code
<ol>
<li>Furniture 1<li>
<li>Furniture 2<li>
<li>Furniture 3<li>
</ol>
CSS Code
ol {
font-weight: 700;
}
Modular Pattern Elements
Top Navigation
Navigation bar at the top that will be used to navigate through the main pages of the site.
HTML Code
<div class="main-nav">
<div class="hamburger-menu">
<nav role="top-navigation" class="menu-wrap">
<div id="menuToggle">
<input type="checkbox"/>
<span></span>
<span></span>
<span></span>
<ul id="menu" class="pattern-menu">
<li><a href="#">Link to Page</a></li>
</ul>
</div>
</nav>
</div>
<div class="logo single-logo">
<a href="index.html">
<img class="urbanee-logo"
src="img/urbanee-logo.png"
alt="urbanee logo"/></a>
</div>
<div class="cart">
<a href="#">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</div>
</div>
CSS Code
header {
background-color: #e3e0d7;
padding: 2rem 2.5rem;
border-bottom: 2px solid black;
z-index: 100;
position: sticky;
top: 0;
}
main-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.main-nav .pages-nav a {
color: black;
font-size: 0.95rem;
}
.main-nav .pages-nav {
display: grid;
grid-template-columns: 1fr 1fr 0.9fr;
column-gap: 1.95rem;
}
.main-nav .cart a {
color: black;
font-size: 1.5rem;
}
.main-nav .cart {
float: right;
}
.main-nav .logo {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.urbanee-logo {
display: flex;
width: clamp(120px, 120px, 100px);
justify-content: center;
align-items: center;
}
Product Listing
Product lists for the shopping page. Each item will have a photo, description, name.
HTML Code
<div class="product-wrapper">
</div>
<div class="filter-product
product product-listing-grid">
<div class="product-info-grid">
<div class="product-info">
<h2 class="product-name">
<a href="#">Product name</a>
</h2>
<p class="product-decription">
Product description
</p>
<p class="product-price">$0</p>
</div>
<div class="add-to-cart-button">
<a href="#">
<i class="fa-solid
fa-cart-shopping"></i>
</a>
</div>
</div>
<div class="product-listing-grid-item">
<a href="#">
<img src="product.png"
alt="product image"
onmouseover=
"this.src='product1.png'"
onmouseout=
"this.src='product.png'"/>
</a>
</div>
</div>
CSS Code
a {
color: #241f23;
font-size: 1.2rem;
}
.product-price {
font-family: monospace;
font-weight: normal;
width: max-content;
background: #fbe144;
padding: 0.75rem;
margin-top: 0;
font-size: 1.2rem;
}
.product-decription {
font-family: monospace;
font-weight: normal;
margin-top: 0;
font-size: 1.1rem;
}
.product-info-grid {
display: flex;
justify-content: space-between;
column-gap: 1rem;
}
.add-to-cart-button a {
padding: 0.75rem;
border: 2px solid #241f23;
}
.add-to-cart-button a:hover,
.add-to-cart-button a:focus {
padding: 0.75rem;
background-color: #fbe144;
border: 2px solid #fbe144;
}
.product-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.product-listing-grid {
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
padding: 3rem;
}
.product-listing-grid-item img {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
width: clamp(10rem, 100%, 20rem);
max-height: 100%;
margin: auto;
transition: 0.45s;
}
.product-listing-grid-item img:hover,
.product-listing-grid-item img:focus {
opacity: 0.6;
transform: scale(1.15);
}