mirror of https://github.com/rjbasitali/tutorials
chap6 - position property
parent
7c40ce12fa
commit
df8c05a477
|
|
@ -236,7 +236,7 @@ div p {
|
||||||
|
|
||||||
## Summarizing Selectors, Properties & Values
|
## Summarizing Selectors, Properties & Values
|
||||||
|
|
||||||
A reference [link]() for all the css properties.
|
A reference [link](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) for all the css properties.
|
||||||
|
|
||||||
### Value Types
|
### Value Types
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
# Practicing The Basics
|
||||||
|
|
||||||
|
The `chap5` direcoty contains all the code for this module, you can go through the css files to get a good idea of all the rules and properties used.
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
# Positioning Elements With CSS
|
||||||
|
|
||||||
|
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/position) for `position` property.
|
||||||
|
|
||||||
|
## Theory Time - Understanding Positioning
|
||||||
|
|
||||||
|
The `position` property with value `static` is applied by default to all elements in the *Document Flow*.
|
||||||
|
|
||||||
|
`position` property has the following values that we can set to change the position of an element:
|
||||||
|
* `static`
|
||||||
|
* `absolute`
|
||||||
|
* `relative`
|
||||||
|
* `fixed`
|
||||||
|
* `sticky`
|
||||||
|
|
||||||
|
To use the *positioning properties* like `top`, `right`, `bottom` and `left`, we need to change the value of `position` property from `static` to something else.
|
||||||
|
|
||||||
|
## Working With The `fixed` Value
|
||||||
|
|
||||||
|
We can use the `position: fixed` to keep our navigation bar from scrolling out of the viewport. For example:
|
||||||
|
|
||||||
|
```css
|
||||||
|
.main-header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Using The `position` To Add A Background Image
|
||||||
|
|
||||||
|
`position: fixed` is useful when you want a background image that should not be the part of the *document flow*. But you'll see that by adding this rule to the image, it overlaps other elements. We can fix that using the `z-index`.
|
||||||
|
|
||||||
|
|
||||||
|
## Understanding the `z-index`
|
||||||
|
|
||||||
|
The default value for `z-index` is `auto`, which is `0`. Adding `z-index` to elements with no `position` property applied or with `static` value, the `z-index` doesn't work. Elements with same value of `z-index` follow the order of the elements in the HTML document, that is the elements declared later will be displayed above the elements declared before them.
|
||||||
|
|
||||||
|
```css
|
||||||
|
.background {
|
||||||
|
backgound: url("");
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Styling And Positioning Our Badge With `absolute`
|
||||||
|
|
||||||
|
`absolute` positioned element is removed from the normal document, and is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.
|
||||||
|
|
||||||
|
|
||||||
|
## Diving Deeper Into `relative` Positioning
|
||||||
|
|
||||||
|
The element is positioned according to the normal flow of the document, and then offset `relative` to itself based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any other elements; thus, the space given for the elemWent in the page layout is the same as if position were `static`.
|
||||||
|
|
||||||
|
|
||||||
|
## Working With `overflow` And Relative Positioning
|
||||||
|
|
||||||
|
Setting `overflow: hidden;` on parent element hides the relatively positioned element once its outside of the containing parent.
|
||||||
|
|
||||||
|
`overflow: hidden;` on `body` element by default doesn't work as it is passed on to the `html` element as a default CSS behavior, which can be overwritten by adding it to both `html` and `body` elements.
|
||||||
|
|
||||||
|
|
||||||
|
## `sticky` Positioning
|
||||||
|
|
||||||
|
`stickey` is a combination of `relative` and `fixed`. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting `top` to value other than `auto`) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.
|
||||||
|
|
||||||
|
|
||||||
|
## Understanding the Stacking Context
|
||||||
|
|
||||||
|
A stacking context is formed anywhere in the document by any element with a `position` value `absolute`, `relative`, `fixed` or `sticky`. Within a stacking context, the `z-index` values only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.
|
||||||
|
|
||||||
|
Stacking context is formed in some other scenarios as well, which can be look at on its [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 348 KiB |
|
|
@ -0,0 +1,126 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>uHost</title>
|
||||||
|
<link rel="shortcut icon" href="favicon.png">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="shared.css">
|
||||||
|
<link rel="stylesheet" href="main.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header class="main-header">
|
||||||
|
<div>
|
||||||
|
<a href="index.html" class="main-header__brand">
|
||||||
|
uHost
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<nav class="main-nav">
|
||||||
|
<ul class="main-nav__items">
|
||||||
|
<li class="main-nav__item">
|
||||||
|
<a href="packages/index.html">Packages</a>
|
||||||
|
</li>
|
||||||
|
<li class="main-nav__item">
|
||||||
|
<a href="customers/index.html">Customers</a>
|
||||||
|
</li>
|
||||||
|
<li class="main-nav__item main-nav__item--cta">
|
||||||
|
<a href="start-hosting/index.html">Start Hosting</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="product-overview">
|
||||||
|
<h1>Get the freedom you deserve.</h1>
|
||||||
|
</section>
|
||||||
|
<section id="plans">
|
||||||
|
<h1 class="section-title">Choose Your Plan</h1>
|
||||||
|
<div class="plan__list">
|
||||||
|
<article class="plan">
|
||||||
|
<h1 class="plan__title">FREE</h1>
|
||||||
|
<h2 class="plan__price">$0/month</h2>
|
||||||
|
<h3>For hobby projects or small teams.</h3>
|
||||||
|
<ul class="plan__features">
|
||||||
|
<li class="plan__feature">1 Workspace</li>
|
||||||
|
<li class="plan__feature">Unlimited Traffic</li>
|
||||||
|
<li class="plan__feature">10GB Storage</li>
|
||||||
|
<li class="plan__feature">Basic Support</li>
|
||||||
|
</ul>
|
||||||
|
<div>
|
||||||
|
<button class="button">CHOOSE PLAN</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="plan plan--highlighted">
|
||||||
|
<h1 class="plan__annotation">RECOMMENDED</h1>
|
||||||
|
<h1 class="plan__title">PLUS</h1>
|
||||||
|
<h2 class="plan__price">$29/month</h2>
|
||||||
|
<h3>For ambitious projects.</h3>
|
||||||
|
<ul class="plan__features">
|
||||||
|
<li class="plan__feature">5 Workspaces</li>
|
||||||
|
<li class="plan__feature">Unlimited Traffic</li>
|
||||||
|
<li class="plan__feature">100GB Storage</li>
|
||||||
|
<li class="plan__feature">Plus Support</li>
|
||||||
|
</ul>
|
||||||
|
<div>
|
||||||
|
<button class="button">CHOOSE PLAN</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="plan">
|
||||||
|
<h1 class="plan__title">PREMIUM</h1>
|
||||||
|
<h2 class="plan__price">$99/month</h2>
|
||||||
|
<h3>Your enterprise solution.</h3>
|
||||||
|
<ul class="plan__features">
|
||||||
|
<li class="plan__feature">10 Workspaces</li>
|
||||||
|
<li class="plan__feature">Unlimited Traffic</li>
|
||||||
|
<li class="plan__feature">Unlimited Storage</li>
|
||||||
|
<li class="plan__feature">Priority Support</li>
|
||||||
|
</ul>
|
||||||
|
<div>
|
||||||
|
<button class="button">CHOOSE PLAN</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="key-features">
|
||||||
|
<h1 class="section-title">Many Good Reasons to Stick Around</h1>
|
||||||
|
<ul class="key-feature__list">
|
||||||
|
<li class="key-feature">
|
||||||
|
<div class="key-feature__image">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<p class="key-feature__description">3,857,000 Trusting Customers</p>
|
||||||
|
</li>
|
||||||
|
<li class="key-feature">
|
||||||
|
<div class="key-feature__image">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<p class="key-feature__description">99.999% Uptime Guarantee</p>
|
||||||
|
</li>
|
||||||
|
<li class="key-feature">
|
||||||
|
<div class="key-feature__image">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<p class="key-feature__description">Lightning Fast CDN</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer class="main-footer">
|
||||||
|
<nav>
|
||||||
|
<ul class="main-footer__links">
|
||||||
|
<li class="main-footer__link">
|
||||||
|
<a href="#">Support</a>
|
||||||
|
</li>
|
||||||
|
<li class="main-footer__link">
|
||||||
|
<a href="#">Terms of Use</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
|
||||||
|
|
||||||
|
#product-overview {
|
||||||
|
background: url("freedom.jpg");
|
||||||
|
width: 100%;
|
||||||
|
height: 528px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
color: #2ddf5c;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#product-overview h1 {
|
||||||
|
color: white;
|
||||||
|
font-family: 'Anton', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan__list {
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan {
|
||||||
|
background: #d5ffdc;
|
||||||
|
text-align: center;
|
||||||
|
padding: 16px;
|
||||||
|
margin: 8px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 30%;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan--highlighted {
|
||||||
|
background: #19b84c;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan__annotation {
|
||||||
|
background: white;
|
||||||
|
color: #19b84c;
|
||||||
|
padding: 8px;
|
||||||
|
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan__title {
|
||||||
|
color: #0e4f1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan__price {
|
||||||
|
color: #858585;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan--highlighted .plan__title {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan--highlighted .plan__price {
|
||||||
|
color: #0e4f1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan__features {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan__feature {
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#key-features {
|
||||||
|
background: #ff1b68;
|
||||||
|
margin-top: 80px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#key-features .section-title {
|
||||||
|
color: white;
|
||||||
|
margin: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-feature__list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-feature {
|
||||||
|
display: inline-block;
|
||||||
|
width: 30%;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-feature__image {
|
||||||
|
background: #ffcede;
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
border: 2px solid #424242;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-feature__description {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* h1 {
|
||||||
|
font-family: sans-serif;
|
||||||
|
} */
|
||||||
|
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>uHost</title>
|
||||||
|
<link rel="shortcut icon" href="favicon.png">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="../shared.css">
|
||||||
|
<link rel="stylesheet" href="packages.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header class="main-header">
|
||||||
|
<div>
|
||||||
|
<a href="../index.html" class="main-header__brand">
|
||||||
|
uHost
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<nav class="main-nav">
|
||||||
|
<ul class="main-nav__items">
|
||||||
|
<li class="main-nav__item">
|
||||||
|
<a href="index.html">Packages</a>
|
||||||
|
</li>
|
||||||
|
<li class="main-nav__item">
|
||||||
|
<a href="../customers/index.html">Customers</a>
|
||||||
|
</li>
|
||||||
|
<li class="main-nav__item main-nav__item--cta">
|
||||||
|
<a href="../start-hosting/index.html">Start Hosting</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section class="package" id="plus">
|
||||||
|
<a href="#">
|
||||||
|
<h1 class="package__title">Our PLUS Plan</h1>
|
||||||
|
<h2 class="package__subtitle">The most popular choice of our customers.</h2>
|
||||||
|
<p class="package__info">Benefit from increased storage and faster support to ensure that your mission-critical data and applications
|
||||||
|
are always available!</p>
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
<section class="package" id="free">
|
||||||
|
<a href="#">
|
||||||
|
<h1 class="package__title">Our FREE Plan</h1>
|
||||||
|
<h2 class="package__subtitle">An extremely solid start into our hosting world.</h2>
|
||||||
|
<p class="package__info">Get started immediately at zero cost!</p>
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
<section class="package" id="premium">
|
||||||
|
<a href="#">
|
||||||
|
<h1 class="package__title">Our PREMIUM Plan</h1>
|
||||||
|
<h2 class="package__subtitle">All your enterprise needs. Instant support, guaranteed uptime. </h2>
|
||||||
|
<p class="package__info">The best solution for small to large enterprises. Because hosting shouldn't be in the way!</p>
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer class="main-footer">
|
||||||
|
<nav>
|
||||||
|
<ul class="main-footer__links">
|
||||||
|
<li class="main-footer__link">
|
||||||
|
<a href="#">Support</a>
|
||||||
|
</li>
|
||||||
|
<li class="main-footer__link">
|
||||||
|
<a href="#">Terms of Use</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
main {
|
||||||
|
padding-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package {
|
||||||
|
width: 80%;
|
||||||
|
margin: 16px 0;
|
||||||
|
border: 4px solid #0e4f1f;
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package:hover,
|
||||||
|
.package:active {
|
||||||
|
box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||||
|
border-color: #ff5454;
|
||||||
|
/* border-color: #ff5454 !important; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.package a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
display: block;
|
||||||
|
padding: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package__subtitle {
|
||||||
|
color: #979797;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package__info {
|
||||||
|
padding: 16px;
|
||||||
|
border: 1px solid #0e4f1f;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #0e4f1f;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
#plus {
|
||||||
|
background: rgba(213, 255, 220, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
#free {
|
||||||
|
background: rgba(234, 252, 237, 0.95);
|
||||||
|
float: right;
|
||||||
|
border-right: none;
|
||||||
|
border-left: 4px solid #0e4f1f;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#free:hover,
|
||||||
|
#free:active {
|
||||||
|
border-left-color: #ff5454;
|
||||||
|
}
|
||||||
|
|
||||||
|
#premium {
|
||||||
|
background: rgba(14, 79, 31, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
#premium .package__title {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#premium .package__subtitle {
|
||||||
|
color: #bbb;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-header {
|
||||||
|
width: 100%;
|
||||||
|
background: #2ddf5c;
|
||||||
|
padding: 8px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-header > div {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-header__brand {
|
||||||
|
color: #0e4f1f;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: right;
|
||||||
|
width: calc(100% - 74px);
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav__items {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav__item {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav__item a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #0e4f1f;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 3px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav__item a:hover,
|
||||||
|
.main-nav__item a:active {
|
||||||
|
color: white;
|
||||||
|
border-bottom: 5px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav__item--cta a {
|
||||||
|
color: white;
|
||||||
|
background: #ff1b68;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav__item--cta a:hover,
|
||||||
|
.main-nav__item--cta a:active {
|
||||||
|
color: #ff1b68;
|
||||||
|
background: white;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-footer {
|
||||||
|
background: black;
|
||||||
|
padding: 32px;
|
||||||
|
margin-top: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-footer__links {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-footer__link {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-footer__link a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-footer__link a:hover,
|
||||||
|
.main-footer__link a:active {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background: #0e4f1f;
|
||||||
|
color: white;
|
||||||
|
font: inherit;
|
||||||
|
border: 1.5px solid #0e4f1f;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover,
|
||||||
|
.button:active {
|
||||||
|
background: white;
|
||||||
|
color: #0e4f1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
text-align: center;
|
||||||
|
vertical-align:
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
float: right; /* instead use flexbox */
|
||||||
|
|
||||||
|
position: ...;
|
||||||
|
overflow:
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue