-
- 1.) Most powerful Domain--> .com v/s all
-
-
-
- In this blog I have done detailed analysis is done about why ".com" domain is
- ruling the internet. With all its history till now, everything has been mentioned.
-
-
-
Read Blog
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I AM MANN SHAH
+
+
+ Software developer
+
+
+
Resume
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tech-Stack
+
+
+
+
DSA
+
Command on core concepts of data structures and many
+ algorithms
+
+
Leetcode ✔
+
+
+
+
+
+
Language
+ Language learnt for programming
+ Java
+ Javascript
+ Python
+ C
+
+
+
+
+
Libraries
+
Libraries to upgrade in particular technology
+
+
+ Python
+
+ smtplib
+ OpenCV
+ PyQt
+
+
+
+ Machine Learning
+
+ Numpy
+ Pandas
+ Scikitlearn
+ Matplotlib
+
+
+
+ Javascript
+
+
+
+
+
+
+
Tools
+ Tools that I'm familiar with
+ Arduino
+ Windows
+ Git and Github
+
+
+
+
+
+
+
+
+
+
+
+ Experience
+
+
+
February 2023
+
+
+
Promount technologies pvt. ltd.
+
Web developer using Java
+
November(22) - Present(23)
+
Learned Advance Java and Javascript and also making project with the same
+
+
+
November 2021
+
+
+
GirlScript Winter of Contribution ( GWOC )
+
Contributor
+
September(21) - November(21)
+
Made documentation on several topics of domain React/Angular/Vue, Java and Machine Learning
+
+
+
+
UniTap
+
Frontend Supervisor
+
March(21) - November(21)
+
Made a portal with all features on HTML, CSS, JS ( Version 1.0 ) Website
+
+
+
+
March 2021
+
+
+
+
+
+
+
+
+
+
+
+ Projects
+
+
+
+
+
+ Made a system that detects movement of any object or a person, detects a video and sends it to
+ the author via provided mail. It also saves all the frames that detects movement in current
+ directory.
+
+
+
+
+
+
+
+
+ Try different sentences provided in program and know your typing speed and improve it.
+
+
+
+
+
+
+
+
+ Web app made from Javascript using API for language translator that translates spoken language
+ i.e English to given languages.
+
+
+
+
+
+
+
+
+
+ Arduino Based Temperature and Humidity sensor using NodeMCU- ESP8266 WiFi module and DHT22
+ sensor.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Connect with me
+
+
+
+
+
+
+
+
+
-
-
-
-
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..fcd31b3
--- /dev/null
+++ b/script.js
@@ -0,0 +1,8 @@
+function myFunction() {
+ var x = document.getElementById("myTopnav");
+ if (x.className === "topnav") {
+ x.className += " responsive";
+ } else {
+ x.className = "topnav";
+ }
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 23f6e73..c932f66 100644
--- a/style.css
+++ b/style.css
@@ -1,132 +1,902 @@
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles&family=Trocchi&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Signika+Negative&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
+:root {
+ --color-black: black;
+ --color-lightblack: rgba(93, 85, 85, 0.849);
+ --color-maroon: rgb(92, 18, 18);
+ --color-orange: rgb(248, 89, 31);
+ --color-white: white;
+ --color-gray: rgb(216, 210, 210);
+ --color-darkGray: rgb(77, 72, 72);
+ --color-darkGray-background: rgb(116, 108, 108);
+ --color-gray: lightGray;
+ --color-blue: #1E3A8A;
+ --color-yellow: yellow;
+ --color-violet: rgb(50, 2, 104);
+ --color-lightBlue: #8010ca;
+ --color-lightGray: rgb(230, 231, 238);
+ --color-bluegreen: rgb(9, 52, 68);
+ --color-bluegreenlight: rgb(76, 100, 109);
+}
+
+body {
+ margin: 0px;
+ padding: 0px;
+}
+
+
+/* ---------------nav--------------------- */
+
+.topnav {
+ overflow: hidden;
+ background-color: var(--color-white);
+ padding: 5px 20%;
+ width: 100%;
+ display: inline-block;
+ /* position: fixed; */
+}
+
+.topnav a {
+ float: left;
+ display: block;
+ color: var(--color-black);
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+ font-size: 24px;
+}
+
+.topnav a:hover {
+ text-decoration: none;
+ background-image: linear-gradient(rgb(55, 36, 228) 50%, rgb(18, 173, 96) 50%);
+ background-size: 100% 2px;
+ background-position: 0 100%;
+ background-repeat: no-repeat;
+}
+
+.topnav .icon {
+ display: none;
+}
+
+@media screen and (max-width: 600px) {
+ .topnav a:not(:first-child) {
+ display: none;
+ }
+ .topnav a.icon {
+ float: right;
+ display: block;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .topnav.responsive {
+ position: relative;
+ }
+ .topnav.responsive .icon {
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+ .topnav.responsive a {
+ float: none;
+ display: block;
+ text-align: left;
+ }
+}
+
+
+/* --------------------------------------- */
+
+
+/* ---------------home-------------------- */
+
+.home {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding-top: 30px;
+ /* padding-top: 45px; */
+ background-image: url("./images/home-bg.p");
+ background-size: 115%;
+ background-repeat: no-repeat;
+ z-index: -1;
+ /* padding: 20px 0; */
+}
+
+.intro {
+ flex: 0.6;
+ margin-left: 10%;
+}
+
+.prof-img {
+ flex: 0.4;
+ /* margin-right: 5%; */
+ /* background-image: url('./images/svg-bg.svg'); */
+ background-repeat: no-repeat;
+ background-size: 145% 200%;
+ background-position: center;
+}
+
+.profile {
+ width: 100%;
+}
+
+@media only screen and (max-width: 600px) {
+ .profile {
+ width: 80%;
+ }
+}
+
+.name {
+ font-family: 'Fuzzy Bubbles', cursive;
+ font-size: 54px;
+ color: var(--color-bluegreen);
+}
+
+.profession {
+ font-family: 'IBM Plex Sans', sans-serif;
+ color: var(--color-bluegreenlight);
+ font-weight: bold;
+}
+
+.iconify {
+ color: var(--color-darkGray);
+}
+
+.iconify:hover {
+ color: rgb(50, 9, 88);
+}
+
+.connect {
+ padding: 3% 0;
+}
+
+.resumeBtn a {
+ text-decoration: none;
+ color: var(--color-white);
+}
+
+.resumeBtn {
+ background-image: linear-gradient(to right, #1A2980 0%, #26D0CE 51%, #1A2980 100%);
+ margin: 10px 0;
+ padding: 10px 25px;
+ text-align: center;
+ text-transform: uppercase;
+ transition: 0.5s;
+ background-size: 200% auto;
+ color: var(--color-white);
+ box-shadow: 0 0 20px var(--color-white);
+ border-radius: 10px;
+ display: block;
+ border: none;
+}
+
+.resumeBtn:hover {
+ background-position: right center;
+ /* change the direction of the change here */
+ color: var(--color-white);
+ text-decoration: none;
+}
+
+@media screen and (max-width: 900px) {
+ .profile-img {
+ padding-bottom: 150px;
+ }
+}
+
+
+/* -------------------------------------------------------- */
+
+.skills {
+ background: #A1FFCE;
+ /* fallback for old browsers */
+ background: -webkit-linear-gradient(to right, #FAFFD1, #A1FFCE);
+ /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to bottom, #FAFFD1, #A1FFCE);
+ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+
+.skills {
+ padding: 100px 0;
+}
+
+.skills_head,
+.project-head,
+.experience-head,
+.blogs-head {
+ font-family: 'Signika Negative', sans-serif;
+ font-size: 62px;
+ color: var(--color-bluegreen);
+ text-align: center;
+ padding: 15px 0;
+}
+
+.card-layout {
+ display: flex;
+}
+
+.card {
+ padding: 0 7px;
+ margin: 0 auto;
+ width: 18rem;
+ box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+ z-index: 0;
+}
+
+.card-title {
+ padding: 10px 0;
+}
+
+.card-link {
+ text-decoration: none;
+ color: var(--color-black);
+ font-size: 16px;
+ padding-left: 10px;
+}
+
+.card-link:hover {
+ color: var(--color-black);
+}
+
+.card-link-p {
+ border: 1px solid var(--color-blue);
+ border-radius: 20px;
+ width: 50%;
+ padding: 1px;
+}
+
+.card-link-p:hover {
+ border: 1px solid var(--color-violet);
+ background-color: rgba(135, 182, 235, 0.185)
+}
+
+.lang {
+ list-style-type: none;
+}
+
+
+/* ------------------------------------------------------------- */
+
+.timeline {
+ position: relative;
+ padding: 1rem;
+ margin: 0 auto;
+ max-width: 1300px;
+}
+
+.timeline:before {
+ content: '';
+ position: absolute;
+ height: 100%;
+ border: 1px solid hotpink;
+ right: 40px;
+ top: 0;
+}
+
+.timeline:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+@media screen and (min-width: 700px) {
+ .timeline {
+ padding: 2rem;
+ }
+ .timeline:before {
+ left: calc(50% - 1px);
+ right: auto;
+ }
+}
+
+.timeline__item {
+ padding: 1rem;
+ border: 2px solid hotpink;
+ border-image: linear-gradient(to right, skyblue 0%, hotpink 100%);
+ border-image-slice: 1;
+ position: relative;
+ margin: 1rem 3rem 1rem 1rem;
+ clear: both;
+}
+
+.timeline__item:after,
+.timeline__item:before {
+ content: '';
+ position: absolute;
+}
+
+.timeline__item:before {
+ right: -10px;
+ top: calc(50% - 5px);
+ border-style: solid;
+ border-color: hotpink hotpink transparent transparent;
+ border-width: 10px;
+ transform: rotate(45deg);
+}
+
+@media screen and (min-width: 700px) {
+ .timeline__item {
+ width: 44%;
+ margin: 1rem;
+ }
+ .timeline__item:nth-of-type(2n) {
+ float: right;
+ margin: 1rem;
+ border-image: linear-gradient(to right, hotpink 0%, skyblue 100%);
+ border-image-slice: 1;
+ }
+ .timeline__item:nth-of-type(2n):before {
+ right: auto;
+ left: -10px;
+ border-color: transparent transparent hotpink hotpink;
+ }
+}
+
+.timeline__item--year {
+ text-align: center;
+ /* max-width: 150px; */
+ width: 200px;
+ margin: 0 48px 0 auto;
+ font-size: 18px;
+ line-height: 1;
+ border-image: none;
+ padding: 0.5rem 1rem 1rem;
+}
+
+.timeline__item--year:before {
+ display: none;
+}
+
+@media screen and (min-width: 700px) {
+ .timeline__item--year {
+ text-align: center;
+ margin: 0 auto;
+ }
+ .timeline__item--year:nth-of-type(2n) {
+ float: none;
+ margin: 0 auto;
+ border-image: none;
+ }
+ .timeline__item--year:nth-of-type(2n):before {
+ display: none;
+ }
+}
+
+.timeline__title {
+ margin: 0;
+ font-family: 'Raleway', sans-serif;
+ font-size: 1.5em;
+}
+
+.timeline__blurb {
+ line-height: 1.5;
+ font-size: 1rem;
+ margin: 0.5rem 0 0;
+}
+
+
+/* ------------------------------------------------------------- */
+.projects {
+ background: #8e9eab;
+ /* fallback for old browsers */
+ background: -webkit-linear-gradient(to left, #eef2f3, #8e9eab);
+ /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to left, #eef2f3, #8e9eab);
+ padding: 100px 0;
+ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+
+.img-card {
+ margin: 10px auto;
+ width: 20rem;
+ box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+ background-color: var(--color-white);
+}
+
+.project-all {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.button-source {
+ position: relative;
+ display: inline-block;
+ padding: 5px 10px;
+ border-radius: 10px;
+ color: var(--color-violet);
+ text-decoration: none;
+ text-transform: uppercase;
+ overflow: hidden;
+ font-family: "Roboto", sans-serif;
+ filter: hue-rotate(0deg);
+ border: 2px solid #d2bdff;
+ transition: all 0.1s linear;
+}
+
+.button-source:hover {
+ border: 1px solid transparent;
+}
+
+.button-source:hover span {
+ position: absolute;
+ display: block;
+}
+
+.button-source:hover span:nth-child(1) {
+ filter: hue-rotate(0deg);
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ background: linear-gradient(90deg, transparent, #3a86ff);
+ animation: animate1 1s linear infinite;
+}
+
+@keyframes animate1 {
+ 0% {
+ left: -100%;
+ }
+ 50%,
+ 100% {
+ left: 100%;
+ }
+}
+
+.button-source:hover span:nth-child(2) {
+ filter: hue-rotate(60deg);
+ top: -100%;
+ right: 0;
+ width: 3px;
+ height: 100%;
+ background: linear-gradient(180deg, transparent, #3a86ff);
+ animation: animate2 1s linear infinite;
+ animation-delay: 0.25s;
+}
+
+@keyframes animate2 {
+ 0% {
+ top: -100%;
+ }
+ 50%,
+ 100% {
+ top: 100%;
+ }
+}
+
+.button-source:hover span:nth-child(3) {
+ filter: hue-rotate(120deg);
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ background: linear-gradient(270deg, transparent, #3a86ff);
+ animation: animate3 1s linear infinite;
+ animation-delay: 0.5s;
+}
+
+@keyframes animate3 {
+ 0% {
+ right: -100%;
+ height: 3px;
+ }
+ 50%,
+ 100% {
+ height: 2px;
+ right: 100%;
+ }
+}
+
+.button-source:hover span:nth-child(4) {
+ filter: hue-rotate(300deg);
+ bottom: -100%;
+ left: 0;
+ width: 3px;
+ height: 100%;
+ background: linear-gradient(360deg, transparent, #3a86ff);
+ animation: animate4 1s linear infinite;
+ animation-delay: 0.75s;
+}
+
+@keyframes animate4 {
+ 0% {
+ bottom: -100%;
+ }
+ 50%,
+ 100% {
+ bottom: 100%;
+ }
+}
+
+.buttons {
+ margin: 10%;
+ text-align: center;
+}
+
+.btn-hover {
+ width: 200px;
+ font-size: 16px;
+ font-weight: 600;
+ color: #fff;
+ cursor: pointer;
+ margin: 20px;
+ height: 55px;
+ text-align: center;
+ border: none;
+ background-size: 300% 100%;
+ border-radius: 50px;
+ moz-transition: all .4s ease-in-out;
+ -o-transition: all .4s ease-in-out;
+ -webkit-transition: all .4s ease-in-out;
+ transition: all .4s ease-in-out;
+}
+
+.btn-hover:hover {
+ background-position: 100% 0;
+ moz-transition: all .4s ease-in-out;
+ -o-transition: all .4s ease-in-out;
+ -webkit-transition: all .4s ease-in-out;
+ transition: all .4s ease-in-out;
+}
+
+.btn-hover:focus {
+ outline: none;
+}
+
+.btn-hover.color-4 {
+ background-image: linear-gradient(to right, #60a9fc, #1e2b57, #22358a, #1a1169);
+ box-shadow: 0 4px 15px 0 rgba(2, 8, 59, 0.75);
+}
+
+.btn-hover a {
+ text-decoration: none;
+ color: var(--color-white);
+}
-:root{
- --color-black: black;
- --color-maroon: rgb(92, 18, 18);
- --color-orange: rgb(248, 89, 31);
- --color-white: white;
- --color-gray: rgb(216, 210, 210);
- --color-darkGray: darkGray;
- --color-darkGray-background: rgb(116, 108, 108);
- --color-gray: lightGray;
- --color-blue: #1E3A8A;
- --color-yellow: yellow;
- --color-violet: rgb(50, 2, 104);
- --color-lightBlue: #8010ca;
+
+/* ----------------------------------------------------- */
+
+.blogs {
+ height: 100vh;
}
-body{
- margin: 0px;
- padding: 0px;
+
+.hexagon-menu {
+ margin: 5% 30%;
}
-.container-fluid{
- padding: 3% 15%;
+.hexagon-item {
+ cursor: pointer;
+ width: 200px;
+ height: 173.20508px;
+ float: left;
+ margin-left: -29px;
+ z-index: 0;
+ position: relative;
+ -webkit-transform: rotate(30deg);
+ -moz-transform: rotate(30deg);
+ -ms-transform: rotate(30deg);
+ -o-transform: rotate(30deg);
+ transform: rotate(30deg);
}
-.navbar-brand{
- font-size: 25px !important;
- font-family: "Montserrat";
+.hexagon-item:first-child {
+ margin-left: 9%;
}
-.navbar-nav {
-margin-left: auto;
-}
+.hexagon-item:hover {
+ z-index: 1;
+}
-.nav-item{
- padding: 0 18px;
+.even-row{
+ margin-top: -4%;
}
-.nav-link{
- font-family: "Montserrat";
- font-size: 1.4rem;
+.hexagon-item:hover .hex-item:last-child {
+ opacity: 1;
+ -webkit-transform: scale(1.3);
+ -moz-transform: scale(1.3);
+ -ms-transform: scale(1.3);
+ -o-transform: scale(1.3);
+ transform: scale(1.3);
}
-.navbar{
- padding:0 0 1rem;
+.hexagon-item:hover .hex-item:first-child {
+ opacity: 1;
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2);
+ -ms-transform: scale(1.2);
+ -o-transform: scale(1.2);
+ transform: scale(1.2);
}
-.home{
- position: relative;
+.hexagon-item:hover .hex-item:first-child div:before,
+.hexagon-item:hover .hex-item:first-child div:after {
+ height: 15px;
}
-.underline{
- padding-bottom: 5px;
- border-bottom-style: solid;
- border-bottom-width: 3.1px;
- border-bottom-color: var(--color-orange);
+.hexagon-item:hover .hex-item div::before,
+.hexagon-item:hover .hex-item div::after {
+ background-color: #7e97df;
}
-.centered {
- background: rgb(0, 0, 0); /* fallback color */
-background: rgba(7, 7, 7, 0.7);
-padding: 10px;
- position: absolute;
- top: 35%;
- left: 50%;
- font-size: 20px;
- font-weight: bolder;
- font-family: "Montserrat";
- transform: translate( -50%, -50% );
- text-align: center;
- color: white;
+.hexagon-item:hover .hex-content svg {
+ -webkit-transform: scale(0.97);
+ -moz-transform: scale(0.97);
+ -ms-transform: scale(0.97);
+ -o-transform: scale(0.97);
+ transform: scale(0.97);
}
-.about{
- margin-top: 0%;
- padding: 5rem;
- font-family: "Montserrat";
- font-weight: 300;
- text-align: center;
- color: black;
- background-image: url('./images/about.jpg');
- height: auto;
- width: auto;
- padding: 7% 12%;
- filter: brightness(110%);
+.page-home .hexagon-item:nth-last-child(1),
+.page-home .hexagon-item:nth-last-child(2),
+.page-home .hexagon-item:nth-last-child(3) {
+ -webkit-transform: rotate(30deg) translate(87px, -80px);
+ -moz-transform: rotate(30deg) translate(87px, -80px);
+ -ms-transform: rotate(30deg) translate(87px, -80px);
+ -o-transform: rotate(30deg) translate(87px, -80px);
+ transform: rotate(30deg) translate(87px, -80px);
}
-#resumeBtn{
- text-decoration: none;
- color: var(--color-white);
+.hex-item {
+ position: absolute;
+ top: 0;
+ left: 50px;
+ width: 100px;
+ height: 173.20508px;
}
-.tech{
- width: 10%;
+.hex-item:first-child {
+ z-index: 0;
+ -webkit-transform: scale(0.9);
+ -moz-transform: scale(0.9);
+ -ms-transform: scale(0.9);
+ -o-transform: scale(0.9);
+ transform: scale(0.9);
+ -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+ -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+ -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+ transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
-#features, #blogs{
- background-image: url('./images/colorful-background.jpg');
- text-align: center;
- font-weight: bolder;
- font-family: "Montserrat";
- color: rgb(5, 5, 5);
- padding: 7% 10%;
- background-repeat: no-repeat;
- background-size: cover;
+.hex-item:last-child {
+ transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+ z-index: 1;
}
-#myskills{
- padding-top: 5%;
+.hex-item div {
+ box-sizing: border-box;
+ position: absolute;
+ top: 0;
+ width: 100px;
+ height: 173.20508px;
+ -webkit-transform-origin: center center;
+ -moz-transform-origin: center center;
+ -ms-transform-origin: center center;
+ -o-transform-origin: center center;
+ transform-origin: center center;
}
-#projects, #connect{
- text-align: center;
- font-weight: bolder ;
- font-family: "Montserrat";
- color: rgb(5, 5, 5);
- padding: 7% 10%;
- background-image: url("./images/light-background.jpg");
- filter: brightness(95%);
-}
+.hex-item div::before,
+.hex-item div::after {
+ background-color: #041a3d;
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 3px;
+ -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
+ -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
+ -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
+ transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
+}
+
+.hex-item div:before {
+ top: 0;
+}
+
+.hex-item div:after {
+ bottom: 0;
+}
+
+.hex-item div:nth-child(1) {
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+}
+
+.hex-item div:nth-child(2) {
+ -webkit-transform: rotate(60deg);
+ -moz-transform: rotate(60deg);
+ -ms-transform: rotate(60deg);
+ -o-transform: rotate(60deg);
+ transform: rotate(60deg);
+}
-.row>*{
- padding-bottom: 5%;
+.hex-item div:nth-child(3) {
+ -webkit-transform: rotate(120deg);
+ -moz-transform: rotate(120deg);
+ -ms-transform: rotate(120deg);
+ -o-transform: rotate(120deg);
+ transform: rotate(120deg);
}
-.connect{
- padding: 5%;
+.hex-content {
+ color: #fff;
+ display: block;
+ height: 180px;
+ margin: 0 auto;
+ position: relative;
+ text-align: center;
+ transform: rotate(-30deg);
+ width: 156px;
}
-.list-inline-item{
- padding: 2%;
+
+.hex-content .hex-content-inner {
+ left: 50%;
+ margin: -3px 0 0 2px;
+ position: absolute;
+ top: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ -moz-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ -o-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+}
+
+.hex-content .icon {
+ display: block;
+ font-size: 36px;
+ line-height: 30px;
+ margin-bottom: 11px;
+}
+
+.hex-content .title {
+ display: block;
+ font-family: "Open Sans", sans-serif;
+ font-size: 14px;
+ letter-spacing: 1px;
+ line-height: 24px;
+ text-transform: uppercase;
+}
+
+.hex-content svg {
+ left: -7px;
+ position: absolute;
+ top: -13px;
+ transform: scale(0.87);
+ z-index: -1;
+ -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
+ -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
+ -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
+ transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
+}
+
+.hex-content:hover {
+ color: #fff;
+}
+
+
+/* ------------------------------------------------------ */
+
+.content {
+ background: #000046;
+ background: -webkit-linear-gradient(to right, #1CB5E0, #000046);
+ background: linear-gradient(to right, #1CB5E0, #000046);
+ padding: 7rem 0;
+}
+
+.heading {
+ font-size: 2.5rem;
+ font-weight: 900;
+ color: var(--color-white);
+}
+
+.form-control {
+ border: none;
+ background: #f3f3f3;
+}
+
+.form-control:active,
+.form-control:focus {
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ border-color: #000;
+ background: #f3f3f3;
+}
+
+.col-form-label {
+ color: #000;
+}
+
+.btn,
+.form-control,
+.custom-select {
+ height: 50px;
+}
+
+.custom-select:active,
+.custom-select:focus {
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ border-color: #000;
+}
+
+.btn {
+ border: none;
+ border-radius: 4px !important;
+}
+
+.btn.btn-primary {
+ background: none;
+ color: #fff;
+ padding: 15px 20px;
+ border: 1px solid var(--color-white);
+}
+
+.btn:hover {
+ box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
+}
+
+.btn:active,
+.btn:focus {
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.box {
+ padding: 40px;
+ background: #fff;
+ -webkit-box-shadow: -30px 30px 0px 0 rgba(0, 0, 0, 0.08);
+ box-shadow: -30px 30px 0px 0 rgba(0, 0, 0, 0.08);
+}
+
+.box h3 {
+ font-size: 14px;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+label.error {
+ font-size: 12px;
+ color: red;
+}
+
+#message {
+ resize: vertical;
+}
+
+#form-message-warning,
+#form-message-success {
+ display: none;
+}
+
+#form-message-warning {
+ color: #B90B0B;
+}
+
+#form-message-success {
+ color: #55A44E;
+ font-size: 18px;
+ font-weight: bold;
+}
+
+.submitting {
+ float: left;
+ width: 100%;
+ padding: 10px 0;
+ display: none;
+ font-weight: bold;
+ font-size: 12px;
+ color: #000;
+}
+
+.form-control {
+ margin: 10px 0;
}
\ No newline at end of file
- 
- 
- 
+ 
+ 
+ 
+ 
+