CodeYourFuture · hachi-ops · Nov 18, 2021 · Nov 18, 2021 · Nov 18, 2021 · Nov 18, 2021
diff --git a/css/footer.css b/css/footer.css
@@ -0,0 +1,45 @@
+/* Footer */
+
+hr {
+    width: 95%;
+    opacity: 0.3;    
+}
+
+footer {
+    width: 100%;
+}
+
+.footer-content {
+    width: 400px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    padding-bottom: 30px;
+}
+
+.footer-icons {
+    display: flex;
+    flex-direction: row;   
+}
+
+.footer-icons img {
+    margin: 10px;
+}
+
+.footer-icons img {
+    border: 2px solid var(--grey);
+    border-radius: 50%;
+    padding: 15px;
+    opacity: 0.75;    
+}
+
+footer p { 
+    font-size: 1.25rem;
+    font-weight: 300;
+}
+
+.credits {
+    opacity: 0.5;
+}
diff --git a/css/general-styles.css b/css/general-styles.css
@@ -0,0 +1,46 @@
+/* General styles */
+
+:root {
+    --grey: #616668;
+    --burnt-orange: #E0633A;
+}
+
+html, body {
+    font-family: Roboto, sans-serif; 
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    width: 100%;       
+    overflow-x: hidden;  
+}
+
+main {   
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 20px;    
+}
+
+img{
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+/* Button */
+
+button {
+    background-color: var(--burnt-orange);  
+    font-size: 1.4rem;
+    font-weight: 400;
+    padding: 22px 45px;
+    border-style: none;
+    border-radius: 6px;
+    display: block;
+    margin: 0 auto;
+    margin-top: 80px;
+    color: #fff;
+}
+
+
diff --git a/css/meet-karma.css b/css/meet-karma.css
@@ -0,0 +1,116 @@
+
+/* Hero */
+
+.hero {
+    background-color: black; 
+    background-image: url(../img/first-background.jpg);
+    color: white;
+    background-repeat: no-repeat;
+    background-size: 162%;
+    background-position: center top 30%;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center; 
+    font-size: 2.25rem; 
+    filter:saturate(0.7);     
+}
+
+.hero-text-and-button p {
+    font-weight: 300;
+}
+
+/* Typography */
+
+h1 {
+    font-weight: 200;
+    margin-bottom: 30px;
+    padding-top: 80px;
+}
+
+h1, h2, h3 {
+    text-align: center;    
+}
+
+h2 {
+    font-size: 3.5rem;
+    font-weight: 300;
+    padding-top: 60px;
+}
+
+h3 {
+    font-size: 2rem;
+    font-weight: 300;    
+}
+
+/* Section */
+
+.section-items {
+    width: 100vw;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    padding-bottom: 60px;
+}
+
+.section-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;    
+}
+
+.section-item img {
+    width: 160px;
+}
+
+/* Section: Feature */
+
+.feature {
+    width: 100%;
+    display: flex;   
+    justify-content: space-between;
+}
+
+.feature img {
+    display: block;
+    width: 44.5%;    
+}
+
+.feature_text-and-button {  
+    margin:0 auto;  
+    background-color: hsla(15, 73%, 55%, 0.1);  
+}
+
+blockquote {
+    font-size: 42px; 
+    font-weight: 400;
+    line-height: 49.22px;
+    font-style: italic;
+    text-align: center; 
+}
+
+q {
+    color: var(--burnt-orange);
+    font-weight: 400;
+    font-style: italic;
+    font-size: 56px;
+    line-height: 56px;
+    text-align: center;    
+}
+
+span {
+    color: black;
+}
+
+.feature_text-and-button button {
+    color: #fff;
+    font-size: 24px;
+    text-align: center;
+    line-height: 28.13px;
+    font-weight: 400;
+    text-align: center;
+}
+
+
+
diff --git a/css/navbar.css b/css/navbar.css
@@ -0,0 +1,43 @@
+/* Navigation */
+
+nav {
+    display: flex;   
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 20px 40px;
+    height: 90px;
+    background: hsla(0, 0%, 77%, 0.1);
+}
+
+nav ul {
+    display: flex;
+    justify-content: space-between;
+    list-style: none;
+    font-size: 1.35rem;
+    font-weight: 500;
+    cursor: pointer;      
+}
+
+nav ul li {
+    padding: 0 20px;    
+}
+
+nav ul li a {
+    text-decoration: none;
+    color: #757e83;
+}
+
+nav ul li a:hover {
+    color: var(--burnt-orange);
+}
+
+.active {
+    color: black;
+}
+
+#hamburger {
+    display: none;
+}
+
+