Brand Style Guideline

Developer
ULRIKA PAN
Size
3,984 Kb
Views
10,120
  1. Brand Style Guideline Previews
  2. Brand Style Guideline HTML Codes
  3. Brand Style Guideline CSS Codes

How do I make an brand style guideline?

What is a brand style guideline? How do you make a brand style guideline? This script and codes were developed by ULRIKA PAN on 14 November 2022, Monday.

Brand Style Guideline Previews
IQ Test

Brand Style Guideline - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Brand Style Guideline</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Rajdhani:600,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header"><img class="logo" src="https://image.ibb.co/fryUbQ/10.png"/></div>
<div class="content content_white"> <div class="max-width"> <h5>STYLE GUIDELINES</h5> <h1>品牌網頁視覺引導-大標題</h1> <h1 class="english">English Style Guideline for h1 Title</h1> <hr class="title_hr"/> <h2>品牌網頁視覺引導-中標題</h2> <h2 class="english">English Style Guideline for h2 Title</h2> <h3>品牌網頁視覺引導-小標題</h3> <h3 class="english">English Style Guideline for h3 Title</h3> <hr/> <h5>VI COLORS</h5> <div class="color_chip"> <div class="color_tag">#FEFAEC</div> <div class="color_block color_block_white"></div> </div> <div class="color_chip"> <div class="color_tag">#F36F89</div> <div class="color_block color_block_pink"></div> </div> <div class="color_chip"> <div class="color_tag">#8AD2D2</div> <div class="color_block color_block_green"></div> </div> <div class="color_chip"> <div class="color_tag">#5E5E62</div> <div class="color_block color_block_gray"></div> </div> <h5>BUTTON EXAMPLE</h5> <div class="button button_white">按鈕範例</div> <div class="button button_pink">按鈕範例 </div> <div class="button button_green">按鈕範例</div> <div class="button button_gray">按鈕範例</div> </div>
</div>
<div class="content content_green"> <div class="max-width"> <h5>STYLE GUIDELINES</h5> <h1>品牌網頁視覺引導-大標題</h1> <h1 class="english">English Style Guideline for h1 Title</h1> <hr class="title_hr"/> <h2>品牌網頁視覺引導-中標題</h2> <h2 class="english">English Style Guideline for h2 Title</h2> <h3>品牌網頁視覺引導-小標題</h3> <h3 class="english">English Style Guideline for h3 Title</h3> <hr/> <h5>VI COLORS</h5> <div class="color_chip"> <div class="color_tag">#FEFAEC</div> <div class="color_block color_block_white"></div> </div> <div class="color_chip"> <div class="color_tag">#F36F89</div> <div class="color_block color_block_pink"></div> </div> <div class="color_chip"> <div class="color_tag">#8AD2D2</div> <div class="color_block color_block_green"></div> </div> <div class="color_chip"> <div class="color_tag">#5E5E62</div> <div class="color_block color_block_gray"></div> </div> <h5>BUTTON EXAMPLE</h5> <div class="button button_white">按鈕範例</div> <div class="button button_pink">按鈕範例 </div> <div class="button button_green">按鈕範例</div> <div class="button button_gray">按鈕範例</div> </div>
</div>
<div class="content content_gray"> <div class="max-width"> <h5>STYLE GUIDELINES</h5> <h1>品牌網頁視覺引導-大標題</h1> <h1 class="english">English Style Guideline for h1 Title</h1> <hr class="title_hr"/> <h2>品牌網頁視覺引導-中標題</h2> <h2 class="english">English Style Guideline for h2 Title</h2> <h3>品牌網頁視覺引導-小標題</h3> <h3 class="english">English Style Guideline for h3 Title</h3> <hr/> <h5>VI COLORS</h5> <div class="color_chip"> <div class="color_tag">#FEFAEC</div> <div class="color_block color_block_white"></div> </div> <div class="color_chip"> <div class="color_tag">#F36F89</div> <div class="color_block color_block_pink"></div> </div> <div class="color_chip"> <div class="color_tag">#8AD2D2</div> <div class="color_block color_block_green"></div> </div> <div class="color_chip"> <div class="color_tag">#5E5E62</div> <div class="color_block color_block_gray"></div> </div> <h5>BUTTON EXAMPLE</h5> <div class="button button_white">按鈕範例</div> <div class="button button_pink">按鈕範例 </div> <div class="button button_green">按鈕範例</div> <div class="button button_gray">按鈕範例</div> </div>
</div>
</body>
</html>

Brand Style Guideline - Script Codes CSS Codes

@charset "UTF-8";
* { font-family: Rajdhani, sans-serif, 微軟正黑體; position: relative;
}
html, body { margin: 0px; padding: 0px;
}
.header { height: 280px; background-color: #8ad2d2; box-shadow: inset 3px 2px 50px -23px #5e5e62;
}
.header .logo { width: 150px; position: absolue; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
}
.content { color: #5e5e62; padding: 50px;
}
.content .max-width { max-width: 768px; margin-left: auto; margin-right: auto;
}
.content hr.title_hr { border: 4px solid #8ad2d2; border-radius: 3px; width: 100px; margin-left: 0px; margin-top: -20px;
}
.content h1 { font-size: 40px;
}
.content h1.english { font-size: 24px; margin-top: -10px; margin-bottom: 35px;
}
.content h2 { font-size: 30px;
}
.content h2.english { font-size: 16px; margin-top: -10px; margin-bottom: 35px;
}
.content h3 { font-size: 20px;
}
.content h3.english { font-size: 13px; margin-top: -10px; margin-bottom: 35px;
}
.content hr { border: 1px solid #5e5e62;
}
.content .color_chip { display: inline-block; margin-bottom: 8px; margin-right: 25px;
}
.content .color_chip .color_tag { display: inline-block; padding-right: 2px;
}
.content .color_chip .color_block { display: inline-block; vertical-align: middle; width: 40px; height: 40px; border: 2px solid; border-radius: 35%;
}
.content .color_chip .color_block_white { background-color: #fefaec;
}
.content .color_chip .color_block_pink { background-color: #f36f89;
}
.content .color_chip .color_block_green { background-color: #8ad2d2;
}
.content .color_chip .color_block_gray { background-color: #5e5e62;
}
.content .button { display: inline-block; margin-right: 12px; margin-bottom: 8px; padding: 5px 25px; border: 2px solid #5e5e62; border-radius: 16px;
}
.content .button_white { background-color: #fefaec;
}
.content .button_pink { background-color: #f36f89; color: #fefaec;
}
.content .button_green { background-color: #8ad2d2;
}
.content .button_gray { background-color: #5e5e62; color: #fefaec;
}
.content_green { background-color: #8ad2d2;
}
.content_green hr { border: 1px solid #fefaec;
}
.content_green hr.title_hr { border: 4px solid #f36f89;
}
.content_gray { background-color: #5e5e62; color: #fefaec;
}
.content_gray h1, .content_gray h2, .content_gray h3 { font-weight: 500;
}
.content_gray .button { border: 2px solid #fefaec;
}
.content_gray .button_white { color: #5e5e62;
}
.content_gray hr.title_hr { border: 4px solid #f36f89;
}
.content_gray hr { border: 1px solid #fefaec;
}
Brand Style Guideline - Script Codes
Brand Style Guideline - Script Codes
Home Page Home
Developer ULRIKA PAN
Username ulrikapan
Uploaded November 14, 2022
Rating 3
Size 3,984 Kb
Views 10,120
Do you need developer help for Brand Style Guideline?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

ULRIKA PAN (ulrikapan) Script Codes
Name
Mobile Profile UI
SVG social icon
A Pen by ULRIKA PAN
Google-like button
Image center and RWD method
Weather Box
Slide out navigation-1
Flat Button
ABOUT ME
SVG basic
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!