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

Cedar - Makhabat M. #65

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
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
Binary file added images/Alay_Valley.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/ColorGame280x240.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/Gmail-Clone-with-ReactJS.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/MM Logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/Running.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/background_image.webp
Binary file not shown.
Binary file added images/bug.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/portfolio.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/todolist-project.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 46 additions & 2 deletions pages/about.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

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.

Suggested change
<h3>Software Engineering</h3>
<h2 class="passion-detail">Software Engineering</h2>

<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">

Choose a reason for hiding this comment

The 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 &copy;</p>
</footer>
</div>
</body>
</html>
57 changes: 57 additions & 0 deletions pages/contact.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>

Choose a reason for hiding this comment

The 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 &copy;</p>
</footer>
</div>
</body>
</html>
32 changes: 30 additions & 2 deletions pages/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,37 @@
<meta charset="UTF-8">

Choose a reason for hiding this comment

The 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 pages

<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 &copy;</p>
</footer>
</div>
</body>
</html>
95 changes: 93 additions & 2 deletions pages/portfolio.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,100 @@
<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>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/portfolio.css">
<!-- <style>
.main{
background-color:whitesmoke;
background-image: none;
color: #000;
}
.content{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap:20px;
height: 10rem;
}
.content div{
border: 1px solid black;
width:40%;
height: 100%;
border-radius: 6px;
box-shadow:2px 4px 4px 4px grey;
align-items: center;

}
.content div:hover{
box-shadow:4px 6px 6px 6px grey;
cursor: pointer;

} -->
</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">
<h1>Portfolio</h1>
<div class="content">
<div class="box">
<div class="imgwrap">
<a href="https://github.com/makhabatmaksatbekova/personal-portfolio-site">
<img src="../images/portfolio.png" alt="Alay_Valley">
<h4>Personal portfolio</h4>
</a>
</div>

</div>
<div class="box">
<div class="imgwrap">
<a href="https://github.com/makhabatmaksatbekova/my-mail">
<img src="../images/Gmail-Clone-with-ReactJS.jpg" alt="Alay_Valley">
<h4>Gmail clone</h4>
</a>
</div>
</div>
<div class="box">
<div class="imgwrap">
<a href="https://github.com/makhabatmaksatbekova/Simple_TODO_on_jQUERY">
<img src="../images/todolist-project.jpg" alt="Alay_Valley">
<h4>TO_DO_LIST on jQuery</h4>
</a>
</div>
</div>
<div class="box">
<div class="imgwrap">
<a href="https://github.com/makhabatmaksatbekova/RGB-COLOR_GUESSING-Game">
<img src="../images/ColorGame280x240.jpg" alt="Alay_Valley">
<h4>RGB-COLOR_GUESSING-Game</h4>
</a>
</div>
</div>
</div>
</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 &copy;</p>
</footer>
</div>
</body>
</html>
96 changes: 96 additions & 0 deletions stylesheets/about.css
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;
}
Empty file added stylesheets/contact.css
Empty file.
Loading