diff --git a/1.jpeg b/1.jpeg new file mode 100644 index 0000000..5e3b443 Binary files /dev/null and b/1.jpeg differ diff --git a/3409297.jpg b/3409297.jpg new file mode 100644 index 0000000..3b8e7e6 Binary files /dev/null and b/3409297.jpg differ diff --git a/3967ed45-b186-4c01-bb6c-97944d313e76.jpeg b/3967ed45-b186-4c01-bb6c-97944d313e76.jpeg new file mode 100644 index 0000000..b69b57b Binary files /dev/null and b/3967ed45-b186-4c01-bb6c-97944d313e76.jpeg differ diff --git a/about.css b/about.css new file mode 100644 index 0000000..af5ea59 --- /dev/null +++ b/about.css @@ -0,0 +1,104 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family : 'Josefin Sans' ,sans-serif; +} +.hero{ + position:fixed; + height : 100vh; + width: 100%; + /* background-image: linear-gradient(rgba(0,0,0,0.3),transparent), url("https://i.postimg.cc/fWS1YJBr/7cb9631c-565b-4668-8a3b-a31a76158eb9.jpg");*/ + background-image: linear-gradient(rgba(0,0,0,0.3),transparent), url("3409297.jpg"); + background-position: center; + background-size: cover; + position:relative; + padding : 0 8%; +} +nav{ + display : flex; + align-items : center; + justify-content : space-between; + /* padding-top : 45px; + padding-left : 8%;*/ + padding-right : 8%; + padding-bottom: 10%; + background-color: transparent; + color: aliceblue; +} +nav ul li{ + list-style-type : none; + display : inline-block; + padding : 10px 25px; +} +nav ul li a{ + color : white; + text-decoration : none; + font-weight : bold; + text-transform : capitalize; +} +nav ul li a:hover{ + color :#f9004d; + transition : .4s; +} + + +.about{ + width : 100%; + padding : 100px 0px; + background-color: #191919; + background-image: url('https://i.postimg.cc/g04ZHXCs/misty-landscape-with-forest-covered-with-fog-dark-storm-clouds.jpg'); + +} +.about img{ + height : auto; + width : 430px; +} +.about-text{ + width : 550px; +} +.main{ + width : 1130px; + max-width : 95%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content : space-around; +} +.about-text h2{ + color: white; + font-size: 75px; + text-transform: capitalize; + margin-bottom: 20px; +} +.about-text span{ + color :#f9004d; +} +.about-text h5{ + color : white; + letter-spacing : 2px; + font-size : 22px; + margin-bottom : 25px; + text-transform: capitalize; +} +.about-text p{ + color : #fcfc; + letter-spacing: 1px; + line-height : 28px; + font-size : 18px; + margin-bottom : 45px; +} +.btn{ + background-color: #f9004d; + color :white; + text-decoration : none; + border : 2px solid transparent; + font-weight: bold; + padding : 10px 25px; + border-radius : 30px; + transition: transform .4s; +} + +.btn:hover{ + transform: scale(1.2); +} \ No newline at end of file diff --git a/about.html b/about.html new file mode 100644 index 0000000..8982748 --- /dev/null +++ b/about.html @@ -0,0 +1,52 @@ + + + + + + + + About + + + + + + +
+ +
+ .. +
+

About Me

+
Devloper & Problem-Solver
+

I am a current first year student at Indian Institute of Information Technology, Kalyani. I love + learning new things about computers. I love competitive programming and am learning more and more + about new things in computer science. +

+ +
+
+
+ + + \ No newline at end of file diff --git a/app.css b/app.css new file mode 100644 index 0000000..5d3c454 --- /dev/null +++ b/app.css @@ -0,0 +1,307 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family : 'Josefin Sans' ,sans-serif; +} + +.hero{ + position:fixed; + height : 100vh; + width: 100%; + /* background-image: linear-gradient(rgba(0,0,0,0.3),transparent), url("https://i.postimg.cc/fWS1YJBr/7cb9631c-565b-4668-8a3b-a31a76158eb9.jpg");*/ + background-image: linear-gradient(rgba(0,0,0,0.3),transparent), url("3409297.jpg"); + background-position: center; + background-size: cover; + position:relative; + padding : 0 8%; +} +nav{ + display : flex; + align-items : center; + justify-content : space-between; + padding-top : 45px; + padding-left : 8%; + padding-right : 8%; +} +.logo{ + color :white; + font-size : 35px; + letter-spacing : 1px; + cursor : pointer; +} +span{ + color : #f9004d; +} +nav ul li{ + list-style-type : none; + display : inline-block; + padding : 10px 25px; +} +nav ul li a{ + color : white; + text-decoration : none; + font-weight : bold; + text-transform : capitalize; +} +nav ul li a:hover{ + color :#f9004d; + transition : .4s; +} + +.btn{ + background-color: #f9004d; + color :white; + text-decoration : none; + border : 2px solid transparent; + font-weight: bold; + padding : 10px 25px; + border-radius : 30px; + transition: transform .4s; +} + +.btn:hover{ + transform: scale(1.2); +} +.content{ + position: absolute; + top: 50%; + left : 8%; + transform: translateY(-50); +} +.content h1{ + /* color : white; + margin : 20px 0px 20px; + font-size:75px;*/ + position : relative; + font-size: 6em; + letter-spacing: 15px; + color: #0e3742; + width : 100%; + text-align : center; + -webkit-box-reflect : below 1px linear-gradient(transparent,#0004); + line-height:0.70em; + outline: none; + animation: animate 5s linear infinite; +} +@keyframes animate +{ + 0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92% + { + color: #0e3742; + text-shadow: none; + } + 18.1%,20.1%,30%,50%,60.1%,65%,80.1%,90%,92.1%,100% + { + color: #fff; + text-shadow: 0 0 10px #03bcf4, + 0 0 20px #03bcf4, + 0 0 40px #03bcf4, + 0 0 80px #03bcf4, + 0 0 160px #03bcf4; + } +} + + +/* +.content h1 span{ + position: relative; + font-size: 14vw; + color: #f9004d; + -webkit-text-stroke:0.3vw #383d52; +} +.content h1 span ::before{ + content: attr(data-text); + position:absolute; + top : 0; + left : 0; + width: 100%; + height: 100%; + color: #f9004d; + -webkit-text-stroke: 0vw #383d52; + border-right: 2px solid #01fe87; + overflow: hidden; + animation: 6s linear infinite; +} + +@keyframes animate +{ + 0%,10%,100% + { + width: 0; + } + 70%,90% + { + width: 100%; + } +}*/ + + + + + + + + +h3{ + color : white; + font-size :25px; + margin-bottom : 50px; + margin-top:20px; +} +h4{ + color : #fcfc; + letter-spacing: 2px; + font-size: 20px; + margin-bottom: 20px; +} +.newslatter form{ + width : 380px; + max-width : 100%; + position : relative; +} +.newslatter form input:first-child{ + display:inline-block; + width : 100%; + padding: 14px 130px 14px 15px; + border:2px solid #f9004d; + outline : none; + border-radius : 30px; +} +.newslatter form input:last-child{ + position : absolute; + display: inline-block; + outline: none; + border: none; + padding: 10px 30px; + border-radius:30px; + background-color: #f9004d; + color: white; + box-shadow : 0px 0px 5px #000, 0px 0px 15px #858585; + top: 6px; + right :6px; +} + +/*.about{ + width : 100%; + padding : 100px 0px; + background-color: #191919; +} +.about img{ + height : auto; + width : 430px; +} +.about-text{ + width : 550px; +} +.main{ + width : 1130px; + max-width : 95%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content : space-around; +} +.about-text h2{ + color: white; + font-size: 75px; + text-transform: capitalize; + margin-bottom: 20px; +} +.about-text h5{ + color : white; + letter-spacing : 2px; + font-size : 22px; + margin-bottom : 25px; + text-transform: capitalize; +} +.about-text p{ + color : #fcfc; + letter-spacing: 1px; + line-height : 28px; + font-size : 18px; + margin-bottom : 45px; +} +button{ + background-color: #f9004d; + color: white; + text-decoration: none; + font-weight: bold; + padding : 13px 30px; + border-radius: 30px; + transition : .4s; +} +button:hover{ + background-color: transparent; + border: 2px solid #f9004d; +}*/ + + +.contact-me{ + width : 100%; + height : 290px; + background: #3e3434; + display: flex; + align-items : center; + flex-direction : column; + justify-content:center; +} +.contact-me p{ + color : white; + font-size : 30px; + font-weight : bold; + margin-bottom : 25px; +} +.contact-me .button-two{ + background-color: #f9004d; + color: white; + text-decoration: none; + font-weight: bold; + padding : 13px 30px; + border-radius: 30px; + transition : .4s; +} +footer{ + position : relative; + width : 100%; + height : 400px; + background : #101010; + display: flex; + align-items : center; + flex-direction : column; + justify-content:center; + background: url("https://i.postimg.cc/d1MLBQhD/5183000.jpg"); + /* background: url(3409297.jpg);*/ + +} +footer p{ + font-family: 'Edu NSW ACT Foundation', cursive; + font-size : 30px; + color : rgb(75, 203, 36); + margin-bottom : 20px; + font-weight: bold; +} +footer p:hover{ + color: burlywood; +} +.social{ + display : flex; +} +.social a{ + width : 45px; + height : 60 px; + display : flex; + align-items : center; + justify-content: center; + background : #f9004d; + border-radius: 30%; + margin : 22px 10px; + color : white; + text-decoration: none; + font-size : 20px; +} +.social a:hover{ + transform: scale(1.3); + transition : .3s; + color:blue; +} \ No newline at end of file diff --git a/contact.css b/contact.css new file mode 100644 index 0000000..91c9f03 --- /dev/null +++ b/contact.css @@ -0,0 +1,173 @@ +@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap'); +*{ + margin : 0; + padding: 0; + box-sizing : border-box; + font-family: 'Oswald', sans-serif;; +} + + +nav{ + display : flex; + align-items : center; + justify-content : space-between; + /* padding-top : 45px; + padding-left : 8%;*/ + padding-right : 8%; + padding-bottom: 10%; + background-color: transparent; + color: aliceblue; +} +nav ul li{ + list-style-type : none; + display : inline-block; + padding : 10px 25px; +} +nav ul li a{ + color : white; + text-decoration : none; + font-weight : bold; + text-transform : capitalize; +} +nav ul li a:hover{ + color :#f9004d; + transition : .4s; +} + + + + + +.contact{ + position: relative; + min-height: 100vh; + padding : 50px 100px; + display : flex; + justify-content : center; + align-items : center; + flex-direction: column; + background-image: url(https://i.postimg.cc/3wPqXjq5/pexels-tim-grundtner-3856635.jpg); + background-size: cover; +} +.contact .content { + max-width : 800px; + text-align : center; +} +.contact .content h2{ + font-size : 36px; + font-weight: 500; + color: #fff; +} +.contact .content p { + font-size : 36px; + font-weight : 500; + color :#fff; +} +.container{ + width : 100%; + display : flex; + justify-content: center; + align-items : center; + margin-top : 30px; +} +.container .contactInfo{ + width : 50%; + display : flex; + flex-direction: column; +} +.container .contactInfo .box{ + position :relative; + padding : 20px 0; + display : flex; +} +.container .contactInfo .box .icon{ + min-width: 60px; + height : 60px; + background: #fff; + display : flex; + justify-content : center; + align-items : center; + border-radius : 50%; + font-size : 22px; +} +.container .contactInfo .box .text{ + display : flex; + margin-left : 20px; + font-size : 16px; + color :#fff; + flex-direction : column; + font-weight: 300; +} +.container .contactInfo .box .text h3{ + font-weight : 500; + color : #00bcd4; +} +.contactform{ + width : 40%; + padding : 40px; + background: #fff; +} +.contactform h2{ + font-size :30px; + color : #333; + font-weight :500; +} +.contactform .inputBox{ + position : relative; + width : 100%; + margin-top: 10px; +} +.contactform .inputBox input, +.contactform .inputBox textarea{ + width : 100%; + padding: 5px 0; + font-size : 16px; + margin : 10px 0; + border: none; + border-bottom: 2px solid #333; + outline : none; +} +.contactform .inputBox span{ + position : absolute; + left : 0; + padding : 5px 0; + font-size : 16px; + margin : 10px 0; + pointer-events: none; + transition : 0.5s; + color : #666; +} +.contactform .inputBox input:focus ~ span, +.contactform .inputBox input:valid ~ span, +.contactform .inputBox input:focus ~ span, +.contactform .inputBox input:valid ~ span +{ + color: #e91e63; + font-size : 12px; + transform : translateY(-20px); +} +.contactform .inputBox input[type="submit"] +{ + width : 100px; + background : #00bcd4; + color : #fff; + border : none; + cursor : pointer; + padding : 10px; + font-size: 18px; +} +@media(max-width : 991px) +{ + .contact + { + padding : 50px; + } + .container + { + flex-direction: column; + } + .container .contactInfo, .contactform + { + width : 100%; + } +} \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..8de8f30 --- /dev/null +++ b/contact.html @@ -0,0 +1,86 @@ + + + + + + + + + + + + Contact Me +
+ + + + + +
+

Contact Me

+

Here are my contact details and you can contact me here

+
+
+
+
+
+
+

Adress

+

Vill-Jibtya, P.O-Joyrambati, P.S-Kotulpur
Dist-Bankura,State : W.B
722161,India

+
+
+
+
+
+

Phone

+

+91-8391864347

+
+
+
+
+
+

Email

+

mondal.sdeep09@gmail.com

+
+
+
+
+
+

Send Message

+
+ + Full Name +
+
+ + E-mail +
+
+ + Type Your Message... +
+
+ +
+
+
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/education.css b/education.css new file mode 100644 index 0000000..bb41ad5 --- /dev/null +++ b/education.css @@ -0,0 +1,125 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + + +nav { + display: flex; + align-items: center; + justify-content: space-between; + /* padding-top : 45px; + padding-left : 8%;*/ + padding-right: 8%; + padding-bottom: 10%; + background-color: transparent; + color: aliceblue; +} + +nav ul li { + list-style-type: none; + display: inline-block; + padding: 10px 25px; +} + +nav ul li a { + color: rgb(36, 9, 116); + text-decoration: none; + font-weight: bold; + text-transform: capitalize; +} + +nav ul li a:hover { + color: cyan; + transition: .4s; +} + +body { + width: 100%; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + width: 100%; + padding: 35px 10%; +} + +.container { + padding-right: calc(10% - 30px); +} + +main .row { + display: grid; + grid-template-columns: 1fr 1fr; + grid-column-gap: 20px; + +} + +.col header .title { + font-family: helvetica; + color: #11a372; + padding: 0px 0px 20px 30px; +} + +.col .contents { + padding: 0px 30px; + border-left: 2px solid #bababa; +} + +.col .contents .box { + position: relative; + padding: 20px; + border: 1px solid #eaeaea; + background-color: #ffffff; + cursor: pointer; + transition: all 0.4s; + margin-bottom: 20px; +} + +.col .contents .box:hover { + box-shadow: 0px 3px 12px 0px #11a372; + border: 1px solid transparent; +} + +.col .contents .box::before { + content: ''; + position: absolute; + width: 16px; + border-radius: 50%; + right: calc(100% + 22px); + top: 0; + background-color: #11a372; + border: 2px solid white; +} + +.box h4 { + position: relatie; + color: #11a372; +} + +.box h3 { + font-size: 19px; + padding: 10px 0px 6px; + font-family: helvetica; + color: #444; +} + +.box p { + line-height: 1.2; + color: #666; + font-size: 17px; +} + +@media(max-width : 768px) { + main.row { + grid-template-columns: 1fr; + } + + .row .col:nth-child(2) { + margin-top: 30px; + } +} \ No newline at end of file diff --git a/education.html b/education.html new file mode 100644 index 0000000..3f05708 --- /dev/null +++ b/education.html @@ -0,0 +1,89 @@ + + + + + + + + + Education & Experience + + + +
+ + + + +
+ +
+
+

Education

+
+ +
+
+

2010-2020

+

Class 10 Degree

+

Ramakrisna Mission Sarada Vidyapith.Got 95% in Class 10 board.

+
+ +
+

2020-2022

+

Higher-Secondary

+

Arambagh High School.Got 96.5% in boards.Qualified Jee Adv.

+
+ +
+

2022-2026

+

B.Tech College

+

IIIT Kalyani.B-Tech first year.

+
+
+
+ + + +
+
+

Experience

+
+ +
+
+

2019-2020

+

Photo Editing

+

Ametaur at this.Used Canva made funky edits

+
+ +
+

2022-2023

+

Competitive-Programming

+

Doing this for 5 months.2* in codechef.

+
+ +
+

2022-2023

+

Web-Dev

+

Learning new things.

+
+
+
+ + +
+
+ + + \ No newline at end of file diff --git a/index.html b/index.html index 41f52ed..27e7126 100644 --- a/index.html +++ b/index.html @@ -1,56 +1,95 @@ - - - - - - - - Basic Portfolio Website - - - - - - -
-
-
Hi, I am <name>
-

Frontend developer

- -
-
- MyImage -
-
- - -
-
- About me -
- -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum voluptates provident molestias a - animi facilis iusto voluptatum repellat eligendi consequatur distinctio placeat mollitia veritatis - recusandae, ad, quasi commodi enim quos! Quasi aspernatur veniam, blanditiis sint necessitatibus dicta - libero voluptatibus reiciendis asperiores nemo maiores ducimus corrupti magnam error voluptatum ab velit. -

-
- - -
-
- Contact Me -
-
- - -
Mobile no : +91 XXXXXXXXXX
- -
linkdin : Linkdin IN
-
Github : Github
-
Others : BIO
-
- - + + + + portfolio website + + + + + + + + + + + + + + + + + + + + + +
+ + +
+

Hello,my name is

+

Subhadeep Mondal

+

I'm a Web Devloper

+
+
+ + + +
+
+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/skill.css b/skill.css new file mode 100644 index 0000000..062bf28 --- /dev/null +++ b/skill.css @@ -0,0 +1,136 @@ +*{ + font-family :'Edu NSW ACT Foundation', cursive; + list-style: none; + padding: 0; + margin: 0; +} + + + +nav{ + display : flex; + align-items : center; + justify-content : space-between; + /* padding-top : 45px; + padding-left : 8%;*/ + padding-right : 8%; + padding-bottom: 10%; + background-color: transparent; + color: aliceblue; +} +nav ul li{ + list-style-type : none; + display : inline-block; + padding : 10px 25px; +} +nav ul li a{ + color : white; + text-decoration : none; + font-weight : bold; + text-transform : capitalize; +} +nav ul li a:hover{ + color :#f9004d; + transition : .4s; +} + +body{ + background: #333; + text-transform: uppercase; +} +h1{ + text-align:center; +} +h3{ + margin: 5px; +} +.skill{ + width: 500px; + margin: 60px auto; + color: #fff; + padding: 20px; + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); + /* background-image: url(https://i.postimg.cc/Qd44KDqC/pexels-emiliano-arano-2127969.jpg);*/ +} +.skill li{ + margin: 20px 0; + padding: 10px; +} +.bar{ + background: #353b48; + display: block; + height: 20px; + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 10px; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + transition: all 0.3s cubic-bezier(.25,.8); +} +.bar:hover{ + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); +} +.bar span{ + height: 20px; + float: left; + background: linear-gradient(135deg, rgba(236,0,140,1)0%, rgba(252,103,103,1)100%); +} +.html{ + width: 90%; + animation: html 3s; +} +.css{ + width: 60%; + animation: css 3s; +} +.bootstrap{ + width: 55%; + animation: bootstrap 3s; +} +.dsa{ + width: 60%; + animation: dsa 3s; +} +.javascript{ + width: 30%; + animation: javascript 3s; +} +@keyframes html{ + 0%{ + width: 0%; + } + 100%{ + width: 90%; + } +} +@keyframes css{ + 0%{ + width: 0%; + } + 100%{ + width: 60%; + } +} +@keyframes bootstrap{ + 0%{ + width: 0%; + } + 100%{ + width: 55%; + } +} +@keyframes dsa{ + 0%{ + width: 0%; + } + 100%{ + width: 60%; + } +} +@keyframes javascript{ + 0%{ + width: 0%; + } + 100%{ + width: 20%; + } +} \ No newline at end of file diff --git a/skill.html b/skill.html new file mode 100644 index 0000000..5806b1d --- /dev/null +++ b/skill.html @@ -0,0 +1,55 @@ + + + + + + + Skills + + + + + + + + + + + + +
+

my skills

+

  • html

    + +
    • + +

  • css

    + +
    • + +

  • bootstrap

    + +
    • + +

  • dsa

    + +
    • + +

  • javascript

    + +
    • + +
    + + + \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index 7e137a6..0000000 --- a/style.css +++ /dev/null @@ -1,98 +0,0 @@ -*{ - margin: 0; - padding: 0; /* providing default margin and padding to be 0 */ -} - -/* home page styling */ - -.homePage{ /* selecting div with class "homePage" and adding styling to it */ - display: flex; /* creating a flex box */ - justify-content: space-around; - height: 100vh; - align-items: center; -} - -.myImage img{ /* selecting div with class "myImage" then navigating to img tag inside it, and adding styling to it */ - height: 18rem; - width: auto; - border-radius: 1rem; -} - -.name{ /* selecting div with class "name" and adding styling to it */ - font-size: 3rem; -} - -.intro p{ /* selecting div with class "intro" then navigating to p tag inside it, and adding styling to it */ - font-size: 2rem; - line-height: 3rem; -} - -.your_button{ /* selecting button with class "your_button" and adding styling to it */ - font-size: 1rem; - padding: 5px; - cursor: pointer; - background-color: rgb(42, 42, 255); - border-radius: 5px; - width:100px; - height:50px; - border:2px solid white; - color:white; - text-transform: capitalize; -} -.your_button:hover{ /* here we add a special animation to button when it is hovered (hover: when a cursor roams in the specified setion it is the hover state for that element) */ - - box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px; -} -/* about me */ -.about{ /* selecting div with class "about" and adding styling to it */ - min-height: 60vh; -} - -.about_heading{ /* selecting div with class "about_heading" and adding styling to it */ - font-size: 3rem; - text-align: center; - text-decoration: underline; - font-weight:600; -} - -/* contact */ -.contact_sec{ /* selecting div with class "contact_sec" and adding styling to it */ - height: 60vh; - width:70vw; - margin: 0 auto; -} - -.contact_heading{ /* selecting div with class "contact_heading" and adding styling to it */ - font-weight:600; - font-size: 3rem; - text-align: center; - text-decoration: underline; -} - -.contact_info{ /* selecting div with class "contact_info" and adding styling to it */ - font-size:1.3em; - font-weight: 600; - margin-top:10vh; -} -.data{ /* selecting div with class "data" and adding styling to it */ - font-weight:initial; -} - -.Email,.mobile_no,.linkdin,.github,.others{ /* selecting many divs with the class listed and adding same styling to all of them */ - padding:2vh 0; -} - -span a{ /* selecting span and then navigating to a tag in it and adding styling to it */ - color:black; -} - -span a:hover{ /* here we add a special animation to anchor tag when it is hovered (hover: when a cursor roams in the specified setion it is the hover state for that element) */ - color:blue; -} - - -.para{ /* selecting div with class "para" and adding styling to it */ - width:70vw; - margin:8vh auto; - font-size: 2em; -} \ No newline at end of file