school/cs1430
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init commit

Browse Source
This commit is contained in:
jashton
2026-08-04 06:53:36 -06:00
commit 5df8484e8f
91 changed files with 2859 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
little-boxes/.DS_Store
Vendored
BIN
View File
Binary file not shown.
little-boxes/._.DS_Store
BIN
View File
Binary file not shown.
little-boxes/._index.html
BIN
View File
Binary file not shown.
little-boxes/.vscode/settings.json
Vendored
+3
View File
@@ -0,0 +1,3 @@
{
"livePreview.defaultPreviewPath": "d:\\school\\FALL 2022\\CSIS1430\\csis1430\\public_html\\little-boxes\\index.html"
}
little-boxes/css/style.css
+462
View File
@@ -0,0 +1,462 @@
/*Background color*/
html {
background-color: #4A245E;
}
/*HEAD & HAIR*/
/* Position, size, color, and shape of the head */
#head {
margin: 10em;
height: 775px;
width: 600px;
background-color: #d2a679;
border: 2px solid black;
border-radius: 90% 90% 100% 100%;
}
/*Position, size, color, and shape of the hair.*/
.hair {
position: relative;
bottom: 33px;
left: 13px;
}
#topHair {
width: 575px;
height: 170px;
background-color: #1a0d00;
border-radius: 10% 10% 0% 0% / 90% 90% 0% 0%;
}
#leftHair {
top: 170px;
left: 0;
width: 0;
height: 0;
border-bottom: 60px solid transparent;
border-left: 60px solid #1a0d00;
}
#rightHair {
top: 110px;
left: 515px;
width: 0;
height: 0;
border-bottom: 60px solid transparent;
border-right:60px solid #1a0d00;
}
/*HEADPHONES*/
/*Position, size, and shape of headphone headband.*/
#headrest {
position: relative;
bottom: 2em;
height: 5em;
background-color: black;
border: 1px solid black;
border-radius: 130% 130% 40% 40%;
}
/*Position of the headphone's stems.*/
#leftStem, #rightStem {
position: relative;
}
/*Position, size, color, and shape of the left headphone stem.*/
#leftStem {
right: 2.3em;
float: left;
height: 500px;
width: 50px;
background-color: black;
border-radius: 200% 10% 70% 25%;
}
/*Position, size, color, and shape of the left headphone's ear-cup.*/
#leftEar {
position: relative;
top: 17.05em;
right: 5em;
height: 225px;
width: 100px;
background-color: black;
border: 1px solid black;
border-radius: 45% 0% 0% 45%;
}
/*Position, size, color, and shape of the right headphone stem.*/
#rightStem {
left: 2.4em;
bottom: 5em;
float: right;
height: 500px;
width: 50px;
background-color: black;
border-radius: 10% 200% 25% 70%;
}
/*Position, size, color, and shape of the right headphone's ear-cup.*/
#rightEar {
position: relative;
top: 17.05em;
left: 2em;
height: 225px;
width: 100px;
background-color: black;
border: 1px solid black;
border-radius: 0% 45% 45% 0%;
}
/*EYEBROWS*/
/*Position and size of the eyebrow container.*/
.eyebrowContainer {
margin-top: 10%;
height: 1.3em;
width: 600px;
}
/*Size and color of the eyebrows.*/
#leftBrow, #rightBrow {
width: 12em;
height: 1.5em;
background-color: #261a0d;
}
/*Position and shape of the left eyebrow.*/
#leftBrow {
float: left;
border-radius: 180% 20% 30% 45%;
}
/*Position and shape of the right eyebrow.*/
#rightBrow {
float: right;
border-radius: 20% 180% 45% 30%;
}
/*EYES*/
/* Positioning the eyes relative to the head */
#eyeArea {
margin-top: 5%;
margin-left: 20%;
margin-right: 20%;
}
/*Positioning all contents of the eye class to the center of (x,y), and making the size, color, and shape of the eye.*/
.eye {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 100px;
background-color: #d9d9d9;
border-radius: 50%;
}
/*Position, size, color, and shape of the eye-color.*/
.eyeColor {
position: absolute;
height: 40px;
width: 40px;
background-color: #392613;
border-radius: 50%;
}
/*Center of the eye class, the pupil is the smallest circle within the eye. Position in z-index,
size, color, and shape of the pupil.*/
.pupil {
position: absolute;
height: 13px;
width: 13px;
background-color: black;
border-radius: 50%;
}
.topLid {
position: relative;
bottom: 25px;
height: 25px;
width: 100px;
background-color: #cc9966;
border: 1px solid #d2a679;
border-radius: 125px 125px 0 0;
}
.bottomLid {
position: relative;
top: 25px;
height: 30px;
width: 100px;
background-color: #cc9966;
border: 1px solid #d2a679;
border-radius: 0 0 200px 200px ;
}
/*Position of the left eye.*/
#leftEye {
float: left;
}
/*Position of the right eye.*/
#rightEye {
float: right;
}
/*GLASSES*/
/*Position, size, color, and shape of the glasses.*/
.glasses {
position: absolute;
z-index: 50;
height: 140px;
width: 200px;
border: 4px solid black;
border-radius: 35%;
border-width: 5px;
}
/*Position, size, and color of the glasses' ear hooks. Also applied to the nose bridge part of the
glasses.*/
.earHook, #bridge {
display: inline-block;
position: relative;
height: 4px;
width: 150px;
background-color: black;
}
/*Positions the glasses' left ear hook.*/
#leftEarHook {
float: left;
left: 100px;
position: absolute;
}
/*Positions and re-sizes the glasses' nose bridge.*/
#bridge {
left: 50px;
width: 60px;
}
/*Positions the glasses' right ear hook.*/
#rightEarHook {
float: right;
right: 70px;
position: absolute;
}
/*NOSE*/
/*Position and size of the nose container.*/
.nose {
position: relative;
display: inline-block;
left: 21px;
width: 115px;
height: 150px;
}
/*Position, size, color, and shape of the nose's ridge.*/
#noseRidge {
position: relative;
left: 25px;
z-index: 1;
height: 140px;
width: 60px;
background-color: #d2a679;
border: 3px solid #cc9966;
border-radius: 100% 100% 75% 75%;
}
/*Common position, size, color, and shape of the left and right nostril.*/
#leftNostril, #rightNostril {
position: relative;
bottom: 50px;
height: 40px;
width: 40px;
border: 4px solid #cc9966;
border-radius: 50%;
}
/*Left nostril's specific positioning.*/
#leftNostril {
float: left;
left: 10px;
}
/*Left nostril's specific positioning.*/
#rightNostril {
float: right;
right: 10px;
}
/*MOUTH*/
/*Position and size of the mouth container.*/
.mouthContainer {
position: relative;
display: flex;
align-items: center;
justify-content: center;
bottom: 20px;
left: 125px;
width: 350px;
height: 200px;
}
/*Size, color, and shape of the mouth.*/
#mouth {
height: 70px;
width: 220px;
background-color: #cc9966;
border-radius: 60px 60px 175px 175px;
}
/*Size, color, and shape of the mouth's lips together.*/
#lips {
height: 30px;
border-top: none;
border-bottom: 3px solid #bf8040;
border-radius: 60px 60px 175px 175px;
}
little-boxes/index.html
+115
View File
@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Self-portrait | Little-Boxes</title>
</head>
<body>
<div id="head">
<div class="headphone">
<div id="leftStem">
<div id="leftEar"></div>
</div>
<div id="headrest"></div>
<div id="rightStem">
<div id="rightEar"></div>
</div>
</div>
<div class="hair" id="topHair">
<div class="hair" id="leftHair"></div>
<div class="hair" id="rightHair"></div>
</div>
<div class="eyebrowContainer">
<div id="leftBrow"></div>
<div id="rightBrow"></div>
</div>
<div id="eyeArea">
<div class="earHook" id="leftEarHook"></div>
<div class="face eye" id="leftEye">
<div class="eyeColor"></div>
<div class="eyeLid">
<div class="topLid"></div>
<div class="bottomLid"></div>
</div>
<div class="glasses"></div>
<div class="pupil"></div>
</div>
<div id="bridge"></div>
<div class="face eye" id="rightEye">
<div class="eyeColor"></div>
<div class="eyeLid">
<div class="topLid"></div>
<div class="bottomLid"></div>
</div>
<div class="glasses"></div>
<div class="pupil"></div>
</div>
<div class="earHook" id="rightEarHook"></div>
</div>
<div class="nose">
<div id="noseRidge"></div>
<div id="leftNostril"></div>
<div id="rightNostril"></div>
</div>
<div class="mouthContainer">
<div id="mouth">
<div id="lips"></div>
</div>
</div>
</div>
</body>
</html>