Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

London10 - Yulia - Html-Css-CourseWork-Week4 #296

Open
Yuliya110692 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

London10 - Yulia - Html-Css-CourseWork-Week4 #296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
94 changes: 92 additions & 2 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,93 @@
/* Add your CSS here */
* {
font-family: 'Quicksand', sans-serif;
}

/* Dont' forget to link this file to your HTML in the <head> */
.logo {
width: 17px;
height: 17px;
background-color: #0150FD;
border: 1px solid;
margin-left: 50px;
margin-right: 10px;
}

.custom-nav {
display: flex;
align-items: center;
font-size: 18px;
}

.nav-items--left {
font-size: 22px;
}

.nav-items--right {
display: flex;
margin-left: auto;
}

.nav-link {
margin-right: 50px;
}

.name {
font-family: 'Poppins', sans-serif;
font-size: 30px;
}

main {
background-color: antiquewhite;
margin-top: 6rem;
margin-bottom: 6rem;
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
}

.info-section {
width: 25rem;
height: 35rem;
display: flex;
flex-direction: column;
justify-content: center;
}

.picture-section {
background-color: #f4ece6;
margin-right: 3rem;
width: 36rem;
height: 35rem;
border: 1px solid grey;
display: flex;
flex-direction: column;
align-items: center;
}

#profile-image {
width: 8rem;
height: 8rem;
border-radius: 50%;
margin-top: 2rem;
}

#person-name {
font-size: 1.8rem;
font-weight: bolder;
}

#person-job {
font-size: 1.8rem;
margin-bottom: 8rem;
}

.footer-icons img {
width: 2rem;
height: 2rem;
}

footer {
display: flex;
margin-left: 4rem;
margin-top: 5rem;
}
48 changes: 40 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,49 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Add a link to your custom CSS here -->

<title>Responsive grid project</title>
<link rel="stylesheet" href="./css/main.css">
<title>My Portfolio</title>
</head>

<body>
<header>
<nav class="custom-nav">
<div class="logo"></div>
<div class="nav-items nav-items--left"><span class="name">John Doe</span> / WEB DEVELOPER</div>
<div class="nav-items nav-items--right">
<div class="nav-link"><a href="#">About Me</a></div>
<div class="nav-link"><a href="#">Resume</a></div>
<div class="nav-link"><a href="#">Projects</a></div>
<div class="nav-link"><a href="#">Contact</a></div>
</div>
</nav>
</header>

<!-- Add your markup here -->

<main>
<div class="info-section">
<div id="title">Hello</div>
<p id="subtitle">Here's who I am & what I do</p>
<div>
<p>I'm a passionate software developer with a strong focus on web development. I have experience working with HTML, CSS, and JavaScript, and I enjoy creating dynamic and interactive websites. I'm also proficient in various frameworks and libraries, such as React and Angular.</p>
<br>
<p>I'm constantly seeking opportunities to enhance my skills and stay up-to-date with the latest technologies in the industry. I love problem-solving and collaborating with teams to create innovative solutions that meet the needs of users.</p>
</div>
</div>
<div class="picture-section">
<img id="profile-image" src="https://static.wixstatic.com/media/2e2a49_bd3a1599bc1b4265a01b2754b99b8536~mv2_d_5760_3840_s_4_2.jpeg/v1/crop/x_2703,y_43,w_2199,h_2205/fill/w_205,h_205,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/AdobeStock_230407429.jpeg" alt="Profile Image">
<p id="person-name">Maya <br>Nelson</p>
<hr style="width: 28%">
<p id="person-job">WEB DEVELOPER</p>
<div class="footer-icons">
<a href="#"><img src="https://static.wixstatic.com/media/0fdef751204647a3bbd7eaa2827ed4f9.png/v1/fill/w_25,h_25,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/0fdef751204647a3bbd7eaa2827ed4f9.png"></a>
<a href="#"><img src="https://static.wixstatic.com/media/c7d035ba85f6486680c2facedecdcf4d.png/v1/fill/w_25,h_25,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/c7d035ba85f6486680c2facedecdcf4d.png"></a>
<a href="#"><img src="https://static.wixstatic.com/media/6ea5b4a88f0b4f91945b40499aa0af00.png/v1/fill/w_25,h_25,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/6ea5b4a88f0b4f91945b40499aa0af00.png"></a>
</div>
</div>
</main>

<!-- Please leave this in to credit the creators of this design -->
<p>This website design was created by Wix.com, and is used here for strictly educational purposes.</p>
<footer>
<p>This website design was created by Wix.com,<br> and is used here for strictly educational purposes.</p>
</footer>
</body>

</html>
</html>