added html and css
This commit is contained in:
parent
02e196a1d1
commit
f710e6b918
|
|
@ -0,0 +1,198 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>IACS CSS Zen Garden Starter</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- partial:index.partial.html -->
|
||||
<body id="css-zen-garden">
|
||||
<div class="page-wrapper">
|
||||
<header role="banner">
|
||||
<h1><span class="iacs">IACS</span> CSS Zen Garden</h1>
|
||||
<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
|
||||
</header>
|
||||
<section class="intro" id="zen-intro">
|
||||
|
||||
<div class="summary" id="zen-summary" role="article">
|
||||
<p>
|
||||
This project is inspired by David Shea's
|
||||
<a href="http://www.csszengarden.com/">CSS Zen Garden</a>,
|
||||
a webpage from the early days of CSS that sought
|
||||
to show designers just how powerful this new
|
||||
language was.
|
||||
</p>
|
||||
<p>As you work on this project, you can create up
|
||||
to 3 different designs for this template, showing
|
||||
off your design skills. Once we are done, your
|
||||
teacher will work to put all of the class designs
|
||||
into a single gallery so we can enjoy them
|
||||
as a class.</p>
|
||||
</div>
|
||||
|
||||
<div class="preamble" id="zen-preamble" role="article">
|
||||
<h3>The Road to Enlightenment</h3>
|
||||
<p>In your early projects, you inserted style directly into your
|
||||
HTML with <code>style=</code> tags. In the early days of the web,
|
||||
coders were forced to abuse the <code><table></code> tag to
|
||||
create side-by-side layouts.</p>
|
||||
<p>We must clear the mind of the past.</p>
|
||||
<p>The CSS Zen Garden invites you to relax and focus all your efforts
|
||||
on a single <code>style.css</code> file, working in a single
|
||||
language: <b style="css">Cascading Style Sheets</b>.</p>
|
||||
</p>
|
||||
<p>Create a dynamic and beautiful layout using only CSS and
|
||||
show it off to your friends.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="main supporting" id="zen-supporting" role="main">
|
||||
<div class="explanation" id="zen-explanation" role="article">
|
||||
<h3>So What is This About?</h3>
|
||||
<p>There is a continuing need to show the power of <abbr title="Cascading Style Sheets">CSS</abbr>. The Zen
|
||||
Garden aims to excite, inspire, and encourage participation.</p>
|
||||
<p><abbr title="Cascading Style Sheets">CSS</abbr> allows complete and
|
||||
total control over the style of a hypertext document. This page is
|
||||
designed so that clicking on one of the links to a stylesheet will change
|
||||
the CSS, but leave the HTML intact.
|
||||
</p>
|
||||
<p>When we are done, we will have radically different designs
|
||||
achieved with identical HTML. We will be many and also one.
|
||||
Diverse and yet the same. United, but distinct.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="participation" id="zen-participation" role="article">
|
||||
<h3>Rules of the Garden</h3>
|
||||
<p>You may modify the style sheet in any way you wish, but not the
|
||||
<abbr title="HyperText Markup Language">HTML</abbr>.
|
||||
This may seem daunting at
|
||||
first, but breathe deeply, study CSS, and you will find the way to web
|
||||
enlightenment.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="requirements" id="zen-requirements" role="article">
|
||||
<h3>Requirements</h3>
|
||||
<p>To complete this project, you must do the following:</p>
|
||||
<ul>
|
||||
<li>Create at least one beautiful design.</li>
|
||||
<li>Make the design selector menu beautiful and usable.</li>
|
||||
<li>Use images and color wisely in your design.</li>
|
||||
|
||||
</ul>
|
||||
<h4>Honors requirements</h4>
|
||||
<ul>
|
||||
<li>Make your designs
|
||||
<a class="responsive" href="https://www.w3schools.com/html/html_responsive.asp">responsive</a>.
|
||||
</li>
|
||||
<li>Create 3 unique designs using at least two different approaches
|
||||
to layout.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside class="sidebar" role="complementary">
|
||||
<div class="wrapper">
|
||||
|
||||
<div class="design-selection" id="design-selection">
|
||||
<h3 class="select">Select a Design:</h3>
|
||||
<nav role="navigation">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#default" class="design-name">
|
||||
Boring Default
|
||||
</a> by
|
||||
<a href="https://www.tomhinkle.net">
|
||||
Mr. Hinkle
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#avery-space" class="design-name">
|
||||
Space
|
||||
</a> by
|
||||
<a href="#">
|
||||
Avery K
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#owenk" class="design-name">
|
||||
Bold Lines
|
||||
</a> by
|
||||
<a href="#">
|
||||
Owen K
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#23-julian-cyberpunk" class="design-name">
|
||||
Cyberpunk
|
||||
</a> by
|
||||
<a href="https://remarkable-pithivier-572d14.netlify.app/">
|
||||
julian-henry
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#ar-tree" class="design-name">
|
||||
Fall Tree
|
||||
</a> by
|
||||
<a href="#">
|
||||
Aarav Patel
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="design-archives" id="design-archives">
|
||||
<h3 class="archives">Archives:</h3>
|
||||
<nav role="navigation">
|
||||
<ul>
|
||||
<li class="next">
|
||||
<a href="#next">
|
||||
Next Designs <span class="indicator">›</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="viewall">
|
||||
<a href="#all" title="View every submission to the Zen Garden.">
|
||||
View All Designs </a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="zen-resources" id="zen-resources">
|
||||
<h3 class="resources">Resources:</h3>
|
||||
<ul>
|
||||
<li class="view-css">
|
||||
<a id="csslink" href="style.css" title="View the source CSS file of the currently-viewed design.">
|
||||
View This Design’s <abbr title="Cascading Style Sheets">CSS</abbr> </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.w3schools.com/css/css_intro.asp">
|
||||
W3 Schools Intro to CSS
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.w3schools.com/css/css_grid.asp">
|
||||
A guide to the grid
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://fonts.google.com">
|
||||
Google Fonts
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</body>
|
||||
<!-- partial -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
|
||||
|
||||
@font-face {
|
||||
font-family: GoD;
|
||||
src: url(https://git.lainiwakura.xyz/uncreativecultist/PersonalStorage/raw/branch/main/GoodOldDos/Good%20Old%20DOS.ttf);
|
||||
}
|
||||
|
||||
.iacs {
|
||||
color: #0033a0;
|
||||
text-shadow: 3px 3px 3px #c6093b;
|
||||
}
|
||||
h1 {
|
||||
font-family: "Oswald", sans-serif;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #0033a0;
|
||||
color: #c6093b;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Oswald", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
/* no idea where this image originally came from, but as far as i can tell, the oldest instance of it is from angelfire back in 2008.*/
|
||||
background-image: url("https://rivendell.neocities.org/backgrounds/abstract1.jpg");
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
max-width: 950px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: #c5e9fa;
|
||||
border-style: solid;
|
||||
border-color: #83bede;
|
||||
padding: 25px 25px 25px 25px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: lightblue;
|
||||
border-style: dotted;
|
||||
border-color: #6ca5c4;
|
||||
padding: 25px 25px 25px 25px;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"content sidebar"
|
||||
"content2 content2";
|
||||
}
|
||||
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
.intro {
|
||||
grid-area: content;
|
||||
}
|
||||
main {
|
||||
grid-area: content2;
|
||||
}
|
||||
aside {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
/* The following is the CSS for buttons at the bottom of the site. Made with assistance from GPT-4o by OpenAI. https://chatgpt.com/share/67532b75-75f0-8009-951a-798c927c13e4 */
|
||||
|
||||
#zen-requirements::after {
|
||||
content: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
|
||||
color: #000;
|
||||
color: rgba(0, 0, 0, 0);
|
||||
/* this is a HORRIBLE solution, but forwhatever godforsaken reason, this WONT display without text in the content. So we give it what it wants, but then hide it. */
|
||||
font-size: 25px;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 900px;
|
||||
height: 31px;
|
||||
background-image: url("https://git.lainiwakura.xyz/uncreativecultist/PersonalStorage/raw/branch/main/Gifs/gif.gif"); /* Set your image URL */
|
||||
background-size: contain; /* Ensures the image retains its original size */
|
||||
background-repeat: no-repeat; /* Prevents the image from repeating */
|
||||
image-rendering: pixelated; /* Preserves pixel art sharpness */
|
||||
z-index: 9999; /* Ensures it is above all other elements */
|
||||
}
|
||||
|
||||
/* ATTRIBUTIONS:
|
||||
|
||||
"Good Old DOS" typeface is created by morderdrakonovich and was labeled as Public Domain, however, It's a good font and he deserves credit.
|
||||
|
||||
*/
|
||||
Loading…
Reference in New Issue