Skip to content

Commit

Permalink
Add styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@beejsbj
beejsbj committed Nov 25, 2023
1 parent 89dac57 commit f35fe25
Show file tree
Hide file tree
Showing 16 changed files with 1,023 additions and 55 deletions.
169 changes: 114 additions & 55 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,129 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LondonDAO - Building London's Cryptocurrency Scene</title>
<link rel="stylesheet" href="Styling.css">
</head>
<body>
<link rel="stylesheet" href="styles/site.css" />
</head>
<body>
<header>
<inner-column
><picture class="logo">
<img
src="Assets/resized_square_LdnDAO_logo (1).png"
alt="LondonDAO Logo"
/>
</picture>

<nav>
<div id="logo">
<img src="Assets/resized_square_LdnDAO_logo (1).png" alt="LondonDAO Logo">
</div>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#values">Values</a></li>
<li><a href="#join">Join Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<ul>
<li><a class="text" href="#about">About</a></li>
<li><a class="text" href="#values">Values</a></li>
<li><a class="text" href="#join">Join Us</a></li>
<li><a class="text" href="#contact">Contact</a></li>
</ul>
</nav></inner-column
>
</header>

<section id="hero">
<h1>Welcome to LondonDAO
</h1>
<p>Shaping the Future of Cryptocurrency in London</p>
</section>
<main>
<section id="hero">
<inner-column>
<h1 class="booming-voice">Welcome to LondonDAO</h1>
<p class="notice-voice">
Shaping the Future of Cryptocurrency in London
</p>
</inner-column>
</section>

<section id="about">
<h2>About Us</h2>
<p>LondonDAO is a community-led initiative aimed at building and strengthening the cryptocurrency scene in London.</p>
</section>
<section id="about">
<inner-column>
<h2 class="loud-voice">About Us</h2>
<p class="notice-voice">
LondonDAO is a community-led initiative aimed at building and
strengthening the cryptocurrency scene in London.
</p>
</inner-column>
</section>

<section id="values">
<h2>Our Core Values</h2>
<div class="value">
<h3>Focus on Crypto Policy</h3>
<p>We aim to shape and influence cryptocurrency policies that facilitate innovation and growth.</p>
</div>
<div class="value">
<h3>Building the Community</h3>
<p>Connecting London's crypto enthusiasts, developers, investors, and pioneers to foster innovation and collaboration.</p>
</div>
<div class="value">
<h3>Welcoming Global Businesses</h3>
<p>Creating a hospitable environment for global crypto businesses to establish, collaborate, and thrive in London.</p>
</div>
</section>
<section id="values">
<inner-column>
<h2 class="loud-voice">Our Core Values</h2>
<ul>
<li class="value">
<h3 class="firm-voice">Focus on Crypto Policy</h3>
<p>
We aim to shape and influence cryptocurrency policies that
facilitate innovation and growth.
</p>
</li>
<li class="value">
<h3 class="firm-voice">Building the Community</h3>
<p>
Connecting London's crypto enthusiasts, developers, investors,
and pioneers to foster innovation and collaboration.
</p>
</li>
<li class="value">
<h3 class="firm-voice">Welcoming Global Businesses</h3>
<p>
Creating a hospitable environment for global crypto businesses
to establish, collaborate, and thrive in London.
</p>
</li>
</ul>
</inner-column>
</section>

<section id="join">
<h2>Join LondonDAO</h2>
<p>Become a part of a vetted community that is spearheading the development of the London cryptocurrency scene.</p>
<a href="apply.html" class="button">Apply Now</a>
</section>
<section id="join">
<inner-column>
<h2 class="loud-voice">Join LondonDAO</h2>
<p class="notice-voice">
Become a part of a vetted community that is spearheading the
development of the London cryptocurrency scene.
</p>
<div class="actions">
<a href="apply.html" class="button firm-voice">Apply Now</a>
</div>
</inner-column>
</section>
</main>

<footer>
<section id="contact">
<h2>Contact Us </h2>
<p>Have questions? Say hello to us by emailing <a href="mailto:[[email protected]]">LondonDAO</a></p>
</section>
<inner-column>
<section id="contact">
<h2 class="firm-voice">Contact Us</h2>
<p>
Have questions? Say hello to us by emailing
<a class="text" href="mailto:[[email protected]]">LondonDAO</a>
</p>
</section>

<section id="socials">
<h2>Follow Us</h2>
<a href="https://twitter.com/londondao" target="_blank">Twitter</a>
<a href="https://linkedin.com/londondao" target="_blank">LinkedIn</a>
</section>
<section id="socials">
<h2 class="firm-voice">Follow Us</h2>
<nav>
<ul>
<li>
<a
class="text"
href="https://twitter.com/londondao"
target="_blank"
>Twitter</a
>
</li>
<li>
<a
class="text"
href="https://linkedin.com/londondao"
target="_blank"
>LinkedIn</a
>
</li>
</ul>
</nav>
</inner-column>
</section>
</footer>
</body>
</body>
</html>
Binary file added styles/.DS_Store
View file
Binary file not shown.
169 changes: 169 additions & 0 deletions styles/colors.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
html {
/* Black and white */
--black: hsla(0, 0%, 1%, 1);
--white: hsla(0, 0%, 97%, 1);

--gray: hsla(0, 0%, 50%, 1);

--gray-light: hsla(0, 0%, 71%, 1);
--gray-lighter: hsla(0, 0%, 90%, 1);

--gray-dark: hsla(0, 0%, 26%, 1);
--gray-darker: hsla(0, 0%, 15%, 1);

/* Colors */

/* #todo replacce the light and dark with color-mix eventually */

--hue: 6;
--saturation: 85%;

--color: hsla(var(--hue), var(--saturation), 50%, 1);

--color-light: color-mix(
in hsl,
var(--color),
hsla(var(--hue), var(--saturation), 60%, 1)
);
--color-lighter: color-mix(
in hsl,
var(--color-light),
hsla(var(--hue), var(--saturation), 70%, 1)
);
--color-lightest: color-mix(
in hsl,
var(--color-lighter),
hsla(var(--hue), var(--saturation), 80%, 1)
);
--color-dark: color-mix(
in hsl,
var(--color),
hsla(var(--hue), var(--saturation), 40%, 1)
);
--color-darker: color-mix(
in hsl,
var(--color-dark),
hsla(var(--hue), var(--saturation), 30%, 1)
);
--color-darkest: color-mix(
in hsl,
var(--color-darker),
hsla(var(--hue), var(--saturation), 20%, 1)
);

--highlight-hue: calc(var(--hue) - 56);
--highlight-saturation: 90%;
--highlight: hsla(var(--highlight-hue), var(--highlight-saturation), 60%, 1);
--highlight-light: color-mix(
in hsl,
var(--highlight),
hsla(var(--highlight-hue), var(--highlight-saturation), 100%, 1)
);
--highlight-lighter: color-mix(
in hsl,
var(--highlight-light),
hsla(var(--highlight-hue), var(--highlight-saturation), 100%, 1)
);
--highlight-lightest: color-mix(
in hsl,
var(--highlight-lighter),
hsla(var(--highlight-hue), var(--highlight-saturation), 100%, 1)
);
--highlight-dark: color-mix(
in hsl,
var(--highlight),
hsla(var(--highlight-hue), var(--highlight-saturation), 0%, 1)
);
--highlight-darker: color-mix(
in hsl,
var(--highlight-dark),
hsla(var(--highlight-hue), var(--highlight-saturation), 0%, 1)
);
--highlight-darkest: color-mix(
in hsl,
var(--highlight-darker),
hsla(var(--highlight-hue), var(--highlight-saturation), 0%, 1)
);

--tertiary-hue: calc(var(--hue) + 66);
--tertiary-saturation: 77%;
--tertiary-color: hsla(
var(--tertiary-hue),
var(--tertiary-saturation),
75%,
1
);
--tertiary-color-light: color-mix(
in hsl,
var(--tertiary-color),
hsla(var(--tertiary-hue), var(--tertiary-saturation), 100%, 1)
);
--tertiary-color-lighter: color-mix(
in hsl,
var(--tertiary-color-light),
hsla(var(--tertiary-hue), var(--tertiary-saturation), 100%, 1)
);
--tertiary-color-lightest: color-mix(
in hsl,
var(--tertiary-color-lighter),
hsla(var(--tertiary-hue), var(--tertiary-saturation), 100%, 1)
);
--tertiary-color-dark: color-mix(
in hsl,
var(--tertiary-color),
hsla(var(--tertiary-hue), var(--tertiary-saturation), 0%, 1)
);
--tertiary-color-darker: color-mix(
in hsl,
var(--tertiary-color-dark),
hsla(var(--tertiary-hue), var(--tertiary-saturation), 0%, 1)
);
--tertiary-color-darkest: color-mix(
in hsl,
var(--tertiary-color-darker),
hsla(var(--tertiary-hue), var(--tertiary-saturation), 0%, 1)
);

--success: hsla(122, 85%, 65%, 1);
--warning: hsla(44, 85%, 65%, 1);
--error: hsla(0, 85%, 65%, 1);

/* Gradients */
--gradient-direction: 130deg;

--gradient-dark: linear-gradient(
var(--gradient-direction),
var(--paper) 35%,
var(--gray-darker)
);

--gradient-light: linear-gradient(
var(--gradient-direction),
var(--gray-light) 35%,
var(--white)
);

--gradient-color: linear-gradient(
var(--gradient-direction),
var(--color) 35%,
var(--highlight)
);

--paper: var(--white);
--ink: var(--black);
}

@media (prefers-color-scheme: dark) {
html {
}
}

/*@media (prefers-color-scheme: light) {
html {
--paper: var(--white);
--ink: var(--black);
--color-darker: var(--color-lighter);
--color-dark: var(--color-light);
}
}
*/
Loading

0 comments on commit f35fe25

Please sign in to comment.