diff --git a/Binary-Brains/about.css b/Binary-Brains/about.css new file mode 100644 index 0000000..df5fc3f --- /dev/null +++ b/Binary-Brains/about.css @@ -0,0 +1,159 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap'); + + +*{ + margin: 0px; + padding: 0px; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + + + +.section{ + width: 100%; + min-height: 100vh; + background-color: #ddd; +} + +.container1{ + width: 80%; + display: block; + margin: auto; + padding-top: 100px; +} + +.content-section{ + float: left; + width: 55%; + display: block; + margin: auto; +} + +.image-section{ + float: left; + height: 50%; + width: 50%; +} + +.image-section img{ + width: 50%; + height: auto; + display: block; + margin: auto; +} + +.content-section .title{ + text-transform: uppercase; + font-size: 28px; +} + +.content-section .content h3{ + margin-top: 20px; + color: #5d5d5d; + font-size: 21 px; +} + +.content-secion .content p{ + margin-top: 10px; + font-family: sans-serif; + font-size: 18px; + line-height: 1.5; +} + +.content-section .content .button{ + margin-top: 30px; +} + +.content-section .content .button a{ + background-color: #3d3d3d; + padding: 12px 40px; + text-decoration: none; + color: #fff; + font-size: 25px; + letter-spacing: 1.5px; +} + +.content-section .content .button a:hover{ + background-color: #a52a2a; + color: #fff; +} + +.content-section .social{ + margin: 40px 40px; +} + +.content-section .social i{ + color: #a52a2a; + font-size: 30px; + padding: 0px 10px; +} + +.content-section .social i:hover{ + color:#3d3d3d; +} + +@media screen and(max-width: 768px){ + .container{ + width: 80%; + display: block; + margin: auto; + padding-top: 50px; + } + .content-secion{ + float: none; + width: 100%; + display: block; + margin: auto; + } + .image-section{ + float: none; + width: 100%; + display: block; + margin: auto; + } + .image-section img{ + width: 100%; + height: auto; + display: block; + margin: auto; + } + .content-secion .title{ + text-align: center; + font-size: 19px; + } + .content-section .content .button{ + text-align: center; + } + .content-section .content .button a{ + padding: 9px 30px; + } + .content-secion .social{ + text-align: center; + } +} + +.horizontal-list { + list-style: none; + padding-left: 0px; + margin: 0px; + align-items: center; +} + +.horizontal-list li { + display: inline-block; + margin: 0px 8px 8px 0px; + font-weight: 100; + font-size: 0.9rem; +} + +.horizontal-list li a { + color: white; + text-decoration: none; +} +section { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 20px; +} diff --git a/Binary-Brains/about.html b/Binary-Brains/about.html new file mode 100644 index 0000000..e5c3405 --- /dev/null +++ b/Binary-Brains/about.html @@ -0,0 +1,37 @@ + + + + + + + + About Section + + +
+
+
+
+

About Us

+
+ +
+

Lorem Ipsum is simply

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

+
+ Read More +
+
+ +
+
+ +
+
+
+ + \ No newline at end of file diff --git a/Binary-Brains/contact.css b/Binary-Brains/contact.css new file mode 100644 index 0000000..536193a --- /dev/null +++ b/Binary-Brains/contact.css @@ -0,0 +1,175 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body, +input, +textarea{ + font-family: "Poppins", sans-serif; +} + +.container2{ + position: relative; + width: 100%; + min-height: 100vh; + padding: 2rem; + background-color: #fafafa; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} + +.form{ + width: 100%; + max-width: 820px; + + background-color: rgb(22, 140, 236); + border-radius: 10px; + box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1); + z-index: 1000; + overflow: hidden; + display: grid; + grid-template-columns: repeat(2, 1fr); +} + +.contact-form{ + background-color: #1abc9c; + position: relative; +} + +.cicle{ + border-radius: 50%; + background: red; + position: absolute; +} + +.circle.one{ + width: 130px; + height: 130px; + top: 130px; + right: -40px; +} + +.circle.two{ + width: 80px; + height: 80px; + top: 10px; + right: 30px; +} + +.contact-form:before{ + content:""; + position: absolute; + width: 26px; + height: 26px; + background-color: rgb(23, 247, 194); + transform: rotate(45deg); + top: 50px; + left: -13px; +} + +form{ + padding: 2.3rem 2.2rem; + z-index: 10; + overflow: hidden; + position: relative; +} + +.title{ + color:#fff; + font-weight: 500; + font-size: 1.5rem; + line-height: 1; + margin-bottom: 0.7rem; +} + +.input-container2{ + position: relative; + margin: 1rem 0; +} + +label{ + display: none; +} + +.input{ + width: 100%; + outline: none; + border: 2px solid #fafafa; + background: none; + padding: 0.6rem 1.2rem; + color: #fff; + font-weight: 500; + font-size: 0.95rem; + letter-spacing: 0.5px; + border-radius: 25px; + transition: 0.3s; +} + +textarea.input{ + padding: 0.8rem 1.2rem; + min-height: 150px; + border-radius: 22px; + resize: none; + overflow-y: auto; +} + +.input-container2 label{ + position: absolute; + top: 50%; + left: 15px; + transform: translateY(-50%); + padding: 0 0.4rem; + color: #fafafa; + font-size: 0.9rem; + font-weight: 400; + pointer-events: none; + z-index: 1000; + transition: 0.5s; +} + +.input-container2.textarea label{ + top: 1rem; + transform: translateY(0); +} + +.btn{ + padding: 0.6rem 1.3rem; + background-color: #fff; + border: 2px solid #fafafa; + font-size: 00.95rem; + color: #1abc9c; + line-height: 1; + border-radius: 25px; + outline: none; + cursor: pointer; + transition: 0.3s; +} + +.btn:hover{ + background-color: transparent; + color: #fff; +} + +.input-container2 span{ + position: absolute; + top: 0; + left: 25px; + transform: translateY(-50%); + font-size: 0.8rem; + padding: 0 0.4rem; + color: transparent; + pointer-events: none; + z-index: 500; +} + +.input-container2 span:before, +.input-container2 span:after{ + +} + + + diff --git a/Binary-Brains/contact.html b/Binary-Brains/contact.html new file mode 100644 index 0000000..c226b7b --- /dev/null +++ b/Binary-Brains/contact.html @@ -0,0 +1,48 @@ + + + + + + + + Contact + + +
+
+
+ +
+ + + +
+

Contact us

+
+ + Username + Username +
+
+ + Email + Email +
+
+ + Phone + Phone +
+
+ + Message + Message +
+ + + +
+
+
+ + \ No newline at end of file diff --git a/Binary-Brains/contact1.css b/Binary-Brains/contact1.css new file mode 100644 index 0000000..a196465 --- /dev/null +++ b/Binary-Brains/contact1.css @@ -0,0 +1,114 @@ +#contact { + background-color: #0af922b3; + background-image: linear-gradient(50deg, #2857a4 0%, #403066 74%); + color: white; + padding-bottom: 40px; + justify-content: center; + +} + +#contact h1, +#contact h1 span { + color: white; + text-align: center; + font-size: 50px; +} + +#contact-form { + margin-left: 20%; +} + +#contact-container { + display: flex; +} + +#my-details-container { + width: 35%; + margin-left: 6%; +} + +#my-details-container h3 { + color: white; + font-weight: 550; + font-size: 1.2rem; +} + +#contact-form-container { + width: 50%; +} + +#my-details-container p { + color: #d9dcdd; + font-size: 0.9rem; +} + +.my-details-info-container { + margin-bottom: 20px; + color: #d9dcdd; + font-size: 1rem; +} + +.my-details-info-container span { + margin-left: 0.4rem; +} + +.my-details-info-container i { + color: white; +} + +.my-details-icon { + width: 1rem; + height: 1rem; + vertical-align: bottom; + margin-right: 0.5rem; +} + + +#contact-form input, +textarea { + max-width: 90%; + margin: 15px; + padding: 4px 10px; + border: 0px solid transparent; + border-bottom: 2px solid white; + color: #d9dcdd; + background: transparent; + width: 90%; + line-height: 1.6; + font-size: 1.05rem; +} + +#contact-form button[type="submit"] { + background: transparent; + font-size: 0.95rem; + border: 2px solid white; + margin-top: 5%; + margin-left: 35%; + border-radius: 2px; + color: white; + font-family: sans-serif; + font-weight: 700; + letter-spacing: 0.046875em; + line-height: 1; + padding: 0.8em 0.8em 0.78em; + text-transform: uppercase; +} + +#contact-form button:hover { + background: white; + color: #13386fe0; +} + +#contact .social-icons li a i { + font-size: 1.2rem; + margin: 40px 10px 10px; + padding: 10px 14px 20px 10px; + +} + +input:focus, +select:focus, +textarea:focus, +button:focus { + outline: none; +} \ No newline at end of file diff --git a/Binary-Brains/hackathon.css b/Binary-Brains/hackathon.css new file mode 100644 index 0000000..0b67888 --- /dev/null +++ b/Binary-Brains/hackathon.css @@ -0,0 +1,153 @@ +#nav{ + background-image: url("https://png.pngtree.com/thumb_back/fw800/background/20190221/ourmid/pngtree-technology-business-line-atmosphere-image_18933.jpg"); + } + nav li{ + font-size: 30px; + text-decoration: underline; + } + + nav{ + position: sticky; + align-items: center; + display: flex; + justify-content: space-between; + padding: 1.5rem 3.5rem; + } + +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Roboto' sans-serif; +} + +body{ + background-color: #333; +} + +.inner{ + padding-top: 20px; +} + +.header{ + text-align: center; + color: #fff; + padding: 1rem; + position: relative; +} + +.header:after{ + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + height: 4px; + width: 100px; + background-color: #2ecc71; + border-radius: 2px; +} + +.container{ + display: grid; + grid-template-columns: repeat(3, 1fr); + justify-content: center; + align-items: center; + text-align: center; + grid-gap: 1rem; + padding: 1rem 80px; + font-size: 1.2rem; +} + +.skill-box{ + padding: 1rem; + color: #ddd; + cursor: pointer; +} + +.skill-box:hover > .skill-title:after, .skill-box:hover > .skill-title:before{ + width: 35px; +} + +.skill-box:hover .img{ + transform: translateY(-10px); +} + +.skill-title{ + display: flex; + flex-direction: column; + align-items: center; + padding: 0.5rem; + margin-bottom: 0.5rem; + position: relative; +} + +.skill-title:after{ + content: ''; + position: absolute; + bottom: 0; + right: 50%; + width: 0; + height: 4px; + border-radius: 2px 0 0 2px; + background-color: #2ecc71; + transition: .5s; +} + +.skill-title:before{ + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 4px; + border-radius: 0 2px 2px 0; + background-color: #2ecc71; + transition: .5s; +} + +.img{ + width: 90px; + height: 90px; + position: relative; + border-radius: 45px; + background-color: #fff; + display: flex; + justify-content: center; + align-items: center; + transition: .5s; +} + +.img:after{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 50%; + height: 90px; + background: rgba(100, 100, 100, 0.5); + border-radius: 45px 0 0 45px; +} + +.skill-title h3{ + color: #fff; + margin-top: 0.5rem; +} + +.skill-icon{ + width: 50px; + z-index: 2; +} + +@media screen and (max-width: 990px){ + .container{ + grid-template-columns: repeat(2, 1fr); + padding: 2rem 50px; + } +} + +@media screen and (max-width: 650px){ + .container{ + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/Binary-Brains/hackathon.html b/Binary-Brains/hackathon.html new file mode 100644 index 0000000..483b623 --- /dev/null +++ b/Binary-Brains/hackathon.html @@ -0,0 +1,190 @@ + + + + + + + + + + + + + + + +
+
+
+
+

About Us

+
+ +
+

Four Rock

+

here, we our with four member team namely ripudaman singh, naina prashar, gurdeep singh, sachindand singh. it is essential to make yourself stand out from the crowd. Be detailed yet concise in your “About Us” section. Visitors do not want to read an entire autobiography. Get to the point of your accomplishments and tell why they matter. + It doesn’t hurt to put a picture in this section to help humanize your profile. It used to be a picture is worth a thousand words, now it’s more a video is worth a thousand words. Highly consider adding a video introduction into your “About Us” section to help visitors get acquainted with you and your experience. +

+
+ Read More +
+
+ +
+ +
+
+ + + +
+
+

Our Skills

+
+
+
+
+
+ +
+

HTML 5

+
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

+
+
+
+
+ +
+

CSS 3

+
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

+
+
+
+
+ +
+

JavaScript

+
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

+
+
+
+
+ +
+

Python

+
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

+
+
+
+
+ +
+

Sass

+
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

+
+
+
+
+ +
+

MySQL

+
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

+
+
+
+ +
+

+ + + + Contact +

+
+ +
+
+ + +
+
+
+ +

Get In touch!

+

Hey! we are looking forward
to start a project with you!.

+ +

My Address

+
+ + Palampur
+ Himachal Pradesh – 176107 +
+
+ + Tel:- +91.8894107282
+ Fax:- +91 8219576796 +
+
+ + sachidanand1162.be21@chitkarauniversity.edu.in +
+
+
+ +
+ + +
+
+ + + \ No newline at end of file diff --git a/Binary-Brains/project.css b/Binary-Brains/project.css new file mode 100644 index 0000000..157ea05 --- /dev/null +++ b/Binary-Brains/project.css @@ -0,0 +1,105 @@ +*{ + box-sizing:border-box; + font-size: 'lato', sans-serif; +} + +html, body{ + width: 100%; + height: 100%; + /* display: flex; */ + /* justify-content: space-evenly; */ + background: #222; +} + +.wrapper{ + display: flex; + /* width: 50%; */ + justify-content: space-evenly; + /* justify-content: space-around; */ + /* align-content: space-evenly; */ + +} + +.card{ + width: 280px; + height: 360px; + padding: 2rem 1rem; + background: rgba(255, 255, 255, 0.556); + position: relative; + display: flex; + align-items: flex-end; + box-shadow: 0px 7px 10px rgba(0,0,0,0.5); + transition: 0.5s ease-in-out; +} + +.card:hover{ + transform: translateY(20px); +} + +.card:before{ + content: ""; + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; + height: 100%; + background: linear-gradient(to bottom, rgba(0,176,155,0.5), rgba(150,201,61,1)); + z-index: 2; + transition: 0.5s all; + opacity: 0; +} + +.card:hover:before{ + opacity: 1; + +} + +.card img{ + width: 100%; + height: 100%; + object-fit: cover; + position: absolute; + top: 0; + left: 0; +} + +.card .info{ + position: relative; + z-index: 3; + color: rgb(255, 255, 255); + opacity: 0; + transform: translateY(30px); + transition: 0.5s all; +} + +.card:hover .info{ + opacity: 1; + transform: translateY(0px); +} + +.card .info h1{ + margin: 0; +} + +.card .info p{ + letter-spacing: 1px; + font-size: 15px; + margin-top: 8px; + margin-bottom: 20px; +} + +.card .info .btn{ + text-decoration: none; + padding: 0.5rem 1rem; + background: rgb(255, 255, 255); + color: #000; + font-size: 14px; + font-weight: bold; + cursor: pointer; + transition: 0.4s ease-in-out; +} + +.card .info .btn:hover{ + box-shadow: 0px 7px 10px rgba(0,0,0,0.5); +} \ No newline at end of file diff --git a/Binary-Brains/project.html b/Binary-Brains/project.html new file mode 100644 index 0000000..482fb9f --- /dev/null +++ b/Binary-Brains/project.html @@ -0,0 +1,46 @@ + + + + css cards hover effect + + + + +
+
+ +
+

BRAIN TEASER

+

+ PLAY FOR FREE! +
+
+
+
+ +
+

HAPPY NEURON

+

+ PLAY FOR FREE! +
+
+
+ +
+

RUBIK'S CUBE

+

+ PLAY FOR FREE! +
+
+ +
+ +
+

SUDOKU

+

+ PLAY FOR FREE! +
+
+
+ + \ No newline at end of file