Skip to content
This repository was archived by the owner on Mar 16, 2026. It is now read-only.

Sticky #668

Merged
oldoc63 merged 2 commits into from
Mar 10, 2022
Merged

Sticky #668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b0af6af
We can fix an element to a specific position on the page (regardless …
oldoc63 Mar 10, 2022
642309f
The sticky value is another position value that keeps an element in t…
oldoc63 Mar 10, 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
117 changes: 105 additions & 12 deletions CSS/position/position.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,112 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position</title>
<link href="./style.css" rel="stylesheet" type="text/css">
<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="style.css">
</head>
<body>
<h1>My Awesome Website</h1>
<div class="bluebox"></div>
<p>Hello World! I'm learning how to create my own website using HTML and CSS!</p>
<div class="greenbox">


<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>Welcome 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>
<p class="inProgress">This website is in progress. Please come back later!</p>

<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>

</body>
</html>
128 changes: 104 additions & 24 deletions CSS/position/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,104 @@
h1 {
width: 800px;
height: 36px;
}
.bluebox{
background-color: blue;
width: 300px;
height: 150px;
}
p {
width: 800px;
height: 18px;
}
.greenbox {
background-color: green;
width: 650px;
height: 120px;
}
.inProgress {
position: absolute;
top: 300px;
right: 0;
background-color: aqua;
}
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;
}