Skip to content

Commit

Permalink
Changes done in the home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@SoumyaU25
SoumyaU25 committed Oct 16, 2024
1 parent 2f1170b commit 283bb87
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 231 deletions.
348 changes: 122 additions & 226 deletions public/css/main_page_style.css
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,132 @@
* {
box-sizing: border-box;
}

body {
*{
margin: 0;
padding: 0;
background-color: var(--primary-color);
}
font-family: sans-serif;
}
/* header styling */

.banner{
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url('/public/images/calm.jpg');
background-size: cover;
background-position: center;
}
.logo{
width: 200px;
cursor: pointer;
}

/* header styling */

.head {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 12px;
background-color: rgb(43 43 43);
}
/* navbar styling */
.nav{
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}

.h2{
cursor: pointer;
color: white;
}

.nav ul li{
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}

.nav ul li a{
text-decoration: none;
color: #ffff;
text-transform: uppercase;
}

.nav ul li::after{
content: '';
height: 3px;
width: 0;
background: #009688;
position: absolute;
left: 0;
bottom: -10px;
transition: 0.5s;
}

.nav ul li:hover::after{
width: 100%;
}

.content{
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-100%);
text-align: center;
color: #ffff;
}

.content h1{
margin-top: 20px;
}

.content p{
margin: 10px auto;
font-weight: 100;
line-height: 25px;
}

.content2{
width: 100%;
position: absolute;
top: 50%;
transform: translateY(70%);
text-align: center;
color: #ffff;
}
a{
text-decoration: none;
color: #ffff;
}

.content2 p{
margin: 10px auto;
font-weight: 100;
line-height: 25px;
}
.button{
margin-top: 20px;
}
.btn{
width: 200px;
padding: 10px 10px;
text-align: center;
margin: 20px 10px;
border-radius: 25px;
font-weight: bold;
border: 1.5px solid #009688;
background: transparent;
cursor: pointer;
position: relative;
overflow: hidden;
}


.btn:hover{
border: none;
background: #009688;
transition: 0.5s;
}





#icon{
width: 30px;
cursor: pointer;
position: absolute;
top: 30px;
right: 90px;
}

body h2{
color: var(--secondary-color);
}

.text{
color: var(--secondary-color);
Expand All @@ -47,206 +142,7 @@ body {
}


.head div:last-child {
padding: 0px 40px 0px 0px;
}

@media (max-width:310px) {
.head {
flex-direction: column;
}

.head div:last-child {
padding: 30px;
}
}

/* navbar styling */
nav {
display: flex;
justify-content: space-between;
padding: 8px 10px;
font-size: 18px;
background-color: rgb(195, 195, 210);
align-items: center;
flex-wrap: wrap;
}

.navbar {
display: flex;
padding: 8px 20px;
justify-content: space-between;
align-items: center;
}

.nav-items {
padding: 0px 26px;
font-size: 20px;
}

.nav-items a {
text-decoration: none;
color: black;
}

.nav-items:nth-child(1) input {
padding: 11px;
border-radius: 20px;
width: 18vw;
}

.nav-items:nth-child(2) {
background-color: rgb(121, 121, 163);
padding: 10px;
border-radius: 10px;
transition: all 0.8s ease-in-out;
}

.nav-items:nth-child(2):hover {
background-color: rgb(133, 133, 186);
}

@media (max-width:860px) {
.nav-items:nth-child(1) input {
width: 26vw;
}
}

@media (max-width:764px) {
#result {
display: none;
}

#heading {
display: none;
}

.nav-items:nth-child(1) input {
width: 38vw;
}

nav {
justify-content: center;
}

.navbar {
justify-content: center;
padding: 8px 0px;
}

.nav-items {
padding: 10px 15px;
}
}

@media (max-width:565px) {
.navbar {
flex-wrap: wrap;
}

.nav-items:nth-child(1) input {
width: 68vw;
}

.nav-items {
padding: 30px 20px;
}

.logo img {
width: 40vw;
}
}

/* upload section styling */

.first_main {
background: rgb(43, 83, 94);
background: radial-gradient(circle, rgba(43, 83, 94, 1) 23%, rgba(32, 44, 47, 1) 100%);
}

.upload_sec {
text-align: center;
position: relative;
/* background-color: rgb(17, 16, 16); */
background: rgb(22, 40, 46);
background: radial-gradient(circle, rgba(22, 40, 46, 1) 23%, rgba(38, 51, 55, 1) 100%);
height: 80vh;
border-radius: 0% 00% 90% 0%;
border-right: 7px solid red;
border-bottom: 3px solid red;
}

.upload_sec div {
position: absolute;
top: 20%;
width: 42vw;
font-size: 20px;
}

.upload_sec div a {
text-decoration: none;
padding: 12px 20px;
margin: 10px 30px;
display: inline-block;
color: white;
border-radius: 24px;
font-size: 19px;
}

#view_papers {
background-color: rgb(213, 213, 250);
color: black;
transition: background-color 0.5s ease-in-out;
}

#view_papers:hover {
background-color: rgb(173, 173, 250);
}

#upload {
background-color: rgb(34, 137, 34);
}

#upload:hover {
transform: scale(1.04);
}

/* ai generating section styling */

#templates {
background-color: rgb(26, 26, 209);
padding: 12px 6px 12px 17px;
border-radius: 18px;
}

.temp_sec {
border-top: 3px solid red;
border-right: 7px solid red;
border-bottom: none;
border-radius: 0% 60% 0% 0%;
text-align: center;
position: relative;
background: rgb(22, 40, 46);
background: radial-gradient(circle, rgba(22, 40, 46, 1) 23%, rgba(38, 51, 55, 1) 100%);
height: 80vh;
}

.temp_sec div {
position: absolute;
top: 20%;
width: 42vw;
font-size: 20px;
}

.temp_sec a {
text-decoration: none;
padding: 12px 20px;
margin: 10px 30px;
display: inline-block;
color: white;
border-radius: 24px;
font-size: 19px;
}

/* generate template section styling */

Expand Down Expand Up @@ -556,4 +452,4 @@ ul {
.footer-col {
width: 100%;
}
}
}
Binary file added public/images/calm.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 283bb87

Please sign in to comment.