diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index 53ed09b73..699b2f27a 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ When first starting out, it is common for developers to create a small website t We will use HTML & CSS to create a static site whose content is a fansite about something your group is passionate about. Your group fansite should contain a home page with some introductory information about your chosen topic, a fun facts page about your topic, and a gallery showcasing pictures about your topic. ### Sample Site -View a simple sample website [here](https://adaanswers.github.io/group-fansite-example/index.html). +View a simple sample website [here](://adaanswers.github.io/group-fansite-example/index.html). https ## Learning Goals: - Practice creating semantic HTML diff --git a/coworking_agreement.md b/coworking_agreement.md new file mode 100644 index 000000000..69e0fbb26 --- /dev/null +++ b/coworking_agreement.md @@ -0,0 +1,48 @@ +# Coworking Agreement + +Talk through each section with your partner. Add notes on what you discussed and agreed upon in each section. At the bottom, type your names to sign off on your agreement. + +## Accessibility Needs +*What does each team member need access to in order to succeed and show up the best they can?* + +- Julie will be online Thursday. +- Just work together in-person during coworking time. + +## Collaboration vs. individual work expectations +*Clarify your collaboration expectations- does your group want to write code together all of the time? Or divide work to do independently, then come together to share accomplishments? What tools and technologies can help your collaboration?* + +- Each work on our own page. Do some agreements on general style sheet. + +## Learning Style +*How does each team member learn best in project settings?* + +- Lou: Likes watching things break and understanding why they break. +- Mel: Visually, looking at examples. +- Julie: Working alongside one another and talking through our approach. + +## Preferred Feedback Style +*How does each team member best receive feedback?* + +- Direct feedback when possible. Don't be mean about it, focus on what you're giving feedback on and what best practices are. +- Jokes are a plus. + +## One Team Communication Skill to Improve +*What is a teamwork-related skill you want to work on?* + +- Lou: Self-conscious about grammar, generally wants to improve team communication in English. +- Mel: Asking for help from your teammates or in general. +- Julie: Code reviewing in GitHub if possible. + +## Optional: Other agreements +*Other co-working agreements that were not captured in the above sections.* + +Group Fansite Topic: Our Dogs + +## Improvised Project +- Work on index.html together. +- We each work on a page for our own dog, that includes facts and a gallery for our dog. +- We will also each create our own css stylesheets for our own pages. + +## Signatures +Julie Loh, Melinda Mott, Lou Loera _______________ +Date: __5/16/2023____ \ No newline at end of file diff --git a/images/Boowie.jpg b/images/Boowie.jpg new file mode 100644 index 000000000..63d7c033a Binary files /dev/null and b/images/Boowie.jpg differ diff --git a/images/Bowie/Bowie.jpg b/images/Bowie/Bowie.jpg new file mode 100644 index 000000000..e063d0e6d Binary files /dev/null and b/images/Bowie/Bowie.jpg differ diff --git a/images/Bowie/bowie_carpet.jpg b/images/Bowie/bowie_carpet.jpg new file mode 100644 index 000000000..0d07d7bbe Binary files /dev/null and b/images/Bowie/bowie_carpet.jpg differ diff --git a/images/Bowie/bowie_carpet_2.jpg b/images/Bowie/bowie_carpet_2.jpg new file mode 100644 index 000000000..9f46a0272 Binary files /dev/null and b/images/Bowie/bowie_carpet_2.jpg differ diff --git a/images/Bowie/bowie_cherry_blossom.jpg b/images/Bowie/bowie_cherry_blossom.jpg new file mode 100644 index 000000000..6c6e3c59b Binary files /dev/null and b/images/Bowie/bowie_cherry_blossom.jpg differ diff --git a/images/Bowie/bowie_grass.jpg b/images/Bowie/bowie_grass.jpg new file mode 100644 index 000000000..2e34ca1f3 Binary files /dev/null and b/images/Bowie/bowie_grass.jpg differ diff --git a/images/Bowie/bowie_hike.jpg b/images/Bowie/bowie_hike.jpg new file mode 100644 index 000000000..b5c7b8eeb Binary files /dev/null and b/images/Bowie/bowie_hike.jpg differ diff --git a/images/Bowie/bowie_lou.jpg b/images/Bowie/bowie_lou.jpg new file mode 100644 index 000000000..748ee43d5 Binary files /dev/null and b/images/Bowie/bowie_lou.jpg differ diff --git a/images/Bowie/bowie_snow.jpg b/images/Bowie/bowie_snow.jpg new file mode 100644 index 000000000..8cd9169e7 Binary files /dev/null and b/images/Bowie/bowie_snow.jpg differ diff --git a/images/Bowie/bowie_wet.jpg b/images/Bowie/bowie_wet.jpg new file mode 100644 index 000000000..10d622b2c Binary files /dev/null and b/images/Bowie/bowie_wet.jpg differ diff --git a/images/Keiiko.jpeg b/images/Keiiko.jpeg new file mode 100644 index 000000000..188b1db7c Binary files /dev/null and b/images/Keiiko.jpeg differ diff --git a/images/Keiko/Keiko1.jpeg b/images/Keiko/Keiko1.jpeg new file mode 100644 index 000000000..1b61f7515 Binary files /dev/null and b/images/Keiko/Keiko1.jpeg differ diff --git a/images/Keiko/Keiko2.jpeg b/images/Keiko/Keiko2.jpeg new file mode 100644 index 000000000..a274a93f3 Binary files /dev/null and b/images/Keiko/Keiko2.jpeg differ diff --git a/images/Keiko/Keiko3.jpeg b/images/Keiko/Keiko3.jpeg new file mode 100644 index 000000000..1303f4a73 Binary files /dev/null and b/images/Keiko/Keiko3.jpeg differ diff --git a/images/Keiko/Keiko4.jpeg b/images/Keiko/Keiko4.jpeg new file mode 100644 index 000000000..f6509e8ec Binary files /dev/null and b/images/Keiko/Keiko4.jpeg differ diff --git a/images/Keiko/Keiko5.jpeg b/images/Keiko/Keiko5.jpeg new file mode 100644 index 000000000..92b5a5fae Binary files /dev/null and b/images/Keiko/Keiko5.jpeg differ diff --git a/images/Keiko/Keiko6.jpeg b/images/Keiko/Keiko6.jpeg new file mode 100644 index 000000000..f383af134 Binary files /dev/null and b/images/Keiko/Keiko6.jpeg differ diff --git a/images/Keiko/Keiko7.jpeg b/images/Keiko/Keiko7.jpeg new file mode 100644 index 000000000..7a0917863 Binary files /dev/null and b/images/Keiko/Keiko7.jpeg differ diff --git a/images/Snoopy/beachtime_snoopy.jpeg b/images/Snoopy/beachtime_snoopy.jpeg new file mode 100644 index 000000000..f040dc585 Binary files /dev/null and b/images/Snoopy/beachtime_snoopy.jpeg differ diff --git a/images/Snoopy/flower_crown_snoopy.jpeg b/images/Snoopy/flower_crown_snoopy.jpeg new file mode 100644 index 000000000..c852c7a6d Binary files /dev/null and b/images/Snoopy/flower_crown_snoopy.jpeg differ diff --git a/images/Snoopy/golden_hour_snoopy.jpeg b/images/Snoopy/golden_hour_snoopy.jpeg new file mode 100644 index 000000000..27f3a7fc1 Binary files /dev/null and b/images/Snoopy/golden_hour_snoopy.jpeg differ diff --git a/images/Snoopy/packing_snoopy.jpeg b/images/Snoopy/packing_snoopy.jpeg new file mode 100644 index 000000000..b23303120 Binary files /dev/null and b/images/Snoopy/packing_snoopy.jpeg differ diff --git a/images/Snoopy/rain_fit_snoopy.jpeg b/images/Snoopy/rain_fit_snoopy.jpeg new file mode 100644 index 000000000..8e610760f Binary files /dev/null and b/images/Snoopy/rain_fit_snoopy.jpeg differ diff --git a/images/Snoopy/smiling_snoopy.jpeg b/images/Snoopy/smiling_snoopy.jpeg new file mode 100644 index 000000000..873f124b6 Binary files /dev/null and b/images/Snoopy/smiling_snoopy.jpeg differ diff --git a/images/Snoopy/under_the_desk_snoopy.jpeg b/images/Snoopy/under_the_desk_snoopy.jpeg new file mode 100644 index 000000000..4cef5b467 Binary files /dev/null and b/images/Snoopy/under_the_desk_snoopy.jpeg differ diff --git a/images/beach-dog-paw-prints-foot-prints-sand.jpg b/images/beach-dog-paw-prints-foot-prints-sand.jpg new file mode 100644 index 000000000..e6d61cc35 Binary files /dev/null and b/images/beach-dog-paw-prints-foot-prints-sand.jpg differ diff --git a/images/dog-paw-footprints-sand.jpeg b/images/dog-paw-footprints-sand.jpeg new file mode 100644 index 000000000..9dd643fcd Binary files /dev/null and b/images/dog-paw-footprints-sand.jpeg differ diff --git a/images/footprint-dog-paw-animal.jpg b/images/footprint-dog-paw-animal.jpg new file mode 100644 index 000000000..7fcd2a133 Binary files /dev/null and b/images/footprint-dog-paw-animal.jpg differ diff --git a/images/puppaws.jpeg b/images/puppaws.jpeg new file mode 100644 index 000000000..0a554734a Binary files /dev/null and b/images/puppaws.jpeg differ diff --git a/images/snooopy.jpeg b/images/snooopy.jpeg new file mode 100644 index 000000000..f83b77e9a Binary files /dev/null and b/images/snooopy.jpeg differ diff --git a/pages/Bowie.html b/pages/Bowie.html new file mode 100644 index 000000000..f4f636133 --- /dev/null +++ b/pages/Bowie.html @@ -0,0 +1,81 @@ + + + + + + + Bowie + + + + + +
+

+ BOWIE +

+
+ +
+ +
+

+ The Fluff! +

+
+ Bowie under the cherry Blossom + Bowie Snuggling in the carpet + Bowie enjoying the hike views + Bowie upset about spring + Bowie enjoying his fav ball + Bowie mad he cant swim + Bowie + Bowie enjoying the carpet + +
+
+
+ + + \ No newline at end of file diff --git a/pages/Keiko.html b/pages/Keiko.html new file mode 100644 index 000000000..298757297 --- /dev/null +++ b/pages/Keiko.html @@ -0,0 +1,37 @@ + + + + + + + + Keiko's Sass Floof Life + + +
+

Keiko

+
+ Home + Snoopy + Bowie + Contact +
+
+ +
+ ... + ... + ... + ... + ... + ... + ... + ... + + +
+
+

I am a floof of the highest degree, an order of FLOOOOFEEE. I enjoy running through the woods and rolling in the stinkiest things that I can find. I am a good mole hunter. My best friend is a chi-hee of the blue variety named Pepper.

+
+ + \ No newline at end of file diff --git a/pages/facts.html b/pages/facts.html deleted file mode 100644 index b4ae215c4..000000000 --- a/pages/facts.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - Document - - - - - \ No newline at end of file diff --git a/pages/gallery.html b/pages/gallery.html deleted file mode 100644 index b4ae215c4..000000000 --- a/pages/gallery.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - Document - - - - - \ No newline at end of file diff --git a/pages/index.html b/pages/index.html index b4ae215c4..dcf9225af 100644 --- a/pages/index.html +++ b/pages/index.html @@ -4,9 +4,39 @@ - Document + + + Bowie, Keiko, Snoopy (BKS) - + +
+ A Tail of 3 Floofs +
- - \ No newline at end of file +
+
+
+ + Snoopy + +
+
+ + Bowie + +
+
+ + Keiiko + +
+
+ +
+ + + + + diff --git a/pages/snoopy.html b/pages/snoopy.html new file mode 100644 index 000000000..35741b274 --- /dev/null +++ b/pages/snoopy.html @@ -0,0 +1,85 @@ + + + + + + + Snoopy + + + + + + + + +
+
+

+ Snoopy the Floofy +

+
+ +
+
+

The pics!

+ +
+ + +
+ + + +
+ + \ No newline at end of file diff --git a/styles/bowie.css b/styles/bowie.css new file mode 100644 index 000000000..0778a34ab --- /dev/null +++ b/styles/bowie.css @@ -0,0 +1,73 @@ +*{ margin:0; + background-color: rgb(227, 228, 224); + font-family: monospace; +} + +h1,h2{ + text-align:center; + color:rgb(45, 43, 43); + padding-top:5px; +} +h2{ + padding-bottom:40px; +} +p{ + font-size : large ; + padding-bottom: 15px; +} + +.bowie{ + font:16px/1.3 sans-serif; +} + +.bowie .container{ + margin:auto; +} +.bowie header{ + padding:10px; +} +.bowie nav{ + padding:10px; +} +.bowie nav ul{ + list-style:none; + padding:0; + text-align: center +} +.bowie nav ul li{ + margin-right:10px; +} +.bowie nav ul li a{ + color:inherit; + display:block; + padding:8px 12px; +} + +.bowie footer{ + padding:10px; +} +.bowie-image-section{ + padding:10px; +} + +.bowie aside{ + width: 25%; + float:left; + padding:10px; + padding-top: 40px; +} + +.bowie-image-section img { + border-radius: 10%; + width: 250px; + padding:5px; +} + +.box { + display: flex; + flex-wrap: wrap; +} +.box>* { + flex: 1 1 160px; +} + diff --git a/styles/keiko.css b/styles/keiko.css new file mode 100644 index 000000000..acbba553b --- /dev/null +++ b/styles/keiko.css @@ -0,0 +1,110 @@ +.gallery { +--s: 250px; /* control the size */ +--g: 20px; /* control the gap */ +display: grid; +margin: calc(var(--s) + var(--g)); +} + +.gallery > img { +grid-area: 1/1; +width: var(--s); +aspect-ratio: 1.15; +object-fit: cover; +clip-path: polygon(25% 0%, 75% 0%, 100% 50%,75% 100%,25% 100%,0 50%); +transform: rotate(var(--_a,0deg)) translateY(calc(100% + var(--g))) rotate(calc(-1*var(--_a,0deg))) scale(var(--_t,1)); +cursor: pointer; +filter: grayscale(80%); +transition: .2s linear; +} +.gallery > img:hover { +filter: grayscale(0); +z-index: 1; +--_t: 1.2; +} + +.gallery > img:nth-child(1) {--_a: 0deg} +.gallery > img:nth-child(2) {--_a: 60deg} +.gallery > img:nth-child(3) {--_a: 120deg} +.gallery > img:nth-child(4) {--_a: -60deg} +.gallery > img:nth-child(5) {--_a: -120deg} +.gallery > img:nth-child(6) {--_a: 180deg} +.gallery > img:nth-child(7) {transform: scale(var(--_t,1))} + +body { +margin: 0; +min-height: 100vh; +display: grid; +place-content: center; +background: #aabbfb; +} + + +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,700); +h2{ +font-size: 8.0em; +text-transform: uppercase; +font-family: 'Open Sans Pro', sans-serif; +background: url(https://24.media.tumblr.com/tumblr_m87dri70zh1qzla33o1_500.gif); +background-size: contain; +-webkit-background-clip: text; +-webkit-text-fill-color: transparent; +} + +.ptitle{ + margin: 0; + position: absolute; + left: 35px; + top: 20px; + z-index: 1; +} + +.facts{ + margin: 0; + position: absolute; + text-align: justify; + text-justify: inter-word; + left: 910px; + right: 60px; + top: 610px; + z-index: 1; + +} + +h1{font-size: 32px; color: #444; font-family: Source Sans Pro, Arial, sans-seirf;} + +#mySidenav a { +position: absolute; /* Position them relative to the browser window */ +left: -80px; /* Position them outside of the screen */ +transition: 0.3s; /* Add transition on hover */ +padding: 15px; /* 15px padding */ +width: 100px; /* Set a specific width */ +text-decoration: none; /* Remove underline */ +font-size: 20px; /* Increase font size */ +color: white; /* White text color */ +border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */ +} + +#mySidenav a:hover { +left: 0; /* On mouse-over, make the elements appear as they should */ +} + +/* The about link: 20px from the top with a green background */ +#home { +top: 160px; +background-color: #dddbfa; +} + +#snoopy { +top: 220px; +background-color: #9e9bc5; +} + +#bowie { +top: 280px; +background-color: #6d6a8d; +} + +#contact { +top: 340px; +background-color: #48465e +} \ No newline at end of file diff --git a/styles/snoopy.css b/styles/snoopy.css new file mode 100644 index 000000000..6d5700b64 --- /dev/null +++ b/styles/snoopy.css @@ -0,0 +1,112 @@ +* { + box-sizing: border-box; +} + +a { + color: #A47786; +} + +a:visited { + color: #533440; +} + +a:hover { + color: #9DB6CC; +} + +.flex-container { + display: flex; + min-height: 100vh; + flex-direction: row; + margin: 0; +} + +.col-1 { + background: #E4D4C8; + flex: 1; +} + +ul li { + list-style-type: none; +} + +ul li:first-child { + font-size: 1.2em; +} + +nav > ul li:not(:last-child) { + margin-bottom: 2em; +} + +.col-2 { + display: flex; + flex-direction: column; + flex: 7; +} + +.content { + display: flex; + flex-direction: row; +} + +.content > article { + flex: 3; + min-height: 80vh; + background: #9DB6CC; +} + +#gallery { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + /* justify-content: center; */ + flex-direction: row; +} + +#gallery > li { + flex-basis: 350px +} + +#gallery li img { + object-fit: cover; + max-width: 100%; + height: auto; + vertical-align: middle; + border-radius: 5px; + padding: 0.5em; +} + +aside.snoopy-facts { + background: #E4D4C8; + flex: 1; +} + +aside.snoopy-facts > ul li { + list-style-type: disc; + margin-bottom: 1em; + font-size: 1.2em; +} + +aside.snoopy-facts > p { + font-size: 1.2em; + line-height: 1.5em; +} + +header.snoopy-header { + background: #A47786; + height: 10vh; + color: whitesmoke; + font-size: 1.3em; + display: flex; + align-items: center; +} + +footer.snoopy-footer { + background-color: #A47786; + height: 10vh; + color: #533440; +} + +header, footer, article, nav, aside { + padding: 1em; +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 000000000..408474e0c --- /dev/null +++ b/styles/style.css @@ -0,0 +1,116 @@ +.item1 { grid-area: header; } +.item3 { grid-area: main; } +.item5 { + grid-area: footer; + background-color: rgba(113, 135, 246, 0.577); +} + +.grid-container { + display: grid; + grid-template-areas: + 'header header header header header header' + 'main main main main main main' + 'footer footer footer footer footer footer'; + gap: 10px; + background-color: #2196F3; + background-image: url(/images/puppaws.jpeg); + background-size: cover; + background-repeat: no-repeat; + background-position: 0cm -3cm ; + /* padding: 10px; */ +} + +body{ + margin: 0; +} + +.grid-container > div { + background-color: rgba(113, 135, 246, 0.577); + text-align: center; + padding: 20px 40px; + font-size: 30px; +} + +header { + font-size: 89px; + text-align: right; +} + +* { + font-family: 'Indie Flower', cursive; +} + +.photo { + border-radius: 50%; + width: 200px; +} +.sizephoto { + width: 300px; +} + +.desc { + padding: 15px; + text-align: center; +} + +.picture-container +{ + position:bottom ; + /* background-color: lightgrey; */ + height: 500px; +} + +.picture-container .polaroid:hover{ + color: #111; + background: rgb(251, 255, 216); + box-shadow: 0 0 100px rgb(245, 254, 201); +} + +.picture-container .polaroid +{ + position: absolute; + border: 1px solid darkgrey; + background-color: white; + padding: 15px 15px 60px 15px; + box-shadow: 5px 10px 10px rgb(51, 51, 51); +} + +.picture-container .polaroid:after +{ + content: attr(data-caption); + position: absolute; + bottom: 0px; + left: 0px; + width: calc(100% - 20px); + padding: 10px; + font-size: 30px; + text-align: center; + font-family: 'Indie Flower', cursive; +} + +.picture-container .image1 +{ + left: 70px; + top: 130px; + transform: rotate(-20deg); + -ms-transform: rotate(-20deg); + -webkit-transform: rotate(-20deg); +} + +.picture-container .image2 +{ + left: 590px; + top: 150px; + transform: rotate(20deg); + -ms-transform: rotate(20deg); + -webkit-transform: rotate(20deg); +} + +.picture-container .image3 +{ + left: 320px; + top: 55px; + transform: rotate(5deg); + -ms-transform: rotate(5deg); + -webkit-transform: rotate(5deg); +}