Design a index.html

style.css

@@ -0,0 +1,367 @@
+body {
+    font-family: "Montserrat";
+    text-align: center;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: "Montserrat-Bold";
+}
+
+
+/* Headings */
+
+.big-heading {
+    font-family: "Montserrat-Black";
+    font-size: 3.5rem;
+    line-height: 1.5;
+}
+
+.section-heading {
+    font-size: 3rem;
+    line-height: 1.5;
+}
+
+/* Containers */
+
+.container-fluid {
+  padding: 7% 15% !important;
+}
+
+/* Sections */
+
+.colored-section {
+    background-color: #0d4653;
+    color: #fff;
+
+}
+
+.white-section {
+    background-color: #fff;
+}
+
+/* Navigation Bar */
+
+.navbar {
+    padding: 0 0 4.5rem;
+    background-color: #222831;
+    border-bottom-left-radius: 26px;
+}
+
+
+.nav-item {
+    padding: 0 18px;
+
+}
+
+.nav-link {
+    font-size: 1.2rem;
+    font-family: "Montserrat-Light";
+
+}
+.nav-link:hover {
+    color: #2af5eb !important;
+}
+
+/* Buttons */
+
+.download-button {
+    margin: 5% 3% 5% 0;
+}
+
+/* Title Section */
+
+#title {
+    background-color: #0d4653;
+    color: #fff;
+    text-align: left;
+}
+
+#title .container-fluid {
+    padding: 3% 15% 7%;
+}
+
+/* Title Image */
+
+.title-image {
+    width: 80%;
+
+    position: absolute;
+    right: 15%;
+}
+
+.btn-light,.btn-dark:hover {
+
+    background-color: #2af5eb !important;
+}
+
+.btn-outline-light:hover {
+    background-color: #2af5eb !important;
+}
+
+
+
+/* * Features Section */  */
+#features {
+    position: relative;
+}
+
+.feature-title {
+    font-size: 1.5rem;
+}
+
+.feature-box {
+    padding: 4.5%;
+}
+
+.icon {
+    color: #0d4653;
+    margin-bottom: 1rem;
+
+
+}
+
+.icon:hover {
+    color:#2af5eb;
+}
+
+
+@media (max-width: 1028px) {
+
+    #title {
+        text-align: center;
+    }
+
+    .title-image {
+        position: static;
+
+    }
+}
+
+.row{
+    text-align: center !important;
+}
+
+
+
+   .card-1,.card-2, .card-3{
+
+       max-width: 300px;
+        margin: 0;
+       text-align: center;
+       font-family: Montserrat;
+       background-color: white;
+
+
+   }
+
+   .price {
+       color: grey;
+       font-size: 22px;
+   }
+
+   .card button {
+       border: none;
+       outline: 0;
+       padding: 12px;
+       color: white;
+       background-color: #000;
+       text-align: center;
+       cursor: pointer;
+       width: 100%;
+       font-size: 18px;
+   }
+
+   .card button:hover {
+       opacity: 0.7;
+   }
+
+
+.promo {
+    background: #2af5eb;
+    padding: 3px;
+    color: black;
+}
+
+
+
+.card-1{
+    background-color:#222831;
+    padding: 3% 2%;
+}
+.card-2 {
+    background-color: #0d4653;
+    padding: 3% 2%;
+}
+
+.card-3 {
+    background-color: #222831;
+    padding: 3% 2%;
+}
+
+#ML,#WD,#UIX{
+    color:saddlebrown;
+}
+
+
+   /* Pricing Section */
+
+   #events {
+       padding: 100px;
+   }
+
+   .event-text {
+       font-size: 3rem;
+       line-height: 1.5;
+   }
+
+   .event-column {
+       padding: 3% 2%;
+   }
+
+   .section-heading{
+       text-align: center;
+   }
+
+ .card-header{
+     background-color:#0d4653 !important;
+     color: #fff !important;
+ }
+
+ .event-register, button{
+     background-color: #0d4653 !important;
+ }
+
+
+ .close{
+     background-color: #fff!important;
+ }
+
+
+ .blog-image {
+     width: 30%;
+     border-radius: 100%;
+     margin: 15%;
+
+ }
+
+ .blog-text {
+     font-size: 2rem;
+     /* line-height: 1.5; */
+     text-align: center;
+ }
+
+ * {
+     box-sizing: border-box;
+ }
+
+ input[type=text],
+ select,
+ textarea {
+     width: 100%;
+     padding: 12px;
+     border: 1px solid #ccc;
+     border-radius: 4px;
+     resize: vertical;
+ }
+
+ label {
+     padding: 12px 12px 12px 0;
+     display: inline-block;
+ }
+
+ input[type=submit] {
+     background-color: #4CAF50;
+     color: white;
+     padding: 12px 20px;
+     border: none;
+     border-radius: 4px;
+     cursor: pointer;
+     float: right;
+ }
+
+ input[type=submit]:hover {
+     background-color: #45a049;
+ }
+
+ .container {
+     border-radius: 5px;
+     background-color: #f2f2f2;
+     padding: 20px;
+ }
+
+ .col-25 {
+     float: left;
+     width: 25%;
+     margin-top: 6px;
+ }
+
+ .col-75 {
+     float: left;
+     width: 75%;
+     margin-top: 6px;
+ }
+
+ /* Clear floats after the columns */
+ .row:after {
+     content: "";
+     display: table;
+     clear: both;
+ }
+
+.btn-twitter{
+    background-color: #55ACEE !important;
+}
+
+.btn-facebook{
+    background-color: #3B5998 !important;
+}
+
+.btn-google {
+    background-color: #DD4B39 !important;
+}
+
+
+.form-signin .form-control {
+    position: relative;
+    box-sizing: border-box;
+    height: auto;
+    padding: 10px;
+    font-size: 16px;
+}
+
+.form-signin {
+    width: 100%;
+    max-width: 330px;
+    padding: 15px;
+    margin: auto;
+}
+
+.form-signin .checkbox {
+    font-weight: 400;
+}
+
+.form-signin .form-control:focus {
+    z-index: 2;
+}
+
+.form-signin input[type="email"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.form-signin input[type="password"] {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+
+.social-icon {
+    margin: 20px 10px;
+}