created the home page

time to implement...
2021-07-12 02:35:50 +03:00
parent 31447796c9
commit df61af750f
8 changed files with 287 additions and 99 deletions
--- a/assets/css/style.css
+++ b/assets/css/style.css
@ -0,0 +1,192 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+#page-wrap {
+  max-width: 1200px;
+  margin: 50px auto;
+  padding: 20px;
+  background: white;
+  -moz-box-shadow: 0 0 20px #469330;
+  -webkit-box-shadow: 0 0 20px #469330;
+  box-shadow: 0 0 20px #469330; 
+  text-align: center;
+  border-radius: 25px;
+} 
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30px 10%;
+  background-color:  #469330;
+  position: sticky;
+}
+
+.logo {
+  cursor: pointer;
+}
+
+.nav__links a,
+.cta,
+.overlay__content a {
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 500;
+  font-size:30px;
+  color: #edf0f1;
+  text-decoration: none;
+}
+
+.nav__links {
+  list-style: none;
+  display: flex;
+}
+
+.nav__links li {
+  padding: 0px 20px;
+}
+
+.nav__links li a {
+  transition: color 0.3s ease 0s;
+}
+
+.nav__links li a:hover {
+  color: black;
+}
+
+.cta {
+  padding: 9px 25px;
+  color: #469330;
+  background-color: white;
+  border: none;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: background-color 0.3s ease 0s;
+}
+
+.cta:hover {
+  color: white;
+  background-color:   darkgreen;
+}
+
+/* Mobile Nav */
+
+.menu {
+  display: none;
+}
+
+.overlay {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  background-color:   #469330;
+  overflow-x: hidden;
+  transition: width 0.5s ease 0s;
+}
+
+.overlay--active {
+  width: 100%;
+}
+
+.overlay__content {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.overlay a {
+  padding: 15px;
+  font-size: 36px;
+  display: block;
+  transition: color 0.3s ease 0s;
+}
+
+.overlay a:hover,
+.overlay a:focus {
+  color: darkgreen;
+}
+.overlay .close {
+  position: absolute;
+  top: 20px;
+  right: 45px;
+  font-size: 60px;
+  color: #edf0f1;
+}
+
+@media screen and (max-height: 450px) {
+  .overlay a {
+    font-size: 20px;
+  }
+  .overlay .close {
+    font-size: 40px;
+    top: 15px;
+    right: 35px;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  .nav__links,
+  .cta {
+    display: none;
+  }
+  .menu {
+    display: initial;
+  }
+
+}
+
+html{
+  background: linear-gradient(180deg, rgba(70,147,48,1) 33%, rgba(109,126,107,1) 100%) no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  font-family: Arial, Helvetica, sans-serif;
+
+}
+
+
+
+
+p {
+  font-family: Arial, Helvetica, sans-serif;
+
+  margin: 0 0 30px 0; 
+}
+
+h1.heading{
+  color: white;
+  font-size: 50px;
+  text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
+}
+
+ul.emoji{
+  list-style-type: "♻️";
+}
+
+.question{
+  color: gray;
+  font-size:20px;
+}
+
+ul.nothing{
+  list-style-type: none;
+}
+
+a.footer{
+  /* background:radial-gradient(circle, rgba(0,159,12,1) 0%, rgba(8,96,0,1) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent; */
+  color:lightgreen;
+}
+footer{
+  font-size: small;
+  text-align: center;
+  left:50%;
+}