Skip to content

Instantly share code, notes, and snippets.

@mohammadiamin

mohammadiamin/index.css

Created January 26, 2023 11:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mohammadiamin/c3c8c0aae69a709f309c51d57372a337 to your computer and use it in GitHub Desktop.
Save mohammadiamin/c3c8c0aae69a709f309c51d57372a337 to your computer and use it in GitHub Desktop.
Download ZIP
My Website Style Guide Project
Raw
index.css
html {
margin: 0;
padding: 0;
}
/* font family */
.frobotomono {
font-family: 'Roboto Mono', monospace;
}
.fRighteous {
font-family: 'Righteous', cursive;
}
.fLobster {
font-family: 'Lobster', cursive;
}
/* link */
a {
text-decoration: none;
color: #FF5733;
}
/* titles */
.title {
font-size: 30px;
color: #FF5733;
margin-left: 20px;
}
.title:hover {
text-decoration: underline;
color: #FF9033;
cursor:cell;
}
/* header */
.menubtn {
background-color: #D5DBDB;
word-spacing: -10px;
user-select: none;
}
.menubtn:hover {
border-bottom: 1px solid #04748C;
}
.menubtn a:hover {
color: #FF9033;
}
.menubtn:active {
transform: translateY(1px);
border-bottom: 0;
border-radius: 3px 3px 0 0;
}
.menubtn a:active {
color: white;
}
.headertitle {
font-size: 35px;
color: #2994C2;
}
.borderbottom {
border-bottom: 2px solid #04748C;
}
.headercontainer {
width: 800px;
height: fit-content;
margin: 0 auto;
}
.menutitle {
width: 800px;
margin:0 auto;
display: flex;
}
.headertitle {
margin-left: 20px;
}
.titlecontainer, .menucontainer {
width: fit-content;
}
.headermenu li {
list-style-type: none;
float: right;
position: relative;
top: 14px;
}
.headermenu {
margin-right: 20px;
}
.menubtn {
padding: 4px 5px;
margin-right: 2px;
width: 100px;
height: 20px;
text-align: center;
}
/*main*/
/* color Box */
.headerbox {
height: 100px;
width: 150px;
float: left;
margin: 10px 5px;
border-radius: 2px;
}
.headerbox p {
}
.hbs1 {
background-color: #FF5733;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.hbs2 {
background-color: #FF7133;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.hbs3 {
background-color: #D5DBDB;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.hbs4 {
background-color: #2994C2;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.hbs5 {
background-color: #04748C;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.headersection {
height: fit-content;
width: 800px;
display: flex;
justify-content: center;
padding-bottom: 5px;
}
.maincontainer {
height: fit-content;
width: 800px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
.textbox {
width: 40%;
height: fit-content;
display: inline-block;
margin: 5px 5px;
padding: 20px;
}
.textboxcontainer {
margin-left: 5%;
margin-left: 5%;
}
/*
nav {
display: contents;
float: right;
}
/* fonts */
.fLobster p {
font-size: 15px;
}
.frobotomono p {
font-size: 15px;
}
.fRighteous p {
font-size: 14.5px;
}
h4 {
font-size: 18px;
}
/* text style */
.textstylecontainer {
margin-left: 10px;
}
.textstylecontainer ul {
margin-left: 30px;
}
.maincontainer ul {
}
Raw
index.html
<!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">
<link rel="stylesheet" href="resources/css/index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Righteous&family=Roboto+Mono:wght@100&display=swap" rel="stylesheet">
<title>Website Style</title>
</head>
<body>
<!--header-->
<header>
<div class="headercontainer borderbottom">
<div class="menutitle borderhd">
<div class="titlecontainer borderhd">
<h1 class="hd fonttitr headertitle fRighteous">My Website Style Guide</h1>
</div>
<div class="menucontainer borderhd">
<nav class="hd headermenunav">
<ul class="headermenu frobotomono">
<li class="menubtn" ><a href="#colors">Colors</a></li>
<li class="menubtn" ><a href="#fonts">Fonts</a></li>
<li class="menubtn" ><a href="#textstyle">Text Styles</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!--main-->
<main>
<section class="maincontainer borderbottom" id="colors">
<h1 class="title fLobster"><a href="#colors">Colors</a></h1>
<section class="headersection frobotomono">
<div class="headerbox hbs1 borderhd">#FF5733</div>
<div class="headerbox hbs2 borderhd">#FF7133</div>
<div class="headerbox hbs3 borderhd">#D5DBDB</div>
<div class="headerbox hbs4 borderhd">#2994C2</div>
<div class="headerbox hbs5 borderhd">#04748C</div>
</section>
</section>
<section class="maincontainer borderbottom" id="fonts">
<h1 class="title fLobster"><a href="#fonts">Fonts</a></h1>
<div class="textboxcontainer">
<div class="fRighteous textbox">
<h4 class="fRighteous">Righteous</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
<div class="fLobster textbox">
<h4 class="fLobster">Lobster</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
<div class="frobotomono textbox">
<h4 class="frobotomono">Roboto Mono</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
</div>
</section>
<section class="maincontainer " id="textstyle">
<h1 class="title fLobster"><a href="#textstyle">Text Styles</a>
</h1>
<div class="textstylecontainer frobotomono">
<div class="">
<h1 class="">
H1: Main page heading
</h1>
<ul class="Righteous">
<li>
Font-weight: 400 (regular)
</li>
<li>
Font-size: 35px
</li>
<li>
Font-family: Righteous
</li>
</ul>
</div>
<div class="">
<h2 class="">
H2 & H4: Subheading
</h2>
<ul class="">
<li>
Font-weight: 400 (regular)
</li>
<li>
Font-size: 30px & 18px
</li>
<li>
Font-family: Lobster
</li>
</ul>
</div>
<div class="">
<p class="">
P: Paragraph text & Button
</p>
<ul class="">
<li>
ont-weight: 400 (regular)
</li>
<li>
Font-size: 16px
</li>
<li>
Font-family: Roboto Mono
</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment