Skip to content

Commit

Permalink
[ADD][DEV1.0][OWNER]
Browse files Browse the repository at this point in the history 
Added new features like forms, grid, and footer as indext.html as styles.css. Index.html is finished v1.0.0
  • Loading branch information
@JohnKun136NVCP
JohnKun136NVCP committed Sep 18, 2023
1 parent 00b1287 commit 9adada2
Show file tree
Hide file tree
Showing 4 changed files with 311 additions and 30 deletions.
247 changes: 238 additions & 9 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,45 +23,140 @@
--light: #f8f9fa;
--dark: #343a40;
}

/*Globales*/
html{
font-size: 62.5%;
box-sizing: border-box; /*Hack Box model*/
scroll-snap-type: y mandatory;
}

*, *:before, *:after {
box-sizing: inherit;
}

body{
font-size: 16px;
font-size: 16px; /*1rem = 10px*/
background-image: linear-gradient(to up,#20c997 0% ,var(--cyan) 100%);/*gradient down to up*/
}

.titlemain{
h1{
font-size: 3.8rem;
}
h2{
font-size: 2.8rem;
}

h3{
font-size: 1.8rem;
}

h4{
font-size: 1.5rem;
}

h1,h2,h3{
text-align: center;
font-family: 'Noto Sans JP', sans-serif;
color: var(--titles);
}

h4{
text-align: center;
font-family: 'Noto Sans JP', sans-serif;
color: var(--blue);
}

.titlemain span{
font-family: 'Rubik Iso', cursive;
font-family: 'Noto Sans JP', sans-serif;
font-size: 2rem;
color: var(--subtitles);
color: var(--orange);
}
.contenedor{
width: 120rem;
max-width: 120rem;
margin: 0 auto;
}


.boton{
background-color: var(--teal);
color: var(--white);
padding: 1rem 3rem;
margin-top: 3rem;
font-size: 2rem;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
border-radius: .5rem;
width: 90%;
text-align: center;
font-family: 'Noto Sans JP', sans-serif;
border: none;
}

@media (min-width: 480px) {
.boton{
width: auto;
}
}
.boton:hover{
cursor: pointer;
}
@media (min-width: 768px) {
.boton{
width: auto;
}
}
/*Sizes*/
.w-sm-100{
width: 100%;
}
@media (min-width: 780px) {
.w-sm-100{
width: auto;
}
}
.flex{
display: flex;
}

.al-right {
justify-content: flex-start;
}

.shadow {
-webkit-box-shadow: -18px 12px 49px 7px rgba(0,123,255,0.45);
-moz-box-shadow: -18px 12px 49px 7px rgba(0,123,255,0.45);
box-shadow: -18px 12px 49px 7px rgba(0,123,255,0.45);
background-color: var(--white);
border-radius: 1rem;
padding-bottom: 2rem;
}

.nav-bg{
background-color: var(--blue);
}

.nav-main{
display: flex;
justify-content: space-between;
flex-direction: column;
}

/*Media Querie
Size of screen Tablet*/
@media (min-width: 768px) {
.nav-main{
flex-direction: row;
justify-content: space-between;
}
}
.nav-main a {
color: var(--black);
display: block;
text-align: center;
color: var(--white);
text-decoration: none;
font-size: 2rem;
font-weight: 700;
font-weight: 700;
padding: 1rem;
}
.nav-main a:hover{
background-color: var(--teal);
Expand All @@ -74,3 +169,137 @@ body{
width: 20rem;
margin: 0 auto;
}

.hero {
background-image: url(../img/animepiano2.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 400px;
position: relative;
margin-bottom: 2rem;
}
.containt-hero {
position:absolute;
background-color: rgba(0,0,0,0.7);/*Trnasparencia rgba*/
background-color: rbg(0 0 0 / 70%);
width: 100%;
height: 100%;
/*align vertical and horizontally */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.containt-hero h2,
.containt-hero p{
color:var(--light);
font-weight: bold;
}
.localization{
display: flex;
align-items: flex-end;
}
/*Scroll snap*/
.services,
.nav-main,
.forms,
.foot{
scroll-snap-align: center;
scroll-snap-stop: always;
}

/**services**/
@media (min-width: 760px) {
.services{
display: grid;
/*split 1/n
grid-template-columns: 1fr 1fr 1fr; */
grid-template-columns: repeat(4,1fr);

/*short version
grid:200px 800px / 300px 300px;*/
}
}

.service {
display: flex;
flex-direction: column;
align-items: center;
}
.service p{
line-height: 1.5;
text-align: center;
}
.service h2{
color:var(--blue);
font-weight: normal;
}


.service .icons{
height: 15rem;
width: 15rem;
display:flex;
justify-content: space-evenly;
align-items: center;
}

/*Contact*/
.forms{
background-color: rgba(255, 165, 0, 0.637);
width: min(60rem,100%);/*use little value*/
margin: 0 auto;
padding: 2rem;
border-radius: 2rem;

}
.forms fieldset{
border: none;
}

.forms legend{
text-align: center;
font-size: 1.8rem;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 2rem;
color: var(--titles);
}
@media (min-width: 768px) {
.containt-fields{
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: auto auto 20rem;
column-gap: 1rem;
}
/*avoid other class*/
.field:nth-child(3),
.field:nth-child(4){
grid-column: 1/3;
}
}

.field{
margin-bottom: 1rem;
}

.field textarea{
height: 20rem;
}

.field label{
color: var(--gray-dark);
font-weight: bold;
margin-bottom: .5rem;
display: block;
}

.input-text{
width: 100%;
border: none;
padding: 1.5rem;
border-radius: .5rem;
}
.footer{
text-align: center;
}
Binary file added img/animePiano1.jpg
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/animepiano2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
94 changes: 73 additions & 21 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,29 +21,79 @@ <h1 class="titlemain">Yoshio <span> Keima</span> </h1>
<a href="html/aboutme.html">About me</a>
<a href="html/blogs.html">Projects</a>
<a href="html/contactme.html">Contact</a>
</nav>
</nav> <!--.nav-main contenedor-->
</div>
<section>
<h2 class="titlemain">Software developer and cybersecurity analyst</h2>
<img width="150" height="150" src="https://img.icons8.com/doodle/150/planet--v1.png" alt="planet--v1"/>
<p>Kepler-452b</p>
<a href="https://youtu.be/RgzUUI1LAJc?si=eN7QLg8CpdW0QK3R">Push me</a>
<section class="hero">
<div class="containt-hero">
<h2>Software developer and cybersecurity analyst</h2>
<div class="localization">
<img width="150" height="150" src="https://img.icons8.com/doodle/150/planet--v1.png" alt="planet--v1"/>
<p>Kepler-452b</p>
</div><!--.localization-->
<a class="boton" href="https://youtu.be/RgzUUI1LAJc?si=eN7QLg8CpdW0QK3R" target="_blank">Push me</a>
</div><!--.containt-hero-->
</section>
<main>
<main class="contenedor shadow">
<h2 class="titlemain">My projects</h2>
<h2>AI</h2>
<img width="50" height="50" src="https://img.icons8.com/plasticine/50/bot.png" alt="bot"/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut atque veritatis iusto est facilis, odit repellendus tempore, non tempora blanditiis repudiandae debitis adipisci delectus nihil veniam perspiciatis sunt esse quod!</p>
<h2>Cybersecurity</h2>
<img width="50" height="50" src="https://img.icons8.com/external-others-pike-picture/50/external-cybersecurity-pentesting-software-others-pike-picture.png" alt="external-cybersecurity-pentesting-software-others-pike-picture"/>
<img width="50" height="50" src="https://img.icons8.com/dusk/50/hips.png" alt="hips"/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum eaque repellat nihil possimus dolorum, hic, assumenda illo, explicabo minus doloribus aspernatur necessitatibus at veniam placeat. Et earum ipsa illo provident?</p>
<h2>Software development</h2>
<img width="50" height="50" src="https://img.icons8.com/plasticine/50/software-box.png" alt="software-box"/>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam dolore unde dolorum ea quasi, ratione porro, ipsa accusamus suscipit deserunt recusandae voluptatem eum molestiae illum adipisci nemo doloremque temporibus quos!</p>
<h2>My blog space</h2>
<img width="50" height="50" src="https://img.icons8.com/color/50/decu.png" alt="decu"/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis corrupti porro, et incidunt doloribus a ipsam qui facilis magni, recusandae excepturi, consectetur rem asperiores quaerat hic minima in est ad.</p>
<div class="services">
<section class="service">
<h2>AI</h2>
<div class="icons">
<img width="120px" height="120px" src="https://img.icons8.com/plasticine/120/bot.png" alt="bot"/>
</div>
<p>AI project harnesses advanced machine learning and neural networks to tackle real-world challenges, driving innovation and pushing the boundaries of AI capabilities.</p>
</section>
<section class="service">
<h2>Cybersecurity</h2>
<div class="icons">
<img width="120px" height="120px" src="https://img.icons8.com/dusk/120/hips.png" alt="hips"/>
</div>
<p>Cybersecurity project leverages cutting-edge technologies to defend against cyber threats, safeguarding digital assets and enhancing online safety.</p>
</section>
<section class="service">
<h2>My SD</h2>
<div class="icons">
<img width="120px" height="120px" src="https://img.icons8.com/plasticine/120/software-box.png" alt="software-box"/>
</div>
<p>Software development project focuses on creating innovative software solutions, utilizing industry best practices to streamline processes. </p>
</section>
<section class="service">
<h2>My blog space</h2>
<div class="icons">
<img width="120px" height="120px" src="https://img.icons8.com/color/120/decu.png" alt="decu"/>
</div>
<p>My personal blog is a digital space where I share insights, experiences, and perspectives on topics like networks, anime series,and my projects actually I'm working.</p>
</section>
</div><!--.services-->
<section>
<h2>Contact</h2>
<form class="forms">
<fieldset>
<legend>If you have any suggestion please let me know </legend>
<div class="containt-fields">
<div class="field">
<label>Name</label>
<input class="input-text" type="text" placeholder="Your name">
</div>
<div class="field">
<label>Telegram</label>
<input class="input-text" type="text" placeholder="Your telegram. If you don't have, type 'none'">
</div>
<div class="field">
<label>Email</label>
<input class="input-text" type="email" placeholder="Your email">
</div>
<div class="field">
<label>Message</label>
<textarea class="input-text"></textarea>
</div>
<div class="al-right flex">
<input class="boton .w-sm-100" type="submit" value="Send">
</div>
</div><!--.containt.fields-->
</fieldset>
</form>
</section>
</main>
<section>
<h2 class="titlemain">Contact me</h2>
Expand All @@ -62,6 +112,8 @@ <h2 class="titlemain">Contact me</h2>
</a>
</div>
</section>
<p>All rights reserved. YoshioKeimaKun</p>
<footer>
<h4>All rights reserved. @YoshioKeimaKun DevNet</h4>
</footer>
</body>
</html>

0 comments on commit 9adada2

Please sign in to comment.