diff --git a/about.php b/about.php new file mode 100644 index 0000000..9e08032 --- /dev/null +++ b/about.php @@ -0,0 +1,159 @@ + + + + Mi Talent + + + + + + + + + + + + + +
+ +
+
+
+ +
+
+ +
+ +
+ +
+
+
+ + +
+
+ +
+ +
+
+ + + + +
+
+
+
+ +

Keith Ruiz

+

ACTOR

+
+
+
+
+ +

Victoria Porter

+

COMEDIAN

+
+
+ +
+
+ +

Sofia Walker

+

MUSICIAN

+
+
+
+
+ +

Riley James

+

MUSICIAN

+
+
+
+ + + + + + +
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/clients.php b/clients.php new file mode 100644 index 0000000..108afe6 --- /dev/null +++ b/clients.php @@ -0,0 +1,112 @@ + + + + Mi Talent + + + + + + + + + + + + + +
+ +
+
+
+ +
+
+ +
+ +
+ +
+
+
+

Our Talent

+

LEADING INDUSTRY NAMES.

+ ABOUT US +
+
+
+
+
+
+

YOUNG MODEL 2020

+

Georgina Alson

+
+
+ + +
+
+
+
+ +
+
+
+

Social
Connections

+

ON TWITTER

+
+ +
+
+ + + + + + + + + \ No newline at end of file diff --git a/contact.php b/contact.php new file mode 100644 index 0000000..0aeaef4 --- /dev/null +++ b/contact.php @@ -0,0 +1,106 @@ + + + + Mi Talent + + + + + + + + + + + + + +
+ +
+
+
+ +
+
+ +
+ +
+ +
+
+
+
+

Contact
us _

+

MASS IMPRESSIONS

+
+
+ + +
+
+
+ +
+ + + + + + + + \ No newline at end of file diff --git a/css/index.php b/css/index.php new file mode 100644 index 0000000..a29e422 --- /dev/null +++ b/css/index.php @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..ae60f17 --- /dev/null +++ b/css/style.css @@ -0,0 +1,1414 @@ +/* === CSS HEADER === */ +*{margin:0;padding:0;box-sizing:border-box} +a{text-decoration:none;color:inherit} +*:focus{outline:none} +ul{list-style-type: none;} +body{font-size: 100%;} +button{outline: none !important;} + +/* =============== GLOBAL HEADER CODE =============== */ +header.about .site-nav, +header.contact .site-nav{position: absolute} +header.global, +div.form-container{ + position: fixed; + margin: 3rem 2.5rem; + z-index: 500; +} + div.form-container{right: 0} + +ul.social-links{ + margin-top: 4rem; +} +ul.social-links li{ + padding: 10px 0; +} + ul.social-links a{ + padding: 5px 0; + font-size: 0.9em; + color: #859D9D; + transition: all 0.2s ease-in-out; + } + ul.social-links a:hover{ + color: #000; + } +#burger-menu-toggle, +#search-bar-toggle{ + cursor: pointer; +} + +nav.site-nav{ + width: 50%; + padding: 3rem 0 3rem 6rem; + display: flex; + justify-content: space-between; + align-items: flex-start; + font-family: 'Nunito', sans-serif; + font-weight: 700; + font-size: 0.8em; + z-index: 500; +} +nav.site-nav ul{ + display: flex; +} +nav.site-nav li{ + padding: 0 10px; +} + nav.site-nav li a{ + padding: 0 5px; + line-height: 31px; + color: #000; + border-bottom: 1px solid transparent; + } + nav.site-nav li a:hover{ + color: #000; + border-bottom: 1px solid #000; + transition: all 0.15s ease-in-out; + text-decoration: none; + } +#logo img{ + display: block; + width: 150px; + transition: all 0.3s ease-in-out; +} + #logo img:hover{ + transition: all 0.3s ease-in-out; + } + #logo{ + width: 165px; + padding: 10px; + z-index: 501; + } + +/* =============== GLOBAL FOOTER CODE =============== */ + +footer.global{ + padding: 4rem 2.5rem 2rem; +} +footer.global div:nth-child(1){ + display: flex; + justify-content: space-between; +} +footer.global div:nth-child(1) aside{ + display: flex; + align-items: center; +} +footer.global div:nth-child(1) aside a{ + display: block; + position: relative; + font-family: 'Nunito', sans-serif; + font-weight: 700; + font-size: 0.8em; + color: #333; + text-decoration: none; + letter-spacing: 2px; + border: 1px solid transparent; + transition: 0.3s ease-in-out; +} + footer.global div:nth-child(1) aside a:before{ + position: absolute; + left: -20px; + top: 50%; + transform: translateY(-50%); + content: ""; + display: block; + height: 30px; + width: 1px; + background: rgba(0,0,0,.1); + } + footer.global div:nth-child(1) aside a:hover{ + color: #000; + border-bottom: 1px solid #000; + transition: 0.3s ease-in-out; + } + footer.global div:nth-child(1) aside svg{ + margin-left: 10px; + } + +footer.global hr{ + margin-top: 2rem !important; + margin-bottom: 2rem !important; +} + +footer.global div:nth-child(3){ + display: flex; + justify-content: space-between; +} +footer.global div:nth-child(3) small{ + font-family: 'Nunito', sans-serif; + font-weight: 500; + font-size: 0.7em; + color: #555; +} +footer.global div:nth-child(3) ul{ + display: flex; +} + footer.global div:nth-child(3) li{ + margin: 0 5px; + } + footer.global div:nth-child(3) li a{ + padding: 0 8px; + color: #859D9D; + transition: 0.3s ease-in-out; + } + footer.global div:nth-child(3) li a:hover{ + color: #000; + transition: 0.3s ease-in-out; + } + +/* ============================ FRONT PAGE CODE ============================ */ +/* =============== LANDING SECTION =============== */ + +section.landing-gallery{ + height: 32rem; + margin-bottom: 5rem; + padding: 0 0 0 5rem; + display: flex; +} +section.landing-gallery:after{ + position: absolute; + top: 0; + right: 0; + width: 30rem; + height: 24rem; + display: block; + background: #c3dbdb; + content: ""; + z-index: -1; +} +section.landing-gallery > button{ + align-self: flex-end; +} +section.landing-gallery figure button{ + position: absolute; + bottom: 0; + left: 0; +} +section.landing-gallery figure{ + margin: 0 !important; + position: relative; + width: 60vw; + display: flex; + align-items: center; + background: url('../img/gallery-woman-model.jpg') no-repeat center center; + background-size: cover; +} +section.landing-gallery figcaption{ + transform: translateX(-80px); +} +section.landing-gallery h1{ + position: relative; + font-family: 'Poppins', sans-serif; + font-size: 5em; +} +section.landing-gallery h1:after{ + position: absolute; + bottom: 20px; + right: 0; + width: 50px; + height: 5px; + display: block; + content: ""; + background: #FFF; +} +section.landing-gallery p{ + font-family: 'Nunito', sans-serif; + font-weight: 700; + font-size: 0.85em; + color: #444; +} + +section.landing-gallery .gallery-triggers{ + padding: 4rem 3rem 2rem; + align-self: flex-end; +} +section.landing-gallery .gallery-triggers li{ + margin-top: 1.25rem; +} +section.landing-gallery .gallery-triggers li a{ + font-family: 'Nunito', sans-serif; + font-weight: 700; + font-size: 0.8em; + color: #555; +} +section.landing-gallery .gallery-triggers li a:hover{ + color: #000; + text-decoration: none; +} + +/* =============== PROFILE SLIDER SECTION =============== */ +section.profile{ + padding: 0 5rem; +} +section.profile figure{ + margin: 0 !important; +} +section.profile header, +section.about-slider header{ + margin-bottom: 1rem; + display: flex; + justify-content: center; +} +section.profile header button, +section.about-slider header button{ + margin: 0 20px; + background: none; + border: none; + border-bottom: 1px solid transparent; + transition: all 0.3s ease-in-out; + cursor: pointer; +} +section.profile header button h2, +section.about-slider header button h2{ + padding-bottom: 0.25rem; + font-family: 'Nunito', sans-serif; + font-weight: 700; + font-size: 0.8em; + color: #555; + transition: all 0.3s ease-in-out; +} + section.profile header button:focus, + section.about-slider header button:focus{ + border-bottom: 1px solid #000; + transition: all 0.3s ease-in-out; + } + section.profile header button:focus h2, + section.about-slider header button:focus h2{ + color: #000; + transition: all 0.3s ease-in-out; + } + +section.profile .profile-container{ + height: 36rem; + width: 100%; + grid-template-columns: 20% 20% 20% 20% 20%; + grid-template-rows: auto; + align-items: start; +} +section.profile .profile-container .item{ + height: 18rem; +} + +/* DISPLAYS PEOPLE'S PROFILE PHOTOS */ +section.profile figure.item:nth-child(1){background-image: url('../img/profile-gallery-man-model-4.jpg');} +section.profile figure.item:nth-child(2){background-image: url('../img/profile-gallery-woman-model-1.jpg');} +section.profile figure.item:nth-child(3){background-image: url('../img/profile-gallery-woman-model-5.jpg');} +section.profile figure.item:nth-child(4){background-image: url('../img/profile-gallery-man-model-3.jpg');} +section.profile figure.item:nth-child(5){background-image: url('../img/profile-gallery-man-model-2.jpg');} +section.profile figure.item:nth-child(6){background-image: url('../img/profile-gallery-woman-model-2.jpg');} +section.profile figure.item:nth-child(7){background-image: url('../img/profile-gallery-man-model-5.jpg');} +section.profile figure.item:nth-child(8){background-image: url('../img/profile-gallery-man-model-1.jpg');} +section.profile figure.item:nth-child(9){background-image: url('../img/profile-gallery-woman-model-4.jpg');} +section.profile figure.item:nth-child(10){background-image: url('../img/profile-gallery-woman-model-3.jpg');} + +/* "EXPLORE MORE" BUTTON BELOW THE GRID */ +section.profile .flex-container{ + margin: 25px 0; + display: flex; + justify-content: center; +} + section.profile .flex-container a{ + padding: 10px 25px; + font-family: 'Nunito', sans-serif; + font-weight: 700; + font-size: 0.8em; + color: #FFF; + background: #b4d3d3; + border-radius: 50px; + transition: background 0.2s ease-in-out; + } + section.profile .flex-container a:hover{ + background: #87B0B0; + text-decoration: none; + transition: background 0.2s ease-in-out; + } + +/* =============== NEWS SECTION =============== */ +section.news{padding: 2rem 5rem 10px;} + +section.news > h2{ + text-align: center; + font-family: 'Poppins', sans-serif; + font-size: 2.5em; + font-weight: normal; +} +section.news > h2:after{ + display: block; + margin: 15px auto; + height: 1px; + width: 10%; + background: #000; + content: ""; +} +section.news header{ + padding: 2rem 0; + display: flex; +} +section.news header a{ + width: 33%; + color: #87B0B0; + text-decoration: none; +} +section.news header a:hover h3{ + color: #111; + transition: 0.15s ease-in-out; +} +section.news header article{ + display: flex; +} +section.news header article div{ + display: flex; + flex-flow: column; + justify-content: space-between; +} +section.news header article h3{ + font-size: 1.25em; + transition: 0.15s ease-in-out; +} +section.news header article time{ + font-size: 0.95em; + color: #333; +} +section.news header figure{ + width: 11rem; + height: 6rem; + margin: 0 1rem 0 0; + display: inline-block; + background-size: cover; +} +section.news header a:nth-child(1) figure{background-image: url('../img/news-article-1.jpg');} +section.news header a:nth-child(2) figure{background-image: url('../img/news-article-2.jpg');} +section.news header a:nth-child(3) figure{background-image: url('../img/news-article-3.jpg');} + + +section.news main{ + height: 50rem; + display: grid; + grid-template-columns: 33% 33% 100fr; + grid-template-rows: 50% 100fr; + grid-gap: 25px; +} +section.news main a{ + text-decoration: none; + color: inherit; +} +section.news main a:nth-child(n+2):hover h3{ + color: #000; + transition: 0.15s ease-in-out; +} + +section.news main a:nth-child(1){ + grid-column: span 2; + grid-row: 1; +} +section.news main a:nth-child(1) article{ + display: flex; + height: 100%; +} +section.news main a:nth-child(1) article aside{ + width: 40%; + padding: 5rem 3rem 0; + display: flex; + flex-flow: column; + justify-content: center; + color: #FFF; + background: #cde0e0; + transition: 0.3s ease-in-out; +} +section.news main a:nth-child(1):hover article aside{ + background: #ABC9C9; + transition: 0.3s ease-in-out; +} + section.news main a:nth-child(1) article aside button{ + margin-bottom: 25px; + border: none; + filter: invert(100%); + background: none; + cursor: pointer; + } +section.news main a:nth-child(1) article figure{ + position: relative; + width: 60%; + margin: 0; + background: url('../img/news-1.jpeg'); + background-size: cover; +} +section.news main a:nth-child(1) article h3{ + font-family: 'Poppins', sans-serif; + font-size: 1.5em; + font-weight: normal; +} + +section.news main a:nth-child(2){ + grid-row: span 2; +} +section.news main a:nth-child(2) article{ + height: 100%; + display: flex; + flex-flow: column; + justify-content: space-between; +} +section.news main a:nth-child(2) article figure{ + height: 85%; + display: flex; + align-items: flex-end; + justify-content: center; + background: url('../img/news-2.jpeg'); + background-size: cover; +} +section.news main a:nth-child(n+2) h3{ + font-family: 'Poppins', sans-serif; + font-size: 1.5em; + font-weight: normal; + color: #509D9D; + transition: 0.15s ease-in-out; +} + +section.news main a:nth-child(3) article{ + height: 100%; + display: flex; + flex-flow: column; + justify-content: space-between; +} +section.news main a:nth-child(3) article figure{ + height: 80%; + background: url('../img/news-3.jpeg'); + background-size: cover; +} + +section.news main a:nth-child(4) article{ + height: 100%; +} +section.news main a:nth-child(4) figure{ + position: relative; + height: 100%; + width: 100%; + overflow: hidden; +} + +section.news main a:nth-child(4) figure figcaption{ + position: absolute; + height: 100%; + width: 100%; + background: url('../img/news-4.jpeg'); + background-size: cover; + transition: 0.5s ease-in-out; + cursor: pointer; +} +section.news main a:nth-child(4) figure:hover figcaption, +section.news main a:nth-child(4) figure:focus figcaption{ + transform: scale(1.05); + filter: brightness(0.5); + transition: 0.3s ease-in-out; +} + +/* ============================ ABOUT PAGE ============================ */ +/* =============== LANDING SECTION =============== */ +section.landing-about{ + position: relative; + height: 97vh; + margin-bottom: 5rem; + display: flex; +} +section.landing-about figure{ + position: relative; + min-width: 35%; + margin-bottom: 0 !important; + background: #ebeeee; +} + section.landing-about figure .btn-wrapper{ + position: absolute; + bottom: 0; + } + section.landing-about figure .btn-wrapper .cyan-btn{ + padding: 2rem 5rem !important; + } +section.landing-about aside{ + padding: 3rem 20% 0 6rem; + display: flex; + flex-flow: column; + justify-content: space-between; +} + section.landing-about aside h2{ + margin-top: 3rem; + font-family: 'Poppins', sans-serif; + font-size: 1.5em; + font-weight: normal; + } + section.landing-about aside h2::first-letter{ + float: left; + margin: -5px 5px 0 0; + font-size: 2.5em; + } + section.landing-about aside p{ + margin-bottom: 0 !important; + font-family: 'Nunito', sans-serif; + color: #888; + line-height: 1.85em; + } + section.landing-about aside p:first-child{ + margin-top: 1.5rem; + } + section.landing-about aside .motivation{ + padding: 3.5rem 8rem; + text-align: center; + font-family: 'Playfair Display', serif; + font-size: 1.5em; + color: #FFF; + background: #000; + } + section.landing-about:after{ + position: absolute; + top: 0; + right: 0; + width: 10rem; + height: 50%; + background: #c8dede; + content: ""; + } + +/* =============== SLIDER SECTION =============== */ +section.about-slider figure.item:nth-child(1){background-image: url('../img/profile-gallery-man-model-4.jpg');} +section.about-slider figure.item:nth-child(2){background-image: url('../img/profile-gallery-woman-model-1.jpg');} +section.about-slider figure.item:nth-child(3){background-image: url('../img/profile-gallery-woman-model-5.jpg');} +section.about-slider figure.item:nth-child(4){background-image: url('../img/profile-gallery-man-model-3.jpg');} + +/* ============================ CONTACT PAGE CODE ============================ */ + +section.landing-contact{ + position: relative; + height: 97vh; + margin-bottom: 5rem; + display: flex; +} +section.landing-contact figure{ + padding: 10rem 0 0 6rem; + position: relative; + min-width: 35%; + margin-bottom: 0 !important; + display: flex; + flex-flow: column nowrap; + align-items: flex-end; + background: #1a1a1d; +} + section.landing-contact figcaption{ + height: 100%; + display: flex; + flex-flow: column; + justify-content: space-between; + } + section.landing-contact figure h1{ + font-size: 4.5em; + font-family: 'Poppins', sans-serif; + font-weight: normal; + color: #FFF; + } + section.landing-contact figure h3{ + margin-top: 1.5rem; + font-size: 0.9em; + font-family: 'Nunito', sans-serif; + font-weight: normal; + letter-spacing: 0.2em; + color: #FFF; + } + section.landing-contact figure .btn-wrapper{ + display: flex; + flex-wrap: nowrap; + } + section.landing-contact figure .btn-wrapper .cyan-btn{ + padding: 2rem 5rem !important; + } +section.landing-contact aside{ + padding: 3rem 20% 0 6rem; + display: flex; + flex-flow: column; + justify-content: flex-start; +} + section.landing-contact aside h2{ + margin-top: 5rem; + font-family: 'Poppins', sans-serif; + font-size: 1.5em; + font-weight: normal; + } + section.landing-contact aside h2::first-letter{ + float: left; + margin: -5px 5px 0 0; + font-size: 2.5em; + } + section.landing-contact aside ul{ + margin: 2.5rem 0 0 30px; + display: flex; + flex-flow: row wrap; + } + section.landing-contact aside li{ + position: relative; + margin-top: 2.5rem; + width: 50%; + } + section.landing-contact aside li:before{ + content: ''; + display: block; + position: absolute; + left: -30px; + width: 25px; + height: 25px; + background-size: 25px 25px; + } + section.landing-contact aside li:nth-child(1):before{background-image: url(../img/house-icon.svg)} + section.landing-contact aside li:nth-child(2):before{background-image: url(../img/phone-icon.svg)} + section.landing-contact aside li:nth-child(3):before{background-image: url(../img/letter-icon.svg)} + section.landing-contact aside li p{ + font-size: 0.85em; + font-family: 'Nunito', sans-serif; + color: #555; + } + section.landing-contact:after{ + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 0; + width: 10rem; + height: 50%; + background: #c8dede; + content: ""; + } + +/* ============================ NEWS PAGE CODE ============================ */ +main.news{ + display: flex; + flex-flow: row nowrap; +} +main.news > figure{ + position: sticky; + top: 0; + margin-bottom: 0 !important; + padding: 0 0 0 4rem; + height: 97vh; + width: 35%; + color: #FFF; + background: #e2e8e8; + background: -moz-linear-gradient(top, #e2e8e8 0%, #e3eaed 31%, #56575a 100%); + background: -webkit-linear-gradient(top, #e2e8e8 0%,#e3eaed 31%,#56575a 100%); + background: linear-gradient(to bottom, #e2e8e8 0%,#e3eaed 31%,#56575a 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e8e8', endColorstr='#56575a',GradientType=0 ); +} +main.news > figure figcaption{ + height: 100%; + display: flex; + flex-flow: column nowrap; + justify-content: flex-end; +} +main.news > figure header{ + padding: 0 0 2rem; +} + main.news > figure header p{ + font-size: 0.8em; + font-family: 'Nunito', sans-serif; + font-weight: bold; + letter-spacing: 0.2em; + } + main.news > figure header h1{ + position: relative; + font-size: 2em; + font-family: 'Nunito', sans-serif; + } + main.news > figure header h1:after{ + position: absolute; + display: block; + top: 0.5em; + right: 0; + width: 15%; + height: 3px; + background: #FFF; + content: ''; + } +main.news > figure footer{ + display: flex; + justify-content: space-between; + align-items: center; +} + main.news > figure footer .slider-arrows a{ + margin: 0 50px 0 0; + padding: 0 15px 0 0; + color: #AAA; + transition: 0.15s ease-in-out; + } + main.news > figure footer .slider-arrows a:hover{ + color: #FFF; + transition: 0.15s ease-in-out; + } + +section.posts{ + max-width: 65%; + flex-grow: 1; +} + section.posts header{ + padding: 3rem; + display: flex; + align-items: center; + justify-content: space-between; + } + section.posts header input{ + margin-right: 8rem; + padding: 2px 20px; + font-size: 0.75em; + font-family: 'Nunito', sans-serif; + font-weight: bold; + letter-spacing: 0.15em; + color: #555; + border: none; + border-left: 1px solid #AAA; + } + section.posts header form a{ + margin-left: 2rem; + color: #555; + transition: 0.15s ease-in-out; + } + section.posts header form a:hover{ + color: #000; + transition: 0.15s ease-in-out; + } + +section.posts .posts-container{ + padding: 0 6rem 0 3rem; + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: repeat(14, 8rem); + column-gap: 2rem; + row-gap: 1rem; +} +section.posts .posts-container a.post{ + display: block; +} +section.posts .posts-container a{ + color: #444; +} +section.posts .posts-container a.post:hover, +section.posts .posts-container .post:hover a{ + color: #000; +} + section.posts .posts-container .post h3{ + font-family: 'Poppins', sans-serif; + font-size: 1.3em; + } + section.posts .posts-container .post time{ + font-size: 0.85em; + font-family: 'Nunito', sans-serif; + } + +section.posts .posts-container .post:nth-child(1){ + grid-column: 1; + grid-row: span 4; +} + section.posts .posts-container .post:nth-child(1) figure{ + height: 80%; + display: flex; + align-items: flex-end; + justify-content: center; + background: #e2e8e8; + background-size: cover; + } + +section.posts .posts-container .post:nth-child(n+2):nth-child(-n+5){ + grid-column: 2; + grid-row: span 1; + display: flex; + flex-flow: column wrap; +} + section.posts .posts-container .post:nth-child(n+2):nth-child(-n+5) figure{ + height: 100%; + width: 9.5rem; + background: #e2e8e8; + } + section.posts .posts-container .post:nth-child(n+2):nth-child(-n+5) figcaption{width: 50%;} + +section.posts .posts-container .post:nth-child(6){ + grid-column: span 2; + grid-row: span 4; + position: relative; +} + section.posts .posts-container .post:nth-child(6) figure{ + width: 100%; + height: 80%; + background: #e2e8e8; + } +section.posts .posts-container .post:nth-child(n+7):nth-child(-n+10){ + grid-row: span 3; +} +section.posts .posts-container .post:nth-child(n+7):nth-child(-n+10) figure{ + height: 75%; + background: #e2e8e8; +} +section.posts .post-citation{ + padding: 3rem 5rem; + display: flex; + justify-content: center; + align-items: center; + font-family: 'Playfair Display', serif; + font-size: 1.5em; + text-align: center; + color: #FFF; + background: #000; +} +section.posts footer{ + padding: 2rem 3rem; + display: flex; + justify-content: space-between; + font-size: 0.8em; + font-family: 'Nunito', sans-serif; + font-weight: bold; + letter-spacing: 0.15em; +} +section.posts footer a{color: #222;} +section.posts footer a:hover{text-decoration: none;} +section.posts footer a.inactive{color: #AAA;} +section.posts footer a.inactive:hover{cursor: default;} + +section.posts footer a svg{ + opacity: 0; + transition: all 0.2s ease-in-out; +} +section.posts footer a.active:hover svg{ + opacity: 1; + transform: translateX(0); + transition: all 0.2s ease-in-out; +} +section.posts footer a.active:first-child:hover svg{transform: translateX(-5px);} +section.posts footer a.active:last-child:hover svg{transform: translateX(5px);} + +/* SLIDER SECTION */ +section.news-slider figure.item:nth-child(1){background-image: url('../img/profile-gallery-woman-model-5.jpg');} +section.news-slider figure.item:nth-child(2){background-image: url('../img/profile-gallery-man-model-4.jpg');} +section.news-slider figure.item:nth-child(3){background-image: url('../img/profile-gallery-man-model-3.jpg');} +section.news-slider figure.item:nth-child(4){background-image: url('../img/profile-gallery-woman-model-1.jpg');} + +/* OUR CLIENTS */ +section.our-clients{ + margin-bottom: 3rem; +} + section.our-clients header{ + margin-top: 1.5rem; + padding: 5rem 12rem 2.5rem; + display: flex; + justify-content: space-between; + align-items: center; + } + section.our-clients header h2{ + padding: 0 0 1rem 0; + position: relative; + font-family: 'Poppins', sans-serif; + font-size: 3em; + font-weight: normal; + } + section.our-clients header h2:after{ + position: absolute; + bottom: 0; + display: block; + width: 50px; + height: 2px; + content: ''; + background: #444; + } + section.our-clients header div{ + width: 50%; + font-size: 0.8em; + font-family: 'Nunito', sans-serif; + } + section.our-clients header a{ + font-family: 'Nunito', sans-serif; + font-weight: bold; + letter-spacing: 0.2em; + color: #555; + } + section.our-clients header a:hover{ + color: #000; + text-decoration: none; + } + +/* ============================ CLIENTS PAGE CODE ============================ */ +/* =============== LANDING SECTION =============== */ +section.landing-clients{ + display: flex; +} + +section.landing-clients > *{ + width: 50%; +} +section.landing-clients > div{ + display: flex; +} +section.landing-clients > div:first-child{ + padding: 8.5rem 0 10rem; + justify-content: flex-end; + background: #e2eded; +} +section.landing-clients > div:first-child div{ + height: 22rem; + padding: 5rem 7rem 5rem 5rem; + background: #FFF; +} +section.landing-clients h1{ + font-family: 'Poppins', sans-serif; + font-size: 5em; + font-weight: normal; +} +section.landing-clients h2{ + position: relative; + font-family: 'Nunito', sans-serif; + font-weight: 600; + font-size: 0.85em; + letter-spacing: 0.3em; + color: #444; +} +section.landing-clients h2:after{ + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 0; + width: 75px; + height: 5px; + display: block; + content: ""; + background: #b4d3d3; +} +section.landing-clients > div:first-child a{ + margin-top: 1.5rem; + display: inline-block; + padding: 0.8rem 4rem; + font-family: 'Nunito', sans-serif; + font-weight: 700; + font-size: 0.8em; + color: #FFF; + background: #b4d3d3; + border-radius: 5px; + transition: all 0.15s ease-in-out; +} +section.landing-clients > div:first-child a:hover{ + background: #75ACAC; + text-decoration: none; + transition: all 0.15s ease-in-out; +} +section.landing-clients > div:last-child{ + padding: 8.5rem 0 5rem; + flex-flow: column nowrap; +} +section.landing-clients > div:last-child figure{ + height: 22rem; + width: 75%; + margin: 0; + background: #26262a; +} +section.landing-clients > div:last-child .figure-infobox{ + width: 75%; + display: flex; + justify-content: space-between; + background: #EEE; +} +section.landing-clients > div:last-child .figure-infobox > div:first-child{ + padding: 2.5rem 0 2.5rem 5rem; +} +section.landing-clients > div:last-child .figure-infobox h3{ + font-family: 'Poppins', sans-serif; + font-weight: 500; + font-size: 2em; +} +section.landing-clients > div:last-child .figure-infobox p{ + margin: 0; + font-family: 'Nunito', sans-serif; + font-weight: 700; + font-size: 0.8em; +} +section.landing-clients > div:last-child .figure-infobox .slider-arrows{ + display: flex; + flex-flow: column; +} +section.landing-clients > div:last-child .figure-infobox .slider-arrows button{ + min-height: 50%; + background: #FFF; + border: none; + color: #AAA; + cursor: pointer; + transition: all 0.3s ease-in-out; +} +section.landing-clients > div:last-child .figure-infobox .slider-arrows button:hover{ + color: #000; + transition: all 0.3s ease-in-out; +} + section.landing-clients > div:last-child .figure-infobox .slider-arrows button:first-child{padding: 1.2rem 2rem 0} + section.landing-clients > div:last-child .figure-infobox .slider-arrows button:last-child{padding: 0 2rem 1.2rem} + +/* =============== OTHER BITS OF CODE =============== */ +/* =============== SLIDER MAIN CODE =============== */ +.profile-container, +.slider-container{ + position: relative; + display: grid; + height: 25rem; + width: 100%; + grid-template-columns: 20% 20% 20% 20%; + grid-template-rows: auto; + justify-content: center; +} + .profile-container .item, + .slider-container .item{ + position: relative; + height: 25rem; + background-size: cover; + cursor: pointer; + z-index: 200; + } + .profile-container figcaption, + .slider-container figcaption{ + visibility: hidden; + opacity: 0; + height: 100%; + width: 100%; + display: flex; + justify-content: flex-end; + flex-flow: column; + text-align: center; + color: #FFF; + transition: all 0.15s ease-in-out; + } + .profile-container .item:hover figcaption, + .slider-container .item:hover figcaption{ + visibility: visible; + opacity: 1; + background: rgba(0,0,0,0.7); + transition: 0.15s ease-in-out; + } + .profile-container h2, + .slider-container h2{ + margin-bottom: 0.25rem !important; + font-family: 'Poppins', sans-serif; + font-size: 1.7em; + font-weight: normal; + } + .profile-container h4, + .slider-container h4{ + margin-bottom: 2rem; + font-family: 'Nunito', sans-serif; + font-weight: 700; + font-size: 0.8em; + } + .profile-container .item button, + .slider-container .item button{ + position: absolute; + top: 15px; + right: 15px; + color: #b4d3d3; + background: #b4d3d3; + border: none; + border-radius: 50px; + cursor: pointer; + } + .profile-container .item button:hover, + .slider-container .item button:hover{ + color: #000; + background: #000; + transition: all 0.15s ease-in-out; + } + .profile-container .item button svg, + .slider-container .item button svg{ + vertical-align: middle !important; + } + .slider-container .arrow-wrapper{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + width: 90%; + display: flex; + justify-content: space-between; + z-index: 1; + } + .slider-container .arrow-wrapper svg{ + width: 30px; + } + .slider-container .arrow-wrapper a:hover{ + text-decoration: none; + } + +/* =============== SLIDER DOTS FIGURE =============== */ +.slider-dots{ + width: 100%; + padding: 15px 0; + display: flex; + justify-content: center; + align-items: center; + background: rgba(255,255,255,0.25); +} + .slider-dots span{ + display: block; + width: 7px; + height: 7px; + margin: 0 5px; + background: #CCC; + border-radius: 50px; + cursor: pointer; + } + .slider-dots span.active{ + width: 10px; + height: 10px; + margin: 0 5px; + background: #FFF; + border-radius: 50px; + } + +/* =============== UTILITY CLASSES =============== */ +.clear{clear: both} +.mobile-only{display: none;} +.mirrored-x{transform: scale(-1,1);} + + ul.inverted li a{color: #DADADA;} + .inverted{color: #DADADA;} + ul.inverted li a:hover{color: #FFF;} + .inverted:hover{color: #FFF;} + .site-nav .inverted li a:hover{border-bottom: 1px solid #FFF;} + +/* Buttons style */ +.btn-wrapper{ + display: flex; + flex-wrap: nowrap; +} +.cyan-btn{ + align-self: flex-end; + color: #FFF; + background: #b4d3d3; +} + .cyan-btn:hover{ + background: #87B0B0; + color: #FFF; + transition: 0.3s ease-in-out; + } +.black-btn{ + color: #000; + background: #FFF; +} + .black-btn:hover{ + color: #FFF; + background: #000; + transition: 0.3s ease-in-out; + } + .black-btn:hover img{ + filter: invert(100%); + transition: 0.3s ease-in-out; + } +.cyan-btn, +.black-btn{ + min-height: 6rem; + max-height: 6rem; + padding: 2rem; + font-family: 'Nunito', sans-serif; + font-weight: 700; + font-size: 0.8em; + border: none; + transition: 0.3s ease-in-out; +} + .cyan-btn:hover, + .black-btn:hover{ + cursor: pointer; + } +.trending-btn{ + position: absolute; + top: 10px; + right: 10px; + padding: 10px 30px; + font-family: 'Nunito', sans-serif; + font-weight: 700; + font-size: 0.8em; + letter-spacing: 2.5px; + background: #FFF; + border: none; + cursor: pointer; + transition: 0.2s ease-in-out; +} + .trending-btn:hover{ + color: #FFF; + background: #000; + transition: 0.2s ease-in-out; + } + +/* =============== shut up bootstrap =============== */ +svg:not(:root){vertical-align: -.125em !important;} + + + + +/* ============================ MEDIA QUERIES ============================ */ +@media only screen +and (max-width:1180px){ + ul.social-links, + nav.site-nav{ + display: none; + } + header.global, + div.form-container{ + top: 0; + margin: 2rem 2rem; + } + + /* Main page */ + section.landing-gallery{ + margin-top: 5rem; + padding: 0 0.5rem 0 5%; + } + section.landing-gallery figure{ + width: 100%; + background: url('../img/gallery-woman-model.jpg') no-repeat center left; + background-size: cover; + } + section.landing-gallery .gallery-triggers{ + margin-bottom: 0; + } + section.profile .profile-container{ + height: 26rem; + grid-template-columns: 50% 50%; + } + section.profile .profile-container .item{ + height: 13rem; + } + section.profile figure.item:nth-child(n+5){ + display: none; + } +} + +@media only screen +and (max-width:767px){ + /* Global stuff */ + header.global, div.form-container{ + margin: 1.25rem 2rem; + } + footer.global{ + padding: 0.75rem; + } + footer.global div:nth-child(1){ + display: block; + } + footer.global hr{ + margin: 0.25rem 0 1rem !important; + } + footer.global div:nth-child(3){ + flex-flow: column-reverse; + } + footer.global div:nth-child(1) aside + { + display: none; + } + .trending-btn{ + padding: 5px 15px; + letter-spacing: 1.5px; + } + + .mobile-only{display: block;} + + /* Main page */ + section.landing-gallery{ + height: 100vh; + margin-top: 0; + padding: 0; + } + section.landing-gallery figure{ + background: #EEE; + justify-content: center; + } + section.landing-gallery figcaption{ + transform: translateX(0); + } + section.landing-gallery h1{ + font-size: 3.5em; + } + section.landing-gallery > button, + section.landing-gallery figure button.black-btn, + section.landing-gallery .gallery-triggers, + section.landing-gallery:after, + section.news main a:nth-child(4), + section.news main .slider-dots{ + display: none; + } + section.profile{ + padding: 0 0.75rem; + } + section.profile header button, section.about-slider header button{margin: 0px 12px} + .profile-container h2, .slider-container h2{font-size: 1.35em} + .profile-container h4, .slider-container h4{font-size: 0.75em} + + section.profile .profile-container{ + height: 30rem; + grid-template-columns: 50% 50%; + } + section.profile .profile-container .item{ + height: 15rem; + } + + section.news{ + padding: 0.5rem 0.75rem 0; + display: flex; + flex-flow: column; + } + + section.news > h2{ + order: 1; + font-size: 1.7em; + } + section.news > h2:after{ + margin: 9px auto; + width: 40%; + } + section.news header{ + order: 3; + display: flex; + flex-flow: column; + padding: 0.5rem 0; + } + section.news header a{ + width: 100%; + padding: 0.5rem 0; + } + section.news header article h3{font-size: 1.1em;} + section.news header article time{font-size: 0.8em;} + section.news header figure{ + min-width: 100px; + max-width: 100px; + height: 85px; + } + + section.news main{ + order: 2; + height: auto; + display: flex; + justify-content: space-between; + flex-flow: row wrap; + } + section.news main a:nth-child(1){ + margin-bottom: 15px; + } + section.news main a:nth-child(1) article{ + margin: 0 0 15px; + min-height: 15rem; + } + section.news main a:nth-child(1) article aside{ + padding: 15px 15px 10px; + background: #9BC1C1; + } + section.news main a:nth-child(1) article figure{background: url(../img/news-1.jpeg) no-repeat center/cover;} + + section.news main a:nth-child(1) article aside > div{display: none;} + section.news main a:nth-child(1) article h3{font-size: 1.1em;} + section.news main a:nth-child(1) article time{font-size: 0.85em;} + section.news main a:nth-child(n+2) h3{font-size: 1.1em;} + section.news main a:nth-child(n+2) time{font-size: 0.85em;} + + section.news main a:nth-child(n+2){width: 48%;} + section.news main a:nth-child(n+2) article{height: auto;} + section.news main a:nth-child(n+2) article figure{height: 80px;} +} + +@media only screen +and (orientation:landscape){ + + section.news main a:nth-child(1) article h3{font-size: 1.6em;} + section.news main a:nth-child(1) article time{font-size: 1.1em;} + section.news main a:nth-child(n+2) h3{font-size: 1.2em;} + section.news main a:nth-child(n+2) time{font-size: 1em;} +} \ No newline at end of file diff --git a/img/Logo.png b/img/Logo.png new file mode 100644 index 0000000..2cdfc80 Binary files /dev/null and b/img/Logo.png differ diff --git a/img/about/woman-model.jpg b/img/about/woman-model.jpg new file mode 100644 index 0000000..441256b Binary files /dev/null and b/img/about/woman-model.jpg differ diff --git a/img/arrow.svg b/img/arrow.svg new file mode 100644 index 0000000..dd63ca0 --- /dev/null +++ b/img/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/gallery-woman-model.jpg b/img/gallery-woman-model.jpg new file mode 100644 index 0000000..ff08a38 Binary files /dev/null and b/img/gallery-woman-model.jpg differ diff --git a/img/house-icon.svg b/img/house-icon.svg new file mode 100644 index 0000000..e54b7d8 --- /dev/null +++ b/img/house-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/index.php b/img/index.php new file mode 100644 index 0000000..a29e422 --- /dev/null +++ b/img/index.php @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/letter-icon.svg b/img/letter-icon.svg new file mode 100644 index 0000000..4b03e8e --- /dev/null +++ b/img/letter-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/news-1.jpeg b/img/news-1.jpeg new file mode 100644 index 0000000..db2d9e8 Binary files /dev/null and b/img/news-1.jpeg differ diff --git a/img/news-2.jpeg b/img/news-2.jpeg new file mode 100644 index 0000000..c1a828c Binary files /dev/null and b/img/news-2.jpeg differ diff --git a/img/news-3.jpeg b/img/news-3.jpeg new file mode 100644 index 0000000..3418b28 Binary files /dev/null and b/img/news-3.jpeg differ diff --git a/img/news-4.jpeg b/img/news-4.jpeg new file mode 100644 index 0000000..4df684d Binary files /dev/null and b/img/news-4.jpeg differ diff --git a/img/news-article-1.jpg b/img/news-article-1.jpg new file mode 100644 index 0000000..3a3edc4 Binary files /dev/null and b/img/news-article-1.jpg differ diff --git a/img/news-article-2.jpg b/img/news-article-2.jpg new file mode 100644 index 0000000..4b6cb25 Binary files /dev/null and b/img/news-article-2.jpg differ diff --git a/img/news-article-3.jpg b/img/news-article-3.jpg new file mode 100644 index 0000000..f518717 Binary files /dev/null and b/img/news-article-3.jpg differ diff --git a/img/openprofileicon.png b/img/openprofileicon.png new file mode 100644 index 0000000..fae5937 Binary files /dev/null and b/img/openprofileicon.png differ diff --git a/img/phone-icon.svg b/img/phone-icon.svg new file mode 100644 index 0000000..fdb8cfc --- /dev/null +++ b/img/phone-icon.svg @@ -0,0 +1 @@ +Icon-7 \ No newline at end of file diff --git a/img/playicon.png b/img/playicon.png new file mode 100644 index 0000000..b55e236 Binary files /dev/null and b/img/playicon.png differ diff --git a/img/profile-gallery-man-model-1.jpg b/img/profile-gallery-man-model-1.jpg new file mode 100644 index 0000000..479c322 Binary files /dev/null and b/img/profile-gallery-man-model-1.jpg differ diff --git a/img/profile-gallery-man-model-2.jpg b/img/profile-gallery-man-model-2.jpg new file mode 100644 index 0000000..60d5b68 Binary files /dev/null and b/img/profile-gallery-man-model-2.jpg differ diff --git a/img/profile-gallery-man-model-3.jpg b/img/profile-gallery-man-model-3.jpg new file mode 100644 index 0000000..758f78d Binary files /dev/null and b/img/profile-gallery-man-model-3.jpg differ diff --git a/img/profile-gallery-man-model-4.jpg b/img/profile-gallery-man-model-4.jpg new file mode 100644 index 0000000..9b53ec4 Binary files /dev/null and b/img/profile-gallery-man-model-4.jpg differ diff --git a/img/profile-gallery-man-model-5.jpg b/img/profile-gallery-man-model-5.jpg new file mode 100644 index 0000000..67f7a56 Binary files /dev/null and b/img/profile-gallery-man-model-5.jpg differ diff --git a/img/profile-gallery-woman-model-1.jpg b/img/profile-gallery-woman-model-1.jpg new file mode 100644 index 0000000..ce1baa3 Binary files /dev/null and b/img/profile-gallery-woman-model-1.jpg differ diff --git a/img/profile-gallery-woman-model-2.jpg b/img/profile-gallery-woman-model-2.jpg new file mode 100644 index 0000000..80a4e26 Binary files /dev/null and b/img/profile-gallery-woman-model-2.jpg differ diff --git a/img/profile-gallery-woman-model-3.jpg b/img/profile-gallery-woman-model-3.jpg new file mode 100644 index 0000000..a554eae Binary files /dev/null and b/img/profile-gallery-woman-model-3.jpg differ diff --git a/img/profile-gallery-woman-model-4.jpg b/img/profile-gallery-woman-model-4.jpg new file mode 100644 index 0000000..53957b3 Binary files /dev/null and b/img/profile-gallery-woman-model-4.jpg differ diff --git a/img/profile-gallery-woman-model-5.jpg b/img/profile-gallery-woman-model-5.jpg new file mode 100644 index 0000000..0d95ef4 Binary files /dev/null and b/img/profile-gallery-woman-model-5.jpg differ diff --git a/index.php b/index.php new file mode 100644 index 0000000..4ca3149 --- /dev/null +++ b/index.php @@ -0,0 +1,329 @@ + + + + Mi Talent + + + + + + + + + + + + + +
+ +
+
+
+ +
+
+ +
+ +
+ +
+ +
+
+

Georgina
Alson

+

YOUNG MODEL 2020

+
+ + +
+ +
+ +
+
+ + + + +
+ +
+
+
+ +

Keith Ruiz

+

ACTOR

+
+
+ +
+
+ +

Victoria Porter

+

COMEDIAN

+
+
+ +
+
+ +

Sofia Walker

+

MUSICIAN

+
+
+ +
+
+ +

Riley James

+

MUSICIAN

+
+
+ +
+
+ +

Nathan Walsh

+

ACTOR

+
+
+ +
+
+ +

Caitlin Read

+

ACTOR

+
+
+ +
+
+ +

Christopher King

+

MUSICIAN

+
+
+ +
+
+ +

Thomas Booth

+

MODEL

+
+
+ +
+
+ +

Paige Hart

+

COMEDIAN

+
+
+ +
+
+ +

Shayla Frost

+

MODEL

+
+
+
+ +
+ EXPLORE MORE +
+
+ +
+

Latest News

+
+ + +
+
+
+

5 Reasons To Keep Your Beauty Salon Reservation

+ +
+
+
+ + +
+
+
+

Benjamin Franklin Method Of Habit Formation

+ +
+
+
+ + +
+
+
+

29 Motivational Quotes For Business And Other Work Environments

+ +
+
+
+ +
+ +
+ + +
+ +
+ +
+
+ + + +
+
+
+ + + + +
+
+
+

Motivation And Your Personal Vision : An Unbeatable Force

+ +
+
+ + + +
+
+
+

Dream Interpretation Common Symbols And Their Meanings

+ +
+
+ + + +
+
+
+
+
+
+ + +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/js/apps.js b/js/apps.js new file mode 100644 index 0000000..80cdd54 --- /dev/null +++ b/js/apps.js @@ -0,0 +1,27 @@ +$(document).ready(function(){ + + // SMOOTH SCROOL + $('a[href^="#"]').on('click', function(evt){ + evt.preventDefault(); + var target = $(this).attr('href'); + $('html, body').stop().animate({scrollTop: $(target).offset().top}, 1000 ); + }) + + // BURGER MENU + $('#toggle-menu').on('click', function(){ + if($('#menu').hasClass('burgerOff')){ + $('#menu').addClass('burgerOn'); + $('#menu').removeClass('burgerOff'); + } else { + $('#menu').addClass('burgerOff'); + $('#menu').removeClass('burgerOn'); + } + }) + $(document).click(function(e){ + var subjectElement = $('#navbar'); + if(e.target.id != subjectElement.attr('id') && !subjectElement.has(e.target).length){ + $('#menu').addClass('burgerOff'); + $('#menu').removeClass('burgerOn'); + } + }) +}); \ No newline at end of file diff --git a/js/index.php b/js/index.php new file mode 100644 index 0000000..a29e422 --- /dev/null +++ b/js/index.php @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/news.php b/news.php new file mode 100644 index 0000000..29c07ed --- /dev/null +++ b/news.php @@ -0,0 +1,215 @@ + + + + Mi Talent + + + + + + + + + + + + + +
+
+
+
+

FEATURED NEWS

+

A Starter Guide To Self
Improvement

+
+
+
+ + +
+
+ + +
+
+
+
+
+
+ +
+ + + +
+
+
+
+
+
+ + + + +
+
+

Dream Interpretation Common Symbols And Their Meanings

 + +
+ +
+
+

Burning Desire Golden Key Or Red Herring

+ +
+ + +
+
+

5 Reasons To Keep Your Beauty Salon Reservation

+ +
+ + +
+
+

Motivation Is The First Step To Success

+ +
+ + +
+
+

How To Set Intentions That Energize You

+ +
+ + +
+ +
+

How Great Is The Strength Of Your Belief

+ + + +
+

29 Motivational Quotes For Business And Other Work Environments

+ + +
+
+ +

Motivation Is The First Step To Success

+ + +
+
+

Motivation Is The First Step To Success

+
+ +
+

Dream Interpretation Common Symbols And Their Meanings

+ + +
+ +
+
+ +
+
+

Our Clients

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

+ EXPLORE MORE +
+
+
+
+
+
+ +

Keith Ruiz

+

ACTOR

+
+
+
+
+ +

Victoria Porter

+

COMEDIAN

+
+
+ +
+
+ +

Sofia Walker

+

MUSICIAN

+
+
+
+
+ +

Riley James

+

MUSICIAN

+
+
+
+ + + + + + +
+
+
+
+ + + + + + + \ No newline at end of file