Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrBourriz
MrBourriz committed Jan 24, 2024
1 parent c46a36c commit fffcd94
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 81 deletions.
72 changes: 36 additions & 36 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,85 +148,85 @@ header .navbar ul li a:hover{
display: none;
}

.home{
.Home{
display: flex;
justify-content: center;
flex-flow: column;
padding:0 15rem;
}

.home h3{
.Home h3{
font-size: 2.5rem;
color:#fff;
}

.home h1{
.Home h1{
font-size:5rem;
color:#fff;
}

.home h1 span{
.Home h1 span{
color:var(--blue);
}

.home p{
.Home p{
font-size:2rem;
color:#eee;
padding: 1rem 0;
}

.about .row{
.About .row{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding:1rem 0;
}

.about .row .info{
.About .row .info{
flex:1 1 48rem;
padding:2rem 1rem;
padding-left: 6rem;
}

.about .row .info h3{
.About .row .info h3{
font-size: 2rem;
color:var(--blue);
padding:1rem 0;
font-weight: normal;
}

.about .row .info h3 span{
.About .row .info h3 span{
color:#eee;
padding:0 .5rem;
}

.about .row .counter{
.About .row .counter{
flex:1 1 48rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.about .row .counter .box{
.About .row .counter .box{
width:20rem;
background:#222;
text-align: center;
padding: 2rem;
margin:2rem;
}

.about .row .counter .box span{
.About .row .counter .box span{
font-size: 4rem;
color:var(--blue);
}

.about .row .counter .box h3{
.About .row .counter .box h3{
font-size: 2rem;
color:#fff;
}

.education .box-container{
.Education .box-container{
display: flex;
align-items: center;
justify-content: space-between;
Expand All @@ -235,35 +235,35 @@ header .navbar ul li a:hover{
padding-left: 3rem;
}

.education .box-container .box{
.Education .box-container .box{
width:27rem;
margin:4rem 1rem;
padding-left: 4rem;
border-left: .2rem solid #fff;
position: relative;
}

.education .box-container .box span{
.Education .box-container .box span{
font-size: 1.3rem;
background:#222;
color:#fff;
border-radius: 5rem;
padding:.5rem 2.5rem;
}

.education .box-container .box h3{
.Education .box-container .box h3{
font-size: 2rem;
color:#fff;
padding-top: 1.5rem;
}

.education .box-container .box p{
.Education .box-container .box p{
font-size: 1.4rem;
color:#eee;
padding: 1rem 0;
}

.education .box-container .box i{
.Education .box-container .box i{
position: absolute;
top:-1.5rem; left:-2.5rem;
height:5rem;
Expand All @@ -276,11 +276,11 @@ header .navbar ul li a:hover{
background:var(--blue);
}

.education .box-container .box a{
.Education .box-container .box a{
color: white;
}

.education .box-container .box a:hover{
.Education .box-container .box a:hover{
color: blue
}

Expand Down Expand Up @@ -405,27 +405,27 @@ color: white;
}


.contact .row{
.Blog .row{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}

.contact .row .content{
.Blog .row .content{
flex:1 1 30rem;
padding:4rem;
padding-bottom: 0;
}

.contact .row form{
.Blog .row form{
flex:1 1 45rem;
padding:2rem;
margin:2rem;
margin-bottom: 4rem;
}

.contact .row form .box{
.Blog .row form .box{
padding:1.5rem;
margin:1rem 0;
background:#3333;
Expand All @@ -435,23 +435,23 @@ color: white;
width:100%;
}

.contact .row form .box::placeholder{
.Blog .row form .box::placeholder{
text-transform: capitalize;
}

.contact .row form .message{
.Blog .row form .message{
height: 15rem;
resize: none;
}

.contact .row .content .title{
.Blog .row .content .title{
text-transform: uppercase;
color:#fff;
font-size: 3rem;
padding-bottom: 2rem;
}

.contact .row .content .info h3{
.Blog .row .content .info h3{
display: flex;
align-items: center;
font-size: 2rem;
Expand All @@ -460,16 +460,16 @@ color: white;
font-weight: normal;
}

.contact .row .content .info h3 i{
.Blog .row .content .info h3 i{
padding-right: 1rem;
color:var(--blue);
}

.contact .heading .row .content .title .info h3 a{
.Blog .heading .row .content .title .info h3 a{
color: white
}

.contact .heading .row .content .title .info h3 a:hover{
.Blog .heading .row .content .title .info h3 a:hover{
color: blue
}

Expand All @@ -491,7 +491,7 @@ color: white;
font-size: 55%;
}

.home{
.Home{
padding:1rem 4rem;
}

Expand Down Expand Up @@ -535,11 +535,11 @@ color: white;
margin:0 3rem;
}

.about .row .counter .box{
.About .row .counter .box{
width: 100%;
}

.education .box-container .box{
.Education .box-container .box{
width:100%;
}

Expand All @@ -551,7 +551,7 @@ color: white;
width:100%;
}

.contact .row form{
.Blog .row form{
margin:3rem 0;
}

Expand Down
62 changes: 17 additions & 45 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,18 @@

<div class="user">
<img src="img/L'ARCADE 2022-08-22_0079 copy.jpg" alt="Bourriz Mohamed" title="Bourriz Mohamed">
<h3 class="name">Bourriz Mohamed</h3>
<p class="post">Engineering Student In Geomatics Sciences And Land Survey </p>
<h3 class="name">Bourriz Mohamed </h3>
<p class="post">PhD Student | Geomatics and Land Surveying Engineer </p>
</div>

<nav class="navbar">
<ul>
<li><a href="#home">Menu</a></li>
<li><a href="#about">About</a></li>
<li><a href="#education">Education</a></li>
<li><a href="#Experience">Experiences</a></li>
<li><a href="#Home">Menu</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Education">Education</a></li>
<li><a href="#Certifications">Certifications</a></li>
<li><a href="#Project"> Projects</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#Blog">Blogs</a></li>
</ul>
</nav>

Expand All @@ -51,21 +51,21 @@ <h3 class="name">Bourriz Mohamed</h3>

<!-- home section starts -->

<section class="home" id="home">
<section class="Home" id="Home">

<h3> Hey !</h3>
<h1> I'm <span>Bourriz Mohamed</span></h1>
<p>As a 3rd year engineering student in the Agronomic and Veterinary Medicine Institute Hassan II, I have acquired different assets of geomatics sciences and surveying engineering, I’m
having also an interest in the field of computer development, geospatial technologies and with a great sense of criticism and analysis, I'm open to all opportunities.</p>
<a href="#about"><button class="btn">About <i class="fas fa-user"></i></button></a>
<a href="#About"><button class="btn">About <i class="fas fa-user"></i></button></a>

</section>

<!-- home section ends -->

<!-- about section starts -->

<section class="about" id="about">
<section class="About" id="About">

<h1 class="heading"> A<span>bout</span></h1>

Expand All @@ -90,7 +90,7 @@ <h3> <span> AMETOP Member</span></h3>

<!-- education section starts -->

<section class="education" id="education">
<section class="Education" id="Education">

<h1 class="heading"> My <span>Education</span> </h1>

Expand Down Expand Up @@ -120,9 +120,9 @@ <h3>Geomatics Sciences And Surveying Engineering</h3>

<!-- Experience section starts -->

<section class="Experience" id="Experience">
<section class="Certifications" id="Certifications">

<h1 class="heading"> My <span> Experiences </span> </h1>
<h1 class="heading"> My <span> Certifications </span> </h1>

<div class="box-container">
<div class="box">
Expand Down Expand Up @@ -233,47 +233,19 @@ <h3>Geoportal of the Moroccan national parks</h3>

<!-- contact section starts -->

<section class="contact" id="contact">
<section class="Blog" id="Blog">

<h1 class="heading">Contact<span> Me</span></h1>
<h1 class="heading"> <span> Blogs </span></h1>

<div class="row">

<div class="content">

<h3 class="title">Contact info</h3>

<div class="info">
<h3> <i class="fas fa-envelope"></i> [email protected] </h3>
<h3> <i class="fas fa-phone"></i> +(212)-660465254</h3>
<h3> <i class="fas fa-map-marker-alt"></i> Madinat Al Irfane, Rabat, Maroc</h3>
<h3> <i class="fa-brands fa-linkedin-in"></i><a href="https://www.linkedin.com/in/mohamed-b-a33b52102/" target="_blank">Mohamed Bourriz</a></h3>
<br>
<h3>If you wish to consult my projects, do not hesitate to contact me !</h3>
</div>

<div class="box-container">

</div>

<form action="https://formsubmit.co/[email protected]" method="post">
<label for="name"><input type="text" placeholder="name" class="box" value="" id="name" required ></label>
<label for="email"><input type="email" placeholder="email" class="box" value="" id="email" required></label>
<label for="text"><input type="text" placeholder="objet" class="box" value="" id="text"required></label>
<select name="Continent" class="box" id="choix" required>
<option> Africa </option>
<option> Asia </option>
<option> Europe </option>
<option> North America </option>
<option> South America</option>
</select>
<label for="bio"><textarea name="" id="bio" cols="30" rows="10" class="box message" placeholder="message" value="" required ></textarea></label>
<button type="submit" class="btn"> Send <i class="fas fa-paper-plane"></i> </button>

</form>

</div>
</section>

<!-- contact section ends -->


<!-- scroll top button -->
Expand Down

0 comments on commit fffcd94

Please sign in to comment.