Skip to content
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.

Sign up for GitHub

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

Cheetahs-Wanjun Lan #97

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Cheetahs-Wanjun Lan #97

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
78b128a
homepage outline with css and flexbox
wjlan Nov 18, 2022
237f23d
body font-size adjustment
wjlan Nov 18, 2022
f80bb07
Draft page About with Grid
wjlan Nov 20, 2022
e3c024b
minor change about Home page
wjlan Nov 20, 2022
58e9b61
About page completed
wjlan Nov 21, 2022
a7b576f
Portolio drafted
wjlan Nov 22, 2022
2181353
Basically completed
wjlan Nov 22, 2022
32dd774
checked by HTML validator
wjlan Nov 22, 2022
6fc2a3d
adjust the relative view
wjlan Nov 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
homepage outline with css and flexbox
  • Loading branch information
@wjlan
wjlan committed Nov 18, 2022
commit 78b128a85c3ddb2cdf5e82ad754262d479143fa9
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5502
}
Binary file added assets/Wanjun Lan_profile_photo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 34 additions & 1 deletion pages/index.html
View file
Original file line number Diff line number Diff line change
@@ -4,9 +4,42 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>Wanjun's homepage</title>
<link href="styles/style.css" rel=Stylesheet>
</head>
<body>
<header>
<div id="home-header"><h1> WANJUN LAN </h1></div>
<div class="image"></div>
<nav>
<ul class="home-container">
<li><a href="/index.html">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/portfolio.html">Portfolio</a></li>
</ul>
</nav>
</header>
<main>
<article>
<section class="main-container">
<div>
<a href="/about.html">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This link also does not work because it is an absolute path instead of a relative path. Please see the comment above about absolute vs relative.

<img id="Wanjun_photo" alt='wanjun profile image' src="../assets/Wanjun Lan_profile_photo.png">
</a>
</div>
<div class="homepage-wrapper">
<p>Hi, I'm Wanjun.</p>
<p>I'm currently a software engineer student at Ada Developers Academy. I used to be a scientific researcher in biotech. Welcome to my homepage!</p>
<p>Intrigued by travelling, photography, music, logic thinking, programming, fabulous food and even better conversations.</p>
<p>Seeking to be inspired, to envision the unlikely, to work hard for things that are worth it, and to be surrounded by those who bring out the best in me.</p>
</div>
</section>
</article>
</main>
<footer>
<p class="copyright">&copy Copyright 2022</p>
</footer>


</body>
</html>
79 changes: 79 additions & 0 deletions pages/styles/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
#home-header {
font-size: 2.5rem;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
color:rgb(106, 135, 135);
text-align: center;
padding:40px;
padding-bottom: 80px;

background-image: url(https://images.rawpixel.com/image_1000/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcm0zMDUtbnVubnktMDZhLWwuanBn.jpg);
background-origin: content-box;
}


header ul {
list-style-type: none;
}

body{
font-size:20px;
line-height:1.75;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

#Wanjun_photo{
width: 200px;
height: 210px;
border-radius: 70%;
}

a {
color:dimgray;
}

a:hover {
color:lightgray;
}

a {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is already an a CSS style rule on line 63. These rules can be added there to make things DRY.

text-decoration: None;
}

.home-container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
font-size: 2em;
padding-bottom: 30px;
}

.main-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}


.main-container>div:nth-child(2) {
color:rgb(47, 62, 148);
font-size: 1em;
}

footer {
position: relative;
height: 300px;
width: 95%;
}
p.copyright {
position: absolute;
width: 95%;
line-height: 10px;
text-align: right;
bottom:0;
}