Commit 1fc8c7d3 authored by Chathurdi Vibhuda's avatar Chathurdi Vibhuda

feat: front-end changes html and css.

parent aa7a7fdb
body {
font-family: 'Arial', sans-serif;
background-image: url('gridme.png');
}
h1 {
text-align: center;
text-shadow: 0px 1px 3px black;
font-size: 80px;
}
p
{
text-shadow: 0px 1px 3px #999999;
}
div
{
font-size: 25px;
text-shadow: 0px 1px 3px #999999;
}
.colorResults {
width: 100px;
height: 100px;
float: left;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
color: #ffffff;
text-shadow: 1px 1px 1px black;
}
.thumb {
height: 250px;
/*border: 1px solid #000;*/
margin: 10px 10px 10px 10px;
-moz-box-shadow: 0px 2px 8px 0px #555;
-webkit-box-shadow: 0px 2px 8px 0px #555;
box-shadow: 0px 2px 8px 0px #555;
}
.swatch
{
width: 50px;
height: 50px;
float: left;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
color: #ffffff;
text-shadow: 1px 1px 1px black;
border: 1px solid #999999;
}
#scheme
{
display: none;
width: 400px;
}
// The files that compile
@import 'abstracts/index';
@import 'base/index';
@import 'layout/index';
@import 'components/index';
<html>
<head>
<meta charset="UTF-8">
<title>Slide Quality Checker</title>
<link rel="stylesheet" href="assets/css/styles.css" type="text/css">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@oomphinc">
<meta name="og:title" content="ColorCube: Evaluate Accessible Color Palettes">
<meta name="twitter:title" content="ColorCube: Evaluate Accessible Color Palettes">
<meta name="og:description" content="Adjust color values to meet WCAG Level AA or AAA standards for legible color combinations.">
<meta name="twitter:description" content="Adjust color values to meet WCAG Level AA or AAA standards for legible color combinations.">
<meta name="og:image" content="assets/img/ColorCube-screenshot.png">
<meta name="twitter:image" content="assets/img/ColorCube-screenshot.png">
<meta name="twitter:image:alt" content="We are sorry, but this tool is not optimized for the visually impaired.">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[Color Detector]</title>
<script type="text/javascript" src="./assets/js/detection.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="./assets/css/main.css" />
</head>
<body>
<header class="l__header p__header">
<div class="l__max u__space__outer cc__brand">
<h2 class="cc__brand__title">
<!-- <a href="." title="Press to reload page and start over with default values"> -->
<img class="cc__brand__logo" src="assets/img/presently.jpeg" alt="" width="390">
Slide Quality Checker
<!-- </a> -->
</h2>
</div>
</header>
<div class="cc__form__submit g--wide text-align-center">
<a href="index.html">
<img src = "/Users/chithuwedage/Downloads/color accuracy.webp" width="400" height="300">
<input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Color Accuracy">
</a>
<img src = "/Users/chithuwedage/Downloads/CSC-Reviewer-Grammar.png" width="400" height="300">
<input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Grammer Checker">
<a href="index2.html">
<img src = "/Users/chithuwedage/Downloads/color-blind.jpeg" width="400" height="300">
<input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Visual Accessibility Checker">
</a>
<img src = "/Users/chithuwedage/Downloads/images (2).jpeg" width="400" height="300">
<input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Visibility Checker">
<img src = "/Users/chithuwedage/Downloads/object detector.png" width="400" height="300">
<input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Object preparation">
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Checks the contrast of your color design based on Web Content Accessibility Guidelines (WCAG) 2.0."
/>
<title>Color Contrast Checker</title>
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicons/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicons/apple-touch-icon.png" />
<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
<link rel="mask-icon" href="%PUBLIC_URL%/favicons/safari-pinned-tab.svg" color="#172F36" />
<meta name="theme-color" content="#172F36" />
<!-- Facebook -->
<meta property="og:url" content="https://color-contrast.netlify.app/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Color Contrast Checker" />
<meta
property="og:description"
content="Checks the contrast of your color design based on Web Content Accessibility Guidelines (WCAG) 2.0."
/>
<meta property="og:image" content="%PUBLIC_URL%/favicons/android-chrome-256x256.png" />
<meta property="og:site_name" content="Color Contrast Checker" />
<noscript>
<style>
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
background-color: #172f36;
color: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 6vw;
}
h1 {
margin-top: 0;
}
</style>
</noscript>
</head>
<body>
<noscript>
<div class="wrapper">
<div class="container">
<h1>Please enable Javascript</h1>
<p>It seems like you disabled Javascript in your browser.</p>
<p>You need to enable Javascript to run this app.</p>
</div>
</div>
</noscript>
<div id="root"></div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment