assignment a4
This commit is contained in:
Joey Eamigh
37
assignments/a3/css/clean.css
Normal file
37
assignments/a3/css/clean.css
Normal file
@@ -0,0 +1,37 @@
|
||||
html,
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
@supports (font-variation-settings: normal) {
|
||||
:root {
|
||||
font-family: 'Inter var', sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
242
assignments/a3/css/index.css
Normal file
242
assignments/a3/css/index.css
Normal file
@@ -0,0 +1,242 @@
|
||||
@import 'clean.css';
|
||||
|
||||
header {
|
||||
border-bottom: 2px solid purple;
|
||||
position: relative;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
& > p {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
& > div {
|
||||
display: grid;
|
||||
justify-content: end;
|
||||
|
||||
& > a {
|
||||
padding: 1rem 2rem;
|
||||
background-color: lightblue;
|
||||
border-radius: 1rem;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > #mobile-nav-menu {
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
grid-template: repeat(4, 1fr) / 1fr;
|
||||
gap: 0.5rem;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 5rem;
|
||||
margin: 0 auto;
|
||||
|
||||
min-width: 80%;
|
||||
|
||||
text-align: center;
|
||||
|
||||
border: 2px solid purple;
|
||||
border-radius: 1rem;
|
||||
|
||||
& > p {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
border-bottom: 2px solid purple;
|
||||
}
|
||||
|
||||
& > a {
|
||||
font-size: 1.5rem;
|
||||
color: blue;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: lightblue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:popover-open) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > button {
|
||||
height: 3rem;
|
||||
width: 3.5rem;
|
||||
|
||||
background-color: lightblue;
|
||||
border-radius: 1rem;
|
||||
border-block: unset;
|
||||
border-inline: unset;
|
||||
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > svg {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
& > svg:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:has(~ #mobile-nav-menu:popover-open) {
|
||||
& > svg:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > svg:last-of-type {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > nav:not(#mobile-nav-menu) {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto) 1fr;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
& > a > svg {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
& > a {
|
||||
font-size: 1.5rem;
|
||||
color: black;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: lightblue;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
display: grid;
|
||||
justify-content: end;
|
||||
|
||||
& > a {
|
||||
padding: 1rem 2rem;
|
||||
background-color: lightblue;
|
||||
border-radius: 1rem;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > *:not(.mobile) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
& > .mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > *:not(.mobile) {
|
||||
display: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
|
||||
& > img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 1rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
max-height: 60%;
|
||||
aspect-ratio: 6/4;
|
||||
overflow: hidden;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
& > h1 {
|
||||
color: purple;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
background-color: lightgray;
|
||||
border-top: 2px solid purple;
|
||||
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
|
||||
& > h3 {
|
||||
color: purple;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
& > article {
|
||||
& > h4 {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 2rem 1rem;
|
||||
background-color: darkgray;
|
||||
color: white;
|
||||
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
& > p {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body > section {
|
||||
display: grid;
|
||||
grid-template: 1fr / 1fr 3fr;
|
||||
|
||||
padding: 1rem 4rem;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
BIN
assignments/a3/img/clt.webp
Normal file
BIN
assignments/a3/img/clt.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 846 KiB |
122
assignments/a3/index.html
Normal file
122
assignments/a3/index.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Assignment A3</title>
|
||||
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
<link rel="preconnect" href="https://rsms.me/" />
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<button popovertarget="mobile-nav-menu" class="mobile">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<p class="mobile">Menu</p>
|
||||
<div class="mobile">
|
||||
<a href="#">Login</a>
|
||||
</div>
|
||||
|
||||
<nav id="mobile-nav-menu" popover class="mobile">
|
||||
<p>Menu</p>
|
||||
<a href="#">Home</a>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Contact</a>
|
||||
</nav>
|
||||
|
||||
<nav>
|
||||
<a href="#"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Contact</a>
|
||||
<div>
|
||||
<a href="#">Login</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<main>
|
||||
<img src="./img/clt.webp" />
|
||||
<h1>something important</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel error eaque ducimus explicabo
|
||||
consequuntur ipsum voluptatem nobis laboriosam obcaecati illum officiis natus sed ea modi
|
||||
architecto distinctio, iste id quos! Lorem ipsum dolor sit amet consectetur adipisicing
|
||||
elit. Reiciendis porro asperiores praesentium blanditiis possimus commodi maiores earum
|
||||
repellendus recusandae aut expedita accusamus, nemo consequuntur iste impedit. Facilis
|
||||
odit consequatur dolor.
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<aside>
|
||||
<h3>news</h3>
|
||||
|
||||
<article>
|
||||
<h4>this happened</h4>
|
||||
<p>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore reiciendis est
|
||||
blanditiis temporibus necessitatibus! Commodi dolorum quam veniam deleniti, ipsa
|
||||
recusandae labore perspiciatis harum dignissimos voluptates quos laborum expedita
|
||||
nesciunt.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h4>this happened</h4>
|
||||
<p>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore reiciendis est
|
||||
blanditiis temporibus necessitatibus! Commodi dolorum quam veniam deleniti, ipsa
|
||||
recusandae labore perspiciatis harum dignissimos voluptates quos laborum expedita
|
||||
nesciunt.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h4>this happened</h4>
|
||||
<p>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore reiciendis est
|
||||
blanditiis temporibus necessitatibus! Commodi dolorum quam veniam deleniti, ipsa
|
||||
recusandae labore perspiciatis harum dignissimos voluptates quos laborum expedita
|
||||
nesciunt.
|
||||
</p>
|
||||
</article>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>keep software free</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user