New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
re-designed header and nav bar #175
Changes from 2 commits
6ea498a
ba1f211
3ca51d8
62887eb
6abed25
7044079
1cb4267
32486c3
0a20895
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,7 +2,180 @@ | |
box-sizing: border-box; | ||
} | ||
|
||
.container { | ||
/* Arnab's code */ | ||
body { | ||
margin: 0; | ||
} | ||
.first-screen { | ||
background-color: #041187; | ||
width: 100%; | ||
} | ||
.first-screen header { | ||
position: relative; | ||
height: 30%; | ||
display: flex; | ||
flex-flow: row wrap; | ||
justify-content: space-between; | ||
} | ||
#logo { | ||
width: 5em; | ||
height: 5em; | ||
position: relative; | ||
top: 1.5em; | ||
left: 3em; | ||
} | ||
.main-nav { | ||
width: 44%; | ||
height: 1.6em; | ||
position: relative; | ||
top: 1.3em; | ||
display: flex; | ||
align-self: center; | ||
font-family: 'roboto'; | ||
justify-content: space-between; | ||
flex-wrap: nowrap; | ||
} | ||
.nav-text { | ||
color: #fff; | ||
text-decoration: none; | ||
font-size: 1.08em; | ||
} | ||
a.nav-text.welcome { | ||
color: #88d870; | ||
border-bottom: 0.12em solid #88d870; | ||
} | ||
.sign-in-button { | ||
width: 16em; | ||
height: 2.5em; | ||
text-align: center; | ||
background-color: #041187; | ||
color: #fff; | ||
border: 0.2em solid #fff; | ||
border-radius: 0.6em; | ||
position: relative; | ||
top: 2.8em; | ||
right: 3em; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
#gitButtonLogo { | ||
width: 1.5em; | ||
height: 1.7em; | ||
position: relative; | ||
left: 0.5em; | ||
border-radius: 20%; | ||
} | ||
div.heading-container { | ||
flex-direction: column; | ||
display: inline-block; | ||
position: relative; | ||
top: 5em; | ||
left: 2em; | ||
} | ||
#first-line { | ||
font-size: 4.3em; | ||
line-height: -3em; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What is thr purpose of negetive libe height There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I have removed the line-height attribute, thank you for your review! |
||
width: 9em; | ||
height: 1em; | ||
display: inline-block; | ||
position: relative; | ||
top: 0.8em; | ||
left: 0.8em; | ||
} | ||
#welcome-text { | ||
font-family: 'raleway'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is there a way we can wrap a div with a font family instead of repetition There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yes, there is definitely, and I am done correcting it. Thankyou! |
||
color: #e30062; | ||
} | ||
#to-the-text { | ||
font-family: 'raleway'; | ||
color: #fff; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. use shorthand for font here too. |
||
font-weight: 400; | ||
} | ||
#real-dev-squad-text { | ||
color: #fff; | ||
font-family: 'raleway'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. shorthand for font here too |
||
font-weight: 700; | ||
font-size: 2.3em; | ||
line-height: 0.6em; | ||
position: relative; | ||
left: 0.8em; | ||
top: 1.2em; | ||
} | ||
.handles-container { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
justify-content: space-between; | ||
height: 2em; | ||
width: 32em; | ||
position: relative; | ||
left: 5em; | ||
top: 6.9em; | ||
} | ||
.social-handles { | ||
font-family: 'roboto'; | ||
font-weight: 500; | ||
margin: 0; | ||
text-decoration: none; | ||
color: #fff; | ||
} | ||
.handles-logos { | ||
position: relative; | ||
bottom: 3px; | ||
left: -5px; | ||
} | ||
.separator { | ||
height: 1.5em; | ||
width: 0.2em; | ||
position: relative; | ||
bottom: 0.2em; | ||
} | ||
.welcome-image { | ||
width: 34%; | ||
height: 30%; | ||
float: right; | ||
position: relative; | ||
left: -6em; | ||
top: 4em; | ||
margin-bottom: 10em; | ||
} | ||
.news-feeds-container { | ||
width: 76%; | ||
height: 3.5rem; | ||
position: relative; | ||
top: -2em; | ||
left: 10em; | ||
border-radius: 0.6em; | ||
background-color: #fff; | ||
display: flex; | ||
justify-content: space-evenly; | ||
align-items: center; | ||
font-family: 'poppins'; | ||
font-size: 1em; | ||
box-sizing: border-box; | ||
} | ||
.new { | ||
width: 5rem; | ||
height: 2.8rem; | ||
background: linear-gradient(130deg, #f3036b, #dc7faf, #e30062); | ||
color: #091133; | ||
font-family: 'poppins'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Please use shorthand for font There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
I have corrected the code and used short-hand wherever possible. In some places using font short-hand is leading to repetition of code, so I have left those sections unchanged! |
||
font-size: 1.05rem; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
border-radius: 0.4em; | ||
} | ||
#check-them-out { | ||
font-size: 1.1em; | ||
} | ||
#arrow-icon { | ||
position: relative; | ||
right: 3.5rem; | ||
height: 2em; | ||
} | ||
/* .container { | ||
width: 750px; | ||
text-align: center; | ||
font-size: 1.5rem; | ||
|
@@ -59,4 +232,4 @@ | |
.logo-img { | ||
margin: 0; | ||
} | ||
} | ||
} */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Kindly leave one line after writing CSS for a class/id. Code will not look crowded that way! 😃
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don't comment that it is our code
GitHub lens automatically mentions in whose comments these changes are committed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Harshith actually we kept the old css for now we will remove it while integrating all the components of the screen
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am mentioning line 5 here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have corrected the code.