Skip to content

Brocking the whale word #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FAbyssSS wants to merge 20 commits into
base: master
Choose a base branch
from
Open

Brocking the whale word #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
2f8dcdc
123
FAbyssSS Jun 11, 2022
1107c00
123
liujianping0329 Jun 11, 2022
b9d130d
123
FAbyssSS Jun 11, 2022
d55dbb8
123
FAbyssSS Jun 11, 2022
84c3dec
123
FAbyssSS Aug 20, 2022
932c64e
123
FAbyssSS Aug 20, 2022
7f1799f
123
FAbyssSS Aug 20, 2022
c9f7aeb
123
FAbyssSS Sep 6, 2022
f2f2a79
123
FAbyssSS Sep 7, 2022
e0faff4
123
FAbyssSS Sep 7, 2022
c71406f
123
FAbyssSS Sep 7, 2022
5465046
123
FAbyssSS Sep 7, 2022
fb02d73
123
FAbyssSS Sep 7, 2022
096ea53
123
FAbyssSS Sep 8, 2022
a74a4e5
123
FAbyssSS Sep 8, 2022
0b24002
123
FAbyssSS Sep 8, 2022
4ce2290
123
FAbyssSS Sep 13, 2022
378ad66
123
FAbyssSS Sep 13, 2022
721300c
123
FAbyssSS Sep 15, 2022
d37c258
123
FAbyssSS Nov 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .idea/modules.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

50 changes: 50 additions & 0 deletions liuSenseiWebLesson/BrownBear.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>

<head>
<title>Brown Bears</title>
</head>

<body>
<a href="./index.html">Brown Bear</a>
<a href="./aboutme.html">About Me</a>
<h1>The Brown Bear</h1>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#habitat">Habitat</a></li>
<li><a href="#media">Media</a></li>
</ul>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the
Atlas bear and the Himalayan brown bear.</p>
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">Learn More</a>
<h3>Species</h3>
<ul>
<li>Arctos</li>
<li>Collarus</li>
<li>Horribilis</li>
<li>Nelsoni (extinct)</li>
</ul>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<ol>
<li>Russia</li>
<li>United States</li>
<li>Canada</li>
</ol>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank"><img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg"/></a>
<video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" height="240" width="320" controls>Video not supported</video>
</div>
</body>

</html>
164 changes: 164 additions & 0 deletions liuSenseiWebLesson/Csscolorpractice.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html>
<head>
<title>House Store</title>
<link rel="stylesheet" type="text/css" href="css/Csscolorpractice.css">
<link rel="stylesheet" type="text/css" href="css/Csscolorpractice.css">
<link href="https://fonts.googleapis.com/css?family=Creepster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div class="image-container logo-small">
<img src="https://content.codecademy.com/courses/freelance-1/unit-6/logo-sm.png">
</div>
<div class="image-container logo-big">
<img src="https://content.codecademy.com/courses/freelance-1/unit-6/logo-lg.png">
</div>
<nav>
<ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Lumber</a></li>
<li><a href="#">Paint</a></li>
<li><a href="#">Garden</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<!-- Banner -->
<div id="banner">
<h1>PAINTING IS SCARY</h1>
<p>But it doesn't have to be! Let our handy Virtual Paint Department help guide you through the process of choosing a color. Know the hue? You know what to do. Click the order button and we'll get the paint to you.</p>
</div>

<!-- Color Guide -->
<div id="color-guide">
<div class="introduction">
<h2>Color Guide</h2>
<p>Here at HouseStore, we take color seriously. In each of the following sections, well explore our base colors in swatches that incrementally change three values: <strong>Hue</strong>, <strong>Saturation</strong> and <strong>Lightness</strong>. You'll be able to pick from a wide variety of colors that all work well with each other because they <strong>stem from the same value.</strong></p>
</div>

<!-- Red Swatches -->
<div class="color reds">
<div class="information">
<h3>Reds</h3>
<p>Firetrucks, lipstick, fresh berries &mdash; red is a color with power, emotion, intensity. For this reason we recommend using reds as accent colors. Red is particularly suited to kitchens, as it is said to evoke hunger!</p><p>Our base red is <span class="base-color">HSL (350, 100, 50)</span></p>
<div class="image-container">
<img src=" https://content.codecademy.com/courses/freelance-1/unit-6/reds.png">
</div>
</div>
<div class="swatches">
<h4>Lightness</h4>
<div class="swatch lightness">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
<h4>Saturation</h4>
<div class="swatch saturation">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
<h4>Hue</h4>
<div class="swatch hue">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
</div>
</div>

<!-- Green Swatches -->
<div class="color greens">
<div class="information">
<h3>Greens</h3>
<p>They say that geniuses choose green &mdash; we think any of these verdant colors will look smart! Deck your halls like a lush outdoor space, adorn your rooms with emerald, or just make your houseguests green with envy!</p>
<p>Our base green is <span class="base-color">HSL (130, 100, 50)</span></p>
<div class="image-container">
<img src=" https://content.codecademy.com/courses/freelance-1/unit-6/greens.png">
</div>
</div>
<div class="swatches">
<h4>Lightness</h4>
<div class="swatch lightness">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
<h4>Saturation</h4>
<div class="swatch saturation">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
<h4>Hue</h4>
<div class="swatch hue">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
</div>
</div>

<!-- Blue Swatches -->
<div class="color blues">
<div class="information">
<h3>Blues</h3>
<p>Blues dont give us the blues &mdash; in fact, blue is one of the most popular colors in home interiors, and for good reason! Energizing like a summer sky, calming like a lakeshore, light as mist or deep as indigo, blue can do it all.</p>
<p>Our base blue is <span class="base-color">HSL (220, 100, 50)</span></p>
<div class="image-container">
<img src=" https://content.codecademy.com/courses/freelance-1/unit-6/blues.png">
</div>
</div>
<div class="swatches">
<h4>Lightness</h4>
<div class="swatch lightness">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
<h4>Saturation</h4>
<div class="swatch saturation">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
<h4>Hue</h4>
<div class="swatch hue">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
</div>
</div>
</div>

<!-- Footer -->
<footer>
<strong>All set? Click below to order.</strong>
<p>Most colors can be delivered to your door within 48 hours. We'll reach out if your color needs some extra attention, which could delay shipment.</p>
<a href="#" class="button">Order My Paint</a>
</footer>
</body>
</html>
115 changes: 115 additions & 0 deletions liuSenseiWebLesson/Csspractice5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<title>Please Participate in Our Survey!</title>
<link href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela+Round" rel="stylesheet">
<link rel="stylesheet" href="css/Csspractive5.css">
</head>
<body>

<header>
<ul>
<li>Question 1</li>
<li>Question 2</li>
<li>Question 3</li>
<li>Question 4</li>
<li>Question 5</li>
<li>Question 6</li>
</ul>
</header>

<div class="welcome">
<h1><strong>Welcome</strong> to our survey!</h1>
<p>We're looking forward to getting your answers so we can make sure our products and services are the best they can be!</p>
</div>

<div class="question">
<h4>Question 1</h4>
<h2>I like participating in physical activity such as running, swimming, or biking.</h2>

<div class="answer">
<h3>Disagree</h3>
</div>

<div class="answer">
<h3>Neutral</h3>
</div>

<div class="answer">
<h3>Agree</h3>
</div>
</div>

<div class="question">
<h4>Question 2</h4>
<h2>I try to keep up to date with the latest fashion in active wear.</h2>

<div class="answer">
<h3>Disagree</h3>
</div>

<div class="answer">
<h3>Neutral</h3>
</div>

<div class="answer">
<h3>Agree</h3>
</div>
</div>

<div class="question">
<h4>Question 3</h4>
<h2>I purchase clothing online regularly.</h2>

<div class="answer">
<h3>Disagree</h3>
</div>

<div class="answer">
<h3>Neutral</h3>
</div>

<div class="answer">
<h3>Agree</h3>
</div>
</div>

<div class="question">
<h4>Question 4</h4>
<h2>I try to buy goods that are designed and/or manufactured in my home country.</h2>

<div class="answer">
<h3>Disagree</h3>
</div>

<div class="answer">
<h3>Neutral</h3>
</div>

<div class="answer">
<h3>Agree</h3>
</div>
</div>

<div class="question">
<h4>Question 5</h4>
<h2>I look to famous athletes when trying to choose what to wear when training.</h2>

<div class="answer">
<h3>Disagree</h3>
</div>

<div class="answer">
<h3>Neutral</h3>
</div>

<div class="answer">
<h3>Agree</h3>
</div>
</div>
<footer>
<h3>Thanks for taking our survey!</h3>
</footer>

</body>
</html>
Loading