diff options
| author | Rishi-k-s <rishikrishna.sr@gmail.com> | 2023-10-05 19:47:06 +0530 |
|---|---|---|
| committer | Rishi-k-s <rishikrishna.sr@gmail.com> | 2023-10-05 19:47:06 +0530 |
| commit | c9cff48e6cc690add4bb9e7e4a915c5dd029d265 (patch) | |
| tree | fd37691c8db87681060807297f9ec43dcfaae53b | |
| parent | a31efb546d88ebcd7ad0e3bd5e02e7e94bd11f8d (diff) | |
Added nav bar
| -rw-r--r-- | index.html | 47 | ||||
| -rw-r--r-- | style.css | 52 |
2 files changed, 72 insertions, 27 deletions
@@ -7,26 +7,33 @@ <title>Portfolio</title>
</head>
<body class="mainBody">
- <div class="divStyle center">
- <img class="roundImage" src="images\20230122_150559-02 (1).jpeg" alt="" height="70px">
- <h1 class= "hugeHeading">Rishi Krishna S</h1>
- <!-- <h4 class="subHeading">Student at CUSAT SOE</h4> -->
- <ul class="HeaderStyle" type = none>
- <!-- we can use type = none or can use css to remove the default style of list -->
- <li>
- About
- </li>
- <li>
- Experience
- </li>
- <li>
- Education
- </li>
- <li>
- Contact
- </li>
+ <div class="headerDivStyle">
+ <div class="div123">
+ <img class="roundImage" src="images\20230122_150559-02 (1).jpeg" alt="" height="70px">
+ <div class="lineStyle"></div>
+ <h1 class= "hugeHeading">Rishi Krishna S</h1>
+ </div>
+
+ <div class="div1234">
+ <!-- <h4 class="subHeading">Student at CUSAT SOE</h4> -->
+ <ul class="divStyle" type = none>
+ <!-- we can use type = none or can use css to remove the default style of list -->
+ <li>
+ About
+ </li>
+ <li></li>
+ Experience
+ </li>
+ <li>
+ Education
+ </li>
+ <li>
+ Contact
+ </li>
+ </ul>
<button class="buttonStyle">Connect!!</button>
- </ul>
+ </div>
+
</div>
<div class="center">
@@ -111,6 +118,6 @@ </a>
</div>
</div>
-
+ <button class="testButton">Njan</button>
</body>
</html>
\ No newline at end of file @@ -1,7 +1,9 @@ *{
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ margin: 0px;
+ padding: 0px;
}
.hugeHeading{
@@ -22,11 +24,6 @@ background-color: #22223b
}
-.HeaderStyle{
- color: antiquewhite;
- margin-top: 0%;
-}
-
.center {
margin: auto;
width: 50%;
@@ -52,4 +49,45 @@ .divStyle{
display: flex;
-}
\ No newline at end of file + color: antiquewhite;
+ justify-content: space-between;
+ width: 50%;
+}
+
+.lineStyle{
+ width: 1px;
+ background-color: aliceblue;
+ height: 60px;
+}
+
+.testButton{
+ padding: 40px;
+}
+
+.headerDivStyle{
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ margin-top: 30px;
+}
+
+.div123{
+ display: flex;
+ margin-left: 20px;
+ align-items: center;
+}
+.div1234{
+ display: flex;
+ width: 50%;
+ justify-content: space-between;
+ align-items: center;
+}
+/* Can give multiple padding to a single padding thing
+syntax=> in cloack wise direction padding:Top Right Bottom Left
+ Margin and padding is very different
+Margin is the object wrt to the whole page and to stand away from each elements
+Padding is for each element, ie if thrs a div with padding and 20px mari nilikula mean that
+form the inside the div the thing moves 40 px fom it
+
+rem for a alternative for px
+*/
\ No newline at end of file |