Skip to content

Commit

Permalink
added about_us page. init commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@marfantyk
marfantyk committed Jan 29, 2024
1 parent f9a6136 commit fc23d27
Show file tree
Hide file tree
Showing 8 changed files with 174 additions and 57 deletions.
84 changes: 60 additions & 24 deletions about_us.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Longevity Genie</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles_about_us.css">
<link rel="preload" href="/images/background2.jpg" as="image">
<link rel="preload" href="/images/background1.jpg" as="image">
<link rel="preload" href="/images/background3.jpg" as="image">
Expand All @@ -16,56 +17,91 @@
</head>
<body>
<div class="main-container abous_us">
<a href="./index.html" class="link-11"><h3>Home</h3></a>
<section class="team">
<section class="member">
<img class="photo" src="">
<div class="text-member">
<a href="./index.html" class="link-14">Home</a>
<h1>Our team</h1>
<section class="team sections-wrapper">
<section class="member sections">
<div class="text-member ">
<img class="photo" src="./images/newton.jpg">
<h3 class="name">Newton Winter</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="member">
<img class="photo" src="">
<section class="member sections">
<div class="text-member">
<img class="photo" src="./images/kulaga.jpg">
<h3 class="name">Anton Kulaga</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="member">
<img class="photo" src="./images/karmazin.jpg">
<section class="member sections">
<div class="text-member">
<img class="photo" src="./images/karmazin.jpg">
<h3 class="name">Alex Karmazin</h3>
</div>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section class="member">
<img class="photo" src="">
<section class="member sections">
<div class="text-member">
<img class="photo" src="./images/koval.jpg">
<h3 class="name">Maria Koval</h3>
</div>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section class="member">
<img class="photo" src="">
<section class="member sections">
<div class="text-member">
<img class="photo" src="./images/nikhil.jpeg">
<h3 class="name">Nikhil Yadala</h3>
</div>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</section>
<section class="member">
<section class="member sections">
<img class="photo" src="">
<div class="text-member">

</div>
<h3 class="name"></h3>
<p class="description"></p>

</section>
</section>
<img class="grandpa" src="./images/grandpa111.png">
<img class="grandpa111" src="./images/grandpa111.png">
<footer class="footer">
<p>&copy; 2023 Longevity Genie. All rights reserved.</p>
</footer>
</div>

<footer class="footer">
<p>&copy; 2023 Longevity Genie. All rights reserved.</p>
</footer>
<script>
function scrollTrigger(selector, options){
let els = document.querySelectorAll(selector)
els = Array.from(els)
els.forEach(el => {
addObserver(el, options)
})
}
function addObserver(el, options){
// We are creating a new IntersectionObserver instance
let observer = new IntersectionObserver((entries, options) => { // This takes a callback function that receives two arguments: the elements list and the observer instance.
entries.forEach(entry => {
// `entry.isIntersecting` will be true if the element is visible
if(entry.isIntersecting) {
entry.target.classList.add('animate-slide')
// We are removing the observer from the element after adding the active class
observer.unobserve(entry.target)
}
})
})
// Adding the observer to the element
observer.observe(el)
}

let options = {
root: document.querySelectorAll('sections-wrapper'),
rootMargin: '40%',
threshold: 1.0,
}

// Example usage
scrollTrigger('.sections', options)
</script>
</body>
Binary file added images/koval.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 images/kulaga.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 images/newton.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 images/nikhil.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,14 @@ <h1>Longevity Genie</h1>

<!-- Project Description Section -->
<section class="project-description">
<section class="button-itself button-itself1 sections-wrapper">
<section class="sections">
<a href="https://chat.openai.com/g/g-HnvTUyFeq-genetics-genie" target="_blank" rel="noopener noreferrer"><p>Genetics Genie</p></a>
<a href="https://chat.openai.com/g/g-Y7oRsdMUS-drugage-genie" target="_blank" rel="noopener noreferrer"><p>DrugAge Genie</p></a>
<a href="https://chat.openai.com/g/g-I8OGEVL4X-animal-ageing-genie" target="_blank" rel="noopener noreferrer"><p>Animal Ageing Genie</p></a>
<a href="https://chat.openai.com/g/g-tpOIOEeWm-clinical-trials-genie" target="_blank" rel="noopener noreferrer"><p>Clinical Trials Genie</p></a>
</section>
</section>
<span class="description-text">
<h2 id="textbig" class="appearing">Unlock the secrets to a longer, healthier life with Longevity Genie! </h2>
<p id="text">Explore our open-source toolbox and chatbot designed to empower large language models in unraveling the mysteries of personal health, genetics, and groundbreaking longevity research. </p>
Expand Down
41 changes: 8 additions & 33 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -430,15 +430,6 @@ font-size: 1.3em;
.sun-3{
height: 150px;
}
a.link:after{
content: "";
position: absolute;
height: 6px;
width: 0;
background: white;
border-radius: 50px;
transition: width 0.3s ease;
}

a.link-1:after {
bottom: 155px;
Expand Down Expand Up @@ -553,6 +544,14 @@ flex-direction: row;
justify-content: space-around;
align-items:end;
}
.button-itself.button-itself1{
position: absolute;
font-size: 1em;
right: 0;
left: auto;
text-align: right;
width: 50%;
}
.terms_of_use{
font-size: 2em;
width: 70%;
Expand Down Expand Up @@ -583,30 +582,6 @@ align-items:end;
width: 100%;
z-index: 0;
}
.team{
width: 80%;
}
.member{
width: 80%;
background-color: white;
margin-top: 100px;
margin-left: 35%;
padding: 30px;
border-top-right-radius: 10%;
display: flex;
flex-direction: row;
justify-content:space-between;
}
.member p{
font-size: 1.8em;
}
.member h3{
font-size: 2.2em;
color:#7d4c94
}
.photo{
height: 270px;
}
.link-11{
font-size: 4em;
color: white;
Expand Down
98 changes: 98 additions & 0 deletions styles_about_us.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
.main-container{
padding-top: 0px;
}
.team{
width: 80%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
justify-content:space-between;
}
.link-14{
font-size: 3em;
padding-left: 0px;
margin-top: -10px;
text-decoration: none;
display:inline;
border: 1px;
color:white;
background-color: #7d4c94;
padding: 20px;
border-bottom-right-radius: 30px;
transition: background-color 1s;
}
.link-14:hover{
background-color: #9c6eb1;
}

.member{
width: 40%;
background-color: white;
margin-top: 100px;
padding: 45px;
border-top-right-radius: 10%;
display: flex;
flex-direction: row;
justify-content:space-between;
text-align: center;
align-items: center;
border-bottom-left-radius: 10%;
}

.member p{
font-size: 1.2em;
text-align: left;
padding-left: 30px;

}
h1{
text-align: center;
font-size: 4em;
}

.member h3{
font-size: 1.4em;
color:#7d4c94
}
.photo{
height: 150px;
border-radius: 50%;
}
.grandpa111{
margin-bottom: -7px;
overflow: hidden;
margin-left: 0;
margin-right: auto;
}
@media screen and (max-width: 1300px) {
.team{
width: 95%;
}
.grandpa111{
width: 100%;
}
}
@media screen and (max-width: 1000px) {
.team{
flex-direction: column;
align-items: center;
}
.member{
width: 80%;
}
.grandpa111{
margin-bottom: -9px;
}
}
@media screen and (max-width: 600px) {
.member{
flex-direction: column;
padding: 30px;
padding-top: 40px;
padding-bottom: 40px;
border-top-right-radius: 5%;
border-bottom-left-radius: 5%;
}
}

0 comments on commit fc23d27

Please sign in to comment.