Upload New File

static/styles.css

+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    background-color: #fff;   
+}
+
+.bgColor{
+    background-color: #f7f7f7;
+}
+
+img, picture, figure {
+    margin: 0;
+    max-width: 100%;
+    display: inline-block;
+    vertical-align: baseline;
+    height: auto;
+    border: 0;
+    backface-visibility: hidden;
+}
+
+p{
+    font-size: 16px;
+    line-height: 28px;
+    margin-bottom: 15px;
+}
+
+h2,h3{
+    font-family: 'Vollkorn', serif;
+}
+
+a{
+    text-decoration: none;
+}
+
+ul,ol,li{
+    list-style-type: none;
+}
+
+header,main,footer,nav,section,figure{
+   display: block;
+}
+
+header,main,footer{
+    width: 100%;
+    /* max-width: 375px; */
+}
+
+.grid-item {
+    margin: 2px;
+    padding: 20px;
+    border: 1px solid black;
+}
+
+.grid-image {
+    width: 90%;
+    height: 90%;
+}
+
+.nav{
+	width: 100%;
+	height: 100px;
+	background-color: #FAEBD7;
+}
+.item{
+	position: fixed;
+	top:10px;
+	right:20px;
+	margin: 0;
+	padding: 0;
+	display: flex;
+}
+.item li{
+	list-style: none;
+}
+.item li a{
+	position: relative;
+	display: block;
+	padding: 10px 20px;
+	margin: 20px 0;
+	text-decoration: none;
+	color: #262626;
+	font-weight: bold;
+}
+.item li a:hover{
+	color:#fff;
+}
+
+.item li a:before{
+	content:'';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	border-top:1px solid #000;
+	border-bottom:1px solid #000;
+	transform: scaleY(2);
+	opacity: 0;
+	transition: 0.5s;
+	z-index: -1;
+}
+.item li a:hover:before{
+	transform: scaleY(1);
+	opacity:1;
+}
+.item li a:after{
+	content:'';
+	position: absolute;
+	top: 1px;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #000;
+	transform: scale(0);
+	transition: 0.5s;
+	z-index: -1;
+}
+.item li a:hover:after{
+	transform: scale(1);
+}
+
+/* HEADER CSS */
+header,footer{
+    background: #fff;
+}
+
+label {
+    margin: 0px 100px 0 40px;
+    padding-top: 20px;
+    font-size: 26px;
+    line-height: 70px;
+    display: block;
+    width: 323px;
+}
+
+.whitebg{
+    background-color: white;
+}
+
+.blackBg{
+    background: #2A2C39;
+    color:#EEE;
+}
+
+/* FOOTER CSS */
+footer{
+    border-top: 2px solid #dfdfdf;
+    text-align: center;
+    padding: 15px 0;
+}
+
+.main {
+    padding-top: 15px;
+    padding-bottom: 15px;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+  grid-template-rows: 33% 33% 33%;
+}
+
+.project-container {
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+}
+
+.title {
+    text-align: center;
+}
+
+@keyframes siz {
+
+            from{width: 0;}
+            to{width: 100%;}
+
+        }
+
+        .text{
+
+            overflow: hidden;
+            white-space: nowrap;
+            letter-spacing: 0.15em;
+            animation: siz 3s steps(60) forwards;
+            text-align: center;
+            font-size: 30px;
+            padding: 100px;
+        }
+
+.education-container {
+    text-align: center;
+}
+
+.edu-item-wrap {
+    margin: 10px;
+    margin-left: 20%;
+    max-width: 800px;
+  padding: 1rem;
+  position: relative;
+  background: linear-gradient(to right, red, purple);
+  padding: 3px;
+}
+
+.edu-item {
+background: #222;
+  color: white;
+  padding: 2rem;
+}
+
+.contact-container {
+    text-align: center;
+}
+
+.contactBox {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    transition: 0.3s;
+    width: 40%;
+    border-radius: 5px;
+    margin:20px;
+    margin-left: 30%;
+    padding: 30px;
+}