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.

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

first draft #13

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
changed font to google font 'pacifico
  • Loading branch information
Ethanng329 committed Jun 3, 2018
commit bb6d3331398388851550826b1063d08dccdd39a4
85 changes: 67 additions & 18 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,31 +1,80 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<style>
div{
width: auto;
border: 5px solid grey;
padding: 25px;
margin: 140px;
align-items: centre;
border-radius: 10%;
border-style: dotted;

}

body {
background-image: url(https://images.unsplash.com/photo-1491183672482-d0af0e44929d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e041b3a3488b7dd2d028c7350c7c6ee1&auto=format&fit=crop&w=2250&q=80);
font-family: 'pacifico',cursive ;
font-size: 24px;
}

.center {
align-content:center;
margin-left: 500px;
margin-right: auto;
margin-top: auto;
width: 50%;
padding: 50px;
border: 1px;

}

.fa {
padding: 20px;
font-size: 30px;
width: 50px;
padding: 7px;
font-size: 40px;
width: 40px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.fa-twitter {
background: #55ACEE;
color: white;
}

.fa:hover {
opacity: 0.7;
}
.fa-linkedin {
background: #007bb5;
color: white;
}

.border{
border-color: orange;
border-width: 13px;
border-color: silver;
border-width: 10px;
border-style: groove;
border-radius: 50%;
}

.smaller-image {
width: 150px;
width: auto;
}
.textstyle {
font-family: 'pacifico' serif ;
font-size: 48px,
}

.text-centre{
text-align: center;
margin-left: 300px;
margin-right: 300px;
margin-top: auto;
margin-bottom: auto;
}

#biobackground{
background-color: grey;
}
#contactbackground{
background-color: blue;
@@ -34,22 +83,22 @@
<head>
<title>Ethan's homepage</title>
</head>
<body>

<div >
<body >

<div class="center">
<img class = "border smaller-image" src ="https://lh3.googleusercontent.com/-ElOBNqFrvms/VAtaXHVGXEI/AAAAAAAAAE0/FH7dxpYX7T8myEBEmf2HSYA6JjxAbKGsQCEwYBhgL/w278-h280-p/c24dbf37-c1f9-4a18-8daf-bcb9380ace51" alt="photo of myself">
</div>
<div id="biobackground">
<div id="biobackground" class="text-centre textstyle">
<h1>Hi my name is Ethan, thank you for visitng this page </h1>
<h2> more about me:</h2>
<h3> I am a new beginner in web design and working on becoming a software engineer in the near future.
I am always happy to learn new skills to make things work better. London based, immigrant from Hong Kong,
worked in various roles in the NHS for the last 10 years. Cyclist, cycle everywhere in London.</h3>
<h3> I am a beginner in web design and working towards becoming a software engineer in the near future.
I am always happy to learn new skills to make things work better. Born in Hong Kong and currently based in London,
worked in various roles in the NHS for the last 10 years. Keen cyclist, cycle everywhere in London.</h3>
</div>
<div >
<img class = "smaller-image" src= "https://images.unsplash.com/photo-1526007294207-6a0c9d171fdf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b82bbdf07ca4ab7a9f61da2b591a8437&auto=format&fit=crop&w=2849&q=80" alt="background photo">
<p>see what I read/tweet about:@ethanng329 <a href="https://twitter.com/Ethanng329" class="fa fa-twitter"></a></p>
<p>see what I have studied and my work in the past: <a href="https://www.linkedin.com/in/ethan-ng-654b94164/" class="fa fa-linkedin"</a></p>
<div>
<h4>see what I read/tweet about:@ethanng329 <a href="https://twitter.com/Ethanng329" class="fa fa-twitter"></a></h4>
<h4>see what I have studied and my work in the past: <a href="https://www.linkedin.com/in/ethan-ng-654b94164/" class="fa fa-linkedin"></a></h4>
</div>

</body>