style.css

/*  Note: The sites have been designed for iphone 12 pro - I need to work on the media queries and change alot of things from px to % but haven't had the time */


*{
    margin: 0px;
    padding:0px;
    box-sizing: border-box;
}

body{
    font-family: 'Poppins', sans-serif;
}

button{
    font-family: 'Poppins', sans-serif;
}

/* HEADER */

header{
    display: flex;
    width: 90%;
    height: 10vh;
    margin: auto;
    align-items: center;
    background-image: linear-gradient(black,white,);
}

.logo-container, 
.nav-links, 
.company-logo{  /* Puts all of the links in the nav bar in line */
    display: flex;
}

.logo-container{
    flex: 1;
}

.logo-container i{  /* Selecting the i tag within logo-container to add some margin to line it up with my name */
    margin-top: 10px;
}

.logo{ /* Adjust the size of the logo section in the top left to fit */
    font-weight: 400;
    margin: 7.5px;
    font-size: 20px;
}

nav{ /* Fixes the spacing between the nav links*/
    flex: 2;
}

.nav-links{ /* Removes the styling the comes with LI tags (bullet points) */
    list-style: none;
    justify-content: space-around;
}

.nav-link{ /* removes the colour of that comes with the link tag */
    color: rgb(69, 69, 87);
    font-size: 20px;
    text-decoration: none;
}

.company-logo{
    justify-content: flex-end;
    flex: 1;
}


/* Main body of the website */

.presentation{
    display: flex;
    width:80%;
    margin:auto;
    min-height: 80vh;
    align-items: center;
}

.introduction{
    flex:1 ;
}

.intro-text h1 { /* Need to be able to explain this */
    font-size: 44px;
    font-weight: 500;
    width: 85%;
    background: linear-gradient(to right, #494964, #848497);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.intro-text p{ /* adjusts formatting - adds background gradient - sets transluscent text to show background */
    margin-top: 5px;
    font-size: 22px;
    width: 85%;
    background: linear-gradient(to right, #494964, #848497); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}

.button{
    padding: 50px 0px 0px 0px;
}

.button1{
    border: 2px solid #585358;
    background: transparent;
    color: #585358;
    width: 150px;
    height: 50px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 1000px;
}

.button2{
    background:transparent;
    width: 150px;
    height: 50px;
    font-size: 16px;
    cursor: pointer;
    border:2px solid #585358;
    color: #585358;
    margin: 30px 0px 0px 30px;
    border-radius: 1000px
    
}


.portrait{
    flex: 1;
}


/* what is VH*/
.portrait img{
    height: 60vh;
    border-radius: 1500px;
    filter: drop-shadow(0px 5px 5px black);
}



/* FOOTER*/

.footer{
    margin-top: 150px;
    width: 100%;
    padding: 75px 15%;
    background-image: linear-gradient(white,black);
    color: #efefef;
    display: flex;
}

.footer section{
    text-align: center;
}

.column2{
    flex-grow: 2 /* This means the middle column takes double the space to add cloumn gap between them all*/
}

.footer section h3{  /* Editing the h3 tags within all the divs in the footer for better spacing and gaps */
    font-weight: 300;
    margin-bottom:  25px;
    letter-spacing: 1px;
    text-decoration: underline;
}

.column1 a{ 
    display: block;
    text-decoration: none;
    color: #efefef;
    margin-bottom: 10px;
}

form input{ /* Adding styling to the box asking for email adresses */
    width: 300px;
    height: 45px;
    border-radius: 4px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;    
    outline: none;
    border: none;
}

form button{  /* Styling the subscribe now button */
    background: transparent;
    border: 2px solid #efefef;
    color: rgb(255, 255, 255);
    border-radius: 30px;
    padding: 10px 30px;
    font-size: 15px;
    cursor: pointer;
}

.email-link{
    text-decoration: none;
    color: white;
}

a:hover{ /* Adding colour to A tags when the mouse hovers over them */
    background-color: rgb(176, 176, 179);
}

.social-media{ /* Adding a margin to the top of the soecial media icons to avoid crowding */
    margin-top: 30px;
}
 
.social-media a{  /* Formatting the icons in the footer together as they all have a tags */
    font-size: 22px;
    margin: 10px;
    cursor: pointer;
    text-decoration: none;
    color: white;
}


/* Adjusting for mobile size */
/* This mainly impacts the 'Home' page but also has some influence over the 'Bio' page */
 
@media screen and (max-width:390px){

    html,body{
        overflow-x: hidden;
    }

    /* HEADER */

    .logo-container h4{ /* Resizing the font of my name */
        font-size: 10px;
    }

    .logo-container i{  /* Aligning the profile image to my name */
        margin-bottom: 10px;
    }

    .nav-links a{       /* resizing the size of the nav bar font to make it fit */
        font-size: 10px;
        text-decoration: underline;
    }

    /* MAIN BODY */

    .presentation{
        flex-direction: column;
        text-indent: 20px;
    }

    .introduction{
        margin-top:10px ;
        margin-left: 20px;
        
        text-align: center;
    }

    .intro-text h1{
        font-size: 30px;
    }

    .intro-text p{
        font-size: 18px;
        margin-bottom: 10px;
    }

    .button1{
        display: none;
    }

    .button2{
        display: none;
    }

    .portrait{
        margin-top: 0px;
    }

    .portrait img{      /* Resizing the size of my photo and adjusting the margin around it*/
        max-width: 85% ;
        height: auto!important;
        margin-top: 10px;
    }


/* FOOTER FOR MOBILE*/

    .footer{
        margin-top: 0%;
    }

    .column1 a{ /* Resizing the font of text */
        font-size: 10px;
    }

    .column1 h3{ /* Resizing the font of text */
        font-size: 12px;
    }

    .column2{ /* removing column 2 for mobile version */
        display: none;
    }

    .column3 h3{ /* Resizing the font of text */
        font-size: 12px;
    }

    .column3 a{ /* Resizing the font of text */
        font-size: 10px;
    }
}




/* BIO PAGE */

.bio-presentation{
    width:80%;
    margin:auto;
    min-height: 20vh;
    align-items: center;
}

.bio-table{
    margin: 10%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
}

.bio-table th{
    background: linear-gradient(to right, #2c2c3a, #848497);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;   
}

.bio-table td{
    font-size: 10px;
}

#profile-pic{
    width:99%;
}


.bio-footer{ /* Footer copied from Home page and edited for the bio page - renamed to bio-footer */
    margin-top: 50px;
    width: 100%;
    padding: 75px 15%;
    background-image: linear-gradient(white,black);
    color: #efefef;
    display: flex;
}

.bio-footer section{
    text-align: center;
}

.column2{
    flex-grow: 2 /* This means the middle column takes double the space to add cloumn gap between them all*/
}

.bio-footer section h3{  /* Editing the h3 tags within all the divs in the footer for better spacing and gaps */
    font-weight: 300;
    margin-bottom:  25px;
    letter-spacing: 1px;
    text-decoration: underline;
}


/* MEDIA QUERY FOR BIO PAGE*/

@media screen and (min-width:900px){

    .bio-presentation{
        display: flex;
        width:80%; 
        min-height: 20vh;
        align-items: center;
    }
    
    .intro-text h1 { /* Adding gradient to the intro text*/
        font-size: 44px;
        font-weight: 500;
        width: 85%;
        background: linear-gradient(to right, #494964, #848497);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .intro-text p{
        margin-top: 5px;
        font-size: 22px;
        width: 85%;
        background: linear-gradient(to right, #494964, #848497);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .bio-table{
        flex: 1;
        padding: 0;
        margin: 15px;
    }
    
    .bio-table th{
        background: linear-gradient(to right, #2c2c3a, #848497);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;   
    }

    .bio-table td{
        font-size: 15px;
    }

    .bio-footer{
        margin-top: 50px;
    }

}

/* HOBBIES PAGE */

.box-1, .box-2,.box-3,.box-4{ /* Shaping the hobbies boxes and adding shadow */
    width: 150px;
    height: 150px;
    background-repeat:no-repeat;
    background-size: cover;
    background-color: #2c2c3a;
    border-radius: 4px;
    box-shadow: 5px 5px #89898e;
}

.box-container{
    display:flex;
    justify-content:space-evenly;
    margin-bottom: 20px;
    margin-top: 30px;
}

.box-1{ /* Adding the images to the hobbies boxes */
    background-image:url(images/Hjbike.JPG);
    background-size: cover;
}

.box-2{
    background-image:url(images/steak.JPG);
    background-size: cover;
}

.box-3{
    background-image:url(images/duck.JPG);
    background-size: cover;
}

.box-4{
    background-image:url(images/hjbike2.JPG);
    background-size: cover;
}

.hobbies-footer{ /* Footer copied from Home page and edited for the hobbies page - renamed to hobbies-footer */
    margin-top: 50px;
    width: 100%;
    padding: 75px 15%;
    background-image: linear-gradient(white,black);
    color: #efefef;
    display: flex;
}

.hobbies-footer section{
    text-align: center;
}


.hobbies-footer section h3{  /* Editing the h3 tags within all the divs in the footer for better spacing and gaps */
    font-weight: 300;
    margin-bottom:  25px;
    letter-spacing: 1px;
    text-decoration: underline;
}


/* PROJECTS PAGE */


.project-box-1, .project-box-2{ /* Shaping the project boxes and adding shadow */
    width: 300px;
    height: 200px;
    background-repeat:no-repeat;
    background-size: cover;
    background-color: #2c2c3a;
    border-radius: 4px;
    box-shadow: 5px 5px #89898e;
}

.project-box-container{ /* Shaping the container with the proejct images inside them */
    display:flex;
    justify-content:space-evenly;
    margin-bottom: 20px;
    margin-top: 10px;
}

.project-box-1{ /* Adding the project images to the boxes */
    background-image:url(images/Sneaker-site.jpg);
    background-size: cover;
}

.project-box-2{ 
    background-image:url(images/Travel-blog.jpg);
    background-size: cover;
}

.project-title h4{ /* Adding formatting and space to the headers */
    margin-top: 30px;
    margin-bottom: 10px;
    text-align: center;

    background: linear-gradient(to right, #2c2c3a, #848497); /* Adding gradient to the colour of the headers */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}