Skip to content

Commit

Permalink
"Updated CSS and HTML files: added new styles and elements, removed s…
Browse files Browse the repository at this point in the history 
…mall screen section, and modified existing layout and content."
  • Loading branch information
@faris-zak
faris-zak committed Jul 12, 2024
1 parent 2a8006e commit 5731589
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 67 deletions.
114 changes: 68 additions & 46 deletions assets/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,42 @@ body{
margin: 0;
color: #e8eaea;
background-color: #0c0e18;
text-align: center;
}

div.smallScreen{
display: none;
header{
text-align: center;
margin: auto;
justify-content: center;
}

section{
text-align: center;
margin: auto;
justify-content: center;
}

nav{
user-select: none;
text-align: center;
display: flex;
margin: auto;
justify-content: center;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
display: flex;
align-items: left;
justify-content: left;
padding-bottom: 30px;
}


nav div.site-icon div.shape{
user-select: none;
width: 700px;
height: 700px;
border-radius: 50%;
display: inline-block;
background-color: #c4c4c4;
opacity: 0.3;
position: absolute;
left: 0%;
transform: translateX(-380px);
top: -380px;
position: fixed;
top: -250px;
right: 50%;
z-index: -1;
transition: all 2s ease;
}
Expand Down Expand Up @@ -69,9 +75,20 @@ nav div.sections-buttons ul li a{
font-weight: 500;
background-color: transparent;
color: #e8eaea;
border: 1.6px solid #0c0e18;
border: none;
border-radius: 18px;
margin: 5px;
}

nav div.sections-buttons ul li a.beta{
user-select: none;
cursor: default;
padding: 2px 10px;
font-size: 16px;
font-weight: 500;
border-radius: 8px;
background-color: #e8eaea;
color: black;
border: 1.6px solid #e8eaea;
}

nav div.sections-buttons ul li a:hover{
Expand All @@ -80,10 +97,25 @@ nav div.sections-buttons ul li a:hover{
border: 1.6px solid #e8eaea;
}

nav div.sections-buttons ul li a.beta:hover{
background-color: transparent;
cursor: default;
color: #e8eaea;
border: 1.6px solid #e8eaea;
}

header{
max-width: 700px;
margin-bottom: 80px;
}

header h2{
font-size: 30px;
font-weight: 400;
}

main section.contact-form{
/* position: absolute; */
width: 300px;
/* transform: translate(500px, -250px); */
}

.form-group {
Expand Down Expand Up @@ -153,37 +185,27 @@ input.clear:hover{
border: 1.6px solid #e8eaea;
}

main section div{
margin-bottom: 80px;
}

main section.our-community ul{
list-style: none;
margin: 0;
padding: 0;
}

main section.our-community ul li a{
color: #c4c4c4;
text-decoration: none;
}

main section.our-community ul li a:hover{
color: #e8eaea;
text-decoration: underline;
}


@media screen and (max-width: 1023px){
nav, main, footer, a{
display: none;
}

div.smallScreen{
user-select: none;
display: block;
padding: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

div.smallScreen img.screens{
width: 200px;
margin: 20% 0;
margin-bottom: 32px;
}

div.smallScreen span.h2{
font-size: 26px;
font-weight: 600;
}

div.smallScreen p.detail{
font-size: 18px;
font-weight: 500;
color: #585858;
}

}
33 changes: 12 additions & 21 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,55 +3,46 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="P, website provides a personal portfolio showcasing your projects, and skills, and CV at all">
<meta name="description" content="P, the first website that provides a personal portfolio showcasing your projects, and skills, and CV into a website for FREE!">
<title>P</title>
<link rel="stylesheet" href="assets/css/index.css">
<link rel="icon" href="assets/images/icon.png">
</head>
<body>
<nav>
<div class="site-icon">
<img id="siteIcon" src="assets/images/icon.png" alt="Website Logo (P)">
<div class="shape"></div>
<img id="siteIcon" src="assets/images/icon.png" alt="Website Logo (P)">
</div>
<div class="sections-buttons">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#ourCommunity">Our community</a></li>
<li><a href="#ourCommunity">Our Community</a></li>
<li><a href="#contact">Contact</a></li>
<li><a class="beta">BETA</a></li>
</ul>
</div>
</nav>

<div class="smallScreen">
<img class="screens" src="assets/images/small-screen-mockup.png" alt="Phones & Tablets">
<div class="details">
<span class="h2">P phones and tablets soon</span>
<p class="detail">In the meantime, use a screen with a width 1024 pixels and above.</p>
</div>
</div>
<header id="about">
<h2>P, the first website that provides a personal portfolio showcasing your projects, and skills, and CV into a website for <em>FREE!</em></h2>
</header>

<main>
<section id="about" class="about">
<div class="about-content">
<h2 class="title">About P</h2>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel finibus diam, vel ullamcorper ligula. Sed vel fermentum ipsum, sit amet condimentum eros. Donec sed ipsum vel felis faucibus pellentesque. Integer auctor libero at ipsum rutrum, a convallis metus ullamcorper. Integer consectetur, tortor at ullamcorper posuere, felis neque malesuada ligula, at vulputate nisi velit vel turpis. Sed dignissim, mauris vel feugiat bibendum, lectus nunc condimentum felis, vel hendrerit diam dui et velit. Donec vulputate, erat in sagittis malesuada, nisi metus pellentesque nisi, vel cursus orci neque eu neque. Nulla facilisi. Sed ultricies, diam vel cursus lobortis, ligula tellus faucibus ex, ut fe
</div>
</section>

<section id="ourCommunity" class="our-community">
<div class="our-community-content">
<h2 class="title">Our community</h2>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel finibus diam, vel ullamcorper ligula. Sed vel fermentum ipsum, sit amet condimentum eros. Donec sed ipsum vel felis faucibus pellentesque. Integer auctor libero at ipsum rutrum, a convallis metus ullamcorper. Integer consectetur, tortor at ullamcorper posuere, felis neque malesuada ligula, at vulputate nisi velit vel turpis. Sed dignissim, mauris vel feugiat bibendum, lectus nunc condimentum felis, vel hendrerit diam dui et velit. Donec vulputate, erat in sagittis malesuada, nisi metus pellentesque nisi, vel cursus orci neque eu neque. Nulla facilisi. Sed ultricies, diam vel cursus lobortis, ligula tellus faucibus ex, ut fe
<h2 class="title">Our Community</h2>
<p class="description">We have many of members in our community uses our service:</p>
<ul class="members-list">
<li><a href="">Al-Faris Mujahid AlZakwani</a> <img src="" alt="Member-1 (Al-Faris Mujahid AlZakwani)" width="50px"></li>
<li><a href="https://faris-zak.github.io/P/al-faris-mujahid-alzakwani/">- Al-Faris Mujahid AlZakwani -</a></li>
</ul>
</div>
</section>

<section id="contact" class="contact-form">
<form action="https://api.web3forms.com/submit" method="POST">
<p class="title"></p>
<h2 class="title">Contact</h2>
<p class="description">Contact us for more information</p>
<input type="hidden" name="access_key" value="2b5d0000-848d-4361-b277-887b4bcd874f">

<div class="form-group">
Expand Down

0 comments on commit 5731589

Please sign in to comment.