Skip to content

Commit

Permalink
Website interface revamp
Browse files Browse the repository at this point in the history
  • Loading branch information
@angelomds42
angelomds42 committed Feb 15, 2024
1 parent 3f271c9 commit 9ec1cb4
Show file tree
Hide file tree
Showing 12 changed files with 232 additions and 121 deletions.
Binary file added img/githubicon.png
View file
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 img/monet1.png
View file
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 img/monet2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed img/monetl.png
View file
Binary file not shown.
Binary file modified img/phone.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 0 additions & 19 deletions img/pika.svg
View file

This file was deleted.

Binary file modified img/pixelboxicon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed img/texte.png
View file
Binary file not shown.
98 changes: 61 additions & 37 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>primeiro site</title>
<title>PixelBox</title>
<link rel="stylesheet" href="styles/section-01.css" />
<link rel="stylesheet" href="styles/media.css" />
<link rel="stylesheet" href="styles/home.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
Expand All @@ -14,42 +15,65 @@
/>
</head>
<body>
<header>
<div class="navbar">
<a href="a" class="navbar_logo">
<img class="navbar_icon" src="img/pixelboxicon.png" alt="icon" />
<spam class="navbar_title">PixelBox</spam>
</a>
<nav class="navbar_menu">
<a class="navbar_menu_text" href="a" target="_blank" rel="external"
>teste
</a>
<a class="navbar_menu_text" href="a" target="_blank" rel="external"
>Telegram</a
>
<a class="navbar_menu_text" href="a" rel="next">Download</a>
</nav>
</div>
</header>

<main class="home">
<section class="section-01">
<div class="section-01_text">
<h2 class="section-01_title">Welcome to PixelBox</h2>
<p class="section-01_simple_text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis
class veniam voluptas ipsa aut, tempore maxime pariatur, in ipsum
eius sint consectetur praesentium at inventore placeat quis
reprehenderit, iste officia.
</p>
<a class="section-01_botton" href="a"> Testando </a>
<div class="container">
<div class="sub_container">
<img class="monet_01" src="img/monet1.png" alt="" />
<img class="monet_02" src="img/monet2.png" alt="" />
<div class="navbar_border">
<a href="a" class="navbar_logo">
<img class="navbar_icon" src="img/pixelboxicon.png" alt="icon" />
</a>
<nav class="navbar_menu">
<a
class="navbar_menu_text"
href="https://t.me/PixelBoxClub"
target="_blank"
rel="external"
>Suporte
</a>
<a
class="navbar_menu_text"
href="a"
target="_blank"
rel="external"
>Imagens</a
>
<a class="navbar_menu_text" href="a" rel="next">Download</a>
</nav>
</div>
</div>
<div class="section_container">
<div class="section-01_text_container">
<h2 class="section-01_title">
Meet <br />
PixelBox
</h2>
<p class="section-01_simple_text">
A simpler and fast way to find you favorite wallpaper. with uor
library of high-quality wallpapers that expand every day!
</p>
<div class="section-01_botton">
<div class="section-01_botton_border">
<a class="section-01_botton_text" href="a">Download</a>
</div>
</div>
</div>
<img class="section-01_banner" src="img/phone.png" alt="phone"/>
</div>
<img
class="section-01_banner"
src="img/phone.png"
alt="pixelboxbanner"
/>
</section>
</main>
<footer>
<div class="footer">
<span
>Site feito por
<a class="footer_profile_text" href="a">angelomds42</a>
</span>
<div>
<a href="a">
<img src="img/githubicon.png" alt="" />
</a>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
122 changes: 85 additions & 37 deletions styles/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,80 +4,128 @@
box-sizing: border-box;
}
body {
color: whitesmoke;
background: whitesmoke;
margin: auto;
color: #d4b8de;
background: #1f1a20;
font-size: 100%;
font-family: "Poppins", sans-serif;
font-weight: 500;
}

.navbar {
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
max-width: 900px;
padding: 0px;
margin: 10px auto;
border-radius: 50px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.37);
flex-direction: column;
height: auto;
width: auto;
margin: auto;
min-height: 100vh;
overflow: hidden;
max-width: 3000px;
}

.navbar_logo {
.sub_container {
display: flex;
align-items: center;
text-decoration: none;
position: relative;
}

.navbar_title {
color: #1b1b1b;
font-family: "Sarala", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 2rem;
@media screen and (min-width: 800px) {
.navbar_border {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 30px;
flex-direction: row;
width: 70%;
max-width: 1100px;
margin: 5% auto 3%;
background-color: #5d3c73;
border-radius: 50px;
box-shadow: 1px 5px 20px rgba(0, 0, 0, 0.925);
}
}
.navbar_logo img {
height: 60px;
.navbar_icon {
height: 40px;
}

.navbar_menu {
display: flex;
align-items: center;
gap: 32px;
gap: 50px;
}
.navbar_menu_text {
font-family: "Sarala", sans-serif;
text-decoration: none;
position: relative;
color: #1b1b1b;
color: #d4b8de;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1rem;
}


.navbar_menu_text::after{
.navbar_menu_text::after {
content: "";
position: absolute;
background-color: #01677E;
background-color: #cfb9de;
bottom: -10px;
left: 0;
height: 3px;
width: 0%;
transition: 0.3s ease;
}

.navbar_menu_text:hover::after{
.navbar_menu_text:hover::after {
width: 100%;
}

@keyframes monet_01 {
0% {
transform: rotateZ(0deg) translateX(0px) scale(1);
}
100% {
transform: rotateZ(360deg) translateX(50px) scale(1.1);
}
}

.navbar_botton:hover {
background-color: #6f838d;
.monet_01 {
max-width: 1100px;
position: absolute;
z-index: -1;
top: -30%;
left: -40%;
transform: scale(1);
animation: 25s ease-in-out 4.25s infinite alternate none running monet_01;
}

.navbar_botton a {
color: #1b1b1b;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: normal;
}
@keyframes monet_02 {
0% {
transform: rotateZ(0deg) translateX(0px) scale(1);
}
100% {
transform: rotateZ(360deg) translateX(50px) scale(1.1);
}
}

.monet_02 {
max-width: 1100px;
position: absolute;
z-index: -1;
bottom: -40%;
right: -25%;
transform: scale(1);
animation: 25s ease-in-out 4.25s infinite alternate none running monet_02;
}

.footer {
margin: auto;
max-width: 1100px;
padding-top: 20%;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
font-size: 1rem;
}

.footer_profile_text {
color: #d4b8de;
}
49 changes: 49 additions & 0 deletions styles/media.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
@media screen and (max-width: 800px) {
.navbar_border {
display: flex;
padding: 3% 5% 1%;;
width: 20%;
max-width: 100px;
margin: 5% 5% 3%;
background-color: #5d3c73;
border-radius: 50px;
box-shadow: 1px 5px 20px rgba(0, 0, 0, 0.925);
}


.monet_01 {
width: 100%;
}

.monet_02 {
width: 100%;
top: 470%;
left: 50%;
}


.section_container {
margin: 35% 5% 35%;
}

.sub_container {
justify-content: right;
}

.section-01_title {
font-size: 3rem;
line-height: 3rem;
}

.section-01_simple_text {
font-size: 1rem;
}
.section-01_banner,
.navbar_menu, .navbar_menu_text {
display: none;
}

.footer{
padding: 5% 5% 10%;
}
}
Loading

0 comments on commit 9ec1cb4

Please sign in to comment.