romain.fillot
/
romain-fillot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 update design
continuous-integration/drone/push Build is passing Details

Browse Source
master
Destroyeur6315 12 months ago
parent 61bf6c9288
commit a4cbca6fee
3 changed files with 230 additions and 370 deletions
Show Stats Download Patch File Download Diff File

558
index.html
Unescape View File

@ -1,388 +1,240 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon portfolio</title> <title>Mon portfolio</title>
<link rel="stylesheet" href="style.css">
<!-- Link CSS -->
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i> <!-- Button scroll -->
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i>
</div>
<!-- Header -->
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href="#"><span>romain-fillot.fr</span><span></span></a></div>
<ul class="menu">
<li><a href="#home" class="menu-btn"><strong>Accueil</strong></a></li>
<li><a href="#about" class="menu-btn"><strong>A propos</strong></a></li>
<li><a href="#services" class="menu-btn"><strong>Expériences</strong></a></li>
<li><a href="#contact" class="menu-btn"><strong>Contact</strong></a></li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div> </div>
</nav>
<!-- Header -->
<nav class="navbar"> <!-- Home -->
<div class="max-width"> <section class="home" id="home">
<div class="logo"><a href="#"><span>romain-fillot.fr</span><span></span></a></div> <div class="max-width">
<ul class="menu"> <div class="home-content">
<li><a href="#home" class="menu-btn"><strong>Accueil</strong></a></li> <div class="text-1">Bonjour, Je m'appelle</div>
<li><a href="#about" class="menu-btn"><strong>A propos</strong></a></li> <div class="text-2">Fillot Romain</div>
<li><a href="#services" class="menu-btn"><strong>Expériences</strong></a></li> <div class="text-3">Et je suis alternant en informatique <span class="typing"></span></div>
<li><a href="#contact" class="menu-btn"><strong>Contact</strong></a></li> <a href="#about">A propos de moi</a>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div> </div>
</nav> </div>
</section>
<!-- Home -->
<section class="home" id="home"> <!-- About -->
<div class="max-width"> <section class="about" id="about">
<div class="home-content"> <div class="max-width">
<div class="text-1">Bonjour, Je m'appelle</div> <h2 class="title">A propos de moi</h2>
<div class="text-2">Fillot Romain</div> <div class="about-content">
<div class="text-3">Et je suis alternant en informatique <span class="typing"></span></div> <div class="column left">
<a href="#about">A propos de moi</a> <img src="./images/picture-profil_2.jpg" alt="Profile Image">
</div> </div>
</div> <div class="column right">
</section> <div class="text">Moi c'est Romain <span class="typing-2"></span></div>
<p>
<!-- About --> Passionné d'informatique, j'ai découvert ce domaine lors de ma première année de lycée,
<section class="about" id="about"> en seconde. En effet, j'ai opté pour l'option ICN qui m'a permis de faire mon premier
<div class="max-width"> pas dans ce monde fabuleux. J'ai pu y découvrir les bases du fonctionnement d'un ordinateur
<h2 class="title">A propos de moi</h2> ainsi que le langage python.
<div class="about-content"> <br><br>
<div class="column left"> J'ai beaucoup apprécié cette option, qui m'est apparue dans un premier temps très
<img src="./images/picture-profil_2.jpg" alt="Profile Image 626x626"> obscure et compliquée. Néanmoins, cela n'a pas suffi pour me décourager étant donné
</div> que je suis en 3e année d'IUT informatique. Bien entendu, je ne m'arrête pas en si bon chemin. L'année
<div class="column right"> prochaine, c'est parti pour deux ans supplémentaires en
<div class="text">Moi c'est Romain <span class="typing-2"></span></div> Mastère informatique à l'école Hexagone. Cette fois-ci, je me spécialise un peu en me
<p> tournant vers la filière "Architecture des Systèmes d'information".
Passionné d'informatique, j'ai découvert ce domaine lors de ma première année de lycée, <br><br>
en seconde. En effet, j'ai opté pour l'option ICN qui m'a permis de faire mon premier Pendant mon temps libre je ne fais pas que de l'informatique. J'aime beaucoup le sport
pas dans ce monde fabuleux. J'ai pu y découvrir les bases du fonctionnement d'un ordinateur (pratiquant de musculation depuis presque 6 ans), je sors souvent avec mes ami(e)s et
ainsi que le langage python. je m'intéresse depuis peu à deux nouveaux domaines qui me passionnent : les
<br><br> cryptomonnaies avec tout ce qui se cache derrière (NFT, blockchain, DeFi...) et les
J'ai beaucoup apprécié cette option, qui m'est apparue dans un premier temps très voitures (vieilles voitures, mécanique...).
obscure et compliquée. Néanmoins, cela n'a pas suffi pour me décourager étant donné </p>
que je suis en 3e année d'IUT informatique. Bien entendu, je ne m'arrête pas en si bon chemin. L'année prochaine, c'est parti pour deux ans supplémentaires en <br>
Mastère informatique à l'école Hexagone. Cette fois-ci, je me spécialise un peu en me <a href="CV-RomainFillot.pdf" target="blank" download>Télécharger CV</a>
tournant vers la filière "Architecture des Systèmes d'information".
<br><br>
Pendant mon temps libre je ne fais pas que de l'informatique. J'aime beaucoup le sport
(pratiquant de musculation depuis presque 6 ans), je sors souvent avec mes ami(e)s et
je m'intéresse depuis peu à deux nouveaux domaines qui me passionnent : les
cryptomonnaies avec tout ce qui se cache derrière (NFT, blockchain, DeFi...) et les
voitures (vieilles voitures, mécanique...).
</p>
<br>
<a href="CV-RomainFillot.pdf" target="blank" download>Télécharger CV</a>
</div>
</div> </div>
</div> </div>
</section> </div>
</section>
<!-- Services -->
<section class="services" id="services"> <!-- Services -->
<div class="max-width"> <section class="services" id="services">
<h2 class="title">Mes expériences</h2> <div class="max-width">
<!-- <div class="serv-content"> --> <h2 class="title">Mes expériences</h2>
<div class="carousel-container"> <div class="carousel-container">
<div class="carousel-slide active" id="slide-1"> <div class="carousel-slide active" id="slide-1">
<h2>Stage au Canada</h2> <h2>Stage au Canada</h2>
<div class="carousel-container-img"> <div class="carousel-container-img">
<div class="carousel-img"> <div class="carousel-img">
<img src="./images/UQAC.png" style="width: 100%; border-radius: 15px;"> <img src="./images/UQAC.png" style="width: 100%; border-radius: 15px;" alt="image de l'UQAC">
</div>
<div class="carousel-text">
J'ai réalisé mon premiers stage au canada
à l'UQAC d'une durée de 2 mois. Ce projet consistait en la reconnaissance de geste
de cuisine à l'aide d'un bracelet polar et d'un modèle d'apprentissage.
<br><br>
Je l'ai réalisé
avec un camarade de l'iut. J'ai énormément apprécié ce projet car j'ai été confronté à
des problèmes réels liés à la qualité des données, à leur traitement et à
leur interprétation, ce qui explique l'utilisation du langage Python ainsi que
de la bibliothèque auto_sklearn. Ce stage m'a fait découvrir une véritable passion pour
l'analyse et la gestion des données, ainsi que pour l'intelligence artificielle avec
l'apprentissage automatique.
</div>
</div>
</div>
<div class="carousel-slide" id="slide-2">
<h2>Alternance chez Matussière Toiles</h2>
<div class="carousel-container-img">
<div class="carousel-img">
<img src="./images/store-toile.png" style="width: 100%; border-radius: 15px;">
</div>
<div class="carousel-text">
Ma deuxième expérience, plus professionnalisante est ma 3 ème année d'IUT
informatique que je réalise actuellement en alternance chez Matussière-toiles. Cette
entreprise est spécialisée dans la production et la distribution de protection solaire extérieure.
Pour vendre leur produit, ils utilisent un site internet.
<br><br>
Ma mission d'alternance consiste en la refonte du site web car il n'est plus au goût du jour et ne
peut se positionner face à la concurrence. Pour mener à bien ce projet, j'utilise
les langages tels que PHP, JavaScript et HTML/CSS. Etant seul à piloter le projet,
je dois faire preuve d'autonomie et de sérieux.
</div>
</div>
</div>
<div class="carousel-slide" id="slide-3">
<h2>Vendeur chez E.Leclerc</h2>
<div class="carousel-container-img">
<div class="carousel-img">
<img src="./images/leclerc.png" style="width: 100%; border-radius: 15px;">
</div>
<div class="carousel-text">
J'ai eu l'occasion de travailler plusieurs fois chez E. Leclerc en tant
que vendeur. Mon premier emploi remonte à 2022, où j'ai passé un mois au
rayon traiteur. Cette expérience a été extrêmement enrichissante, notamment
en termes de communication et d'autonomie. Dès la première semaine, j'ai dû
gérer le stand seul pendant plusieurs heures. Il était également nécessaire
d'être attentif aux besoins des clients pour leur offrir le meilleur service.
<br><br>
Ma deuxième expérience a eu lieu à la fin de 2023, pendant la période de Noël,
où j'ai alterné entre le rayon de la poissonnerie et celui de la saurisserie.
J'ai dû m'adapter rapidement et démontrer ma capacité
à agir de manière autonome.
</div>
</div>
</div>
</div>
<div class="carousel-buttons">
<button onclick="showSlide(1)">1</button>
<button onclick="showSlide(2)">2</button>
<button onclick="showSlide(3)">3</button>
</div>
</div>
</section>
<!-- Skills -->
<!-- <section class="skills" id="skills">
<div class="max-width">
<h2 class="title">My Skills</h2>
<div class="skills-content">
<div class="column left">
<div class="text">INTERNSHIP</div>
<p>
<li class="intern">contentstack</li>
<li class="intern">Pensil- as a test analyst</li>
<li class="intern"></li>
</p>
<br>
<div class="text">PROJECT</div>
<p>
<li class="project">Portfolio (HTML, CSS, js, Bootstraps)</li>
<li class="project">eCommerce Website (Shopify liquid-code, HTML, CSS)</li>
<li class="project">QuickShop - eCommerce Website (Like Amazon, Flipkart etc.)</li>
<li class="project">Fully Responsive Design Email Subscribe form</li>
<li class="project">Blog (HTML, CSS, Bootstraps)</li>
<li class="project">Currently Working on a Messaging App (Like WhatsApp)</li>
</p>
<br>
<div class="text">DEVELOPMENT SKILLS</div>
<p>
I'm familiar & work on a daily basis with HTML, CSS, JavaScript, Bootstrap, React js and other modern frameworks.
</p>
<a href="https://aistechx.com/" target="blank">Get Educate...</a>
</div>
<div class="column right">
<div class="bars">
<div class="info">
<span>Python</span>
<span>90%</span>
</div>
<div class="line python"></div>
</div>
<div class="bars">
<div class="info">
<span>HTML</span>
<span>80%</span>
</div>
<div class="line html"></div>
</div>
<div class="bars">
<div class="info">
<span>CSS</span>
<span>60%</span>
</div>
<div class="line css"></div>
</div>
<div class="bars">
<div class="info">
<span>JavaScript</span>
<span>40%</span>
</div>
<div class="line js"></div>
</div>
<div class="bars">
<div class="info">
<span>Bootstraps</span>
<span>60%</span>
</div>
<div class="line bootstraps"></div>
</div> </div>
<div class="bars"> <div class="carousel-text">
<div class="info"> J'ai réalisé mon premiers stage au canada
<span>Django</span> à l'UQAC d'une durée de 2 mois. Ce projet consistait en la reconnaissance de geste
<span>70%</span> de cuisine à l'aide d'un bracelet polar et d'un modèle d'apprentissage.
</div> <br><br>
<div class="line django"></div> Je l'ai réalisé
avec un camarade de l'iut. J'ai énormément apprécié ce projet car j'ai été confronté à
des problèmes réels liés à la qualité des données, à leur traitement et à
leur interprétation, ce qui explique l'utilisation du langage Python ainsi que
de la bibliothèque auto_sklearn. Ce stage m'a fait découvrir une véritable passion pour
l'analyse et la gestion des données, ainsi que pour l'intelligence artificielle avec
l'apprentissage automatique.
</div> </div>
</div> </div>
</div> </div>
</div> <div class="carousel-slide" id="slide-2">
</section> --> <h2>Alternance chez Matussière Toiles</h2>
<div class="carousel-container-img">
<!-- Projects --> <div class="carousel-img">
<!-- <section class="projects" id="projects"> <img src="./images/store-toile.png" style="width: 100%; border-radius: 15px;"
<div class="max-width"> alt="image de toile de store">
<h2 class="title">My Projects</h2>
<div class="carousel owl-carousel">
<div class="card">
<div class="box">
<img src="https://source.unsplash.com/720x600/?shopping" alt="">
<div class="text">Ecommerce</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="https://source.unsplash.com/720x600/?portfolio" alt="">
<div class="text">Portfolio</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div> </div>
</div> <div class="carousel-text">
<div class="card"> Ma deuxième expérience, plus professionnalisante est ma 3 ème année d'IUT
<div class="box"> informatique que je réalise actuellement en alternance chez Matussière-toiles. Cette
<img src="https://source.unsplash.com/720x600/?blog" alt=""> entreprise est spécialisée dans la production et la distribution de protection solaire extérieure.
<div class="text">Blog</div> Pour vendre leur produit, ils utilisent un site internet.
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <br><br>
</div> Ma mission d'alternance consiste en la refonte du site web car il n'est plus au goût du jour et ne
</div> peut se positionner face à la concurrence. Pour mener à bien ce projet, j'utilise
<div class="card"> les langages tels que PHP, JavaScript et HTML/CSS. Etant seul à piloter le projet,
<div class="box"> je dois faire preuve d'autonomie et de sérieux.
<img src="https://source.unsplash.com/720x600/?messanger" alt="">
<div class="text">Messaging App</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div> </div>
</div> </div>
<div class="card"> </div>
<div class="box"> <div class="carousel-slide" id="slide-3">
<img src="https://source.unsplash.com/720x600/?app-clone" alt=""> <h2>Vendeur chez E.Leclerc</h2>
<div class="text">Clone</div> <div class="carousel-container-img">
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <div class="carousel-img">
<img src="./images/leclerc.png" style="width: 100%; border-radius: 15px;"
alt="image d'un magasin leclerc">
</div> </div>
</div> <div class="carousel-text">
<div class="card"> J'ai eu l'occasion de travailler plusieurs fois chez E. Leclerc en tant
<div class="box"> que vendeur. Mon premier emploi remonte à 2022, où j'ai passé un mois au
<img src="https://source.unsplash.com/720x600/?code,demo" alt=""> rayon traiteur. Cette expérience a été extrêmement enrichissante, notamment
<div class="text">Demo</div> en termes de communication et d'autonomie. Dès la première semaine, j'ai dû
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> gérer le stand seul pendant plusieurs heures. Il était également nécessaire
d'être attentif aux besoins des clients pour leur offrir le meilleur service.
<br><br>
Ma deuxième expérience a eu lieu à la fin de 2023, pendant la période de Noël,
où j'ai alterné entre le rayon de la poissonnerie et celui de la saurisserie.
J'ai dû m'adapter rapidement et démontrer ma capacité
à agir de manière autonome.
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> --> <div class="carousel-buttons">
<button onclick="showSlide(1)">1</button>
<!-- Contact --> <button onclick="showSlide(2)">2</button>
<section class="contact" id="contact"> <button onclick="showSlide(3)">3</button>
<div class="max-width"> </div>
<h2 class="title">Me contacter</h2> </div>
<div class="contact-content"> </section>
<div class="column left">
<div class="text">Entrer en contact</div> <!-- Contact -->
<p> <section class="contact" id="contact">
N'hésitez pas à me contacter ! Je suis ouvert à toute discussion et ce serait avec <div class="max-width">
plaisir d'échanger avec des passionnés. <h2 class="title">Me contacter</h2>
</p> <div class="contact-content">
<div class="icons">
<!-- <div class="text">Entrer en contact</div> -->
<a href="https://instagram.com/aistscience"> <p>
<div class="row"> N'hésitez pas à me contacter ! Je suis ouvert à toute discussion et ce serait avec
<i class="fa-solid fa-user-large"></i> plaisir d'échanger avec des passionnés.
<div class="info"> </p>
<div class="head">Nom</div> <div class="icons">
<div class="sub-title"><a href="https://aistechx.com/" style="text-decoration: none; color: #333;"> Fillot Romain</a></div>
</div> <a href="https://instagram.com/aistscience">
</div>
</a>
<div class="row">
<i class="fa-solid fa-location-dot"></i>
<div class="info">
<div class="head">&nbsp;Adresse</div>
<div class="sub-title">&nbsp;Clermont-Ferrand</div>
</div>
</div>
<div class="row">
<i class="fa-solid fa-envelope"></i>
<div class="info">
<div class="head">Email</div>
<div class="sub-title"><a href="mailto:#" style="text-decoration: none; color: #333;">romain.fillot630@gmail.com</a></div>
</div>
</div>
<div class="row"> <div class="row">
<i class="fa-solid fa-globe"></i> <i class="fa-solid fa-user-large"></i>
<div class="info"> <div class="info">
<div class="head">Langue</div> <div class="head">Nom</div>
<div class="sub-title">Anglais opérationnel</div> <div class="sub-title"><a href="https://aistechx.com/" style="text-decoration: none; color: #333;">
Fillot Romain</a></div>
</div> </div>
</div> </div>
</a>
<br>
<!-- Social --> <div class="row">
<div class="social-menu"> <i class="fa-solid fa-location-dot"></i>
<ul> <div class="info">
<li><a href="https://github.com/Destroyeur6315"><i class="fa-brands fa-github"></i></a></li> <div class="head">&nbsp;Adresse</div>
<li><a href="https://www.linkedin.com/in/romain-fillot/"><i class="fa-brands fa-linkedin-in"></i></a></li> <div class="sub-title">&nbsp;Clermont-Ferrand</div>
<li><a href="https://www.instagram.com/romain.flt/"><i class="fa-brands fa-instagram"></i></a></li>
<!-- <li><a href="https://twitter.com/___kaaashx___/"><i class="fa-brands fa-twitter"></i></a></li> -->
<!-- <li><a href="https://aistechx.com/" title="Get Educate with Us"><i class="fa-solid fa-graduation-cap"></i></a></li> -->
</ul>
</div> </div>
</div> </div>
</div>
<div class="row">
<!-- Reach --> <i class="fa-solid fa-envelope"></i>
<div class="column right reach"> <div class="info">
<div class="text">Formulaire </div> <div class="head">Email</div>
<form action="#"> <div class="sub-title"><a href="mailto:#"
<div class="fields"> style="text-decoration: none; color: #333;">romain.fillot630@gmail.com</a></div>
<div class="field name">
<input type="text" placeholder="Votre nom" required>
</div>
<div class="field email">
<input type="email" placeholder="Votre email" required>
</div>
</div>
<div class="field">
<input type="text" placeholder="Sujet" required>
</div>
<div class="field textarea">
<textarea cols="30" rows="10" placeholder="Message.." required></textarea>
</div> </div>
<div class="button-area"> </div>
<button type="submit">Envoyer</button>
<div class="row">
<i class="fa-solid fa-globe"></i>
<div class="info">
<div class="head">Langue</div>
<div class="sub-title">Anglais opérationnel</div>
</div> </div>
</form> </div>
<br>
<!-- Social -->
<div class="social-menu">
<ul>
<li><a href="https://github.com/Destroyeur6315"><i class="fa-brands fa-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/romain-fillot/"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="https://www.instagram.com/romain.flt/"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div> </div>
</div>
</div> </div>
</section> </div>
</section>
<!-- Footer -->
<footer> <!-- Footer -->
<span> <footer>
<a href="https://www.linkedin.com/in/paithankarvarad"> <span>
Fillot Romain</a> | <span class="far fa-copyright"></span> 2024 All Rights Reserved. Privacy Policy <a href="https://www.linkedin.com/in/paithankarvarad">
</span> Fillot Romain</a> | <span class="far fa-copyright"></span> 2024 All Rights Reserved. Privacy Policy
</footer> </span>
</footer>
<!-- Script JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="main.js"></script>
<script src="https://kit.fontawesome.com/b29a4dce1b.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </body>
<script src="main.js"></script>
<script src="https://kit.fontawesome.com/b29a4dce1b.js" crossorigin="anonymous"></script>
</body>

6
main.js
Unescape View File

@ -2,10 +2,8 @@ $(document).ready(function () {
$(window).scroll(function () { $(window).scroll(function () {
if (this.scrollY > 20) { if (this.scrollY > 20) {
$(".navbar").addClass("sticky"); $(".navbar").addClass("sticky");
console.log("romain");
} else { } else {
$(".navbar").removeClass("sticky"); $(".navbar").removeClass("sticky");
console.log("romain");
} }
// scroll-up button show/hide script // // scroll-up button show/hide script //
@ -17,7 +15,6 @@ $(document).ready(function () {
}); });
// slide-up script // // slide-up script //
$(".scroll-up-btn").click(function () { $(".scroll-up-btn").click(function () {
$("html").animate({ scrollTop: 0 }); $("html").animate({ scrollTop: 0 });
// removing smooth scroll on slide-up button click // // removing smooth scroll on slide-up button click //
@ -26,19 +23,16 @@ $(document).ready(function () {
$(".navbar .menu li a").click(function () { $(".navbar .menu li a").click(function () {
// Smooth scroll on Menu Items click // // Smooth scroll on Menu Items click //
$("html").css("scrollBehavior", "smooth"); $("html").css("scrollBehavior", "smooth");
}); });
// Toggle Navbar // // Toggle Navbar //
$(".menu-btn").click(function () { $(".menu-btn").click(function () {
$(".navbar .menu").toggleClass("active"); $(".navbar .menu").toggleClass("active");
$(".menu-btn i").toggleClass("active"); $(".menu-btn i").toggleClass("active");
}); });
// Typing Text Animation // // Typing Text Animation //
var typed = new Typed(".typing", { var typed = new Typed(".typing", {
strings: [ strings: [
"Fullstack Developer", "Fullstack Developer",

36
style.css
Unescape View File

@ -69,13 +69,20 @@ footer {
.about .about-content, .about .about-content,
.services .serv-content, .services .serv-content,
.skills .skills-content, .skills .skills-content,
.contact .contact-content { .contact {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.contact-content{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
section .title { section .title {
position: relative; position: relative;
text-align: center; text-align: center;
@ -179,7 +186,7 @@ section .title::after {
position: fixed; position: fixed;
height: 45px; height: 45px;
width: 42px; width: 42px;
background: #1e3551; background: #0d4d9b;
right: 30px; right: 30px;
bottom: 10px; bottom: 10px;
text-align: center; text-align: center;
@ -253,14 +260,14 @@ section .title::after {
.home .home-content a { .home .home-content a {
display: inline-block; display: inline-block;
background: #1e3551; background: #0d4d9b;
color: #fff; color: #fff;
font-size: 25px; font-size: 25px;
padding: 12px 36px; padding: 12px 36px;
margin-top: 20px; margin-top: 20px;
font-weight: 400; font-weight: 400;
border-radius: 6px; border-radius: 6px;
border: 2px solid #1e3551; border: 2px solid #ffffff;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@ -384,9 +391,9 @@ section .title::after {
} }
.carousel-buttons button { .carousel-buttons button {
background-color: #2e72c4; background-color: #0d4d9b;
border: 2px solid #ffffff;
color: white; color: white;
border: none;
padding: 10px 20px; padding: 10px 20px;
margin: 0 5px; margin: 0 5px;
cursor: pointer; cursor: pointer;
@ -394,7 +401,8 @@ section .title::after {
} }
.carousel-buttons button:hover { .carousel-buttons button:hover {
background-color: #0056b3; color: #1e3551;
background: rgb(240, 246, 254);
} }
.services, .services,
@ -658,6 +666,10 @@ section .title::after {
width: calc(50% - 30px); width: calc(50% - 30px);
} }
.contact .contact-content p {
margin-bottom: 30px;
}
.contact .contact-content .text { .contact .contact-content .text {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
@ -772,17 +784,19 @@ section .title::after {
} }
.social-menu ul { .social-menu ul {
position: absolute; position: fixed;
left: 20%; right: 10px;
top : 150px;
padding: 0; padding: 0;
margin-top: 35px; margin-top: 35px;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
display: flex; display: flex;
flex-direction: column;
} }
.social-menu ul li { .social-menu ul li {
list-style: none; list-style: none;
margin: 0 15px; margin: 10px 0;
} }
.social-menu ul li .fa { .social-menu ul li .fa {
@ -805,7 +819,7 @@ section .title::after {
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 50%; border-radius: 50%;
background-color: #1e3551; background-color: #0d4d9b;
text-align: center; text-align: center;
transition: 0.6s; transition: 0.6s;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 4px rgba(0, 0, 0, 0.5);

Write Preview
Loading…
Cancel
Save