CSS Layout (4) project_clone coding 필기

과제필기 일부

https://replit.com/@YoungjuJang/8NotableInvolvedBackslash#style.css

footer div:first-child span {
  display:block;
  transform:rotateZ(90deg);
}

footer div:last-child span {
  display:block;
  transform:rotateZ(-90deg) translateX(110px);
}

To Clone:

•  https://besthorrorscenes.com/
•  https://paint-box.com/
•  http://10x19.co/
•  http://www.z-o-o.fr/
•  https://schwartzmedia.com.au/
•  https://tolv.dk/
•  https://rodicdavidson.co.uk/
•  https://beige.de/
•  http://donicaida.com/
•  https://canalstreet.market/
•  https://wonhundred.com/

0. Curry 과제

{  writing-mode: vertical-rl;
  text-orientation: upright;}
  >>>글자 일렬로
writing-mode : writing-mode 속성을 사용해서 텍스트 행을 가로 또는 세로로 설정하세요.
text-orientation 속성을 사용해서 텍스트 문자의 방향을 설정하세요.
text-orientation 속성은 세로 모드의 텍스트인 경우에만 영향을 줍니다. writing-mode속성이 horizontal-tb이 아닌 경우에만 동작합니다.

1. best horror scenes comment

header{
	position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    padding: 190px;
   ...
}

main {
	margin-left: 33%;
    .movie {
    	background: linear-gradient{
        	to bottom, 
            rgba(0, 0, 0, 0.1) 2%,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0)
        }
        	$red;
      	height: 100vh;
        display: flex;
        justify-content: center;
        align-itmes: center;
        color: white;
    }
}

 

2. paint box coding

===========styles.scss==========
@import url("font url");

body {
	font-family: "Caladea";
    padding-top: 70px;
    & > *:not(.footer) { 		<<<<<<<<<<<<<
    	padding: 0px 140px;
    }
}

.hero {
	height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    	url("  ");
    background-size: cover;
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    color: white;
}

a {
	...
    @extend %minTitle;
    transition: color 0.3s linear, background 0.3s linear;
    &:hover {
    	background-color: black;
    }
    
.blog {
	width: 100%;
    display: grid;
    grid-template-columns: 1fr;  <<<<<<<<<<<<<
    grid-template-rows: repeat(3, 60vh);
    .blog__post {
    	background-color: $bg;
    	display: grid;
        grid-template-columns: repeat(2, 1fr);  <<<<<<<<<<<<<
        &:nth-child(even) {
        	img {
            	order: 1;  <<<<<<<<<<<<<
            }
        }
        img {
			width: 100%;
            height: 100%;
        }
        .post__content {
        	display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .post__date {
            	@extend %minTitle;
                margin-bottom: 70px;
            }
            h4 {
            	font-size: 32px;
                ...
            }
        }
    }
}

.footer {
	margin-top: 100px;
    background-color: $bg;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 65px 0px;
    .footer__column {
    	display: flex;
        flex-direction: column;
        align-item: center;        
        @extend %minTitle;
        .column__title{
            margin-bottom: 50px;
            opacity: 0.5;
        }
        ul {
        	text-align: center;
            li {
            	margin-bottom : 15px;
            }
        }
        &:nth-child(2){   					<<<<<<<<<<<<<
        	border-right: 1px solid black;
            border-left: 1px solid black;
        }
    }

}
=======_titles.scss===========
%minTitle {
	font-family: "Montserrat";
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing:2px;
}