Add Portfolio project
This commit is contained in:
326
Portfolio/style.css
Normal file
326
Portfolio/style.css
Normal file
@@ -0,0 +1,326 @@
|
||||
body {
|
||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Navigation Bar */
|
||||
|
||||
#home {
|
||||
background-color: #7600bc;
|
||||
padding-bottom: 1cm;
|
||||
margin-left:-1cm;
|
||||
margin-right:-1cm;
|
||||
margin-top:-1cm;
|
||||
padding-top: 2cm;
|
||||
padding-bottom: 2cm;
|
||||
height: 5mm;
|
||||
}
|
||||
|
||||
.topmenu {
|
||||
color: lightgray;
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
font-size: 20px;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.topmenu:hover {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.topdiv {
|
||||
float: right;
|
||||
padding-right: 1cm;
|
||||
}
|
||||
|
||||
.profile_name {
|
||||
float: left;
|
||||
padding-left: 3cm;
|
||||
margin-top: -20px;
|
||||
font-size: 2em;
|
||||
color: #eee;
|
||||
font-family: 'sans-serif';
|
||||
}
|
||||
|
||||
.profile_name .contact_info {
|
||||
font-size: 15px;
|
||||
font-style: italic;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.contact_info img {
|
||||
width:25px;
|
||||
margin-right: 10px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
/* Titles */
|
||||
|
||||
h2 {
|
||||
text-align: justify;
|
||||
font-size: 50px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: #7600bc;
|
||||
margin: 30px;
|
||||
margin-left: 60px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.introduction {
|
||||
text-align: justify;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 20px;
|
||||
animation-duration: 5s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Used in the About Me sections */
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* About Me */
|
||||
|
||||
.about-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#about-me h1 {
|
||||
font-size: 65px;
|
||||
margin-top: 90px;
|
||||
color: #7600bc;
|
||||
}
|
||||
|
||||
#about-me p {
|
||||
font-size: 25px;
|
||||
color: rgb(128, 128, 128);
|
||||
margin-top: -1cm;
|
||||
}
|
||||
|
||||
.profile_image {
|
||||
width: 550px;
|
||||
height: fit-content;
|
||||
vertical-align: middle;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
/* Skills */
|
||||
|
||||
.all_skills {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
|
||||
.skill {
|
||||
border: 1px solid gray;
|
||||
display: block;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
margin: 50px;
|
||||
padding: 10px;
|
||||
width: 2in;
|
||||
font-size: 20px;
|
||||
box-shadow: 0 3px 10px gray;
|
||||
}
|
||||
|
||||
.skill img {
|
||||
height: 100px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.skills h6 {
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
margin-block-start: 8px;
|
||||
margin-block-end: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.skills p {
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
color: gray;
|
||||
margin-block-start: 5px;
|
||||
margin-block-end: 5px;
|
||||
}
|
||||
|
||||
.flex_center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Projects */
|
||||
|
||||
.projects-container {
|
||||
margin-top: 30px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.projects-container hr {
|
||||
border: 1px solid lightgray;
|
||||
width: 75%;
|
||||
margin-left: 5cm;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
margin: 0 15px 15px 30px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.project-card h3 {
|
||||
font-size: 25px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.project-card li {
|
||||
font-size: 20px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
/* Recommendations */
|
||||
|
||||
.all_recommendations {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 1in;
|
||||
flex-direction: row;
|
||||
flex-flow: wrap;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.recommendation {
|
||||
font-style: italic;
|
||||
text-align: left;
|
||||
width: 26.875rem;
|
||||
padding: 1rem;
|
||||
background-color: #fff;
|
||||
border-radius: 11px;
|
||||
box-shadow: 0 3px 10px var(--primary-shadow);
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
border:1px solid gray;
|
||||
font-size: 18px;
|
||||
height:170px
|
||||
}
|
||||
|
||||
.recommendation span {
|
||||
color: #7600bc;
|
||||
font-size: 20px;
|
||||
font-family: 'Times New Roman', Times, serif;
|
||||
}
|
||||
|
||||
/* Scroll to Top Button */
|
||||
|
||||
.iconbutton{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 100%;
|
||||
background-color: #7600bc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
right: 3%;
|
||||
bottom: 3%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Form Pop-up */
|
||||
|
||||
.popup {
|
||||
width:400px;
|
||||
background-color: #e8bcf0;
|
||||
border-radius: 3mm;
|
||||
top: 50%;
|
||||
left:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
/* padding: 30px; */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.popup img {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.popup button {
|
||||
background-color: #fff;
|
||||
border: 1px solid #7600bc;
|
||||
color: #7600bc;
|
||||
display: block;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
margin: 50px;
|
||||
padding: 10px;
|
||||
width: 2in;
|
||||
font-size: 20px;
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.popup button:hover {
|
||||
background-color: #fff;
|
||||
border: 2px solid #7600bc;
|
||||
color: #7600bc;
|
||||
display: block;
|
||||
font-weight: bolder;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
/* Recommendation Form */
|
||||
|
||||
input, textarea {
|
||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
||||
margin: 10px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: flexbox;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
padding: 25px;
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
border: thin solid white;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
button {
|
||||
background-color: #fff;
|
||||
border: 1px solid #7600bc;
|
||||
color: #7600bc;
|
||||
display: block;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
margin: 50px;
|
||||
padding: 10px;
|
||||
width: 2in;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #7600bc;
|
||||
border: 1px solid #7600bc;
|
||||
color: #fff;
|
||||
display: block;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
Reference in New Issue
Block a user