Skip to content

Commit

Permalink
Update index.css & index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@marpelt
marpelt authored Nov 16, 2023
1 parent 74ccc86 commit bcafe8e
Show file tree
Hide file tree
Showing 2 changed files with 116 additions and 22 deletions.
88 changes: 77 additions & 11 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
color: var(--text_primary_color);
}

html {
Expand All @@ -32,8 +33,9 @@ body {
}

.spacing {
width: 75%;
color: var(----text_color_primary);
width: 85%;
color: var(--text_primary_color);
margin: 25px 0 25px 0;
}

.btn {
Expand All @@ -60,6 +62,9 @@ header {
background-color: var(--background_color_secondary);
width: 100%;
height: 60px;
position: sticky;
top: 0;
left: 0;
display: flex;
justify-content: center;
}
Expand Down Expand Up @@ -125,62 +130,123 @@ section#top div.grid-container {
grid-template-columns: 60% 40%;
}

section#top div.grid-container div#row1 {
section#top div.grid-container div.row1 {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

section#top div.grid-container div#row1 div.welcome-content {
section#top div.grid-container div.row1 div.welcome-content {
width: 80%;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
}

section#top div.grid-container div#row1 div.welcome-content h3 {
section#top div.grid-container div.row1 div.welcome-content h3 {
font-size: 30px;
transform: translateY(20px);
color: var(----text_color_primary);
}

section#top div.grid-container div#row1 div.welcome-content h1 {
section#top div.grid-container div.row1 div.welcome-content h1 {
font-size: 65px;
color: var(----text_color_primary);
}

section#top div.grid-container div#row1 div.welcome-content p {
section#top div.grid-container div.row1 div.welcome-content p {
font-size: 15px;
transform: translateY(30px);
color: var(----text_color_primary);
width: 65%;
line-height: 20px;
}

section#top div.grid-container div#row1 div.welcome-content a {
section#top div.grid-container div.row1 div.welcome-content a {
width: fit-content;
text-decoration: none;
transform: translateY(45px);
}

section#top div.grid-container div#row2 {
section#top div.grid-container div.row2 {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

section#top div.grid-container div#row2 img {
section#top div.grid-container div.row2 img {
width: 525px;
height: 525px;
border-radius: 100%;
transition: 0.5s ease;
}

section#top:hover > div.grid-container div#row2 img {
section#top:hover > div.grid-container div.row2 img {
box-shadow: 0 0 100px 25px var(--shadow_color_blue_light);
}

section#about {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}

section#about div.grid-container {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 250px 75%;
column-gap: 5%;
}

section#about div.grid-container div.row1 {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

section#about div.grid-container div.row1 img {
width: 200px;
height: 200px;
border-radius: 100%;
transition: 0.5s ease;
}

section#about:hover > div.grid-container div.row1 img {
box-shadow: 0 0 90px 20px var(--shadow_color_blue_light);
}

section#about div.grid-container div.row2 {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}

section#about div.grid-container div.row2 div h3 {
font-size: 35px;
transform: translateY(-5px);
}

section#about div.grid-container div.row2 div h4 {
font-size: 25px;
transform: translateY(-15px);
}

section#about div.grid-container div.row2 div p {
font-size: 17px;
line-height: 18px;
}

section#experience {
height: 1000px;
}
50 changes: 39 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@
<!--NavBar-->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Experience</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#top">Home</a></li>
<li><a href="#spacing1">About</a></li>
<li><a href="#spacing2">Experience</a></li>
<li><a href="#spacing3">Projects</a></li>
<li><a href="#spacing4">Testimonials</a></li>
<li><a href="#spacing5">Contact</a></li>
</ul>
</nav>
</div>
Expand All @@ -32,7 +32,7 @@
<main>
<section id="top">
<div class="grid-container">
<div class="grid-item" id="row1">
<div class="grid-item row1">
<div class="welcome-content">
<h3>Greetings, I am</h3>
<h1>Markus</h1>
Expand All @@ -41,19 +41,47 @@ <h1>Markus</h1>
experience and fulfilling your wishes!
</p>

<a href="#" class="btn">Recent Projects</a>
<a href="#spacing3" class="btn">Recent Projects</a>
</div>
</div>
<div class="grid-item" id="row2">
<div class="grid-item row2">
<img src="res/profileImg.png" alt="#" />
</div>
</div>
</section>
<hr class="spacing" />
<section id="about"></section>
<hr class="spacing" id="spacing1" />
<section id="about">
<div class="grid-container">
<div class="grid-item row1">
<img src="res/profileImg.png" alt="#" />
</div>
<div class="grid-item row2">
<div>
<h3>About me</h3>
<h4>Hi, I am Markus Peltsarszky</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. A,
delectus tempora non similique exercitationem aut nesciunt
sapiente impedit quos, consequuntur tempore corporis cupiditate
modi, quod libero natus inventore totam hic adipisci. Hic vitae
nulla dolores ut. Nesciunt aspernatur voluptatum incidunt aut
tempora ad tempore perferendis blanditiis? Ducimus quibusdam
totam reprehenderit quas molestias maxime reiciendis eveniet
praesentium, id pariatur, nobis illum distinctio voluptatum
aperiam quisquam incidunt sequi, est doloribus excepturi. Maxime
architecto id repellendus repellat alias!
</p>
</div>
</div>
</div>
</section>
<hr class="spacing" id="spacing2" />
<section id="experience"></section>
<hr class="spacing" id="spacing3" />
<section id="projects"></section>
<hr class="spacing" id="spacing4" />
<section id="testimonials"></section>
<hr class="spacing" id="spacing5" />
<section id="bottom"></section>
</main>

Expand Down

0 comments on commit bcafe8e

Please sign in to comment.