generated from Templates_CodeFirst/templateHtmlCss
parent
e0771567a1
commit
aeb8d4aebb
@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mon Portefolio</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="topnav">
|
||||
<a href="#about">À propos</a>
|
||||
<a href="#parcour">Mon parcour</a>
|
||||
<a href="#projects">Projets</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
<div class="accueil">
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<div class="nine">
|
||||
<h1>Pierre Ferreira<span>Développeur</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- Loader -->
|
||||
<div class="loader-container">
|
||||
<div class="loader triangle">
|
||||
<svg viewBox="0 0 86 80">
|
||||
<polygon points="43 8 79 72 7 72"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="about" class="section">
|
||||
<h2 class="mainTitle">À propos de moi</h2>
|
||||
<p>Je suis un développeur web passionné avec de l'expérience en création de sites web et applications modernes. J'aime créer des expériences utilisateur intuitives et attrayantes.</p>
|
||||
<div class="about-deck">
|
||||
<div class="about-card-container">
|
||||
<div class="about-card">
|
||||
<div class="about-front-content">
|
||||
<p>Développeur<br/>Web</p>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<p class="about-heading">Card Hover</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipii
|
||||
voluptas ten mollitia pariatur odit, ab
|
||||
minus ratione adipisci accusamus vel est excepturi laboriosam magnam
|
||||
necessitatibus dignissimos molestias.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-card-container">
|
||||
<div class="about-card">
|
||||
<div class="about-front-content">
|
||||
<p>Développeur<br/>Mobile</p>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<p class="about-heading">Card Hover</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipii
|
||||
voluptas ten mollitia pariatur odit, ab
|
||||
minus ratione adipisci accusamus vel est excepturi laboriosam magnam
|
||||
necessitatibus dignissimos molestias.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-card-container">
|
||||
<div class="about-card">
|
||||
<div class="about-front-content">
|
||||
<p>Apprenti<br/>Pixel-Artist</p>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<p class="about-heading">Card Hover</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipii
|
||||
voluptas ten mollitia pariatur odit, ab
|
||||
minus ratione adipisci accusamus vel est excepturi laboriosam magnam
|
||||
necessitatibus dignissimos molestias.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="parcour" class="section">
|
||||
<h1 class="mainTitle">Mon parcours</h2>
|
||||
<div class="timeline">
|
||||
<div class="timeline-empty"></div>
|
||||
<div class="timeline-middle">
|
||||
<div class="timeline-circle"></div>
|
||||
</div>
|
||||
<div class="timeline-component timeline-content">
|
||||
<h3>Collège</h3>
|
||||
<p>Lorem Ipsum</p>
|
||||
</div>
|
||||
<div class="timeline-component timeline-content">
|
||||
<h3>Lycée</h3>
|
||||
<p>Lorem Ipsum</p>
|
||||
</div>
|
||||
<div class="timeline-middle">
|
||||
<div class="timeline-circle"></div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-empty"></div>
|
||||
<div class="timeline-empty"></div>
|
||||
|
||||
<div class="timeline-middle">
|
||||
<div class="timeline-circle"></div>
|
||||
</div>
|
||||
<div class=" timeline-component timeline-content">
|
||||
<h3>BUT informatique</h3>
|
||||
<p>Lorem Ipsum</p>
|
||||
</div>
|
||||
<div class="timeline-empty"></div>
|
||||
<div class="timeline-middle">
|
||||
<!-- Cercle final -->
|
||||
<div class="timeline-circle" style="width: 100px; border-radius: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="projects" class="section">
|
||||
<h1 class="mainTitle">Projets</h2>
|
||||
<div class="projects-grid">
|
||||
<div class="project-card">
|
||||
<h3 class="text-title">Art e-Show</h3>
|
||||
<p class="text-body"> Il s'agit d'un projet de deuxième année de l'IUT informatique de Clermont-Ferrand. Il s'agit d'un site-web permettant à des joueurs d'en apprendre un peu plus sur l'art en s'amusant. Il sera composé de plusieurs modes de jeu :
|
||||
|
||||
<a href="https://codefirst.iut.uca.fr/git/" class="project-card-button">Plus d'infos</a>
|
||||
</div>
|
||||
<div class="project-card offset">
|
||||
<h3 class="text-title">Spelltastic</h3>
|
||||
<p class="text-body">Description du projet 2.</p>
|
||||
<button class="project-card-button">Plus d'infos</button>
|
||||
</div>
|
||||
<div class="project-card">
|
||||
<h3 class="text-title">Cryptid</h3>
|
||||
<p class="text-body">Description du projet 3.</p>
|
||||
<button class="project-card-button">Plus d'infos</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="section">
|
||||
<h2 class="mainTitle">Contact</h2>
|
||||
|
||||
<div class="form-container">
|
||||
|
||||
<div class="AltLinks">
|
||||
|
||||
<!-- Github -->
|
||||
<button class="Btn"> <!-- JS + datautl -->
|
||||
<span class="imgContainer">
|
||||
<img src="logo/githubLogoW.png" alt="Github" class="imgIcon">
|
||||
</span>
|
||||
<span class="BG"></span>
|
||||
</button>
|
||||
|
||||
<!-- LinkedIn -->
|
||||
<button class="Btn">
|
||||
<span class="imgContainer">
|
||||
<img src="logo/linkedinLogoW.png" alt="LinkedIn" class="imgIcon">
|
||||
</span>
|
||||
<span class="BG"></span>
|
||||
</button>
|
||||
|
||||
<button class="Btn">
|
||||
<span class="imgContainer">
|
||||
<img src="logo/BSLogoW.png" alt="BS" class="imgIcon">
|
||||
</span>
|
||||
<span class="BG"></span>
|
||||
</button>
|
||||
|
||||
<!-- Teams -->
|
||||
<button class="Btn">
|
||||
<span class="imgContainer">
|
||||
<img src="logo/teamsLogoW.png" alt="Teams" class="imgIcon">
|
||||
</span>
|
||||
<span class="BG"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form class="form">
|
||||
<div class="form__group field">
|
||||
<input type="input" class="form__field" placeholder="Name" required="">
|
||||
<label for="name" class="form__label">Nom</label>
|
||||
</div>
|
||||
|
||||
<div class="form__group field">
|
||||
<input type="input" class="form__field" placeholder="Name" required="">
|
||||
<label for="name" class="form__label">Prenom</label>
|
||||
</div>
|
||||
|
||||
<div class="form__group field">
|
||||
<input type="input" class="form__field" placeholder="Name" required="">
|
||||
<label for="name" class="form__label">E-mail</label>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="textarea"><h3>En quoi puis-je vous aider ?</h3></label>
|
||||
<textarea name="textarea" id="textarea" rows="10" cols="50" required=""></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="send-msg">
|
||||
<span class="circle" aria-hidden="true">
|
||||
<span class="icon arrow"></span>
|
||||
</span>
|
||||
<span class="button-text">Envoyer</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer>
|
||||
<p>© 2024 Mon Portefolio. Tous droits réservés.</p>
|
||||
</footer>
|
||||
|
||||
|
||||
<script>
|
||||
//Gestion du loader
|
||||
window.addEventListener('load', function() {
|
||||
document.querySelector('.loader-container').classList.add('hidden');
|
||||
});
|
||||
|
||||
//Simulation d'un chargement de 3 secondes
|
||||
|
||||
/*window.addEventListener('load', function() {
|
||||
setTimeout(function() {
|
||||
const loaderContainer = document.querySelector('.loader-container');
|
||||
if (loaderContainer) {
|
||||
loaderContainer.classList.add('hidden');
|
||||
}
|
||||
}, 3000); // 3000 ms = 3 seconds
|
||||
});*/
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 112 KiB |
@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Portfolio-PierreFerreira - One incredible styled html page</title>
|
||||
<link rel="stylesheet" href="mycoolstyle.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Navigation menu -->
|
||||
<ul class="navbar">
|
||||
<li><a href="https://codefirst.iut.uca.fr/home">Code#0</a>
|
||||
<li><a href="http://iut.uca.fr">IUT</a>
|
||||
<li><a href="https://neilyoungarchives.com/">Very good music</a>
|
||||
<li><a href="https://www.youtube.com/watch?v=CY5dTBhRxOA">Very good music too!</a>
|
||||
</ul>
|
||||
|
||||
<!-- Main Content -->
|
||||
<h1>Portfolio-PierreFerreira is my first page, and it has got style!</h1>
|
||||
|
||||
<p>Welcome on this template html/css project
|
||||
|
||||
<p>Very simple, some links, some menu... make it your own
|
||||
…
|
||||
|
||||
<p>I have nothing more to say
|
||||
|
||||
<!-- my footer -->
|
||||
<address>Template made in 2022<br>
|
||||
with Code#0 <a href="https://codefirst.iut.uca.fr/home"><img src="images/CodeFirstLogo.png" alt="Code#0" align="middle" border="0" height="40px"/>
|
||||
</a></address>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
@ -1,32 +0,0 @@
|
||||
body {
|
||||
padding-left: 11em;
|
||||
font-family: Georgia, 'Georgia', "Times New Roman",
|
||||
Times, serif;
|
||||
color: darksalmon;
|
||||
background-color: rgb(39, 39, 84) }
|
||||
ul.navbar {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
left: 1em;
|
||||
width: 9em }
|
||||
h1 {
|
||||
font-family: Helvetica, Geneva, Arial,
|
||||
SunSans-Regular, sans-serif }
|
||||
ul.navbar li {
|
||||
background: white;
|
||||
margin: 0.5em 0;
|
||||
padding: 0.3em;
|
||||
border-right: 1em solid darksalmon }
|
||||
ul.navbar a {
|
||||
text-decoration: none }
|
||||
a:link {
|
||||
color: blue }
|
||||
a:visited {
|
||||
color: darkblue }
|
||||
address {
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
border-top: thin dotted }
|
||||
@ -0,0 +1,796 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
:root {
|
||||
--Primary: #581845;
|
||||
--Secondary: #900C3F;
|
||||
--Tertiary: #C70039;
|
||||
--Quaternary: #250F1E;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
line-height: 1.6;
|
||||
background-color: #f4f4f4;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.accueil{
|
||||
background-color: #b5d2fc
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url('img/accueil.jpeg') no-repeat center center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
header nav ul li {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
header nav ul li a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*Title*/
|
||||
.nine h1 {
|
||||
text-align:center; font-size:50px; text-transform:uppercase; color:#f2f2f2;
|
||||
font-family:"Playfair Display", serif; font-weight:bold;
|
||||
}
|
||||
|
||||
.nine h1 span {
|
||||
margin-top: 5px;
|
||||
font-size:15px; color:#f2f2f2; word-spacing:1px; font-weight:normal; letter-spacing:2px;
|
||||
text-transform: uppercase; font-family:"Raleway", sans-serif; font-weight:500;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr max-content 1fr;
|
||||
grid-template-rows: 27px 5;
|
||||
grid-gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nine h1 span:after,.nine h1 span:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid #ccc;
|
||||
height: 5px;
|
||||
background-color:#f8f8f8;
|
||||
}
|
||||
|
||||
|
||||
/* Add a black background color to the top navigation */
|
||||
.topnav {
|
||||
background-color: #333;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Style the links inside the navigation bar */
|
||||
.topnav a {
|
||||
float: left;
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
/* Change the color of links on hover */
|
||||
.topnav a:hover {
|
||||
background-color: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Add a color to the active/current link */
|
||||
.topnav a.active {
|
||||
background-color: #04AA6D;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* .header-content {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
} */
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
/** Text */
|
||||
.mainTitle{
|
||||
background-image: linear-gradient(to left, var(--Secondary), var(--Tertiary));
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/** About me*/
|
||||
|
||||
.about-deck{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2.5em;
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
|
||||
.about-card-container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.about-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.about-card .about-front-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
|
||||
}
|
||||
|
||||
.about-card .about-front-content p {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
opacity: 1;
|
||||
/* background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% ); */
|
||||
background: linear-gradient(-45deg, var(--Tertiary) 0%, var(--Primary) 100% );
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
|
||||
}
|
||||
|
||||
.about-card .about-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 10px;
|
||||
background: linear-gradient(-45deg, var(--Tertiary) 0%, var(--Primary) 100% );
|
||||
color: #e8e8e8;
|
||||
padding: 20px;
|
||||
line-height: 1.5;
|
||||
border-radius: 5px;
|
||||
pointer-events: none;
|
||||
transform: translateY(96%);
|
||||
transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
|
||||
}
|
||||
|
||||
.about-card .about-content .about-heading {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.about-card:hover .about-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.about-card:hover .about-front-content {
|
||||
transform: translateY(-30%);
|
||||
}
|
||||
|
||||
.about-card:hover .about-front-content p {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/** Parcour */
|
||||
|
||||
#parcour{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 100px 0;
|
||||
/*font-family: Jost;*/
|
||||
}
|
||||
|
||||
.timeline {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(#fefefe, #eeeeee) padding-box,
|
||||
linear-gradient(var(--Tertiary), var(--Secondary)) border-box;
|
||||
border: 2px solid transparent;
|
||||
position: relative;
|
||||
padding: 1.8rem;
|
||||
transition: 0.5s ease-out;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.timeline-component {
|
||||
margin: 0px 20px 20px 20px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) { /* Trop petit écran => sans frise*/
|
||||
.timeline {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3px 1fr;
|
||||
}
|
||||
.timeline-middle {
|
||||
position: relative;
|
||||
background-image: linear-gradient(45deg, var(--Tertiary), var(--Secondary));
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
}
|
||||
.main-middle {
|
||||
opacity: 0;
|
||||
}
|
||||
.timeline-circle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-image: linear-gradient(45deg, var(--Tertiary), var(--Secondary));
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/** Project Grid */
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 2.5em;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
width: 500px;
|
||||
height: 254px;
|
||||
|
||||
border-radius: 50px;
|
||||
background: #e0e0e0;
|
||||
box-shadow: 18px 18px 0px #bebebe,
|
||||
-18px -18px 0px #ffffff;
|
||||
|
||||
border-radius: 20px;
|
||||
background: #f5f5f5;
|
||||
border: 2px solid #c3c6ce;
|
||||
position: relative;
|
||||
padding: 1.8rem;
|
||||
transition: 0.5s ease-out;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.project-card h3 {
|
||||
color: var(--Secondary);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.project-card-button {
|
||||
transform: translate(-50%, 125%);
|
||||
width: 60%;
|
||||
border-radius: 1rem;
|
||||
border: none;
|
||||
background-color: var(--Secondary);
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
padding: .5rem 1rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transition: 0.3s ease-out;
|
||||
}
|
||||
.project-card-details {
|
||||
color: black;
|
||||
height: 100%;
|
||||
gap: .5em;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
|
||||
/*Hover*/
|
||||
.project-card:hover {
|
||||
border-color: var(--Secondary);
|
||||
box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.project-card:hover .project-card-button {
|
||||
transform: translate(-50%, 50%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.projects-grid .project-card:nth-child(2n+1):not(:first-child) {
|
||||
grid-column: 1;
|
||||
margin-bottom: -50px;
|
||||
margin-top: -100px;
|
||||
}
|
||||
|
||||
.projects-grid .project-card:nth-child(2n) {
|
||||
grid-column: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
/** card style */
|
||||
|
||||
|
||||
/** Alt Links*/
|
||||
|
||||
.AltLinks{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.5em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.Btn {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
/* overflow: hidden; */
|
||||
border-radius: 7px;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.imgContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
backdrop-filter: blur(1px);
|
||||
letter-spacing: 0.8px;
|
||||
border-radius: 10px;
|
||||
transition: all .3s;
|
||||
border: 1px solid rgba(156, 156, 156, 0.466);
|
||||
}
|
||||
|
||||
.imgIcon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
|
||||
.BG {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: var(--Secondary);
|
||||
background: linear-gradient(to left, var(--Secondary), var(--Tertiary));
|
||||
/* background: linear-gradient(-45deg, var(--Tertiary) 0%, var(--Secondary) 100% ); */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
|
||||
z-index: -1;
|
||||
border-radius: 9px;
|
||||
pointer-events: none;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.Btn:hover .BG {
|
||||
transform: rotate(35deg);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.Btn:hover .imgContainer {
|
||||
background-color: rgba(156, 156, 156, 0.466);
|
||||
}
|
||||
|
||||
|
||||
/** Form */
|
||||
|
||||
.form-container {
|
||||
width: 60%;
|
||||
background: linear-gradient(#fefefe, #eeeeee) padding-box,
|
||||
linear-gradient(300deg, transparent 5%,var(--Tertiary), var(--Secondary)) border-box;
|
||||
border: 2px solid transparent;
|
||||
padding: 32px 24px;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.form-container .form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-container .form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.form-container .form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: var(--Quaternary);
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.form-container .form-group input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
color: var(--Quaternary);
|
||||
font-family: inherit;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--Primary);
|
||||
}
|
||||
|
||||
.form-container .form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
resize: none;
|
||||
color: var(--Quaternary);
|
||||
height: 96px;
|
||||
border: 1px solid var(--Primary);
|
||||
background-color: transparent;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-container .form-group input::placeholder {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.form-container .form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--Secondary);
|
||||
}
|
||||
|
||||
.form-container .form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--Secondary);
|
||||
}
|
||||
|
||||
|
||||
.send-msg {
|
||||
width: 12rem;
|
||||
height: auto;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
button.send-msg .circle {
|
||||
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: var(--Primary);
|
||||
border-radius: 1.625rem;
|
||||
}
|
||||
|
||||
button.send-msg .circle .icon {
|
||||
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
button.send-msg .circle .icon.arrow {
|
||||
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
|
||||
left: 0.625rem;
|
||||
width: 1.125rem;
|
||||
height: 0.125rem;
|
||||
background: none;
|
||||
}
|
||||
|
||||
button.send-msg .circle .icon.arrow::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -0.29rem;
|
||||
right: 0.0625rem;
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
border-top: 0.125rem solid #fff;
|
||||
border-right: 0.125rem solid #fff;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
button.send-msg .button-text {
|
||||
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0.75rem 0;
|
||||
margin: 0 0 0 1.85rem;
|
||||
color: var(--Quaternary);
|
||||
font-weight: 700;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
button:hover .circle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button:hover .circle .icon.arrow {
|
||||
background: #fff;
|
||||
transform: translate(1rem, 0);
|
||||
}
|
||||
|
||||
button:hover .button-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/** Inputs */
|
||||
.form__group {
|
||||
position: relative;
|
||||
padding: 20px 0 0;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.form__field {
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 2px solid var(--Quaternary);
|
||||
outline: 0;
|
||||
font-size: 17px;
|
||||
color: var(--Quaternary);
|
||||
padding: 7px 0;
|
||||
background: transparent;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form__field::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form__field:placeholder-shown ~ .form__label {
|
||||
font-size: 17px;
|
||||
cursor: text;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.form__label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
transition: 0.2s;
|
||||
font-size: 17px;
|
||||
color: var(--Quaternary);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.form__field:focus {
|
||||
padding-bottom: 6px;
|
||||
font-weight: 700;
|
||||
border-width: 3px;
|
||||
border-image: linear-gradient(to right, var(--Primary), var(--Secondary));
|
||||
border-image-slice: 1;
|
||||
}
|
||||
|
||||
.form__field:focus ~ .form__label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
transition: 0.2s;
|
||||
font-size: 17px;
|
||||
color: var(--Primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* reset input */
|
||||
.form__field:required, .form__field:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/** Footer */
|
||||
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
/* Loader**/
|
||||
|
||||
.loader {
|
||||
--path: var(--Primary);
|
||||
--dot: var(--Secondary);
|
||||
--duration: 3s;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loader:before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
display: block;
|
||||
background: var(--dot);
|
||||
top: 37px;
|
||||
left: 19px;
|
||||
transform: translate(-18px, -18px);
|
||||
animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
||||
}
|
||||
|
||||
.loader svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loader svg rect, .loader svg polygon, .loader svg circle {
|
||||
fill: none;
|
||||
stroke: var(--path);
|
||||
stroke-width: 10px;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.loader svg polygon {
|
||||
stroke-dasharray: 145 76 145 76;
|
||||
stroke-dashoffset: 0;
|
||||
animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
||||
}
|
||||
|
||||
.loader.triangle {
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.loader.triangle:before {
|
||||
left: 21px;
|
||||
transform: translate(-10px, -18px);
|
||||
animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
||||
}
|
||||
|
||||
@keyframes pathTriangle {
|
||||
33% {
|
||||
stroke-dashoffset: 74;
|
||||
}
|
||||
|
||||
66% {
|
||||
stroke-dashoffset: 147;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: 221;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dotTriangle {
|
||||
33% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
66% {
|
||||
transform: translate(10px, -18px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-10px, -18px);
|
||||
}
|
||||
}
|
||||
.loader-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
z-index: 9999;
|
||||
}
|
||||
.loader {
|
||||
display: inline-block;
|
||||
margin: 0 16px;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue