mimidigital/index.html Secret

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Website Style Guide</title>
  <link href="styles.css" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
  <header>
    <ul class="menu">
      <li><a href="#colours">Colours</a></li>
      <li><a href="#fonts">Typography</a></li>
    </ul>
    <h3>Website Style Guide</h3>
  </header>
  <main>
    <section class="colours" id="colours">

        <h4 class="section-title">Colours</h4>

        <div class="colour-list-first">
        <p class="section-subtitle">Primary Colours</p>
        <data>
            <div class="colour-block" style="background-color:#004dff;"></div>
            <p class="colour-code">#004dff</p>
        </data>
        <data>
            <div class="colour-block" style="background-color:#ffa500;"></div>
            <p class="colour-code">#ffa500</p>
        </data>
        <data>
            <div class="colour-block" style="background-color:#f6f7f9;"></div>
            <p class="colour-code">#f6f7f9</p>
        </data>
        <data>
            <div class="colour-block" style="background-color:#dedede;"></div>
            <p class="colour-code">#dedede</p>
        </data></div>


        <div class="colour-list">
        <p class="section-subtitle">Text Colours</p>
        <data>
            <div class="colour-block" style="background-color:#747474;"></div>
            <p class="colour-code">#747474</p>
        </data>
        <data>
            <div class="colour-block" style="background-color:#292929;"></div>
            <p class="colour-code">#292929</p>
        </data></div>

        <div class="colour-list">
        <p class="section-subtitle">Alerts Colours</p>
        <data class="colour">
            <div class="colour-block" style="background-color:#3ada49;"></div>
            <p class="colour-code">#3ada49</p>
        </data>
        <data>
            <div class="colour-block" style="background-color:#ff4848;"></div>
            <p class="colour-code">#ff4848</p>
        </data>
        <data>
            <div class="colour-block" style="background-color:#d58a00;"></div>
            <p class="colour-code">#d58a00</p>
        </data></div>
    </section>
    <section class="fonts" id="fonts">
        <h4 class="section-title">Typeface</h4>
        <p>Montserrat Alternate</p>
        <data>
        <p class="massive-text">Aa</p>
        <p>Regular</p>
        </data>
        <data>
            <p class="massive-text"><strong>Aa</strong></p>
            <p><strong>Bold</strong></p>
        </data>
        <div class="spacer-30"></div>
        <h1>H1 - Bebas Neue - Size 70px - Line height 85px</h1>
        <h2>H2 - Monserrat Alternate<br>Size 60px - Line height 60px</h2>
        <h3>H3 - Monserrat Alternate<br>Size 50px - Line height 50px</h3>
        <div class="spacer-30"></div>
        <p>Monserrat Regular - Size 18px - Line height 24px</p>
        <div class="spacer-20"></div>
        <div class="col-8"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
    </section>

</body>
</html>

## styles.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
  font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
    box-sizing: border-box;
}


/*typography*/

h1 {
  font-family: "Bebas Neue", sans-serif;
  font-size: 70px;
  line-height: 70px;
  margin-top: 20px;
  color: #292929;
}

h2 {
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 60px;
  line-height: 60px;
  margin-top: 20px;
  color: #292929;
}

h3 {
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 44px;
  line-height: 50px;
  margin-top: 20px;
  color: #292929;
}

h4 {
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 24px;
  line-height: 30px;
  color: #292929;
}

p {
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 18px;
  line-height: 24px;
  color: #747474;
}

a {
  text-decoration: none;
  color: #ffa500;
}


/* header */

header {
  margin-bottom: 50px;
}

header ul {
  width: 100%;
  border-bottom: 1px solid #eee;
  position: fixed;
  top: 0;
  background-color: #fff;
  z-index: 10;
}

header li {
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 14px;
  line-height: 14px;
  color: #747474;
}

header li a {
  color: inherit;
}

header li a:hover {
  color: #ffa500;
}

header h3 {
  position: relative;
  top: 40px;
  margin-left: 20px;
  padding: 20px 0px 40px 0px;
  font-weight: 700;
}

/* main */

main {
    margin: 20px;
}

section {
    margin-bottom: 40px;
}

.section-title {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.section-subtitle {
    padding: 10px 0px 10px 0px;
    width: 250px;
    border-bottom: 1px solid #eee;
}

.colours data {
    display: inline-block;
    width: 120px;
    margin: 20px 20px 20px 0px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
}

.colour-block {
    height: 100px;
}

.colour-code {
    padding: 10px;
    border: 1px solid #eee;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    font-weight: 700;
}

.colour-list-first {
    display: block;
}

.colour-list {
    display: inline-block;
    margin-right: 40px;
}

.fonts data {
    display: inline-block;
    margin-right: 20px;
}

.massive-text {
    font-size: 100px;
    line-height: 100px;
    color: #292929;
}

strong {
    font-weight: 700;
}

.spacer-30 {
    height: 30px;
}

.spacer-20 {
    height: 20px;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Website Style Guide</title>
	<link href="styles.css" type="text/css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@400;700&display=swap" rel="stylesheet">
	</head>
	<body>
	<header>
	<ul class="menu">
	<li><a href="#colours">Colours</a></li>
	<li><a href="#fonts">Typography</a></li>
	</ul>
	<h3>Website Style Guide</h3>
	</header>
	<main>
	<section class="colours" id="colours">

	<h4 class="section-title">Colours</h4>

	<div class="colour-list-first">
	<p class="section-subtitle">Primary Colours</p>
	<data>
	<div class="colour-block" style="background-color:#004dff;"></div>
	<p class="colour-code">#004dff</p>
	</data>
	<data>
	<div class="colour-block" style="background-color:#ffa500;"></div>
	<p class="colour-code">#ffa500</p>
	</data>
	<data>
	<div class="colour-block" style="background-color:#f6f7f9;"></div>
	<p class="colour-code">#f6f7f9</p>
	</data>
	<data>
	<div class="colour-block" style="background-color:#dedede;"></div>
	<p class="colour-code">#dedede</p>
	</data></div>


	<div class="colour-list">
	<p class="section-subtitle">Text Colours</p>
	<data>
	<div class="colour-block" style="background-color:#747474;"></div>
	<p class="colour-code">#747474</p>
	</data>
	<data>
	<div class="colour-block" style="background-color:#292929;"></div>
	<p class="colour-code">#292929</p>
	</data></div>

	<div class="colour-list">
	<p class="section-subtitle">Alerts Colours</p>
	<data class="colour">
	<div class="colour-block" style="background-color:#3ada49;"></div>
	<p class="colour-code">#3ada49</p>
	</data>
	<data>
	<div class="colour-block" style="background-color:#ff4848;"></div>
	<p class="colour-code">#ff4848</p>
	</data>
	<data>
	<div class="colour-block" style="background-color:#d58a00;"></div>
	<p class="colour-code">#d58a00</p>
	</data></div>
	</section>
	<section class="fonts" id="fonts">
	<h4 class="section-title">Typeface</h4>
	<p>Montserrat Alternate</p>
	<data>
	<p class="massive-text">Aa</p>
	<p>Regular</p>
	</data>
	<data>
	<p class="massive-text"><strong>Aa</strong></p>
	<p><strong>Bold</strong></p>
	</data>
	<div class="spacer-30"></div>
	<h1>H1 - Bebas Neue - Size 70px - Line height 85px</h1>
	<h2>H2 - Monserrat Alternate<br>Size 60px - Line height 60px</h2>
	<h3>H3 - Monserrat Alternate<br>Size 50px - Line height 50px</h3>
	<div class="spacer-30"></div>
	<p>Monserrat Regular - Size 18px - Line height 24px</p>
	<div class="spacer-20"></div>
	<div class="col-8"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
	</section>

	</body>
	</html>
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
	display: block;
	}
	body {
	line-height: 1;
	}
	ol, ul {
	list-style: none;
	}
	blockquote, q {
	quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
	content: '';
	content: none;
	}
	table {
	border-collapse: collapse;
	border-spacing: 0;
	}

	* {
	box-sizing: border-box;
	}


	/typography/

	h1 {
	font-family: "Bebas Neue", sans-serif;
	font-size: 70px;
	line-height: 70px;
	margin-top: 20px;
	color: #292929;
	}

	h2 {
	font-family: "Montserrat Alternates", sans-serif;
	font-size: 60px;
	line-height: 60px;
	margin-top: 20px;
	color: #292929;
	}

	h3 {
	font-family: "Montserrat Alternates", sans-serif;
	font-size: 44px;
	line-height: 50px;
	margin-top: 20px;
	color: #292929;
	}

	h4 {
	font-family: "Montserrat Alternates", sans-serif;
	font-size: 24px;
	line-height: 30px;
	color: #292929;
	}

	p {
	font-family: "Montserrat Alternates", sans-serif;
	font-size: 18px;
	line-height: 24px;
	color: #747474;
	}

	a {
	text-decoration: none;
	color: #ffa500;
	}



	/* header */

	header {
	margin-bottom: 50px;
	}

	header ul {
	width: 100%;
	border-bottom: 1px solid #eee;
	position: fixed;
	top: 0;
	background-color: #fff;
	z-index: 10;
	}

	header li {
	display: inline-block;
	padding: 10px 20px;
	text-align: center;
	font-family: "Montserrat Alternates", sans-serif;
	font-size: 14px;
	line-height: 14px;
	color: #747474;
	}

	header li a {
	color: inherit;
	}

	header li a:hover {
	color: #ffa500;
	}

	header h3 {
	position: relative;
	top: 40px;
	margin-left: 20px;
	padding: 20px 0px 40px 0px;
	font-weight: 700;
	}

	/* main */

	main {
	margin: 20px;
	}

	section {
	margin-bottom: 40px;
	}

	.section-title {
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
	}

	.section-subtitle {
	padding: 10px 0px 10px 0px;
	width: 250px;
	border-bottom: 1px solid #eee;
	}

	.colours data {
	display: inline-block;
	width: 120px;
	margin: 20px 20px 20px 0px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
	}

	.colour-block {
	height: 100px;
	}

	.colour-code {
	padding: 10px;
	border: 1px solid #eee;
	text-transform: uppercase;
	font-size: 12px;
	text-align: center;
	font-weight: 700;
	}

	.colour-list-first {
	display: block;
	}

	.colour-list {
	display: inline-block;
	margin-right: 40px;
	}

	.fonts data {
	display: inline-block;
	margin-right: 20px;
	}

	.massive-text {
	font-size: 100px;
	line-height: 100px;
	color: #292929;
	}

	strong {
	font-weight: 700;
	}

	.spacer-30 {
	height: 30px;
	}

	.spacer-20 {
	height: 20px;
	}

	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}