Skip to content

Commit

Permalink
edited the mobile version
Browse files Browse the repository at this point in the history
  • Loading branch information
Emy committed Jul 9, 2024
1 parent a59f8ec commit cdc56b4
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 7 deletions.
26 changes: 20 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,36 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fulop Emy - Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
crossorigin="anonymous" referrerpolicy="no-referrer"/>
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="style.css">

</head>
<body>
<nav>
<div>
<h3>
<a href="#" class="name">Fulop Emy</a>
</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200" viewBox="00 0 238 60" fill="none">
<path d="M77.2685 18.2061L85.5868 47.9056H79.764L77.9703 41.2972H67.4944L65.7008 47.9056H59.8779L68.1963 18.2061L77.2685 18.2061ZM76.6186 36.1801L72.9793 22.8603H72.4594L68.8201 36.1801H76.6186Z" fill="white"/>
<path d="M96.8697 26.2542C102.796 26.2542 106.488 29.5198 107.58 34.3026L102.251 35.6655C101.861 33.1198 100.197 31.0112 96.9217 31.0112C93.6723 31.0112 91.1768 33.5569 91.1768 37.3883C91.1768 41.1939 93.4384 43.7396 96.9217 43.7396C100.171 43.7396 101.679 41.8625 102.251 39.1111L107.58 40.4225C106.54 45.2053 102.822 48.471 96.8697 48.471C90.6829 48.471 85.7959 43.8939 85.7959 37.3626C85.8219 30.8312 90.7089 26.2542 96.8697 26.2542Z" fill="white"/>
<path d="M120.241 26.2542C125.908 26.2542 129.885 29.5198 129.885 34.6112V47.9053H124.556V44.9482H123.958C123.282 46.3367 121.774 48.5224 117.277 48.5224C112.468 48.5224 109.297 45.9767 109.297 41.9397C109.297 38.5968 112.26 36.2569 116.341 35.8197L124.478 34.9197V34.2512C124.478 32.2969 123.022 30.5998 120.007 30.5998C117.017 30.5998 115.302 32.2969 114.184 34.6626L109.817 32.0398C111.506 29.6227 114.574 26.2542 120.241 26.2542ZM118.629 44.0739C122.398 44.0739 124.504 41.8625 124.504 38.9826V38.4683L117.979 39.2397C115.952 39.4968 114.99 40.3968 114.99 41.6054C114.964 43.0711 116.211 44.0739 118.629 44.0739Z" fill="white"/>
<path d="M155.228 47.9056H149.899V44.9485H149.301C148.183 46.7228 146.285 48.5228 142.516 48.5228C137.187 48.5228 132.742 43.8686 132.742 37.4144C132.742 30.9602 137.213 26.3059 142.516 26.3059C146.285 26.3059 148.183 28.0802 149.301 29.8802L149.821 29.8802V18.2061H155.228V47.9056ZM138.149 37.3886C138.149 41.4514 140.723 43.74 143.972 43.74C147.325 43.74 149.795 41.3743 149.795 37.3886C149.795 33.403 147.299 31.0116 143.972 31.0116C140.723 31.0116 138.149 33.3001 138.149 37.3886Z" fill="white"/>
<path d="M168.927 26.2542C175.113 26.2542 179.272 30.5484 179.272 36.8483V38.854H163.78C163.988 41.7339 166.015 43.8939 169.109 43.8939C172.098 43.8939 173.71 42.2482 174.437 40.7568L178.857 43.3025C177.401 45.5139 174.905 48.471 169.212 48.471C162.87 48.471 158.269 43.7139 158.269 37.1826C158.243 30.8312 162.662 26.2542 168.927 26.2542ZM173.788 35.3055C173.476 32.5541 171.682 30.8569 168.901 30.8569C165.859 30.8569 164.169 32.6312 163.832 35.3055H173.788Z" fill="white"/>
<path d="M187.617 26.846V29.9831H188.215C189.125 27.9517 190.866 26.5117 193.83 26.5117C196.585 26.5117 198.587 27.9517 199.497 30.086H200.095C201.03 28.1317 202.746 26.5117 206.151 26.5117C210.051 26.5117 213.196 29.4431 213.196 33.8145V47.9057H207.789V34.2516C207.789 32.2974 206.385 31.1917 204.306 31.1917C202.07 31.1917 200.432 32.4516 200.432 35.1002V47.9057H195.026V34.2516C195.026 32.2974 193.622 31.1917 191.542 31.1917C189.307 31.1917 187.695 32.4516 187.695 35.1002V47.9057H182.288V26.8717H187.617V26.846Z" fill="white"/>
<path d="M237.423 26.8455L225.752 56.365H219.929L222.918 49.2423L214.08 26.8455H219.903L225.466 41.9395H225.986L231.549 26.8455H237.423Z" fill="white"/>
<path d="M17.2996 47.4156C10.6969 42.2213 6.90169 34.4557 6.90169 26.1244C6.90169 24.1959 7.10965 22.293 7.49957 20.4416C7.68154 19.5417 7.52557 18.6417 7.03167 17.896C6.53776 17.1245 5.75792 16.6103 4.8741 16.4303C3.02847 16.0446 1.18283 17.2017 0.792912 19.0531C0.299011 21.3416 0.0390625 23.733 0.0390625 26.1244C0.0390625 36.5386 4.77012 46.2327 13.0365 52.7383C13.6343 53.2269 14.3882 53.4841 15.168 53.4841C16.2338 53.4841 17.1956 53.0212 17.8455 52.1984C19.0413 50.7327 18.7813 48.5727 17.2996 47.4156Z" fill="white"/>
<path d="M34.4053 7.58569C24.0594 7.58569 15.6631 15.8913 15.6631 26.1254C15.6631 36.3596 24.0594 44.6652 34.4053 44.6652C44.7513 44.6652 53.1476 36.3596 53.1476 26.1254C53.1476 15.8913 44.7513 7.58569 34.4053 7.58569ZM46.285 26.1254C46.285 32.6053 40.956 37.8767 34.4053 37.8767C27.8547 37.8767 22.5257 32.6053 22.5257 26.1254C22.5257 19.6455 27.8547 14.3742 34.4053 14.3742C40.956 14.3742 46.285 19.6455 46.285 26.1254Z" fill="white"/>
<path d="M9.60497 11.2627C12.7503 11.2627 15.2978 8.74274 15.2978 5.63135C15.2978 2.51997 12.7244 0 9.60497 0C6.4856 0 3.91211 2.51997 3.91211 5.63135C3.91211 8.74274 6.4596 11.2627 9.60497 11.2627Z" fill="white"/>
</svg>
<!-- <a href="#" class="name">Fulop Emy</a>-->
</div>
<div>
<div class="navbar2">
<a href="#" class="navRight">Home</a>
<a href="#" class="navRight">About Me</a>
<a href="#" class="navRight">Projects</a>
<a href="#about" class="navRight">About Me</a>
<a href="#recent" class="navRight">Projects</a>
<a href="#" class="navRight">Contact</a>
</div>
</nav>
Expand All @@ -43,13 +55,15 @@ <h2 class="haboutme">About me</h2>
href="https://io-academy.uk/courses/full-stack-track/">Full-Stack Track</a> at <a
href="https://io-academy.uk/">iO Academy</a> ,in Bath.</br>
I am hoping to graduate with enough knowledge to jump right into a </br>junior web developer role.</p>
<p class="paboutme"></p>
<p class="paboutme">I will be learning <b>HTML</b>,<b>CSS</b> and <b>Javascript</b> for
front-end,<b>PHP</b> and <b>Node.js</b> for back-end.</p>
</div>
<img src="profilpic.png" alt="profilpicture">
</div>
</div>
</section>
<a class="anchor" id="recent"></a>
<section class="myProjects">
<h2 class="rprojh2">Recent Projects</h2>
<div class="recentProjects">
Expand Down
115 changes: 114 additions & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

* {
box-sizing: border-box;
}
Expand All @@ -23,6 +24,8 @@ body {

}



a:hover {
text-decoration: underline;
}
Expand Down Expand Up @@ -123,7 +126,6 @@ img {
font-family: "Courier New" ,serif;
font-size: 20px;
font-weight: bold;

}

.rprojh2 {
Expand Down Expand Up @@ -188,4 +190,115 @@ img {
transition: transform 1s ease 0s; /* Smoothly transition the size of */
}

@media screen and (max-width: 640px) {
/*min-width will apply this css to desktop devices(large screen) bigger then 600 it will apply the css*/
/*max-width will apply to small screen (mobile) the value 600px it will change under it*/

html{
width: 640px;
}
section {
width: 640px;
}


header {
background-image: url("header.gif");
background-size: cover;
height: 350px;
width: 100vh;
color: white;
padding: 4rem;
font-family: sans-serif;

}

.headerTitle {
font-size: 40px;
font-family: "Courier New", serif ;
text-shadow: 5px 1px 5px black;
}
.jobdescription {
font-size: 20px;
font-family: "Courier New" ,serif;
font-weight: bold;
text-shadow: 10px 10px 10px black;

}
nav {
display: flex;
flex-direction: row;
justify-content: center;
/*padding: 15px 550px 12px;*/
font-family: "Courier New" ,sans-serif;
height: 80px;
font-size: 15px;
}
nav .navbar2 {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 45px;
align-content: space-around;
padding-left: 2rem;
}
.haboutme {
font-size: 40px;
padding-top: 1rem;
font-family: "Courier New", serif;
text-align: center;
font-weight: bold;
}
img {
display: flex;
justify-content: center;
height: 200px;
width: 150px;
border-radius: 50%;

}
.flexContainer {
flex-direction: row;
flex-wrap: wrap;
padding-left: 20px; /* Adjust padding as needed for mobile */
padding-bottom: 20px; /* Adjust padding as needed for mobile */
justify-content: center; /* Adjust alignment as needed */
}
.paboutme {
font-size: 20px; /* Adjust font size as needed for mobile */
padding: 10px; /* Add padding if needed */
}
.proj {
display: flex;
flex-wrap: wrap;
flex-direction: column;
padding-top: 90px;
padding-bottom: 5rem;
margin-left: 1rem;
align-items: center;
justify-content: center;
font-family: "Courier New" ,serif;
font-weight: bold;
font-size: 20px;
width: 100vw;
/*border: 5px ridge #2a1c36;*/
height: 1px;
transition: height 1s ease 0s;
border-radius: 10px 0px 40px 0px;
box-shadow: 25px 19px 22px 10px rgba(217,207,237,0.72);
-webkit-box-shadow: 25px 19px 22px 10px rgba(217,207,237,0.72);
-moz-box-shadow: 25px 19px 22px 10px rgba(217,207,237,0.72);
overflow: hidden;
}
/*.proj img {*/
/* display: flex;*/
/* margin-left: 200px;*/
/* margin-top: 50px;*/
/* margin-right: 50px;*/
/* width: 100%; !* Ensure image scales with container *!*/
/* height: auto; !* Maintain aspect ratio *!*/
/* transition: transform 1s ease 0s; !* Smoothly transition the size of *!*/
/*}*/
}


0 comments on commit cdc56b4

Please sign in to comment.