From b0af6af05f1a71d463aa87c100e2825850641626 Mon Sep 17 00:00:00 2001 From: oldoc63 Date: Thu, 10 Mar 2022 10:30:21 -0400 Subject: [PATCH 1/2] We can fix an element to a specific position on the page (regardless of user scrolling) by setting its position to fixed #666 --- CSS/position/position.html | 5 ++--- CSS/position/style.css | 14 +++++++++----- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/CSS/position/position.html b/CSS/position/position.html index 6787965..58a287c 100644 --- a/CSS/position/position.html +++ b/CSS/position/position.html @@ -11,9 +11,8 @@

My Awesome Website

Hello World! I'm learning how to create my own website using HTML and CSS!

-
- -
+

This website is in progress. Please come back later!

+
\ No newline at end of file diff --git a/CSS/position/style.css b/CSS/position/style.css index 309ad6c..d41816a 100644 --- a/CSS/position/style.css +++ b/CSS/position/style.css @@ -1,11 +1,16 @@ h1 { width: 800px; height: 36px; + background-color: antiquewhite; + position:fixed; + top: 0px; + left: 0px; } .bluebox{ background-color: blue; width: 300px; height: 150px; + margin-top: 20px; } p { width: 800px; @@ -16,9 +21,8 @@ p { width: 650px; height: 120px; } -.inProgress { - position: absolute; - top: 300px; - right: 0; - background-color: aqua; +.pinkbox { + width: 800px; + height: 800px; + background-color: pink; } \ No newline at end of file From 642309f8f9404b3de23de86ce8aa143b1b3d548c Mon Sep 17 00:00:00 2001 From: oldoc63 Date: Thu, 10 Mar 2022 11:25:58 -0400 Subject: [PATCH 2/2] The sticky value is another position value that keeps an element in the document flow as the user scrolls, but sticks to a specified position as the page is scrolled further #667 --- CSS/position/position.html | 118 +++++++++++++++++++++++++++++---- CSS/position/style.css | 132 +++++++++++++++++++++++++++++-------- 2 files changed, 210 insertions(+), 40 deletions(-) diff --git a/CSS/position/position.html b/CSS/position/position.html index 58a287c..6b5ff1b 100644 --- a/CSS/position/position.html +++ b/CSS/position/position.html @@ -1,18 +1,112 @@ - + - - - - Position - + Please Participate in Our Survey! + + -

My Awesome Website

-
-

Hello World! I'm learning how to create my own website using HTML and CSS!

-
-

This website is in progress. Please come back later!

-
+ +
+
    +
  • Question 1
    • +
  • Question 2
    • +
  • Question 3
    • +
  • Question 4
    • +
  • Question 5
    • +
  • Question 6
    • +
+
+ +
+

Welcome to our survey!

+

We're looking forward to getting your answers so we can make sure our products and services are the best they can be!

+
+ +
+

Question 1

+

I like participating in physical activity such as running, swimming, or biking.

+ +
+

Disagree

+
+ +
+

Neutral

+
+ +
+

Agree

+
+
+ +
+

Question 2

+

I try to keep up to date with the latest fashion in active wear.

+ +
+

Disagree

+
+ +
+

Neutral

+
+ +
+

Agree

+
+
+ +
+

Question 3

+

I purchase clothing online regularly.

+ +
+

Disagree

+
+ +
+

Neutral

+
+ +
+

Agree

+
+
+ +
+

Question 4

+

I try to buy goods that are designed and/or manufactured in my home country.

+ +
+

Disagree

+
+ +
+

Neutral

+
+ +
+

Agree

+
+
+ +
+

Question 5

+

I look to famous athletes when trying to choose what to wear when training.

+ +
+

Disagree

+
+ +
+

Neutral

+
+ +
+

Agree

+
+
+ \ No newline at end of file diff --git a/CSS/position/style.css b/CSS/position/style.css index d41816a..0c4f779 100644 --- a/CSS/position/style.css +++ b/CSS/position/style.css @@ -1,28 +1,104 @@ -h1 { - width: 800px; - height: 36px; - background-color: antiquewhite; - position:fixed; - top: 0px; - left: 0px; -} -.bluebox{ - background-color: blue; - width: 300px; - height: 150px; - margin-top: 20px; -} -p { - width: 800px; - height: 18px; -} -.greenbox { - background-color: green; - width: 650px; - height: 120px; -} -.pinkbox { - width: 800px; - height: 800px; - background-color: pink; -} \ No newline at end of file +body { + background-color: #FFF; + margin: 0 auto; + } + + header { + background-color: #466995; + border-bottom: 1px solid #466995; + position: fixed; + width: 100%; + } + + ul { + margin: 30px auto; + padding: 0 20px; + text-align: center; + } + + li { + color: #FFF; + font-family: 'Oswald', sans-serif; + font-size: 16px; + font-weight: 300; + text-transform: uppercase; + } + + li:hover { + color: #DBE9EE; + } + + h1 { + color: #466995; + font-family: 'Oswald', sans-serif; + font-size: 32px; + font-weight: 300; + text-transform: uppercase; + } + + h2 { + color: #333; + font-family: 'Varela Round', sans-serif; + font-size: 26px; + font-weight: 100; + margin: 0 auto 20px auto; + } + + h3 { + color: #466995; + font-family: 'Oswald', sans-serif; + font-size: 18px; + text-align: center; + font-weight: 700; + text-transform: uppercase; + padding: 30px; + } + + h4 { + color: #466995; + font-family: 'Oswald', sans-serif; + font-size: 18px; + font-weight: 300; + letter-spacing: 2px; + text-align: center; + text-transform: uppercase + } + + p { + color: #333; + font-family: 'Varela Round', sans-serif; + font-size: 18px; + } + + footer { + background-color: #DBE9EE; + text-align: center; + } + + .welcome { + background-color: #DBE9EE; + box-sizing: border-box; + padding: 40px; + text-align: center; + width: 100%; + position: relative; + top: 200px; + } + + .question { + text-align: center; + position: sticky; + top: 40px; + border: 15px solid #DBE9EE; + background-color: white; + } + + .answer { + border: 1px solid #466995; + margin: 20px; + } + + .answer:hover { + background: #C0D6DF; + color: #FFF; + } \ No newline at end of file