Skip to content

Commit

Permalink
activity 3 style and class changes to purple
Browse files Browse the repository at this point in the history
  • Loading branch information
@natapokie
natapokie committed Sep 14, 2024
1 parent 30b567f commit e52be0e
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 74 deletions.
122 changes: 59 additions & 63 deletions pra1/assets/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,40 @@
:root {
--purple: #9fa0d2;
--dark-purple: #302c54;
--medium-purple: #7273b1;
--charcoal: #333333;

--white: #fff;
}

body {
color: var(--charcoal);
/* background-color: var(--charcoal); */

font-size: 18px;
}

.typing {
color: var(--purple);
}

.fa {
background-color: var(--medium-purple);
}

.profile-pic {
position: relative;
max-width:130px;
max-height:130px;
max-width: 130px;
max-height: 130px;
width: auto;
height: auto;
overflow: hidden;
/* display: inline-block; */



/* background-size: cover; */
margin: -31px;
margin-left:-7px;
border: 6px solid rgba(0, 77, 64, 0.4);
margin: -31px;
margin-left: -7px;
border: 6px solid var(--purple);
border-radius: 50% !important;
}

Expand All @@ -24,7 +47,7 @@
/* visibility: hidden; */
position: fixed;
/* margin-inline-end: auto; */
bottom: 0;
bottom: 0;
right: 0;
}

Expand All @@ -41,7 +64,7 @@
width: 50px;
height: 50px;
border: 0;
color: #FFFFFF;
color: #ffffff;
cursor: pointer;
font-size: 30px;
line-height: 70px;
Expand All @@ -63,8 +86,8 @@
}

.icon-btn:hover {
transform: scale(1.10);
color: #FFFFFF;
transform: scale(1.1);
color: #ffffff;
}

.linkedin:hover {
Expand All @@ -85,7 +108,7 @@
position: relative;
padding: 11px 35px;
background: #fff;
color: #00796b;
color: var(--dark-purple);
border: 2px solid #fff;
font-weight: 600;
font-size: 15px;
Expand Down Expand Up @@ -115,19 +138,14 @@
-webkit-border-radius: 5px;
}

.contactme:hover{
color: #00796b;
.contactme:hover {
color: var(--medium-purple);
background-color: white;
}
/* main body */

/* body-color */

body {
color: #333;
font-size: 18px;
}

/* body {
color: black;
font-size: 18px;
Expand All @@ -140,32 +158,7 @@ body {
} */

a {
color: #004d40;
}

/* main blockqoute */

/* blockquote {
border-left: 5px solid #795548;
color: #795548;
font-size: 125%;
font-weight: 400;
margin: 20px 0;
padding-left: 1.5rem;
} */

blockquote {
border-left: 5px solid #795548;
color: #795548;
font-size: 125%;
font-weight: 400;
margin: 20px 0;
padding-left: 1.5rem;
}

blockquote * {
font-size: inherit;
line-height: inherit;
color: var(--medium-purple);
}

.text-center {
Expand Down Expand Up @@ -243,7 +236,8 @@ ul.side-nav.fixed a {
padding: 10px 0 12px;
}

ul.table-of-contents li.logo a.active, ul.table-of-contents li.logo a:hover {
ul.table-of-contents li.logo a.active,
ul.table-of-contents li.logo a:hover {
border: none;
font-weight: 200;
}
Expand All @@ -269,12 +263,14 @@ ul.side-nav.fixed li.logo a {
line-height: 100%;
}

ul.table-of-contents li:not(.logo) a.active, ul.table-of-contents li:not(.logo) a:hover {
ul.table-of-contents li:not(.logo) a.active,
ul.table-of-contents li:not(.logo) a:hover {
background-color: #fafafa;
border-left: 3px solid;
}

ul.side-nav.fixed.table-of-contents li:not(.logo) a span, ul#slide-out li:not(.logo) a span {
ul.side-nav.fixed.table-of-contents li:not(.logo) a span,
ul#slide-out li:not(.logo) a span {
color: #333 !important;
}

Expand Down Expand Up @@ -320,7 +316,8 @@ h3 {
} */

#intro.section {
background: #a7ffeb repeat;
background-color: var(--medium-purple);
/* background: #a7ffeb repeat; */
position: relative;
}

Expand Down Expand Up @@ -466,14 +463,8 @@ a.hoverline {
-webkit-transition: 0.25s all;
}

/* main a.hoverline */

/* a.hoverline:hover {
border-bottom: 3px solid #24305e !important;
} */

a.hoverline:hover {
border-bottom: 3px solid #004d40 !important;
border-bottom: 3px solid var(--medium-purple) !important;
}

#skills .card.large {
Expand Down Expand Up @@ -549,7 +540,8 @@ small {
/* main .teal-text */

.teal-text {
color: #008073 !important;
/* color: #008073 !important; */
color: var(--purple) !important;
}

/* .teal-text {
Expand All @@ -559,7 +551,8 @@ small {
/* .teal */

.teal {
background-color: #008073 !important;
/* background-color: #008073 !important; */
background-color: var(--dark-purple) !important;
}

/* .teal {
Expand Down Expand Up @@ -601,8 +594,9 @@ small {
height: 64px;
position: absolute;
}
nav a.button-collapse, nav a.button-collapse i {
color: #009688;
nav a.button-collapse,
nav a.button-collapse i {
/* color: #009688; */
height: 56px;
line-height: 56px;
}
Expand All @@ -627,7 +621,8 @@ small {
width: 100%;
position: absolute;
}
.name-title>span, .name-title>a {
.name-title > span,
.name-title > a {
position: relative;
line-height: 20px;
}
Expand All @@ -639,7 +634,8 @@ small {
display: block;
font-size: 14px;
}
h3, .container {
h3,
.container {
position: relative;
top: 64px;
}
Expand Down Expand Up @@ -691,4 +687,4 @@ small {
#intro.section {
background-position-x: 30%;
}
}
}
17 changes: 6 additions & 11 deletions pra1/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<!-- Custom Styles-->
<link rel="stylesheet" href="./assets/css/style.css" />
<title>Natalie Chan | Software Developer</title>
<link rel="icon" href="./assets/img/favicon/favicon.ico" type="image/x-icon">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126939217-2"></script>
Expand Down Expand Up @@ -121,7 +122,7 @@
<!-- <a aria-label="Open Natalie's resume in a new tab" href="#resume" target="_blank"
onclick="window.open('https://drive.google.com/file/d/1vYi-bMyIsZPve0x_clxY8xsDtiHiOMd3/view?usp=sharing')"
class="waves-effect waves-dark teal-text"><i class="mdi-file-folder-open small"></i><span>Resume</span></a> -->
<a aria-label="Open Natalie's resume in a new tab" href="https://NatalieChan.github.io/assets/resume/Natalie_Chan_Resume.pdf" target="_blank"
<a aria-label="Open Natalie's resume in a new tab" href="./assets/resume/Natalie_Chan_Resume.pdf" target="_blank"
class="waves-effect waves-dark teal-text"><i class="mdi-file-folder-open small"></i><span>Resume</span></a>
</li>
</ul>
Expand Down Expand Up @@ -184,19 +185,19 @@
<div class="content section-padding valign" style="margin-left: 10%; margin-top: 50px;">
<div class="caption">
<h2>Hi, I'm <span class="teal">Natalie Chan.</span></h2>
<h5 style="color:#fff">A <span class="typing" style="font-weight: 300; color:#004d40"></span></h5>
<h5 style="color:#fff">A <span class="typing" style="font-weight: 300;"></span></h5>
<!-- <h5 style="color:#00796b">A <span class="typing" style="font-weight: 300; color:#fff"></span></h5> -->
<h5>Self-driven, quick starter, passionate programmer with a curious mind who enjoys solving a complex and challenging real-world problems.</h5>
</div>
<div class="social">
<a href="http://linkedin.com/in/natalieannachan" target="_blank">
<button class="icon-btn linkedin">
<i class="fa fa-linkedin"></i>
<i class="fa fa-linkedin" style="background-color: unset !important;"></i>
</button>
</a>
<a href="https://github.com/natapokie/" target="_blank">
<button class="icon-btn github">
<i class="fa fa-github"></i>
<i class="fa fa-github" style="background-color: unset !important;"></i>
</button>
</a>

Expand Down Expand Up @@ -226,13 +227,7 @@ <h5>Self-driven, quick starter, passionate programmer with a curious mind who en
<!-- Second Section: About -->
<section id="about" class="section scrollspy">
<h3 class="page-title white-text teal">About</h3>
<div class="container flow-text">
<!-- <blockquote>
<h2>
A Software Developer with a passion for Backend Development and Artificial Intelligence.
</h2>
</blockquote> -->
<div class="container flow-text">
<p>
I am a Computer Engineering student at the University of Toronto.

Expand Down

0 comments on commit e52be0e

Please sign in to comment.