Welcome to our latest blog post tutorial, where we'll guide you through the exciting process of building a dynamic Team Page using HTML, CSS, and JavaScript. Whether you're a coding enthusiast looking to expand your skill set or a curious beginner taking your first steps into web development, this tutorial is designed to empower you with the knowledge to craft engaging and interactive web experiences.
In this comprehensive tutorial, we'll cover the following key topics:
1. HTML Structure: Learn how to set up the foundational structure of your Team Page using HTML. We'll create a well-organized layout that sets the stage for your team member profiles.
2. CSS Styling: Dive into the world of CSS styling as we design visually appealing team member cards. Discover how to apply styles that make your page pop, using flexible layout techniques and creative design principles.
3. JavaScript Interactions: Enhance your Team Page's interactivity with JavaScript. Explore how to add smooth animations, dynamic hover effects, and click functionalities to display additional details about each team member.
4. Responsive Design: Ensure your Team Page looks stunning across various devices by implementing responsive design practices. Learn how to adapt your layout and content for seamless viewing on smartphones, tablets, and desktops.
5. Optimization Techniques: Optimize your webpage for optimal performance. From optimizing image assets to minimizing code, we'll share tips to ensure your Team Page loads quickly and efficiently.
Ready to embark on this coding journey? Dive into the tutorial now and follow our step-by-step instructions to build your very own dynamic Team Page. Don't forget to share your progress and connect with the coding community!
📖 Read the full tutorial:
Whether you're looking to showcase your team or simply hone your web development skills, this tutorial will equip you with the tools to create an impressive Team Page that stands out. Stay tuned for more insightful tutorials and coding tips on our blog!
HTML CODE
<div class="waveWrapper waveAnimation">
<div class="waveWrapperInner bgTop">
<div class="wave waveTop"
style="background-image: url('http://front-end-noobs.com/jecko/img/wave-top.png')"></div>
</div>
<div class="waveWrapperInner bgMiddle">
<div class="wave waveMiddle"
style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div>
</div>
<div class="waveWrapperInner bgBottom">
<div class="wave waveBottom"
style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div>
</div>
</div>
<section class="main-container">
<h1>Our Team</h1>
<div class="sub-container">
<div class="box">
<div class="image">
<img src="member-1.png">
</div>
<div class="content">
<center>
<h3>James</h3>
<p>Chief Operating Officer</p>
<ul>
<li><ion-icon name="logo-facebook"></ion-icon>Facebook</li>
<li><ion-icon name="logo-instagram"></ion-icon>Instagram</li>
<li><ion-icon name="logo-twitter"></ion-icon>Twitter</li>
<li><ion-icon name="logo-linkedin"></ion-icon>Linkedin</li>
</ul>
</center>
</div>
</div>
<div class="box">
<div class="image">
<img src="member-2.png">
</div>
<div class="content">
<center>
<h3>William</h3>
<p>Sales Management</p>
<ul>
<li><ion-icon name="logo-facebook"></ion-icon>Facebook</li>
<li><ion-icon name="logo-instagram"></ion-icon>Instagram</li>
<li><ion-icon name="logo-twitter"></ion-icon>Twitter</li>
<li><ion-icon name="logo-linkedin"></ion-icon>Linkedin</li>
</ul>
</center>
</div>
</div>
<div class="box">
<div class="image">
<img src="member-7.png">
</div>
<div class="content">
<center>
<h3>Elizabeth</h3>
<p>Account Manager</p>
<ul>
<li><ion-icon name="logo-facebook"></ion-icon>Facebook</li>
<li><ion-icon name="logo-instagram"></ion-icon>Instagram</li>
<li><ion-icon name="logo-twitter"></ion-icon>Twitter</li>
<li><ion-icon name="logo-linkedin"></ion-icon>Linkedin</li>
</ul>
</center>
</div>
</div>
<div class="box">
<div class="image">
<img src="member-6.png">
</div>
<div class="content">
<center>
<h3>Amelia</h3>
<p>General Manager</p>
<ul>
<li><ion-icon name="logo-facebook"></ion-icon>Facebook</li>
<li><ion-icon name="logo-instagram"></ion-icon>Instagram</li>
<li><ion-icon name="logo-twitter"></ion-icon>Twitter</li>
<li><ion-icon name="logo-linkedin"></ion-icon>Linkedin</li>
</ul>
</center>
</div>
</div>
</div>
</section>
CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;500&
family=Roboto:wght@500&display=swap');
/* font-family: 'Montserrat', sans-serif;
font-family: 'Roboto', sans-serif; */
* {
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
border: none;
outline: none;
transition: all .5s linear;
box-sizing: border-box;
}
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(0.55)
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
}
}
.waveWrapper {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
z-index: -1;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
bottom: -1px;
background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
}
.bgTop {
z-index: 15;
opacity: 0.5;
}
.bgMiddle {
z-index: 10;
opacity: 0.75;
}
.bgBottom {
z-index: 5;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.waveTop {
background-size: 50% 100px;
}
.waveAnimation .waveTop {
animation: move-wave 3s;
-webkit-animation: move-wave 3s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.waveMiddle {
background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
animation: move_wave 10s linear infinite;
}
.waveBottom {
background-size: 50% 100px;
}
.waveAnimation .waveBottom {
animation: move_wave 15s linear infinite;
}
.main-container {
width: 100%;
height: auto;
padding: 30px 4%;
z-index: 999999;
}
.main-container h1 {
font-size: 40px;
text-align: center;
color: #eee;
font-family: 'Roboto', sans-serif;
}
.sub-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
margin-top: 50px;
}
.box {
height: auto;
/* background: red; */
}
.image {
width: 150px;
height: 150px;
border-radius: 50% 50% 0% 0%;
overflow: hidden;
margin: auto;
}
.image img {
width: 100%;
height: 100%;
}
.content {
width: 250px;
height: 300px;
padding: 10px 20px;
background: #eee;
border-radius: 0% 0% 40% 40%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.content ul li {
list-style-type: none;
color: #0000009a;
padding: 5px;
display: flex;
align-items: center;
justify-content: left;
cursor: pointer;
}
.content ul li ion-icon {
padding: 10px;
color: #86377b;
}
.content p {
color: #86377b;
}
Comments
Post a Comment