Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* === GLOBAL SETTINGS === */
- * {
- margin: 0;
- padding: 0;
- }
- /* ===============
- LAYOUT
- =============== */
- html,
- body {
- height: 100%;
- }
- body {
- width: 100%;
- font-family: "Roboto";
- }
- .container {
- width: 80%;
- min-height: 100%;
- margin: 0 auto;
- }
- .wrapper-content {
- overflow: auto;
- padding-bottom: 165px;
- }
- /* ===header=== */
- header {
- height: 200px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .name {
- font-size: 18px;
- font-weight: bold;
- }
- .contactme {
- width: 34px;
- height: 34px;
- }
- /* ===section=== */
- .intro {
- width: 70%;
- }
- .intro h1 {
- font-size: 20px;
- font-weight: 900;
- padding-bottom: 20px;
- }
- .intro p {
- font-size: 14px;
- font-weight: 900;
- }
- /* ===main=== */
- .cards {
- display: flex;
- flex-direction: column;
- margin-top: 20px;
- padding-bottom: 20px;
- }
- .work h1 {
- font-size: 16px;
- font-weight: 900;
- padding-top: 40px;
- }
- .project1,
- .project2,
- .project3 {
- width: 100%;
- height: 150px;
- border-radius: 10px;
- background-color: black;
- }
- .project2 {
- margin: 20px 0px;
- }
- .wrapper-btn {
- display: flex;
- justify-content: center;
- }
- .morebtn {
- font-weight: 900;
- width: 137px;
- height: 40px;
- border: 3px solid black;
- border-radius: 100px;
- background-color: white;
- }
- /* ===footer=== */
- footer {
- width: 100%;
- height: 165px;
- background-color: black;
- position: relative;
- margin-top: -100px;
- clear: both;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
- .socialicons {
- display: flex;
- }
- .socialicons img {
- width: 24px;
- height: 24px;
- margin: 10px 30px;
- }
- footer p {
- color: white;
- padding-top: 30px;
- font-size: 10px;
- font-weight: medium;
- }
- @media only screen and (max-width: 800px) {
- .intro {
- width: 100%;
- }
- }
- @media only screen and (min-width: 800px) {
- .cards {
- flex-direction: row;
- }
- .project1,
- .project2,
- .project3 {
- width: 400px;
- height: 200px;
- }
- .project2 {
- margin: 0px 20px;
- }
- .more-cards {
- display: flex;
- flex-direction: row;
- margin-top: 20px;
- padding-bottom: 20px;
- }
- .project4,
- .project5,
- .project6 {
- width: 100%;
- height: 180px;
- border-radius: 10px;
- background-color: black;
- }
- .project5 {
- margin: 0px 20px;
- }
- }
- @media only screen and (min-width: 1000px) {
- .container {
- width: 1000px;
- }
- header {
- padding: 0px 30px;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement