Skip to content

Commit

Permalink
Adding my changes on connect section
Browse files Browse the repository at this point in the history
  • Loading branch information
AngeloChristian1 committed Apr 30, 2023
1 parent 2bb1948 commit cc8907c
Show file tree
Hide file tree
Showing 11 changed files with 273 additions and 0 deletions.
128 changes: 128 additions & 0 deletions assets/css/connect.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
* {
padding: 0px;
margin: 0px;
}
body {
width: 100vw;
height: 100vh;
}

.connect-container {
width: 90%;
height: 60vh;
margin: 100px auto;
height: 60vh;
font-family: "poppins", sans-serif;
display: inline-flex;
gap: 5%;
/* background: grey; */
padding: 10px;
}
.connect-content {
width: 50%;
}

.connect-icons {
width: 45%;
height: 100%;
background: white;
position: relative;
}
.square {
height: 60%;
width: 60%;
background: rgba(0, 217, 255, 0.3);
/* margin: auto; */
transform: translate(30%, 30%);
}
.mbaza-hand {
height: 60%;
width: 40%;
border-radius: 50%;
background: rgb(59, 59, 167);
/* margin: auto; */
transform: translate(70%, 30%);
}

.social-icon {
width: 50px;
height: 50px;
border-radius: 50%;
/* border: 0.3px solid black; */
position: absolute;
background: white;
box-shadow: 1px 1px 10px 1px rgb(83, 82, 82);
transform: scale(0.8);
cursor: pointer;
transition: 0.4s;
}
.social-icon img {
border-radius: 50%;
width: 60%;
height: 60%;
transform: translate(30%, 30%);
}
.social-icon1 {
transform: translate(40%, 60%);
top: 5px;
left: 90px;
}
.social-icon2 {
transform: translate(10%, 30%);
top: 120px;
left: 80px;
}
.social-icon3 {
transform: translate(20%, 33%);
top: 0px;
left: 250px;
}
.social-icon4 {
transform: translate(22%, 68%);
/* top: ; */
right: 95px;
}
.social-icon5 {
transform: translate(23%, 89%);
top: 200px;
left: 140px;
}
.social-icon6 {
transform: translate(5%, 50%);
bottom: 40px;
left: 255px;
}
.social-icon7 {
transform: translate(90%, 40%);
top: 40px;
right: 120px;
}
.social-icon8 {
transform: translate(80%, 68%);
top: 115px;
right: 150px;
}
.social-icon9 {
transform: translate(5%, 74%);
top: 60px;
left: 310px;
/* background: red; */
}
.social-icon:hover {
/* transform: scaleY(1); */
box-shadow: 1px 1px 15px 1px rgb(47, 47, 47);
}
.connect-content {
padding: 30px;
}
.connect-content h2 {
text-align: center;
margin-bottom: 20px;
}
.connect-content p {
font-size: 1.1em;
line-height: 150%;
}
.connect-content a {
margin: 5px;
}
9 changes: 9 additions & 0 deletions assets/img/connect-icons/Blogger-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions assets/img/connect-icons/GitHub-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions assets/img/connect-icons/flickr-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions assets/img/connect-icons/huggingface-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions assets/img/connect-icons/instagram-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions assets/img/connect-icons/linkedin-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions assets/img/connect-icons/slack-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions assets/img/connect-icons/twitter-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions assets/img/connect-icons/youtube-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 64 additions & 0 deletions pages/connect.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Connect</title>
<link rel="stylesheet" href="../assets/css/connect.css" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;1,900;1,800;1,900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="connect-container">
<div class="connect-icons">
<div class="square">
<div class="mbaza-hand"></div>
</div>
<div class="social-icon social-icon1">
<img src="../assets/img/connect-icons/GitHub-icon.svg" />
</div>
<div class="social-icon social-icon2">
<img src="../assets/img/connect-icons/instagram-icon.svg" />
</div>
<div class="social-icon social-icon3">
<img src="../assets/img/connect-icons/flickr-icon.svg" />
</div>
<div class="social-icon social-icon4">
<img src="../assets/img/connect-icons/linkedin-icon.svg" />
</div>
<div class="social-icon social-icon5">
<img src="../assets/img/connect-icons/youtube-icon.svg" />
</div>
<div class="social-icon social-icon6">
<img src="../assets/img/connect-icons/Blogger-icon.svg" />
</div>
<div class="social-icon social-icon7">
<img src="../assets/img/connect-icons/twitter-icon.svg" />
</div>
<div class="social-icon social-icon8">
<img src="../assets/img/connect-icons/huggingface-icon.svg" />
</div>
<div class="social-icon social-icon9">
<img src="../assets/img/connect-icons/slack-icon.svg" />
</div>
</div>
<div class="connect-content">
<h2>CONNECT WITH US</h2>
<p>
Explore the world of NLP and connect with our community through our
communication channels. Stay up-to-date with the latest news,
research, and industry insights by following us on social media. For a
more in-depth discussion, join our forums to connect with like-minded
individuals, ask questions, and share your ideas. You can also reach
out to us via email or chat to connect with our experts and get
personalized support. Join our community today and unlock the power of
NLP!
</p>
<a href="#">[email protected]</a>
</div>
</div>
</body>
</html>

0 comments on commit cc8907c

Please sign in to comment.