cab-basic-html-css-template/contact.html at master · afmdev/cab-basic-html-css-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" href="./img/favicon.ico" />
	<meta name="author" content="Alejandro F. Marrero">
	<meta name="keywords" content="HTML, CSS, JavaScript, Rest API">
	<meta name="description"
		content="Full-Stack Development Course :: Code Academy Berlin 2022 :: Template made with HTML/CSS">
    <title>CONTACT : JUST A BLUE SKY</title>
    <link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
    href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
    rel="stylesheet">
</head>

<body>
    <header>
    <img src="https://iili.io/GjAIhN.png" alt="Buesky Logo">
        <nav>
            <ul>
                <li><a href="./index.html">HOME</a></li>
                <li><a href="./register.html">REGISTER</a></li>
                <li><a href="./content.html">CONTENT</a></li>
                <li><a href="./contact.html">CONTACT</a></li>
            </ul>
        </nav>
        <div class="btn white-bg float-r"><a class="blue" href="./register.html">GET FREE QUOTE!</a></div>
    </header>

    <section class="margin-top">
        <h1 class="blue bold centered padding-80 no-bottom">CONTACT</h1>
        <article>
            <div class="main-text">
                <p>The blueness of the atmosphere indicates transparency
                    and the amount of water vapour.</p>
            </div>
        <div class="btn centered blue-bg"><a class="white margin-50" href="#popup">GET IN TOUCH</a></div>

        <div id="popup" class="overlay">
            <div class="popup">
                <h2 class="blue size-50 centered bold no-ls">My Email</h2>
                <a class="close blue" href="#">&times;</a>
                <p class="content size-25 no-bottom">
                    <a href="mailto:info@codeacademyberlin.com">info@myemail.com</a>
                </p>
            </div>
        </div>

        <div class="map centered margin-50"><iframe width="600" height="600" src="https://maps.google.com/maps?width=600&amp;height=600&amp;hl=en&amp;q=Islas%20Canarias+(JUST%20A%20BLUE%20SKY)&amp;t=&amp;z=8&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe></div>

            <div class="other-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna
                    aliqua.</p>

                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </article>
    </section>

    <footer>
        <section class="bottom-icons">
            <p class="blue bold centered size-50">BLUESKY</p>
            <p class="icons">
                <img class="rotate" src="./img/fb.png" alt="Facebook">
                <img class="rotate" src="./img/tw.png" alt="Twitter">
                <img class="rotate" src="./img/ig.png" alt="Instagram">
            </p>

        </section>
	<div class="bottom-bar">
		<p><a href="https://www.alejandrofm.com" rel="noopener" title="Webdesign Berlin"><img
					src="https://www.alejandrofm.com/wp-content/uploads/2021/11/alejandro-fm-diseno-web-berlin-wordpress-front-end-logo-white.svg"
					width="42" height="19" alt="Webdesign Berlin" /></a></p>
		<p><a href="#">Legal</a> - <a href="#">Terms</a> - <a href="#">Contact</a></p>
	</div>
    </footer>

</body>

</html>