-
Notifications
You must be signed in to change notification settings - Fork 93
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
Cedar - Makhabat M. #65
base: master
Are you sure you want to change the base?
Changes from all commits
b420107
17096a3
dc17229
2cb9d24
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 |
---|---|---|
|
@@ -4,9 +4,53 @@ | |
<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>About Me</title> | ||
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> | ||
<link rel="stylesheet" href="../stylesheets/about.css"> | ||
</head> | ||
<body> | ||
|
||
<div class="container"> | ||
<header class="header"> | ||
<div class="logo"> | ||
<a href="../pages/index.html"> <img src="../images/MM Logo.png" alt="logo"></a> | ||
</div> | ||
<nav class="nav"> | ||
<div class="nav_home"><a href="../pages/index.html">Home</a></div> | ||
<div class="nav_about"><a href="../pages/about.html">About</a></div> | ||
<div class="nav_portfolio"><a href="../pages/portfolio.html">Portfolio</a></div> | ||
<div class="nav_contact"><a href="../pages/contact.html">Contact</a></div> | ||
</nav> | ||
</header> | ||
<main class="main"> | ||
|
||
<section class="about_me"> | ||
<h1>Passion</h1> | ||
<h3>Software Engineering</h3> | ||
<img src="../images/bug.jpeg" alt="Alay_Valley"> | ||
</section> | ||
|
||
<section class="my_hobbie"> | ||
<h1>My hobbies</h1> | ||
<h3>Running, reading books, hiking</h3> | ||
<img src="../images/Running.jpeg" alt="Alay_Valley"> | ||
</section> | ||
|
||
<section class="my_country"> | ||
<h1>Kyrgyzstan - my home country.</h1> | ||
<img src="../images/Alay_Valley.jpeg" alt="Alay_Valley"> | ||
<h3>Tulpar-Kol Lake in the Alay Valley of southern Kyrgyzstan</h3> | ||
</section> | ||
</main> | ||
<footer class="footer"> | ||
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. This footer is in the middle of your portfolio page. There are many different ways to apply styles to move it to the bottom. Consider the approach you would like to take here. |
||
<div class="footer-icons"> | ||
<a href="#"><i class="fa fa-facebook"></i></a> | ||
<a href="#"><i class="fa fa-twitter"></i></a> | ||
<a href="#"><i class="fa fa-instagram"></i></a> | ||
<a href="#"><i class="fa fa-linkedin"></i></a> | ||
<a href="#"><i class="fa fa-youtube"></i></a> | ||
</div> | ||
<p>2021 ©</p> | ||
</footer> | ||
</div> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<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>Contact me</title> | ||
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> | ||
<link rel="stylesheet" href="../stylesheets/index.css"> | ||
<style> | ||
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. In general, we prefer including styles in a separate style sheet. |
||
body::-webkit-scrollbar { | ||
display: none; | ||
} | ||
body a:link{ | ||
text-decoration: none; | ||
} | ||
.main { | ||
background-image: url('https://image.freepik.com/free-vector/flat-customer-support-illustration_23-2148899114.jpg'); | ||
background-repeat: no-repeat; | ||
background-size:cover; | ||
height: 90vh; | ||
} | ||
.main h3{ | ||
color: indigo; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div class="container"> | ||
<header class="header"> | ||
<div class="logo"> | ||
<a href="../pages/index.html"> <img src="../images/MM Logo.png" alt="logo"></a> | ||
</div> | ||
<nav class="nav"> | ||
<div class="nav_home"><a href="../pages/index.html">Home</a></div> | ||
<div class="nav_about"><a href="../pages/about.html">About</a></div> | ||
<div class="nav_portfolio"><a href="../pages/portfolio.html">Portfolio</a></div> | ||
<div class="nav_contact"><a href="../pages/contact.html">Contact</a></div> | ||
</nav> | ||
</header> | ||
<main class="main"> | ||
<h3>My Github: <a href="https://github.com/makhabatmaksatbekova" target="_blank">github.com/makhabatmaksatbekova</a></h3> | ||
<h3>My Email: [email protected]</h3> | ||
</main> | ||
<footer class="footer"> | ||
<div class="footer-icons"> | ||
<a href="#"><i class="fa fa-facebook"></i></a> | ||
<a href="#"><i class="fa fa-twitter"></i></a> | ||
<a href="#"><i class="fa fa-instagram"></i></a> | ||
<a href="#"><i class="fa fa-linkedin"></i></a> | ||
<a href="#"><i class="fa fa-youtube"></i></a> | ||
</div> | ||
<p>2021 ©</p> | ||
</footer> | ||
</div> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,9 +4,37 @@ | |
<meta charset="UTF-8"> | ||
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. It is a convention to include index.html at the project root level and additional pages in a directory such as |
||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Document</title> | ||
<title>Makhabat's portfolio</title> | ||
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> | ||
<link rel="stylesheet" href="../stylesheets/index.css"> | ||
</head> | ||
<body> | ||
|
||
<div class="container"> | ||
<header class="header"> | ||
<div class="logo"> | ||
<a href="../pages/index.html"> <img src="../images/MM Logo.png" alt="logo"></a> | ||
</div> | ||
<nav class="nav"> | ||
<div class="nav_home"><a href="../pages/index.html">Home</a></div> | ||
<div class="nav_about"><a href="../pages/about.html">About</a></div> | ||
<div class="nav_portfolio"><a href="../pages/portfolio.html">Portfolio</a></div> | ||
<div class="nav_contact"><a href="../pages/portfolio.html">Contact</a></div> | ||
</nav> | ||
</header> | ||
<main class="main"> | ||
<h1>Hello, I am Makhabat</h1> | ||
<h3>I am a Software Developer</h3> | ||
</main> | ||
<footer class="footer"> | ||
<div class="footer-icons"> | ||
<a href="#"><i class="fa fa-facebook"></i></a> | ||
<a href="#"><i class="fa fa-twitter"></i></a> | ||
<a href="#"><i class="fa fa-instagram"></i></a> | ||
<a href="#"><i class="fa fa-linkedin"></i></a> | ||
<a href="#"><i class="fa fa-youtube"></i></a> | ||
</div> | ||
<p>2021 ©</p> | ||
</footer> | ||
</div> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
body{ | ||
margin: 0; | ||
text-align: center; | ||
color: white; | ||
background-color: black; | ||
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | ||
} | ||
.container{ | ||
display: grid; | ||
grid-template-areas: | ||
"header header header header header" | ||
"main main main main main" | ||
"main main main main main" | ||
"main main main main main" | ||
"footer footer footer footer footer"; | ||
grid-template-columns: 1fr 1fr 2fr 1fr 1fr; | ||
grid-template-rows: 0.3fr 1fr 2fr 1fr 0.4fr; | ||
} | ||
body::-webkit-scrollbar { | ||
display: none; | ||
} | ||
.header{ | ||
grid-area: header; | ||
display: grid; | ||
grid-template-areas: | ||
"logo . . nav nav"; | ||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ; | ||
align-items: center; | ||
} | ||
.logo{ | ||
grid-area: logo; | ||
width:8rem; | ||
cursor: pointer; | ||
} | ||
.logo img{ | ||
width:100%; | ||
} | ||
.nav{ | ||
grid-area: nav; | ||
display: flex; | ||
justify-content: space-evenly; | ||
} | ||
.nav div{ | ||
border: 1px solid black; | ||
} | ||
.nav div a:link{ | ||
color: white; | ||
text-decoration: none; | ||
} | ||
.nav div a:visited{ | ||
color: white; | ||
text-decoration: none; | ||
} | ||
.nav div a:hover{ | ||
color: gray; | ||
text-decoration: none; | ||
} | ||
.main{ | ||
grid-area: main; | ||
display: grid; | ||
grid-template-areas: | ||
"me me me . ." | ||
". . hobbie hobbie hobbie" | ||
"country country country . ."; | ||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; | ||
grid-template-rows: 1fr 1fr 1fr; | ||
|
||
} | ||
.about_me{ | ||
grid-area:me; | ||
} | ||
.my_hobbie{ | ||
grid-area:hobbie; | ||
} | ||
.my_country{ | ||
grid-area:country; | ||
} | ||
.main img{ | ||
width: 100%; | ||
} | ||
.footer{ | ||
grid-area: footer; | ||
align-self: center; | ||
} | ||
.footer-icons a{ | ||
display: inline-block; | ||
width: 35px; | ||
height: 35px; | ||
cursor: pointer; | ||
background-color: #33383b; | ||
border-radius: 2px; | ||
font-size: 20px; | ||
color: #ffffff; | ||
text-align: center; | ||
line-height: 35px; | ||
} |
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.
In general we don't want to skip from an h1 to and h3. We can use a class name to apply the styling we are looking for.