https://github.com/tobisamcode/bestapp
The mobile landing page is built to help visitors find information or complete tasks quickly while the desktop landing page is geared more towards visitors with time to spend
https://github.com/tobisamcode/bestapp
sass
Last synced: 6 months ago
JSON representation
The mobile landing page is built to help visitors find information or complete tasks quickly while the desktop landing page is geared more towards visitors with time to spend
- Host: GitHub
- URL: https://github.com/tobisamcode/bestapp
- Owner: tobisamcode
- Created: 2021-05-04T23:44:58.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-05T00:39:25.000Z (almost 5 years ago)
- Last Synced: 2025-10-09T03:02:06.868Z (6 months ago)
- Topics: sass
- Language: SCSS
- Homepage: https://happy-mcclintock-85cf96.netlify.app/
- Size: 2.34 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# bestApp
A landing page describing the bestApp application.
# Technology
* HTML
* SASS
* Javascript
# Icons
*
*
# Animations
#### Reveal scroll
```javascript
```
######## js
```javascript
const sr = ScrollReveal({
distance: '30px',
duration: 1800,
reset: true
});
sr.reveal(`.image, .first`, {
origin: 'left',
interval: 200
})
sr.reveal(`.second`, {
origin: 'top'
})
sr.reveal(`.third, .form`, {
origin: 'right'
})
```
#### Animated animations
# css flex
```css
.pricing {
.box-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
.box {
flex: 1 1 27rem;
margin: 1rem;
padding: 1rem;
background: $White;
border: .1rem solid rgba(0, 0, 0, 0.2);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1);
border-radius: .5rem;
text-align: center;
padding-bottom: 3rem;
&:nth-child(2),
&:hover {
border: .2rem solid $Pink;
}
.title {
color: $Purple;
font-size: 2.5rem;
padding-top: 1rem;
}
.price {
font-size: 4rem;
color: $Pink;
padding: 1rem 0;
span {
font-size: 2rem;
}
}
ul {
padding: 1rem 0;
li {
font-size: 1.7rem;
color: $light-gray;
padding: .5rem 0;
.fa-check {
color: lightgreen;
}
.fa-times {
color: tomato;
}
}
}
}
}
}
```
##### Layout code
##### Mobile view
