assignment a2
This commit is contained in:
Joey Eamigh
28
assignments/a2/css/clean.css
Normal file
28
assignments/a2/css/clean.css
Normal file
@@ -0,0 +1,28 @@
|
||||
html,
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
175
assignments/a2/css/index.css
Normal file
175
assignments/a2/css/index.css
Normal file
@@ -0,0 +1,175 @@
|
||||
@import './clean.css';
|
||||
@import url('https://fonts.googleapis.com/css2?family=Protest+Strike&display=swap');
|
||||
|
||||
header {
|
||||
color: white;
|
||||
background-color: #0d2b43;
|
||||
|
||||
& > nav {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
|
||||
& > a:hover {
|
||||
color: lightgray;
|
||||
}
|
||||
}
|
||||
|
||||
& > div:has(img) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
padding: 1rem 0;
|
||||
|
||||
& > div {
|
||||
height: 9rem;
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
position: relative;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: left top;
|
||||
}
|
||||
|
||||
& > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
& > div {
|
||||
/* background-color: #0d2b43; */
|
||||
border-right: 1rem solid #0d2b43;
|
||||
flex-grow: 1;
|
||||
|
||||
&:nth-child(4) {
|
||||
flex-grow: 1.5;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
flex-grow: 4;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div:has(h1) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
|
||||
& > h1 {
|
||||
font-size: 3rem;
|
||||
font-family: 'Protest Strike', sans-serif;
|
||||
}
|
||||
|
||||
& > h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
& > p {
|
||||
font-size: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
|
||||
& > section:has(> div > img) {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-wrap: nowrap;
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
object-position: center 25%;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
& > :first-child:nth-last-child(n + 2) {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
& > img {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& > :nth-child(2) {
|
||||
flex-grow: 3;
|
||||
|
||||
& > img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > section:has(> div > h3) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 0 2rem 2rem 2rem;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
|
||||
& > h3 {
|
||||
font-size: 3rem;
|
||||
font-family: 'Protest Strike', sans-serif;
|
||||
}
|
||||
|
||||
& > h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
& > p {
|
||||
font-size: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #c5f36c;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
BIN
assignments/a2/img/churro1.jpg
Normal file
BIN
assignments/a2/img/churro1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
BIN
assignments/a2/img/churro2.jpg
Executable file
BIN
assignments/a2/img/churro2.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
assignments/a2/img/churro3.jpg
Normal file
BIN
assignments/a2/img/churro3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
assignments/a2/img/longdog.jpg
Normal file
BIN
assignments/a2/img/longdog.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
84
assignments/a2/index.html
Normal file
84
assignments/a2/index.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./css/index.css" />
|
||||
|
||||
<title>assignment a2</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="#">home</a>
|
||||
<a href="#">about</a>
|
||||
<a href="#">contact</a>
|
||||
</nav>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<img src="./img/longdog.jpg" alt="long dog" />
|
||||
|
||||
<div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>churro box</h1>
|
||||
<h2>the cutest dog in the world</h2>
|
||||
<p>and i really need to think of a new website topic</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<div>
|
||||
<img src="./img/churro1.jpg" alt="churro" />
|
||||
<img src="./img/churro2.jpg" alt="churro" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./img/churro3.jpg" alt="churro" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div>
|
||||
<h3>churro again</h3>
|
||||
<h4>more cool pictures of churro</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores, alias beatae error
|
||||
totam maiores animi, iure obcaecati maxime officiis facere repudiandae iusto. Aperiam
|
||||
facere tempora laudantium. Suscipit impedit magnam labore. Lorem ipsum, dolor sit amet
|
||||
consectetur adipisicing elit. Iure, vitae. Tempora perferendis exercitationem eligendi
|
||||
id at eveniet libero consequatur, sint molestias, recusandae suscipit ducimus facilis
|
||||
tempore, ratione atque repellendus fugit!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>churro again part 2</h3>
|
||||
<h4>more cool pictures of churro</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quam, quisquam
|
||||
sit quod corrupti quas! Nesciunt velit exercitationem, quibusdam blanditiis totam,
|
||||
nostrum a iure sapiente, voluptates ab harum inventore! Lorem ipsum dolor sit amet
|
||||
consectetur adipisicing elit. Laboriosam eaque maiores recusandae dolores adipisci odio
|
||||
magnam vel qui. Error eligendi consequatur obcaecati ducimus pariatur provident fuga
|
||||
blanditiis quam quos quod.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>keep software free</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user