Initial commit
This commit is contained in:
Lucas
344
css/styles.css
Normal file
344
css/styles.css
Normal file
@@ -0,0 +1,344 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
|
||||
:root {
|
||||
--primary-color: #007AF3;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f2f2f2;
|
||||
margin: 0;
|
||||
font-family: 'Poppins';
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: white;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.navbar .logo {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.navbar .logo span {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.navbar .container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
place-content: space-between;
|
||||
}
|
||||
|
||||
.navbar nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar .mobile-menu {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #444444;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 5em 2em;
|
||||
}
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left-col .subhead {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
color: grey;
|
||||
letter-spacing: .3em;
|
||||
}
|
||||
|
||||
.left-col h1 {
|
||||
font-size: 2.5em;
|
||||
line-height: 1.3em;
|
||||
margin-top: .2em;
|
||||
}
|
||||
|
||||
.left-col .primary-cta {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: .6em 1.3em;
|
||||
font-size: 1.4em;
|
||||
border-radius: 5em;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.left-col .watch-video-cta {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.left-col .watch-video-cta img {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
width: 70%;
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
section.features-section {
|
||||
background: #20272E;
|
||||
color: white;
|
||||
}
|
||||
|
||||
ul.features-list {
|
||||
margin: 0;
|
||||
padding-left: .1em;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: (minmax(19rem, 1fr))[auto-fit];
|
||||
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
|
||||
}
|
||||
|
||||
ul.features-list li {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 1em;
|
||||
margin-left: 2em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.features-list li:before {
|
||||
content: '';
|
||||
left: -2em;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url("../images/bullet.svg");
|
||||
background-size: contain;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.features-section img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.testimonials-section {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.testimonials-section ul li {
|
||||
background: #006BD6;
|
||||
text-align: center;
|
||||
padding: 2em 1em;
|
||||
width: 80%;
|
||||
margin: 0 auto 5em auto;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.testimonials-section ul li img {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
border: 5px solid #006BD6;
|
||||
border-radius: 50%;
|
||||
margin-top: -4.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
padding: .8em;
|
||||
margin-bottom: 1em;
|
||||
border-radius: .3em;
|
||||
border: 1px solid grey;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 1.3em;
|
||||
border: none;
|
||||
margin: 0 auto 5em auto;
|
||||
border-radius: 5em;
|
||||
display: inline-block;
|
||||
padding: .8em 2em;
|
||||
width: unset;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
nav.menu-btn {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: 66%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: #20272E;
|
||||
height: 100vh;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
nav ul.primary-nav {
|
||||
margin-top: 5em;
|
||||
}
|
||||
|
||||
nav li a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: .5em;
|
||||
font-size: 1.3em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav li a:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mobile-menu-exit {
|
||||
float: right;
|
||||
margin: .5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.mobile-menu, .mobile-menu-exit {
|
||||
display: none;
|
||||
}
|
||||
.navbar .container {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: 180px auto;
|
||||
grid-template-columns: 180px auto;
|
||||
}
|
||||
.navbar nav {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
background: none;
|
||||
position: unset;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.navbar nav ul {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.navbar nav a {
|
||||
color: black;
|
||||
font-size: 1em;
|
||||
padding: .1em 1em;
|
||||
}
|
||||
.navbar nav ul.primary-nav {
|
||||
margin: 0;
|
||||
}
|
||||
.navbar nav li.current a {
|
||||
font-weight: bold;
|
||||
}
|
||||
.navbar nav li.go-premium-cta a {
|
||||
color: var(--primary-color);
|
||||
border: 3px solid var(--primary-color);
|
||||
font-weight: bold;
|
||||
border-radius: 5em;
|
||||
margin-top: -.2em;
|
||||
}
|
||||
.navbar nav li.go-premium-cta a:hover {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1080px) {
|
||||
.container {
|
||||
width: 1080px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
section {
|
||||
padding: 10em 4em;
|
||||
}
|
||||
.hero .container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
text-align: left;
|
||||
}
|
||||
.hero .container .left-col {
|
||||
margin: 3em 3em 0 5em;
|
||||
}
|
||||
.hero .container .left-col h1 {
|
||||
font-size: 3em;
|
||||
width: 90%;
|
||||
}
|
||||
.hero-img {
|
||||
width: 30%;
|
||||
margin-right: 8em;
|
||||
}
|
||||
.hero-cta {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.primary-cta {
|
||||
margin-right: 1em;
|
||||
}
|
||||
ul.features-list {
|
||||
display: block;
|
||||
margin-left: 5em;
|
||||
}
|
||||
ul.features-list li {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
ul.features-list li:before {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.features-section {
|
||||
position: relative;
|
||||
}
|
||||
.features-section img {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 350px;
|
||||
bottom: -2em;
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
9
css/styles.css.map
Normal file
9
css/styles.css.map
Normal file
File diff suppressed because one or more lines are too long
356
css/styles.scss
Normal file
356
css/styles.scss
Normal file
@@ -0,0 +1,356 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
--primary-color: #007AF3;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f2f2f2;
|
||||
margin: 0;
|
||||
font-family: 'Poppins';
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: white;
|
||||
padding: 1em;
|
||||
|
||||
.logo {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
font-size: 1.2em;
|
||||
|
||||
span {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
place-content: space-between;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #444444;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 5em 2em;
|
||||
}
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left-col {
|
||||
|
||||
.subhead {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
color: grey;
|
||||
letter-spacing: .3em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
line-height: 1.3em;
|
||||
margin-top: .2em
|
||||
}
|
||||
|
||||
.primary-cta {
|
||||
background:var(--primary-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: .6em 1.3em;
|
||||
font-size: 1.4em;
|
||||
border-radius: 5em;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.watch-video-cta {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
|
||||
img {
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
width: 70%;
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
section.features-section {
|
||||
background: #20272E;
|
||||
color: white;
|
||||
}
|
||||
|
||||
ul.features-list {
|
||||
margin: 0;
|
||||
padding-left: .1em;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
|
||||
|
||||
li {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 1em;
|
||||
margin-left: 2em;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
left: -2em;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url('../images/bullet.svg');
|
||||
background-size: contain;
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features-section img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.testimonials-section {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
|
||||
ul {
|
||||
|
||||
li {
|
||||
background: #006BD6;
|
||||
text-align: center;
|
||||
padding: 2em 1em;
|
||||
width: 80%;
|
||||
margin: 0 auto 5em auto;
|
||||
border-radius: 1em;
|
||||
|
||||
img {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
border: 5px solid #006BD6;
|
||||
border-radius: 50%;
|
||||
margin-top: -4.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
padding: .8em;
|
||||
margin-bottom: 1em;
|
||||
border-radius: .3em;
|
||||
border: 1px solid grey;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 1.3em;
|
||||
border: none;
|
||||
margin: 0 auto 5em auto;
|
||||
border-radius: 5em;
|
||||
display: inline-block;
|
||||
padding: .8em 2em;
|
||||
width: unset;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
nav.menu-btn {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: 66%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: #20272E;
|
||||
height: 100vh;
|
||||
padding: 1em;
|
||||
|
||||
ul.primary-nav {
|
||||
margin-top: 5em;
|
||||
}
|
||||
|
||||
li {
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: .5em;
|
||||
font-size: 1.3em;
|
||||
text-align: right;
|
||||
|
||||
&:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-exit {
|
||||
float: right;
|
||||
margin: .5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
|
||||
.mobile-menu, .mobile-menu-exit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar .container {
|
||||
display: grid;
|
||||
grid-template-columns: 180px auto;
|
||||
}
|
||||
|
||||
.navbar nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: none;
|
||||
position: unset;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
font-size: 1em;
|
||||
padding: .1em 1em;
|
||||
}
|
||||
|
||||
ul.primary-nav {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li.current a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
li.go-premium-cta a {
|
||||
color: var(--primary-color);
|
||||
border: 3px solid var(--primary-color);
|
||||
font-weight: bold;
|
||||
border-radius: 5em;
|
||||
margin-top: -.2em;
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1080px) {
|
||||
.container {
|
||||
width: 1080px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 10em 4em;
|
||||
}
|
||||
|
||||
.hero .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: left;
|
||||
|
||||
.left-col {
|
||||
margin: 3em 3em 0 5em;
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
width: 30%;
|
||||
margin-right: 8em;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.primary-cta {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
ul.features-list {
|
||||
display: block;
|
||||
margin-left: 5em;
|
||||
|
||||
li {
|
||||
font-size: 1.4em;
|
||||
|
||||
&:before {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.features-section img {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 350px;
|
||||
bottom: -2em;
|
||||
}
|
||||
}
|
||||
6
images/bullet.svg
Normal file
6
images/bullet.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
|
||||
<g id="bullet" transform="translate(-422 -985)">
|
||||
<circle id="Ellipse_3" data-name="Ellipse 3" cx="14" cy="14" r="14" transform="translate(422 985)" fill="#1fc41f"/>
|
||||
<path id="Path_2" data-name="Path 2" d="M1132.312,412.821l3.538,3.538,4.655-4.655,2.276-2.276" transform="translate(-701.555 586.098)" fill="none" stroke="#fff" stroke-width="3"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 459 B |
24
images/dots.svg
Normal file
24
images/dots.svg
Normal file
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="142" height="109" viewBox="0 0 142 109">
|
||||
<g id="dots" transform="translate(-131 -963)">
|
||||
<circle id="Ellipse_2" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(131 963)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-2" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(164 963)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-3" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(197 963)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-4" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(230 963)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-5" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(263 963)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-6" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(131 996)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-7" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(164 996)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-8" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(197 996)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-9" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(230 996)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-10" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(263 996)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-11" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(131 1029)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-12" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(164 1029)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-13" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(197 1029)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-14" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(230 1029)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-15" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(263 1029)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-16" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(131 1062)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-17" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(164 1062)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-18" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(197 1062)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-19" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(230 1062)" fill="#fff"/>
|
||||
<circle id="Ellipse_2-20" data-name="Ellipse 2" cx="5" cy="5" r="5" transform="translate(263 1062)" fill="#fff"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
3
images/exit.svg
Normal file
3
images/exit.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20.953" height="20.953" viewBox="0 0 20.953 20.953">
|
||||
<path id="Icon_ionic-md-close" data-name="Icon ionic-md-close" d="M28.477,9.619l-2.1-2.1L18,15.9,9.619,7.523l-2.1,2.1L15.9,18,7.523,26.381l2.1,2.1L18,20.1l8.381,8.381,2.1-2.1L20.1,18Z" transform="translate(-7.523 -7.523)" fill="#fff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 348 B |
BIN
images/holding-phone.jpg
Normal file
BIN
images/holding-phone.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
48
images/illustration.svg
Normal file
48
images/illustration.svg
Normal file
@@ -0,0 +1,48 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="411" height="402" viewBox="0 0 411 402">
|
||||
<defs>
|
||||
<filter id="Rectangle_6" x="2" y="0" width="409" height="402" filterUnits="userSpaceOnUse">
|
||||
<feOffset dy="9" input="SourceAlpha"/>
|
||||
<feGaussianBlur stdDeviation="9" result="blur"/>
|
||||
<feFlood flood-opacity="0.09"/>
|
||||
<feComposite operator="in" in2="blur"/>
|
||||
<feComposite in="SourceGraphic"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="illustration" transform="translate(-1100 -312)">
|
||||
<g transform="matrix(1, 0, 0, 1, 1100, 312)" filter="url(#Rectangle_6)">
|
||||
<rect id="Rectangle_6-2" data-name="Rectangle 6" width="355" height="348" rx="31" transform="translate(29 18)" fill="#fff"/>
|
||||
</g>
|
||||
<g id="Component_4_1" data-name="Component 4 – 1" transform="translate(1100 395)">
|
||||
<g id="Group_6" data-name="Group 6" transform="translate(-1119 -230)">
|
||||
<g id="Ellipse_1" data-name="Ellipse 1" transform="translate(1119 386)" fill="#fff" stroke="#d5d5d5" stroke-width="4">
|
||||
<circle cx="29" cy="29" r="29" stroke="none"/>
|
||||
<circle cx="29" cy="29" r="27" fill="none"/>
|
||||
</g>
|
||||
<path id="Path_1" data-name="Path 1" d="M1132.312,416.46l7.333,7.333,9.648-9.648,4.718-4.718" transform="translate(4.839 -1.611)" fill="none" stroke="#fff" stroke-width="6"/>
|
||||
<rect id="Rectangle_7" data-name="Rectangle 7" width="235" height="13" rx="6.5" transform="translate(1221 393)" fill="#b2ddcc"/>
|
||||
<rect id="Rectangle_8" data-name="Rectangle 8" width="56" height="13" rx="6.5" transform="translate(1221 417)" fill="#b2ddcc"/>
|
||||
<rect id="Rectangle_9" data-name="Rectangle 9" width="13" height="13" rx="6.5" transform="translate(1443 417)" fill="#b2ddcc"/>
|
||||
<rect id="Rectangle_10" data-name="Rectangle 10" width="13" height="13" rx="6.5" transform="translate(1425 417)" fill="#b2ddcc"/>
|
||||
</g>
|
||||
<g id="Group_5" data-name="Group 5" transform="translate(-1119 -308)">
|
||||
<g id="Ellipse_1-2" data-name="Ellipse 1" transform="translate(1119 386)" fill="#fff" stroke="#d5d5d5" stroke-width="4">
|
||||
<circle cx="29" cy="29" r="29" stroke="none"/>
|
||||
<circle cx="29" cy="29" r="27" fill="none"/>
|
||||
</g>
|
||||
<path id="Path_1-2" data-name="Path 1" d="M1132.312,416.46l7.333,7.333,9.648-9.648,4.718-4.718" transform="translate(4.839 -1.611)" fill="none" stroke="#fff" stroke-width="6"/>
|
||||
<rect id="Rectangle_7-2" data-name="Rectangle 7" width="235" height="13" rx="6.5" transform="translate(1221 393)" fill="#f9d5a5"/>
|
||||
<rect id="Rectangle_8-2" data-name="Rectangle 8" width="56" height="13" rx="6.5" transform="translate(1221 417)" fill="#f9d5a5"/>
|
||||
<rect id="Rectangle_9-2" data-name="Rectangle 9" width="13" height="13" rx="6.5" transform="translate(1443 417)" fill="#f9d5a5"/>
|
||||
<rect id="Rectangle_10-2" data-name="Rectangle 10" width="13" height="13" rx="6.5" transform="translate(1425 417)" fill="#f9d5a5"/>
|
||||
</g>
|
||||
<g id="Group_4" data-name="Group 4" transform="translate(-1119 -386)">
|
||||
<circle id="Ellipse_1-3" data-name="Ellipse 1" cx="29" cy="29" r="29" transform="translate(1119 386)" fill="#1fc41f"/>
|
||||
<path id="Path_1-3" data-name="Path 1" d="M1132.312,416.46l7.333,7.333,9.648-9.648,4.718-4.718" transform="translate(4.839 -1.611)" fill="none" stroke="#fff" stroke-width="6"/>
|
||||
<rect id="Rectangle_7-3" data-name="Rectangle 7" width="235" height="13" rx="6.5" transform="translate(1221 393)" fill="#e9d5f5"/>
|
||||
<rect id="Rectangle_8-3" data-name="Rectangle 8" width="56" height="13" rx="6.5" transform="translate(1221 417)" fill="#e9d5f5"/>
|
||||
<rect id="Rectangle_9-3" data-name="Rectangle 9" width="13" height="13" rx="6.5" transform="translate(1443 417)" fill="#e9d5f5"/>
|
||||
<rect id="Rectangle_10-3" data-name="Rectangle 10" width="13" height="13" rx="6.5" transform="translate(1425 417)" fill="#e9d5f5"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
7
images/menu.svg
Normal file
7
images/menu.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18.853" height="12" viewBox="0 0 18.853 12">
|
||||
<g id="Icon_feather-menu" data-name="Icon feather-menu" transform="translate(-4.5 -8)">
|
||||
<path id="Path_3" data-name="Path 3" d="M4.5,18H23.353" transform="translate(0 -4)" fill="none" stroke="#000" stroke-linejoin="round" stroke-width="2"/>
|
||||
<path id="Path_4" data-name="Path 4" d="M4.5,9H23.353" transform="translate(0)" fill="none" stroke="#000" stroke-linejoin="round" stroke-width="2"/>
|
||||
<path id="Path_5" data-name="Path 5" d="M4.5,27H23.353" transform="translate(0 -8)" fill="none" stroke="#000" stroke-linejoin="round" stroke-width="2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 670 B |
BIN
images/person.jpg
Normal file
BIN
images/person.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
3
images/watch.svg
Normal file
3
images/watch.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="18" viewBox="0 0 27 18">
|
||||
<path id="Icon_material-videocam" data-name="Icon material-videocam" d="M25.5,15.75V10.5A1.5,1.5,0,0,0,24,9H6a1.5,1.5,0,0,0-1.5,1.5v15A1.5,1.5,0,0,0,6,27H24a1.5,1.5,0,0,0,1.5-1.5V20.25l6,6V9.75Z" transform="translate(-4.5 -9)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 325 B |
131
index.html
Normal file
131
index.html
Normal file
@@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<title>Tutorial</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="container">
|
||||
<a class="logo" href="#">Remember<span>That</span></a>
|
||||
|
||||
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open menu">
|
||||
|
||||
<nav>
|
||||
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Close menu">
|
||||
<ul class="primary-nav">
|
||||
<li class="current"><a href="#">Home</a></li>
|
||||
<li><a href="#">Features</a></li>
|
||||
<li><a href="#">Pricing</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="secondary-nav">
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li class="go-premium-cta"><a href="#">Go Premium</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="left-col">
|
||||
<p class="subhead">It's Nitty & Gritty</p>
|
||||
<h1>A Task App That Doesn't Stink</h1>
|
||||
|
||||
<div class="hero-cta">
|
||||
<a href="#" class="primary-cta">Try for free</a>
|
||||
<a href="#" class="watch-video-cta">
|
||||
<img src="images/watch.svg" alt="Watch a video">Watch a video
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img src="images/illustration.svg" class="hero-img" alt="illustration">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features-section">
|
||||
<div class="container">
|
||||
<ul class="features-list">
|
||||
<li>Unlimited Tasks</li>
|
||||
<li>SMS Task Reminders</li>
|
||||
<li>Confetti Explosions upon Task Completions</li>
|
||||
<li>Social Media Announcements</li>
|
||||
<li>Real Time Collaboration</li>
|
||||
<li>Other awesome features</li>
|
||||
</ul>
|
||||
|
||||
<img src="images/holding-phone.jpg" alt="man holding phone">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="testimonials-section">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li>
|
||||
<img src="images/person.jpg" alt="person">
|
||||
|
||||
<blockquote>"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore"</blockquote>
|
||||
<cite>- Jane Doe</cite>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/person.jpg" alt="person">
|
||||
|
||||
<blockquote>"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore"</blockquote>
|
||||
<cite>- Jane Doe</cite>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/person.jpg" alt="person">
|
||||
|
||||
<blockquote>"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore"</blockquote>
|
||||
<cite>- Jane Doe</cite>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact-section">
|
||||
<div class="container">
|
||||
<div class="contact-left">
|
||||
<h2>Contact</h2>
|
||||
|
||||
<form action="">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" name="name">
|
||||
|
||||
<label for="message">Message</label>
|
||||
<textarea name="message" id="message" cols="30" rows="10"></textarea>
|
||||
|
||||
<input type="submit" class="send-message-cta" value="Send message">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="contact-right">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52871.86299774035!2d-118.39953390000001!3d34.0825489!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2bc04d6d147ab%3A0xd6c7c379fd081ed1!2sBeverly%20Hills%2C%20CA!5e0!3m2!1sen!2sus!4v1615538694941!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const mobileBtn = document.getElementById('mobile-cta')
|
||||
nav = document.querySelector('nav')
|
||||
mobileBtnExit = document.getElementById('mobile-exit');
|
||||
|
||||
mobileBtn.addEventListener('click', () => {
|
||||
nav.classList.add('menu-btn');
|
||||
});
|
||||
|
||||
mobileBtnExit.addEventListener('click', () => {
|
||||
nav.classList.remove('menu-btn');
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user